Update UI to (poorly) use new API

client/src/components/screens/GamePanel/GuessPane/GuessPane.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { dispatch } from '../../../../domain/gameStore';
+import { reverseGeocode } from '../../../../domain/geocoding';
 import ClickMarkerMap from './ClickMarkerMap';
 import styles from './GuessPane.module.css';
 import RoundTimer from './RoundTimer';
@@ -31,7 +32,8 @@ const GuessPane = () => {
   const handleSubmitGuess = async () => {
     setSubmitted(true);
     if (!submitted) {
-      await dispatch.submitGuess(selectedPoint);
+      const country = await reverseGeocode(selectedPoint);
+      await dispatch.submitGuess({ country, ...selectedPoint });
     }
   };
 

client/src/components/screens/Lobby/Lobby.jsx

@@ -1,4 +1,5 @@
 import ms from 'pretty-ms';
+import iso from 'iso-3166-1';
 import { useState } from 'react';
 import { useGameId } from '../../../domain/gameStore';
 import { useGameConfig, usePlayers } from '../../../hooks/useGameInfo';
@@ -10,7 +11,7 @@ import StartGame from './StartGame';
 import { NORMAL, TIME_BANK, FROZEN } from '../../../domain/ruleSets';
 
 const GameInfo = () => {
-  const { rounds, timer, onlyAmerica, ruleSet } = useGameConfig();
+  const { rounds, timer, countryLock, ruleSet } = useGameConfig();
 
   if (!rounds || !timer) {
     return <Loading />
@@ -35,8 +36,8 @@ const GameInfo = () => {
       <span className={styles.label}>
         Game will run for {rounds} round{rounds !== 1 && 's'}{explanation}
       </span>
-      {onlyAmerica && (
-        <span className={styles.label}>This game will only use locations within the United States of America</span>
+      {countryLock && (
+        <span className={styles.label}>This game will only use locations within: { iso.whereAlpha2(countryLock).country }</span>
       )}
     </>
   );

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

@@ -1,8 +1,8 @@
 import ms from 'pretty-ms';
 import { useCallback, useState } from 'react';
 import { createGame } from '../../../domain/apiMethods';
-import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethods';
-import { FROZEN, NORMAL, TIME_BANK, RACE } from '../../../domain/ruleSets';
+import { RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethods';
+import { FROZEN, NORMAL, TIME_BANK, RACE, COUNTRY_RACE } from '../../../domain/ruleSets';
 import Loading from '../Loading';
 import { Dropdown, DropdownGroup, Item } from './Dropdown';
 import styles from './GameCreationForm.module.css';
@@ -36,6 +36,7 @@ const PRESETS = {
 
 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 [ onlyAmerica, setOnlyAmerica ] = useState(DEFAULTS.onlyAmerica);
@@ -58,7 +59,14 @@ const GameCreationForm = ({ afterCreate }) => {
 
   const onCreateGame = async () => {
     setLoading(true);
-    const gameId = await createGame(timer, rounds, onlyAmerica, genMethod, ruleSet);
+    let gameId;
+    try {
+      gameId = await createGame(timer, rounds, onlyAmerica ? "us" : null, genMethod, ruleSet);
+    } catch (e) {
+      setCreationError(true);
+      setLoading(false);
+      return;
+    }
     if (afterCreate) {
       afterCreate(gameId);
     }
@@ -66,6 +74,7 @@ const GameCreationForm = ({ afterCreate }) => {
 
   return (
     <div className={styles.form}>
+      { creationError && <div className={styles.error}>Error! TODO</div> }
       <div className={styles.dropdowns}>
         <DropdownGroup>
           <Dropdown selected={timer} onSelect={setTimer} open='timer'>
@@ -85,15 +94,15 @@ const GameCreationForm = ({ afterCreate }) => {
             <Item value={true} display='🇺🇸'>Just America</Item>
           </Dropdown>
           <Dropdown selected={genMethod} onSelect={setGenMethod} open='gen'>
-            <Item value={RANDOM_STREET_VIEW} display='RSV'>Random Street View</Item>
+            <Item value={RANDOM_STREET_VIEW} display='🎲'>Random Street View</Item>
             <Item value={URBAN} display='🏙️'>Urban Centers</Item>
-            <Item value={MAP_CRUNCH} display='MC' default>Map Crunch</Item>
           </Dropdown>
           <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>
           <Dropdown onSelect={setPreset} open='presets' forceDisplay='⭐'>
             <Item value={DEFAULTS} display=''>Default</Item>

client/src/domain/apiMethods.js

@@ -26,13 +26,25 @@ export const checkScore = async (point1, point2) => {
     return await res.json();
 }
 
-export const createGame = async (timer, rounds, onlyAmerica, generationMethod, ruleSet) => {
+export const getGenerators = async () => {
+    try {
+        const res = await fetch(`${API_BASE}/generators`);
+        if (!res.ok) {
+            throw Error(res.statusText);
+        }
+        return await res.json();
+    } catch (err) {
+        return {status: err.message, version: null}
+    }
+}
+
+export const createGame = async (timer, rounds, countryLock, generationMethod, ruleSet) => {
     const res = await fetch(`${API_BASE}/game`, {
         method: "PUT",
         headers: {
             "Content-Type": "application/json",
         },
-        body: JSON.stringify({ timer, rounds, onlyAmerica, generationMethod, ruleSet }),
+        body: JSON.stringify({ timer, rounds, countryLock, generationMethod, ruleSet }),
     });
     if (!res.ok) {
         throw Error(res.statusText);

client/src/domain/genMethods.js

@@ -1,3 +1,2 @@
-export const MAP_CRUNCH = "MAPCRUNCH"
 export const RANDOM_STREET_VIEW = "RANDOMSTREETVIEW"
 export const URBAN = "URBAN"

client/src/domain/ruleSets.js

@@ -1,4 +1,5 @@
 export const NORMAL = "NORMAL";
 export const TIME_BANK = "TIMEBANK";
 export const FROZEN = "FROZEN";
-export const RACE = "RACE";
+export const RACE = "RACE";
+export const COUNTRY_RACE = "COUNTRYRACE";