Clean up lobby and update tests

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

@@ -9,7 +9,6 @@ import JoinForm from "./JoinForm";
 import styles from "./Lobby.module.css";
 import StartGame from "./StartGame";
 import {
-  NORMAL,
   TIME_BANK,
   FROZEN,
   COUNTRY_RACE,
@@ -31,42 +30,43 @@ export const GameInfo = () => {
     return <Loading />;
   }
 
-  let explanation;
-
-  switch (clockMode) {
-    case TIME_BANK:
-      explanation = `with a ${ms(
-        timer * 1000 * rounds
-      )} time bank across all rounds`;
-      break;
-    case NORMAL: // fall-through
-    case RACE: // fall-through
-    default:
-      explanation = `${rounds !== 1 ? ", each" : ""} with a ${ms(
-        timer * 1000
-      )} time limit`;
-      break;
-  }
-
-  if (scoreMethod === COUNTRY_RACE) {
-    explanation +=
-      ", where you must be the fastest to select the right country";
-  }
-
-  if (gameMode === FROZEN) {
-    explanation += ", and you will not be able to adjust your view";
-  }
-
-  if (roundPointCap) {
-    explanation += `. Only ${roundPointCap} total points will be up for grabs each round`;
-  }
-
   return (
     <>
       <span className={styles.label}>
         Game will run for {rounds} round{rounds !== 1 && "s"}
-        {explanation}
       </span>
+      {clockMode === TIME_BANK ? (
+        <span className={styles.label}>
+          Your time will be banked, with {ms(timer * 1000 * rounds)} available
+          across all rounds
+        </span>
+      ) : (
+        <span className={styles.label}>
+          Each round will have a time limit of {ms(timer * 1000)}
+        </span>
+      )}
+      {clockMode === RACE && (
+        <span className={styles.label}>
+          If someone submits before you your remaining time will be cut down to
+          just 10 seconds!
+        </span>
+      )}
+      {scoreMethod === COUNTRY_RACE && (
+        <span className={styles.label}>
+          Your score will be based on how quickly you select the right country -
+          you will get 0 points for the wrong country!
+        </span>
+      )}
+      {gameMode === FROZEN && (
+        <span className={styles.label}>
+          You will not be able to adjust your view
+        </span>
+      )}
+      {roundPointCap && (
+        <span className={styles.label}>
+          Only {roundPointCap} total points will be up for grabs each round
+        </span>
+      )}
       {countryLock && (
         <span className={styles.label}>
           This game will only use locations within:{" "}

client/src/tests/Lobby.test.js

@@ -178,6 +178,19 @@ describe("Lobby", () => {
       expect(rendered).toMatchSnapshot();
     });
 
+    it("renders with a round point cap", () => {
+      useGameConfig.mockReturnValue({
+        rounds: 5,
+        timer: 300,
+        gameMode: NORMAL,
+        clockMode: NORMAL,
+        scoreMethod: DISTANCE,
+        roundPointCap: 10000,
+      });
+      const rendered = shallow(<GameInfo />);
+      expect(rendered).toMatchSnapshot();
+    });
+
     it("renders with country lock", () => {
       iso.whereAlpha2.mockReturnValue({ country: "test-country" });
       useGameConfig.mockReturnValue({

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

@@ -9,7 +9,12 @@ exports[`Lobby GameInfo renders 1`] = `
     5
      round
     s
-    , each with a 5m time limit
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
   </span>
 </Fragment>
 `;
@@ -23,7 +28,17 @@ exports[`Lobby GameInfo renders for COUNTRY_RACE 1`] = `
     5
      round
     s
-    , each with a 5m time limit, where you must be the fastest to select the right country
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
+  </span>
+  <span
+    className="label"
+  >
+    Your score will be based on how quickly you select the right country - you will get 0 points for the wrong country!
   </span>
 </Fragment>
 `;
@@ -37,7 +52,17 @@ exports[`Lobby GameInfo renders for FROZEN 1`] = `
     5
      round
     s
-    , each with a 5m time limit, and you will not be able to adjust your view
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
+  </span>
+  <span
+    className="label"
+  >
+    You will not be able to adjust your view
   </span>
 </Fragment>
 `;
@@ -51,7 +76,12 @@ exports[`Lobby GameInfo renders for NORMAL 1`] = `
     5
      round
     s
-    , each with a 5m time limit
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
   </span>
 </Fragment>
 `;
@@ -65,7 +95,17 @@ exports[`Lobby GameInfo renders for RACE 1`] = `
     5
      round
     s
-    , each with a 5m time limit
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
+  </span>
+  <span
+    className="label"
+  >
+    If someone submits before you your remaining time will be cut down to just 10 seconds!
   </span>
 </Fragment>
 `;
@@ -79,7 +119,13 @@ exports[`Lobby GameInfo renders for TIME_BANK 1`] = `
     5
      round
     s
-    with a 25m time bank across all rounds
+  </span>
+  <span
+    className="label"
+  >
+    Your time will be banked, with 
+    25m
+     available across all rounds
   </span>
 </Fragment>
 `;
@@ -92,7 +138,12 @@ exports[`Lobby GameInfo renders for single round 1`] = `
     Game will run for 
     1
      round
-     with a 5m time limit
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
   </span>
 </Fragment>
 `;
@@ -105,7 +156,17 @@ exports[`Lobby GameInfo renders for single round COUNTRY_RACE 1`] = `
     Game will run for 
     1
      round
-     with a 5m time limit, where you must be the fastest to select the right country
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
+  </span>
+  <span
+    className="label"
+  >
+    Your score will be based on how quickly you select the right country - you will get 0 points for the wrong country!
   </span>
 </Fragment>
 `;
@@ -118,13 +179,49 @@ exports[`Lobby GameInfo renders for single round FROZEN 1`] = `
     Game will run for 
     1
      round
-     with a 5m time limit, and you will not be able to adjust your view
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
+  </span>
+  <span
+    className="label"
+  >
+    You will not be able to adjust your view
   </span>
 </Fragment>
 `;
 
 exports[`Lobby GameInfo renders while loading 1`] = `<Loading />`;
 
+exports[`Lobby GameInfo renders with a round point cap 1`] = `
+<Fragment>
+  <span
+    className="label"
+  >
+    Game will run for 
+    5
+     round
+    s
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
+  </span>
+  <span
+    className="label"
+  >
+    Only 
+    10000
+     total points will be up for grabs each round
+  </span>
+</Fragment>
+`;
+
 exports[`Lobby GameInfo renders with country lock 1`] = `
 <Fragment>
   <span
@@ -134,7 +231,12 @@ exports[`Lobby GameInfo renders with country lock 1`] = `
     5
      round
     s
-    , each with a 5m time limit
+  </span>
+  <span
+    className="label"
+  >
+    Each round will have a time limit of 
+    5m
   </span>
   <span
     className="label"