123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- import React from "react";
- import { useTranslation } from "react-i18next";
- import { nanoid } from "nanoid";
- import { Field } from "react-final-form";
- import Hint from "../../components/ui/formUtils/Hint";
- import Label from "../../components/ui/formUtils/Label";
- import SliderRange from "../../components/ui/SliderRange";
- import { ImageField } from "../../components/mediaLibrary";
- const BoardConfigForm = ({ boardConfig, setBoardConfig }) => {
- const { t } = useTranslation();
- const [defaultPlayerCount] = React.useState([]);
- const addTranslation = React.useCallback(() => {
- setBoardConfig((prev) => ({
- ...prev,
- translations: [...(prev.translations || []), { id: nanoid() }],
- }));
- }, [setBoardConfig]);
- const removeTranslation = (idToRemove) => {
- setBoardConfig((prev) => ({
- ...prev,
- translations: prev.translations.filter(({ id }) => id !== idToRemove),
- }));
- };
- return (
- <>
- <Label>
- {t("Publish")}
- <Field
- name="published"
- component="input"
- type="checkbox"
- initialValue={boardConfig.published}
- />
- <Hint>{t("Check it to make your board publicly visible")}</Hint>
- </Label>
- <Label>
- {t("Number of players")}
- <Field
- name="playerCount"
- initialValue={boardConfig.playerCount || defaultPlayerCount}
- >
- {({ input: { onChange, value } }) => {
- return (
- <SliderRange
- defaultValue={[2, 4]}
- value={value}
- min={1}
- max={9}
- step={1}
- onChange={onChange}
- />
- );
- }}
- </Field>
- </Label>
- <Label>
- {t("Duration (mins)")}
- <Field
- name="duration"
- initialValue={
- Array.isArray(boardConfig.duration)
- ? boardConfig.duration
- : defaultPlayerCount
- }
- >
- {({ input: { onChange, value } }) => {
- return (
- <SliderRange
- defaultValue={[15, 90]}
- value={value}
- min={15}
- max={90}
- step={15}
- onChange={onChange}
- />
- );
- }}
- </Field>
- </Label>
- <Label>
- {t("Minimal age (years)")}
- <Field
- name="minAge"
- component="input"
- initialValue={boardConfig.minAge}
- style={{ width: "5em", textAlign: "right" }}
- />
- </Label>
- <Label>
- {t("Board size")}
- <Field
- name="size"
- component="input"
- initialValue={boardConfig.size}
- style={{ width: "5em", textAlign: "right" }}
- />
- </Label>
- <Label>
- {t("Magnetic Grid size")}
- <Field
- name="gridSize"
- component="input"
- initialValue={boardConfig.gridSize || 1}
- style={{ width: "5em", textAlign: "right" }}
- />
- </Label>
- <Label>
- {t("Image")}
- <Field name="imageUrl" initialValue={boardConfig.imageUrl}>
- {({ input: { value, onChange } }) => {
- return <ImageField value={value} onChange={onChange} />;
- }}
- </Field>
- </Label>
- <Label>
- {t("Material language")}
- <Field
- name="materialLanguage"
- component="select"
- initialValue={boardConfig.materialLanguage}
- style={{ width: "20em" }}
- >
- <option />
- <option value="Multi-lang">🌍 {t("Multi-lang")}</option>
- <option value="en">🇬🇧 {t("English")}</option>
- <option value="fr">🇫🇷 {t("French")}</option>
- </Field>
- </Label>
- <fieldset style={{ marginBottom: "2em", paddingBottom: "1em" }}>
- <legend>{t("Informations")}</legend>
- <Label>
- {t("Default language")}
- <Field
- name="defaultLanguage"
- component="select"
- initialValue={boardConfig.defaultLanguage}
- style={{ width: "15em" }}
- >
- <option />
- <option value="en">🇬🇧 {t("English")}</option>
- <option value="fr">🇫🇷 {t("French")}</option>
- </Field>
- </Label>
- <Label>
- {t("Game name")}
- <Field
- name="defaultName"
- component="input"
- initialValue={boardConfig.defaultName || boardConfig.name}
- style={{ width: "15em" }}
- />
- </Label>
- <Label>
- {t("Baseline")}
- <Field
- name="defaultBaseline"
- component="input"
- initialValue={boardConfig.defaultBaseline}
- style={{ width: "100%" }}
- />
- </Label>
- <Label>
- {t("Description")}
- <Field
- name="defaultDescription"
- component="textarea"
- initialValue={boardConfig.defaultDescription || boardConfig.info}
- style={{ minHeight: "10em" }}
- />
- </Label>
- </fieldset>
- <div>
- {(boardConfig.translations || []).map(({ id }, index) => {
- return (
- <fieldset
- style={{ marginBottom: "2em", paddingBottom: "1em" }}
- key={id}
- >
- <legend>
- {t("Translation")} {index}
- </legend>
- <button
- className="button clear icon-only trash"
- onClick={() => removeTranslation(id)}
- >
- <img
- src="https://icongr.am/feather/trash.svg?size=25&color=ffffff"
- alt={t("Remove")}
- />
- </button>
- <Label>
- {t("Language")}
- <Field
- name={`translations[${index}].language`}
- component="select"
- initialValue={boardConfig.translations[index].language}
- style={{ width: "15em" }}
- >
- <option />
- <option value="en">🇬🇧 {t("English")}</option>
- <option value="fr">🇫🇷 {t("French")}</option>
- </Field>
- </Label>
- <Label>
- {t("Game name")}
- <Field
- name={`translations[${index}].name`}
- component="input"
- initialValue={boardConfig.translations[index].name}
- style={{ width: "15em" }}
- />
- </Label>
- <Label>
- {t("Baseline")}
- <Field
- name={`translations[${index}].baseline`}
- component="input"
- initialValue={boardConfig.translations[index].baseline}
- style={{ width: "100%" }}
- />
- </Label>
- <Label>
- {t("Description")}
- <Field
- name={`translations[${index}].description`}
- component="textarea"
- initialValue={boardConfig.translations[index].description}
- style={{ minHeight: "10em" }}
- />
- </Label>
- </fieldset>
- );
- })}
- <button onClick={addTranslation}>{t("Add translation")}</button>
- </div>
- </>
- );
- };
- export default BoardConfigForm;
|