terrassumptions/client/src/components/util/GameCreationForm/GameCreationForm.jsx

import ms from "pretty-ms";
import { useCallback, useState } from "react";
import { createGame } from "../../../domain/apiMethods";
import { RANDOM_STREET_VIEW, URBAN } from "../../../domain/genMethods";
import {
  FROZEN,
  NORMAL,
  TIME_BANK,
  RACE,
  COUNTRY_RACE,
} from "../../../domain/ruleSets";
import useCountryLookup from "../../../hooks/useCountryLookup";
import Loading from "../Loading";
import { Dropdown, DropdownGroup, Item, CountryDropdown } from "./Dropdown";
import ErrorModal from "./ErrorModal";
import styles from "./GameCreationForm.module.css";

const DEFAULTS = {
  timer: 300,
  rounds: 5,
  countryLock: null,
  genMethod: RANDOM_STREET_VIEW,
  ruleSet: NORMAL,
};

const PRESETS = {
  URBAN_AMERICA: {
    ...DEFAULTS,
    genMethod: URBAN,
    countryLock: "us",
  },
  URBAN_GLOBAL: {
    ...DEFAULTS,
    genMethod: URBAN,
  },
  FAST_FROZEN: {
    ...DEFAULTS,
    timer: 30,
    rounds: 3,
    genMethod: RANDOM_STREET_VIEW,
    ruleSet: FROZEN,
  },
};

const GameCreationForm = ({ afterCreate }) => {
  const [loading, setLoading] = useState(false);
  const [creationError, setCreationError] = useState(false);
  const [timer, setTimer] = useState(DEFAULTS.timer);
  const [rounds, setRounds] = useState(DEFAULTS.rounds);
  const [countryLock, setCountryLock] = useState(DEFAULTS.countryLock);
  const [genMethod, setGenMethod] = useState(DEFAULTS.genMethod);
  const [ruleSet, setRuleSet] = useState(DEFAULTS.ruleSet);

  const countryLookup = useCountryLookup(genMethod);

  const setPreset = useCallback(
    ({
      timer: newTimer,
      rounds: newRounds,
      countryLock: newCountryLock,
      genMethod: newGenMethod,
      ruleSet: newRuleSet,
    }) => {
      setTimer(newTimer);
      setRounds(newRounds);
      setCountryLock(newCountryLock);
      setGenMethod(newGenMethod);
      setRuleSet(newRuleSet);
    },
    []
  );

  if (loading || countryLookup === null) {
    return <Loading />;
  }

  const onCreateGame = async () => {
    setLoading(true);
    let gameId;
    try {
      gameId = await createGame(timer, rounds, countryLock, genMethod, ruleSet);
    } catch (e) {
      setCreationError(true);
      setLoading(false);
      return;
    }
    if (afterCreate) {
      afterCreate(gameId);
    }
  };

  return (
    <div className={styles.form}>
      <ErrorModal
        open={creationError}
        onClose={() => setCreationError(false)}
      />
      <button className={styles.start} onClick={onCreateGame} type="button">
        New Game
      </button>
      <div className={styles.dropdowns}>
        <DropdownGroup>
          <Dropdown selected={DEFAULTS} onSelect={setPreset} open="presets">
            <Item value={DEFAULTS} display="⭐">
              Default
            </Item>
            <Item value={PRESETS.URBAN_AMERICA} display="⭐">
              Urban America
            </Item>
            <Item value={PRESETS.URBAN_GLOBAL} display="⭐">
              Urban Global
            </Item>
            <Item value={PRESETS.FAST_FROZEN} display="⭐">
              Fast Frozen
            </Item>
          </Dropdown>
          <Dropdown selected={timer} onSelect={setTimer} open="timer">
            <Item value={30} display={ms(30 * 1000)}>
              30 Seconds
            </Item>
            <Item value={120} display={ms(2 * 60 * 1000)}>
              2 Minutes
            </Item>
            <Item value={300} display={ms(5 * 60 * 1000)}>
              5 Minutes
            </Item>
            <Item value={3600} display={ms(60 * 60 * 1000)}>
              1 Hour
            </Item>
          </Dropdown>
          <Dropdown selected={rounds} onSelect={setRounds} open="rounds">
            <Item value={1}>1 Round</Item>
            <Item value={3}>3 Rounds</Item>
            <Item value={5}>5 Rounds</Item>
            <Item value={10}>10 Rounds</Item>
          </Dropdown>
          <Dropdown selected={genMethod} onSelect={setGenMethod} open="gen">
            <Item value={RANDOM_STREET_VIEW} display="🎲">
              Random Street View
            </Item>
            <Item value={URBAN} display="🏙️">
              Urban Centers
            </Item>
          </Dropdown>
          <CountryDropdown
            countryLookup={countryLookup}
            selected={countryLock}
            onSelect={setCountryLock}
            open="country"
          />
          <Dropdown selected={ruleSet} onSelect={setRuleSet} open="rule">
            <Item value={NORMAL} display="⏰">
              Normal
            </Item>
            <Item value={TIME_BANK} display="🏦">
              Time Bank
            </Item>
            <Item value={FROZEN} display="❄️">
              Frozen
            </Item>
            <Item value={RACE} display="🏃">
              Race
            </Item>
            <Item value={COUNTRY_RACE} display="🗾">
              Country Race
            </Item>
          </Dropdown>
        </DropdownGroup>
      </div>
    </div>
  );
};

export default GameCreationForm;