Update GameCreationForm

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

@@ -2,8 +2,8 @@ import ms from "pretty-ms";
 import { useCallback, useState } from "react";
 import { createGame } from "../../../domain/apiMethods";
 import {
-  adapt4To5,
   COUNTRY_RACE,
+  DISTANCE,
   FROZEN,
   NORMAL,
   RACE,
@@ -22,7 +22,10 @@ const DEFAULTS = {
   rounds: 5,
   countryLock: null,
   genMethod: RANDOM_STREET_VIEW,
-  ruleSet: NORMAL,
+  gameMode: NORMAL,
+  clockMode: NORMAL,
+  scoreMethod: DISTANCE,
+  roundPointCap: null,
 };
 
 const PRESETS = {
@@ -40,7 +43,17 @@ const PRESETS = {
     timer: 30,
     rounds: 3,
     genMethod: RANDOM_STREET_VIEW,
-    ruleSet: FROZEN,
+    gameMode: FROZEN,
+  },
+  COUNTRY_RACE: {
+    ...DEFAULTS,
+    scoreMethod: COUNTRY_RACE,
+  },
+  FROZEN_COUNTRY_RACE: {
+    ...DEFAULTS,
+    timer: 30,
+    gameMode: FROZEN,
+    scoreMethod: COUNTRY_RACE,
   },
 };
 
@@ -51,7 +64,10 @@ const GameCreationForm = ({ afterCreate }) => {
   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 [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);
 
@@ -61,13 +77,19 @@ const GameCreationForm = ({ afterCreate }) => {
       rounds: newRounds,
       countryLock: newCountryLock,
       genMethod: newGenMethod,
-      ruleSet: newRuleSet,
+      gameMode: newGameMode,
+      clockMode: newClockMode,
+      scoreMethod: newScoreMethod,
+      roundPointCap: newRoundPointCap,
     }) => {
       setTimer(newTimer);
       setRounds(newRounds);
       setCountryLock(newCountryLock);
       setGenMethod(newGenMethod);
-      setRuleSet(newRuleSet);
+      setGameMode(newGameMode);
+      setClockMode(newClockMode);
+      setScoreMethod(newScoreMethod);
+      setRoundPointCap(newRoundPointCap);
     },
     []
   );
@@ -80,9 +102,6 @@ const GameCreationForm = ({ afterCreate }) => {
     setLoading(true);
     let gameId;
     try {
-      const { gameMode, clockMode, scoreMethod, roundPointCap } = adapt4To5(
-        ruleSet
-      );
       gameId = await createGame(
         timer,
         rounds,
@@ -127,6 +146,12 @@ const GameCreationForm = ({ afterCreate }) => {
             <Item value={PRESETS.FAST_FROZEN} display="⭐">
               Fast Frozen
             </Item>
+            <Item value={PRESETS.COUNTRY_RACE} display="⭐">
+              Country Race
+            </Item>
+            <Item value={PRESETS.FROZEN_COUNTRY_RACE} display="⭐">
+              Frozen Country Race
+            </Item>
           </Dropdown>
           <Dropdown selected={timer} onSelect={setTimer} open="timer">
             <Item value={30} display={ms(30 * 1000)}>
@@ -162,23 +187,56 @@ const GameCreationForm = ({ afterCreate }) => {
             onSelect={setCountryLock}
             open="country"
           />
-          <Dropdown selected={ruleSet} onSelect={setRuleSet} open="rule">
+          <Dropdown selected={gameMode} onSelect={setGameMode} open="gameMode">
+            <Item value={NORMAL} display="📍">
+              Normal
+            </Item>
+            <Item value={FROZEN} display="❄️">
+              Frozen
+            </Item>
+          </Dropdown>
+          <Dropdown
+            selected={clockMode}
+            onSelect={setClockMode}
+            open="clockMode"
+          >
             <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>
+          </Dropdown>
+          <Dropdown
+            selected={scoreMethod}
+            onSelect={setScoreMethod}
+            open="scoreMethod"
+          >
+            <Item value={DISTANCE} display="📏">
+              Distance
+            </Item>
             <Item value={COUNTRY_RACE} display="🗾">
               Country Race
             </Item>
           </Dropdown>
+          <Dropdown
+            selected={roundPointCap}
+            onSelect={setRoundPointCap}
+            open="roundPointCap"
+          >
+            <Item value={null} display="♾️">
+              No limit
+            </Item>
+            <Item value={10000} display="10k">
+              10k total points per round
+            </Item>
+            <Item value={10000} display="20k">
+              20k total points per round
+            </Item>
+          </Dropdown>
         </DropdownGroup>
       </div>
     </div>

client/src/domain/constants.js

@@ -17,39 +17,3 @@ export const FROZEN = "FROZEN";
 export const RACE = "RACE";
 export const COUNTRY_RACE = "COUNTRYRACE";
 export const DISTANCE = "DISTANCE";
-
-// temporary adapter from api v4 to v5
-export const adapt4To5 = ruleSet => {
-  switch (ruleSet) {
-    case FROZEN:
-      return {
-        gameMode: FROZEN,
-        clockMode: NORMAL,
-        scoreMethod: DISTANCE,
-        roundPointCap: null,
-      };
-    case RACE: // fall-through
-    case TIME_BANK:
-      return {
-        gameMode: NORMAL,
-        clockMode: ruleSet,
-        scoreMethod: DISTANCE,
-        roundPointCap: null,
-      };
-    case COUNTRY_RACE:
-      return {
-        gameMode: NORMAL,
-        clockMode: NORMAL,
-        scoreMethod: COUNTRY_RACE,
-        roundPointCap: null,
-      };
-    default:
-      // includes NORMAL
-      return {
-        gameMode: NORMAL,
-        clockMode: NORMAL,
-        scoreMethod: DISTANCE,
-        roundPointCap: null,
-      };
-  }
-};

client/src/tests/GameCreationForm.test.js

@@ -2,7 +2,7 @@ import { shallow } from "enzyme";
 import React from "react";
 import GameCreationForm from "../components/util/GameCreationForm";
 import { createGame } from "../domain/apiMethods";
-import { FROZEN, URBAN } from "../domain/constants";
+import { COUNTRY_RACE, FROZEN, NORMAL, URBAN } from "../domain/constants";
 import useCountryLookup from "../hooks/useCountryLookup";
 
 jest.mock("../domain/apiMethods");
@@ -66,7 +66,10 @@ describe("GameCreationForm", () => {
       rounds: 3,
       countryLock: "us",
       genMethod: URBAN,
-      ruleSet: FROZEN,
+      gameMode: FROZEN,
+      clockMode: NORMAL,
+      scoreMethod: COUNTRY_RACE,
+      roundPointCap: null,
     });
     expect(rendered).toMatchSnapshot();
   });

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

@@ -24,10 +24,13 @@ exports[`GameCreationForm can have presets selected 1`] = `
         open="presets"
         selected={
           Object {
+            "clockMode": "NORMAL",
             "countryLock": null,
+            "gameMode": "NORMAL",
             "genMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
             "rounds": 5,
-            "ruleSet": "NORMAL",
+            "scoreMethod": "DISTANCE",
             "timer": 300,
           }
         }
@@ -36,10 +39,13 @@ exports[`GameCreationForm can have presets selected 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "NORMAL",
               "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -50,10 +56,13 @@ exports[`GameCreationForm can have presets selected 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": "us",
+              "gameMode": "NORMAL",
               "genMethod": "URBAN",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -64,10 +73,13 @@ exports[`GameCreationForm can have presets selected 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "NORMAL",
               "genMethod": "URBAN",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -78,16 +90,53 @@ exports[`GameCreationForm can have presets selected 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "FROZEN",
               "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
               "rounds": 3,
-              "ruleSet": "FROZEN",
+              "scoreMethod": "DISTANCE",
               "timer": 30,
             }
           }
         >
           Fast Frozen
         </Item>
+        <Item
+          display="⭐"
+          value={
+            Object {
+              "clockMode": "NORMAL",
+              "countryLock": null,
+              "gameMode": "NORMAL",
+              "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
+              "rounds": 5,
+              "scoreMethod": "COUNTRYRACE",
+              "timer": 300,
+            }
+          }
+        >
+          Country Race
+        </Item>
+        <Item
+          display="⭐"
+          value={
+            Object {
+              "clockMode": "NORMAL",
+              "countryLock": null,
+              "gameMode": "FROZEN",
+              "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
+              "rounds": 5,
+              "scoreMethod": "COUNTRYRACE",
+              "timer": 30,
+            }
+          }
+        >
+          Frozen Country Race
+        </Item>
       </Dropdown>
       <Dropdown
         onSelect={[Function]}
@@ -171,8 +220,26 @@ exports[`GameCreationForm can have presets selected 1`] = `
       />
       <Dropdown
         onSelect={[Function]}
-        open="rule"
+        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="⏰"
@@ -186,18 +253,24 @@ exports[`GameCreationForm can have presets selected 1`] = `
         >
           Time Bank
         </Item>
-        <Item
-          display="❄️"
-          value="FROZEN"
-        >
-          Frozen
-        </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"
@@ -205,6 +278,30 @@ exports[`GameCreationForm can have presets selected 1`] = `
           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={10000}
+        >
+          20k total points per round
+        </Item>
+      </Dropdown>
     </DropdownGroup>
   </div>
 </div>
@@ -234,10 +331,13 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
         open="presets"
         selected={
           Object {
+            "clockMode": "NORMAL",
             "countryLock": null,
+            "gameMode": "NORMAL",
             "genMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
             "rounds": 5,
-            "ruleSet": "NORMAL",
+            "scoreMethod": "DISTANCE",
             "timer": 300,
           }
         }
@@ -246,10 +346,13 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "NORMAL",
               "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -260,10 +363,13 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": "us",
+              "gameMode": "NORMAL",
               "genMethod": "URBAN",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -274,10 +380,13 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "NORMAL",
               "genMethod": "URBAN",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -288,16 +397,53 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "FROZEN",
               "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
               "rounds": 3,
-              "ruleSet": "FROZEN",
+              "scoreMethod": "DISTANCE",
               "timer": 30,
             }
           }
         >
           Fast Frozen
         </Item>
+        <Item
+          display="⭐"
+          value={
+            Object {
+              "clockMode": "NORMAL",
+              "countryLock": null,
+              "gameMode": "NORMAL",
+              "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
+              "rounds": 5,
+              "scoreMethod": "COUNTRYRACE",
+              "timer": 300,
+            }
+          }
+        >
+          Country Race
+        </Item>
+        <Item
+          display="⭐"
+          value={
+            Object {
+              "clockMode": "NORMAL",
+              "countryLock": null,
+              "gameMode": "FROZEN",
+              "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
+              "rounds": 5,
+              "scoreMethod": "COUNTRYRACE",
+              "timer": 30,
+            }
+          }
+        >
+          Frozen Country Race
+        </Item>
       </Dropdown>
       <Dropdown
         onSelect={[Function]}
@@ -381,7 +527,25 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
       />
       <Dropdown
         onSelect={[Function]}
-        open="rule"
+        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
@@ -396,18 +560,24 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
         >
           Time Bank
         </Item>
-        <Item
-          display="❄️"
-          value="FROZEN"
-        >
-          Frozen
-        </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"
@@ -415,6 +585,30 @@ exports[`GameCreationForm can have the error modal closed 1`] = `
           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={10000}
+        >
+          20k total points per round
+        </Item>
+      </Dropdown>
     </DropdownGroup>
   </div>
 </div>
@@ -444,10 +638,13 @@ exports[`GameCreationForm handles error creating a game 1`] = `
         open="presets"
         selected={
           Object {
+            "clockMode": "NORMAL",
             "countryLock": null,
+            "gameMode": "NORMAL",
             "genMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
             "rounds": 5,
-            "ruleSet": "NORMAL",
+            "scoreMethod": "DISTANCE",
             "timer": 300,
           }
         }
@@ -456,10 +653,13 @@ exports[`GameCreationForm handles error creating a game 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "NORMAL",
               "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -470,10 +670,13 @@ exports[`GameCreationForm handles error creating a game 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": "us",
+              "gameMode": "NORMAL",
               "genMethod": "URBAN",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -484,10 +687,13 @@ exports[`GameCreationForm handles error creating a game 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "NORMAL",
               "genMethod": "URBAN",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -498,16 +704,53 @@ exports[`GameCreationForm handles error creating a game 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "FROZEN",
               "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
               "rounds": 3,
-              "ruleSet": "FROZEN",
+              "scoreMethod": "DISTANCE",
               "timer": 30,
             }
           }
         >
           Fast Frozen
         </Item>
+        <Item
+          display="⭐"
+          value={
+            Object {
+              "clockMode": "NORMAL",
+              "countryLock": null,
+              "gameMode": "NORMAL",
+              "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
+              "rounds": 5,
+              "scoreMethod": "COUNTRYRACE",
+              "timer": 300,
+            }
+          }
+        >
+          Country Race
+        </Item>
+        <Item
+          display="⭐"
+          value={
+            Object {
+              "clockMode": "NORMAL",
+              "countryLock": null,
+              "gameMode": "FROZEN",
+              "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
+              "rounds": 5,
+              "scoreMethod": "COUNTRYRACE",
+              "timer": 30,
+            }
+          }
+        >
+          Frozen Country Race
+        </Item>
       </Dropdown>
       <Dropdown
         onSelect={[Function]}
@@ -591,7 +834,25 @@ exports[`GameCreationForm handles error creating a game 1`] = `
       />
       <Dropdown
         onSelect={[Function]}
-        open="rule"
+        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
@@ -606,18 +867,24 @@ exports[`GameCreationForm handles error creating a game 1`] = `
         >
           Time Bank
         </Item>
-        <Item
-          display="❄️"
-          value="FROZEN"
-        >
-          Frozen
-        </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"
@@ -625,6 +892,30 @@ exports[`GameCreationForm handles error creating a game 1`] = `
           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={10000}
+        >
+          20k total points per round
+        </Item>
+      </Dropdown>
     </DropdownGroup>
   </div>
 </div>
@@ -654,10 +945,13 @@ exports[`GameCreationForm renders 1`] = `
         open="presets"
         selected={
           Object {
+            "clockMode": "NORMAL",
             "countryLock": null,
+            "gameMode": "NORMAL",
             "genMethod": "RANDOMSTREETVIEW",
+            "roundPointCap": null,
             "rounds": 5,
-            "ruleSet": "NORMAL",
+            "scoreMethod": "DISTANCE",
             "timer": 300,
           }
         }
@@ -666,10 +960,13 @@ exports[`GameCreationForm renders 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "NORMAL",
               "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -680,10 +977,13 @@ exports[`GameCreationForm renders 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": "us",
+              "gameMode": "NORMAL",
               "genMethod": "URBAN",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -694,10 +994,13 @@ exports[`GameCreationForm renders 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "NORMAL",
               "genMethod": "URBAN",
+              "roundPointCap": null,
               "rounds": 5,
-              "ruleSet": "NORMAL",
+              "scoreMethod": "DISTANCE",
               "timer": 300,
             }
           }
@@ -708,16 +1011,53 @@ exports[`GameCreationForm renders 1`] = `
           display="⭐"
           value={
             Object {
+              "clockMode": "NORMAL",
               "countryLock": null,
+              "gameMode": "FROZEN",
               "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
               "rounds": 3,
-              "ruleSet": "FROZEN",
+              "scoreMethod": "DISTANCE",
               "timer": 30,
             }
           }
         >
           Fast Frozen
         </Item>
+        <Item
+          display="⭐"
+          value={
+            Object {
+              "clockMode": "NORMAL",
+              "countryLock": null,
+              "gameMode": "NORMAL",
+              "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
+              "rounds": 5,
+              "scoreMethod": "COUNTRYRACE",
+              "timer": 300,
+            }
+          }
+        >
+          Country Race
+        </Item>
+        <Item
+          display="⭐"
+          value={
+            Object {
+              "clockMode": "NORMAL",
+              "countryLock": null,
+              "gameMode": "FROZEN",
+              "genMethod": "RANDOMSTREETVIEW",
+              "roundPointCap": null,
+              "rounds": 5,
+              "scoreMethod": "COUNTRYRACE",
+              "timer": 30,
+            }
+          }
+        >
+          Frozen Country Race
+        </Item>
       </Dropdown>
       <Dropdown
         onSelect={[Function]}
@@ -801,7 +1141,25 @@ exports[`GameCreationForm renders 1`] = `
       />
       <Dropdown
         onSelect={[Function]}
-        open="rule"
+        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
@@ -816,18 +1174,24 @@ exports[`GameCreationForm renders 1`] = `
         >
           Time Bank
         </Item>
-        <Item
-          display="❄️"
-          value="FROZEN"
-        >
-          Frozen
-        </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"
@@ -835,6 +1199,30 @@ exports[`GameCreationForm renders 1`] = `
           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={10000}
+        >
+          20k total points per round
+        </Item>
+      </Dropdown>
     </DropdownGroup>
   </div>
 </div>