Implementing TIME_BANK in front-end

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

@@ -7,18 +7,30 @@ import Loading from '../../util/Loading';
 import JoinForm from './JoinForm';
 import styles from './Lobby.module.css';
 import StartGame from './StartGame';
+import { NORMAL, TIME_BANK } from '../../../domain/ruleSets';
 
 const GameInfo = () => {
-  const { rounds, timer, onlyAmerica } = useGameConfig();
+  const { rounds, timer, onlyAmerica, ruleSet } = useGameConfig();
 
   if (!rounds || !timer) {
     return <Loading />
   }
 
+  let timeExplanation;
+  switch (ruleSet) {
+    case TIME_BANK:
+      timeExplanation = `with a ${ms(timer * 1000 * rounds)} time bank across all rounds`;
+      break;
+    case NORMAL: // fall-through
+    default:
+      timeExplanation = `${rounds !== 1 ? ", each" : ""}with a ${ms(timer * 1000)} time limit`;
+      break;
+  }
+
   return (
     <>
       <span className={styles.label}>
-        Game will run for {rounds} round{rounds !== 1 && 's, each'} with a {ms(timer * 1000)} time limit
+        Game will run for {rounds} round{rounds !== 1 && 's'} {timeExplanation}
       </span>
       {onlyAmerica && (
         <span className={styles.label}>This game will only use locations within the United States of America</span>

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

@@ -5,6 +5,7 @@ import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethod
 import Loading from '../Loading';
 import { Dropdown, Item } from './Dropdown';
 import styles from './GameCreationForm.module.css';
+import { NORMAL, TIME_BANK } from '../../../domain/ruleSets';
 
 export default ({ afterCreate }) => {
   const [ loading, setLoading ] = useState(false);
@@ -12,6 +13,7 @@ export default ({ afterCreate }) => {
   const [ rounds, setRounds ] = useState(5);
   const [ onlyAmerica, setOnlyAmerica ] = useState(false);
   const [ genMethod, setGenMethod ] = useState(MAP_CRUNCH);
+  const [ ruleSet, setRuleSet ] = useState(NORMAL);
   const [ open, setOpen ] = useState(null);
 
   if (loading) {
@@ -20,7 +22,7 @@ export default ({ afterCreate }) => {
 
   const onCreateGame = async () => {
     setLoading(true);
-    const gameId = await createGame(timer, rounds, onlyAmerica, genMethod);
+    const gameId = await createGame(timer, rounds, onlyAmerica, genMethod, ruleSet);
     if (afterCreate) {
       afterCreate(gameId);
     }
@@ -32,8 +34,8 @@ export default ({ afterCreate }) => {
         <Dropdown 
           selected={ms(timer * 1000)} 
           onSelect={v => { setTimer(v); setOpen(null); }} 
-          open={open === "timer"} 
-          onClick={() => setOpen(o => o === "timer" ? null : "timer")}
+          open={open === 'timer'} 
+          onClick={() => setOpen(o => o === 'timer' ? null : 'timer')}
         >
           <Item value={30}>30 Seconds</Item>
           <Item value={120}>2 Minutes</Item>
@@ -43,8 +45,8 @@ export default ({ afterCreate }) => {
         <Dropdown 
           selected={rounds} 
           onSelect={v => { setRounds(v); setOpen(null); }} 
-          open={open === "rounds"} 
-          onClick={() => setOpen(o => o === "rounds" ? null : "rounds")}
+          open={open === 'rounds'} 
+          onClick={() => setOpen(o => o === 'rounds' ? null : 'rounds')}
         >
           <Item value={1}>1 Round</Item>
           <Item value={3}>3 Rounds</Item>
@@ -54,24 +56,35 @@ export default ({ afterCreate }) => {
         <Dropdown 
           selected={onlyAmerica ? '🇺🇸' : '🌎'} 
           onSelect={v => { setOnlyAmerica(v); setOpen(null); }} 
-          open={open === "america"} 
-          onClick={() => setOpen(o => o === "america" ? null : "america")}
+          open={open === 'america'} 
+          onClick={() => setOpen(o => o === 'america' ? null : 'america')}
         >
           <Item value={false}>All Countries</Item>
           <Item value={true}>Just America</Item>
         </Dropdown>
         <Dropdown
-          selected={genMethod === MAP_CRUNCH
-            ? 'MC'
-            : genMethod === RANDOM_STREET_VIEW ? 'RSV' : '🏙️'}
+          selected={
+            genMethod === MAP_CRUNCH
+              ? 'MC'
+              : genMethod === RANDOM_STREET_VIEW ? 'RSV' : '🏙️'
+            }
             onSelect={v => { setGenMethod(v); setOpen(null); }} 
-            open={open === "gen"} 
-            onClick={() => setOpen(o => o === "gen" ? null : "gen")}
+            open={open === 'gen'} 
+            onClick={() => setOpen(o => o === 'gen' ? null : 'gen')}
         >
           <Item value={MAP_CRUNCH}>Map Crunch</Item>
           <Item value={RANDOM_STREET_VIEW}>Random Street View</Item>
           <Item value={URBAN}>Urban Centers</Item>
         </Dropdown>
+        <Dropdown
+          selected={ruleSet === NORMAL ? '⏰' : '🏦'}
+          onSelect={v => { setRuleSet(v); setOpen(null); }}
+          open={open === 'rule'}
+          onClick={() => setOpen(o => o === 'rule' ? null : 'rule')}
+        >
+          <Item value={NORMAL}>Normal</Item>
+          <Item value={TIME_BANK}>Time Bank</Item>
+        </Dropdown>
       </div>
       <button className={styles.start} onClick={onCreateGame}>
         New Game

client/src/domain/apiMethods.js

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

client/src/domain/ruleSets.js

@@ -0,0 +1,2 @@
+export const NORMAL = "NORMAL";
+export const TIME_BANK = "TIMEBANK";