Implement reuse last settings button

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

@@ -21,7 +21,7 @@ const DEFAULTS = {
   timer: 300,
   rounds: 5,
   countryLock: null,
-  genMethod: RANDOM_STREET_VIEW,
+  generationMethod: RANDOM_STREET_VIEW,
   gameMode: NORMAL,
   clockMode: NORMAL,
   scoreMethod: DISTANCE,
@@ -31,18 +31,18 @@ const DEFAULTS = {
 const PRESETS = {
   URBAN_AMERICA: {
     ...DEFAULTS,
-    genMethod: URBAN,
+    generationMethod: URBAN,
     countryLock: "us",
   },
   URBAN_GLOBAL: {
     ...DEFAULTS,
-    genMethod: URBAN,
+    generationMethod: URBAN,
   },
   FAST_FROZEN: {
     ...DEFAULTS,
     timer: 30,
     rounds: 3,
-    genMethod: RANDOM_STREET_VIEW,
+    generationMethod: RANDOM_STREET_VIEW,
     gameMode: FROZEN,
   },
   COUNTRY_RACE: {
@@ -57,19 +57,38 @@ const PRESETS = {
   },
 };
 
-const GameCreationForm = ({ afterCreate }) => {
+export const LastSettingsButton = ({ onClick }) => (
+  <div
+    className={styles.reusebutton}
+    role="button"
+    tabIndex="0"
+    onClick={onClick}
+    onKeyDown={({ key }) => {
+      if (key === "Enter") {
+        onClick();
+      }
+    }}
+    title="Reuse Previous Game Settings"
+  >
+    <span aria-label="recycle" role="img">
+      ♻️
+    </span>
+  </div>
+);
+
+const GameCreationForm = ({ afterCreate, lastSettings = null }) => {
   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 [generationMethod, setGenMethod] = useState(DEFAULTS.generationMethod);
   const [gameMode, setGameMode] = useState(DEFAULTS.gameMode);
   const [clockMode, setClockMode] = useState(DEFAULTS.clockMode);
   const [scoreMethod, setScoreMethod] = useState(DEFAULTS.scoreMethod);
   const [roundPointCap, setRoundPointCap] = useState(DEFAULTS.roundPointCap);
 
-  const countryLookup = useCountryLookup(genMethod);
+  const countryLookup = useCountryLookup(generationMethod);
 
   const [presetOpen, setPresetOpen] = useState(false);
   const setPreset = useCallback(
@@ -77,7 +96,7 @@ const GameCreationForm = ({ afterCreate }) => {
       timer: newTimer,
       rounds: newRounds,
       countryLock: newCountryLock,
-      genMethod: newGenMethod,
+      generationMethod: newGenMethod,
       gameMode: newGameMode,
       clockMode: newClockMode,
       scoreMethod: newScoreMethod,
@@ -107,7 +126,7 @@ const GameCreationForm = ({ afterCreate }) => {
         timer,
         rounds,
         countryLock,
-        genMethod,
+        generationMethod,
         gameMode,
         clockMode,
         scoreMethod,
@@ -159,6 +178,9 @@ const GameCreationForm = ({ afterCreate }) => {
             Frozen Country Race
           </Item>
         </Dropdown>
+        {lastSettings && (
+          <LastSettingsButton onClick={() => setPreset(lastSettings)} />
+        )}
         <button className={styles.start} onClick={onCreateGame} type="button">
           New Game
         </button>
@@ -185,7 +207,11 @@ const GameCreationForm = ({ afterCreate }) => {
             <Item value={5}>5 Rounds</Item>
             <Item value={10}>10 Rounds</Item>
           </Dropdown>
-          <Dropdown selected={genMethod} onSelect={setGenMethod} open="gen">
+          <Dropdown
+            selected={generationMethod}
+            onSelect={setGenMethod}
+            open="gen"
+          >
             <Item value={RANDOM_STREET_VIEW} display="🎲">
               Random Street View
             </Item>

client/src/components/util/GameCreationForm/GameCreationForm.module.css

@@ -30,7 +30,30 @@
   border-radius: 0%;
   height: 24px;
   width: 24px;
-  /* padding: 8px 8px 8px 8px; */
+}
+
+.reusebutton {
+  margin-left: auto;
+  margin-right: 20px;
+  margin-bottom: 6px;
+  position: relative;
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 4px;
+  background-color: #555;
+  border: 4px solid #333;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 300ms;
+  height: 24px;
+  width: 24px;
+}
+
+.reusebutton:hover {
+  background-color: #777;
 }
 
 .start {

client/src/tests/GameCreationForm.test.js

@@ -1,6 +1,7 @@
 import { shallow } from "enzyme";
 import React from "react";
 import GameCreationForm from "../components/util/GameCreationForm";
+import { LastSettingsButton } from "../components/util/GameCreationForm/GameCreationForm";
 import { createGame } from "../domain/apiMethods";
 import { COUNTRY_RACE, FROZEN, NORMAL, URBAN } from "../domain/constants";
 import useCountryLookup from "../hooks/useCountryLookup";
@@ -72,7 +73,7 @@ describe("GameCreationForm", () => {
       timer: 30,
       rounds: 3,
       countryLock: "us",
-      genMethod: URBAN,
+      generationMethod: URBAN,
       gameMode: FROZEN,
       clockMode: NORMAL,
       scoreMethod: COUNTRY_RACE,
@@ -80,4 +81,54 @@ describe("GameCreationForm", () => {
     });
     expect(rendered).toMatchSnapshot();
   });
+
+  it("can have previous game settings passed in to enable reuse button", () => {
+    useCountryLookup.mockReturnValue("country-lookup");
+    const rendered = shallow(
+      <GameCreationForm
+        lastSettings={{
+          timer: 30,
+          rounds: 3,
+          countryLock: "us",
+          generationMethod: URBAN,
+          gameMode: FROZEN,
+          clockMode: NORMAL,
+          scoreMethod: COUNTRY_RACE,
+          roundPointCap: null,
+        }}
+      />
+    );
+    expect(rendered).toMatchSnapshot();
+    rendered.find("LastSettingsButton").first().prop("onClick")();
+    expect(rendered).toMatchSnapshot();
+  });
+
+  describe("LastSettingsButton", () => {
+    it("renders", () => {
+      const onClick = jest.fn();
+      const rendered = shallow(<LastSettingsButton onClick={onClick} />);
+      expect(rendered).toMatchSnapshot();
+    });
+
+    it("responds to click", () => {
+      const onClick = jest.fn();
+      const rendered = shallow(<LastSettingsButton onClick={onClick} />);
+      rendered.simulate("click");
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("responds to keydown Enter", () => {
+      const onClick = jest.fn();
+      const rendered = shallow(<LastSettingsButton onClick={onClick} />);
+      rendered.simulate("keydown", { key: "Enter" });
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("cannot be selected with other keydowns", () => {
+      const onClick = jest.fn();
+      const rendered = shallow(<LastSettingsButton onClick={onClick} />);
+      rendered.simulate("keydown", { key: "Escape" });
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
 });

client/src/tests/__snapshots__/GameCreationForm.test.js.snap

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GameCreationForm LastSettingsButton renders 1`] = `
+<div
+  className="reusebutton"
+  onClick={[MockFunction]}
+  onKeyDown={[Function]}
+  role="button"
+  tabIndex="0"
+  title="Reuse Previous Game Settings"
+>
+  <span
+    aria-label="recycle"
+    role="img"
+  >
+    ♻️
+  </span>
+</div>
+`;
+
 exports[`GameCreationForm can have presets selected 1`] = `
 <div
   className="form"
@@ -21,7 +39,7 @@ exports[`GameCreationForm can have presets selected 1`] = `
           "clockMode": "NORMAL",
           "countryLock": null,
           "gameMode": "NORMAL",
-          "genMethod": "RANDOMSTREETVIEW",
+          "generationMethod": "RANDOMSTREETVIEW",
           "roundPointCap": null,
           "rounds": 5,
           "scoreMethod": "DISTANCE",
@@ -36,7 +54,7 @@ exports[`GameCreationForm can have presets selected 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -53,7 +71,7 @@ exports[`GameCreationForm can have presets selected 1`] = `
             "clockMode": "NORMAL",
             "countryLock": "us",
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -70,7 +88,7 @@ exports[`GameCreationForm can have presets selected 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -87,7 +105,7 @@ exports[`GameCreationForm can have presets selected 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 3,
             "scoreMethod": "DISTANCE",
@@ -104,7 +122,7 @@ exports[`GameCreationForm can have presets selected 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -121,7 +139,7 @@ exports[`GameCreationForm can have presets selected 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -313,6 +331,638 @@ exports[`GameCreationForm can have presets selected 1`] = `
 </div>
 `;
 
+exports[`GameCreationForm can have previous game settings passed in to enable reuse button 1`] = `
+<div
+  className="form"
+>
+  <ErrorModal
+    onClose={[Function]}
+    open={false}
+  />
+  <div
+    className="buttoncontainer"
+  >
+    <Dropdown
+      buttonClass="favbutton"
+      onClick={[Function]}
+      onSelect={[Function]}
+      open={false}
+      selected={
+        Object {
+          "clockMode": "NORMAL",
+          "countryLock": null,
+          "gameMode": "NORMAL",
+          "generationMethod": "RANDOMSTREETVIEW",
+          "roundPointCap": null,
+          "rounds": 5,
+          "scoreMethod": "DISTANCE",
+          "timer": 300,
+        }
+      }
+    >
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "NORMAL",
+            "generationMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "DISTANCE",
+            "timer": 300,
+          }
+        }
+      >
+        Default
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": "us",
+            "gameMode": "NORMAL",
+            "generationMethod": "URBAN",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "DISTANCE",
+            "timer": 300,
+          }
+        }
+      >
+        Urban America
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "NORMAL",
+            "generationMethod": "URBAN",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "DISTANCE",
+            "timer": 300,
+          }
+        }
+      >
+        Urban Global
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "FROZEN",
+            "generationMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
+            "rounds": 3,
+            "scoreMethod": "DISTANCE",
+            "timer": 30,
+          }
+        }
+      >
+        Fast Frozen
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "NORMAL",
+            "generationMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "COUNTRYRACE",
+            "timer": 300,
+          }
+        }
+      >
+        Country Race
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "FROZEN",
+            "generationMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "COUNTRYRACE",
+            "timer": 30,
+          }
+        }
+      >
+        Frozen Country Race
+      </Item>
+    </Dropdown>
+    <LastSettingsButton
+      onClick={[Function]}
+    />
+    <button
+      className="start"
+      onClick={[Function]}
+      type="button"
+    >
+      New Game
+    </button>
+  </div>
+  <div
+    className="dropdowns"
+  >
+    <DropdownGroup>
+      <Dropdown
+        onSelect={[Function]}
+        open="timer"
+        selected={300}
+      >
+        <Item
+          display="30s"
+          value={30}
+        >
+          30 Seconds
+        </Item>
+        <Item
+          display="2m"
+          value={120}
+        >
+          2 Minutes
+        </Item>
+        <Item
+          display="5m"
+          value={300}
+        >
+          5 Minutes
+        </Item>
+        <Item
+          display="1h"
+          value={3600}
+        >
+          1 Hour
+        </Item>
+      </Dropdown>
+      <Dropdown
+        onSelect={[Function]}
+        open="rounds"
+        selected={5}
+      >
+        <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
+        onSelect={[Function]}
+        open="gen"
+        selected="RANDOMSTREETVIEW"
+      >
+        <Item
+          display="🎲"
+          value="RANDOMSTREETVIEW"
+        >
+          Random Street View
+        </Item>
+        <Item
+          display="🏙️"
+          value="URBAN"
+        >
+          Urban Centers
+        </Item>
+      </Dropdown>
+      <CountryDropdown
+        countryLookup="country-lookup"
+        onSelect={[Function]}
+        open="country"
+        selected={null}
+      />
+      <Dropdown
+        onSelect={[Function]}
+        open="gameMode"
+        selected="NORMAL"
+      >
+        <Item
+          display="📍"
+          value="NORMAL"
+        >
+          Normal
+        </Item>
+        <Item
+          display="❄️"
+          value="FROZEN"
+        >
+          Frozen
+        </Item>
+      </Dropdown>
+      <Dropdown
+        onSelect={[Function]}
+        open="clockMode"
+        selected="NORMAL"
+      >
+        <Item
+          display="⏰"
+          value="NORMAL"
+        >
+          Normal
+        </Item>
+        <Item
+          display="🏦"
+          value="TIMEBANK"
+        >
+          Time Bank
+        </Item>
+        <Item
+          display="🏃"
+          value="RACE"
+        >
+          Race
+        </Item>
+      </Dropdown>
+      <Dropdown
+        onSelect={[Function]}
+        open="scoreMethod"
+        selected="DISTANCE"
+      >
+        <Item
+          display="📏"
+          value="DISTANCE"
+        >
+          Distance
+        </Item>
+        <Item
+          display="🗾"
+          value="COUNTRYRACE"
+        >
+          Country Race
+        </Item>
+      </Dropdown>
+      <Dropdown
+        onSelect={[Function]}
+        open="roundPointCap"
+        selected={null}
+      >
+        <Item
+          display="♾️"
+          value={null}
+        >
+          No Limit
+        </Item>
+        <Item
+          display="10k"
+          value={10000}
+        >
+          10k Total Points per Round
+        </Item>
+        <Item
+          display="20k"
+          value={20000}
+        >
+          20k Total Points per Round
+        </Item>
+      </Dropdown>
+    </DropdownGroup>
+  </div>
+</div>
+`;
+
+exports[`GameCreationForm can have previous game settings passed in to enable reuse button 2`] = `
+<div
+  className="form"
+>
+  <ErrorModal
+    onClose={[Function]}
+    open={false}
+  />
+  <div
+    className="buttoncontainer"
+  >
+    <Dropdown
+      buttonClass="favbutton"
+      onClick={[Function]}
+      onSelect={[Function]}
+      open={false}
+      selected={
+        Object {
+          "clockMode": "NORMAL",
+          "countryLock": null,
+          "gameMode": "NORMAL",
+          "generationMethod": "RANDOMSTREETVIEW",
+          "roundPointCap": null,
+          "rounds": 5,
+          "scoreMethod": "DISTANCE",
+          "timer": 300,
+        }
+      }
+    >
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "NORMAL",
+            "generationMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "DISTANCE",
+            "timer": 300,
+          }
+        }
+      >
+        Default
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": "us",
+            "gameMode": "NORMAL",
+            "generationMethod": "URBAN",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "DISTANCE",
+            "timer": 300,
+          }
+        }
+      >
+        Urban America
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "NORMAL",
+            "generationMethod": "URBAN",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "DISTANCE",
+            "timer": 300,
+          }
+        }
+      >
+        Urban Global
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "FROZEN",
+            "generationMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
+            "rounds": 3,
+            "scoreMethod": "DISTANCE",
+            "timer": 30,
+          }
+        }
+      >
+        Fast Frozen
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "NORMAL",
+            "generationMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "COUNTRYRACE",
+            "timer": 300,
+          }
+        }
+      >
+        Country Race
+      </Item>
+      <Item
+        display="⭐"
+        value={
+          Object {
+            "clockMode": "NORMAL",
+            "countryLock": null,
+            "gameMode": "FROZEN",
+            "generationMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
+            "rounds": 5,
+            "scoreMethod": "COUNTRYRACE",
+            "timer": 30,
+          }
+        }
+      >
+        Frozen Country Race
+      </Item>
+    </Dropdown>
+    <LastSettingsButton
+      onClick={[Function]}
+    />
+    <button
+      className="start"
+      onClick={[Function]}
+      type="button"
+    >
+      New Game
+    </button>
+  </div>
+  <div
+    className="dropdowns"
+  >
+    <DropdownGroup>
+      <Dropdown
+        onSelect={[Function]}
+        open="timer"
+        selected={30}
+      >
+        <Item
+          display="30s"
+          value={30}
+        >
+          30 Seconds
+        </Item>
+        <Item
+          display="2m"
+          value={120}
+        >
+          2 Minutes
+        </Item>
+        <Item
+          display="5m"
+          value={300}
+        >
+          5 Minutes
+        </Item>
+        <Item
+          display="1h"
+          value={3600}
+        >
+          1 Hour
+        </Item>
+      </Dropdown>
+      <Dropdown
+        onSelect={[Function]}
+        open="rounds"
+        selected={3}
+      >
+        <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
+        onSelect={[Function]}
+        open="gen"
+        selected="URBAN"
+      >
+        <Item
+          display="🎲"
+          value="RANDOMSTREETVIEW"
+        >
+          Random Street View
+        </Item>
+        <Item
+          display="🏙️"
+          value="URBAN"
+        >
+          Urban Centers
+        </Item>
+      </Dropdown>
+      <CountryDropdown
+        countryLookup="country-lookup"
+        onSelect={[Function]}
+        open="country"
+        selected="us"
+      />
+      <Dropdown
+        onSelect={[Function]}
+        open="gameMode"
+        selected="FROZEN"
+      >
+        <Item
+          display="📍"
+          value="NORMAL"
+        >
+          Normal
+        </Item>
+        <Item
+          display="❄️"
+          value="FROZEN"
+        >
+          Frozen
+        </Item>
+      </Dropdown>
+      <Dropdown
+        onSelect={[Function]}
+        open="clockMode"
+        selected="NORMAL"
+      >
+        <Item
+          display="⏰"
+          value="NORMAL"
+        >
+          Normal
+        </Item>
+        <Item
+          display="🏦"
+          value="TIMEBANK"
+        >
+          Time Bank
+        </Item>
+        <Item
+          display="🏃"
+          value="RACE"
+        >
+          Race
+        </Item>
+      </Dropdown>
+      <Dropdown
+        onSelect={[Function]}
+        open="scoreMethod"
+        selected="COUNTRYRACE"
+      >
+        <Item
+          display="📏"
+          value="DISTANCE"
+        >
+          Distance
+        </Item>
+        <Item
+          display="🗾"
+          value="COUNTRYRACE"
+        >
+          Country Race
+        </Item>
+      </Dropdown>
+      <Dropdown
+        onSelect={[Function]}
+        open="roundPointCap"
+        selected={null}
+      >
+        <Item
+          display="♾️"
+          value={null}
+        >
+          No Limit
+        </Item>
+        <Item
+          display="10k"
+          value={10000}
+        >
+          10k Total Points per Round
+        </Item>
+        <Item
+          display="20k"
+          value={20000}
+        >
+          20k Total Points per Round
+        </Item>
+      </Dropdown>
+    </DropdownGroup>
+  </div>
+</div>
+`;
+
 exports[`GameCreationForm can have the error modal closed 1`] = `
 <div
   className="form"
@@ -334,7 +984,7 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
           "clockMode": "NORMAL",
           "countryLock": null,
           "gameMode": "NORMAL",
-          "genMethod": "RANDOMSTREETVIEW",
+          "generationMethod": "RANDOMSTREETVIEW",
           "roundPointCap": null,
           "rounds": 5,
           "scoreMethod": "DISTANCE",
@@ -349,7 +999,7 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -366,7 +1016,7 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
             "clockMode": "NORMAL",
             "countryLock": "us",
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -383,7 +1033,7 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -400,7 +1050,7 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 3,
             "scoreMethod": "DISTANCE",
@@ -417,7 +1067,7 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -434,7 +1084,7 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -647,7 +1297,7 @@ exports[`GameCreationForm can have the preset dropdown opened 1`] = `
           "clockMode": "NORMAL",
           "countryLock": null,
           "gameMode": "NORMAL",
-          "genMethod": "RANDOMSTREETVIEW",
+          "generationMethod": "RANDOMSTREETVIEW",
           "roundPointCap": null,
           "rounds": 5,
           "scoreMethod": "DISTANCE",
@@ -662,7 +1312,7 @@ exports[`GameCreationForm can have the preset dropdown opened 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -679,7 +1329,7 @@ exports[`GameCreationForm can have the preset dropdown opened 1`] = `
             "clockMode": "NORMAL",
             "countryLock": "us",
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -696,7 +1346,7 @@ exports[`GameCreationForm can have the preset dropdown opened 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -713,7 +1363,7 @@ exports[`GameCreationForm can have the preset dropdown opened 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 3,
             "scoreMethod": "DISTANCE",
@@ -730,7 +1380,7 @@ exports[`GameCreationForm can have the preset dropdown opened 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -747,7 +1397,7 @@ exports[`GameCreationForm can have the preset dropdown opened 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -960,7 +1610,7 @@ exports[`GameCreationForm handles error creating a game 1`] = `
           "clockMode": "NORMAL",
           "countryLock": null,
           "gameMode": "NORMAL",
-          "genMethod": "RANDOMSTREETVIEW",
+          "generationMethod": "RANDOMSTREETVIEW",
           "roundPointCap": null,
           "rounds": 5,
           "scoreMethod": "DISTANCE",
@@ -975,7 +1625,7 @@ exports[`GameCreationForm handles error creating a game 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -992,7 +1642,7 @@ exports[`GameCreationForm handles error creating a game 1`] = `
             "clockMode": "NORMAL",
             "countryLock": "us",
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -1009,7 +1659,7 @@ exports[`GameCreationForm handles error creating a game 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -1026,7 +1676,7 @@ exports[`GameCreationForm handles error creating a game 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 3,
             "scoreMethod": "DISTANCE",
@@ -1043,7 +1693,7 @@ exports[`GameCreationForm handles error creating a game 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -1060,7 +1710,7 @@ exports[`GameCreationForm handles error creating a game 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -1273,7 +1923,7 @@ exports[`GameCreationForm renders 1`] = `
           "clockMode": "NORMAL",
           "countryLock": null,
           "gameMode": "NORMAL",
-          "genMethod": "RANDOMSTREETVIEW",
+          "generationMethod": "RANDOMSTREETVIEW",
           "roundPointCap": null,
           "rounds": 5,
           "scoreMethod": "DISTANCE",
@@ -1288,7 +1938,7 @@ exports[`GameCreationForm renders 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -1305,7 +1955,7 @@ exports[`GameCreationForm renders 1`] = `
             "clockMode": "NORMAL",
             "countryLock": "us",
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -1322,7 +1972,7 @@ exports[`GameCreationForm renders 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "URBAN",
+            "generationMethod": "URBAN",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "DISTANCE",
@@ -1339,7 +1989,7 @@ exports[`GameCreationForm renders 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 3,
             "scoreMethod": "DISTANCE",
@@ -1356,7 +2006,7 @@ exports[`GameCreationForm renders 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "NORMAL",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",
@@ -1373,7 +2023,7 @@ exports[`GameCreationForm renders 1`] = `
             "clockMode": "NORMAL",
             "countryLock": null,
             "gameMode": "FROZEN",
-            "genMethod": "RANDOMSTREETVIEW",
+            "generationMethod": "RANDOMSTREETVIEW",
             "roundPointCap": null,
             "rounds": 5,
             "scoreMethod": "COUNTRYRACE",