Adding round time limit selection in UI

README.md

@@ -84,15 +84,11 @@ POST /game/{ID}/guesses/{round}
 - Refactor round tracking in database logic
 - Improve MapCrunch logic to distribute countries
 - Genericize number of rounds
-- Genericize round timer in UI
-- Finalize scoring formula
 - Track name via tokens
 - Error handling in UI
 - Navigate directly to summary page
 - Navigate directly to joining a game
 - Re-join a game you did not finish
 - Show current best on round summary
-- Round summary should use dynamic map
-- Styling and layout improvements
 - Optimize docker file or set up compose structure
 - Override google controls in streetview, make custom divs

client/src/App.css

@@ -118,6 +118,48 @@
   padding: 0.5em;
 }
 
+.new-game {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+}
+
+.new-game__dropdown {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 5px;
+}
+
+.new-game__dropdown-button {
+  text-align: center;
+}
+
+.new-game__dropdown-items {
+  display: none;
+  position: absolute;
+  background-color: #333;
+  width: 100%;
+  z-index: 1;
+}
+
+.new-game__dropdown-items .new-game__dropdown-option {
+  padding: 12px 16px;
+  display: block;
+}
+
+.new-game__dropdown-items .new-game__dropdown-option:hover {
+  background-color: #555;
+}
+
+.new-game__dropdown:hover .new-game__dropdown-items {
+  display: block;
+}
+
+.new-game__dropdown:hover .new-game__dropdown-button {
+  background-color: #333;
+}
+
+
 .new-game__btn {
   display: inline;
 }

client/src/components/screens/PreGame/PreGame.jsx

@@ -4,19 +4,33 @@ import Button from "../../util/Button";
 import PlayerNameInput from "./PlayerNameInput";
 import JoinGameInput from "./JoinGameInput";
 import { createGame, joinGame } from "../../../domain/GGSHService";
+import ms from "pretty-ms";
 
-// TODO set round timer for new game
-
-const NewGame = ({ onCreateGame, cannotCreateGame }) => (
-  <Button className="new-game__btn" onClick={onCreateGame} disabled={cannotCreateGame}>
-    Create New Game
-  </Button>
-);
+const NewGame = ({ onCreateGame, cannotCreateGame, timer, setTimer }) => {
+  return (
+    <div className="new-game">
+      <div className="new-game__dropdown">
+        <div className="btn new-game__dropdown-button">
+          Round Timer: {ms(timer * 1000)}
+        </div>
+        <div className="new-game__dropdown-items">
+          <div className="new-game__dropdown-option" onClick={() => setTimer(30)}>30 Seconds</div>
+          <div className="new-game__dropdown-option" onClick={() => setTimer(300)}>5 Minutes</div>
+          <div className="new-game__dropdown-option" onClick={() => setTimer(3600)}>1 Hour</div>
+        </div>
+      </div>
+      <Button className="new-game__btn" onClick={onCreateGame} disabled={cannotCreateGame}>
+        Create New Game
+      </Button>
+    </div>
+  );
+};
 
 const PreGame = ({ initPlayerName, onGameJoined }) => {
   const [loading, setLoading] = useState(false);
   const [gameId, setGameId] = useState(null);
   const [playerName, setPlayerName] = useState(initPlayerName);
+  const [timer, setTimer] = useState(300);
 
   if (loading) {
     return <Loading/>
@@ -26,7 +40,7 @@ const PreGame = ({ initPlayerName, onGameJoined }) => {
   const onChangeGameId = ({ target }) => setGameId(target.value.trim());
   const onCreateGame = async () => {
     setLoading(true);
-    const gameId = await createGame(playerName, 300);
+    const gameId = await createGame(playerName, timer);
     onGameJoined({ gameId, playerName });
   };
   const cannotCreateGame = !playerName || playerName.length === 0;
@@ -42,7 +56,7 @@ const PreGame = ({ initPlayerName, onGameJoined }) => {
     <div className="pre-game">
       <PlayerNameInput {...{ playerName, onChangePlayerName }} />
       <hr className="pre-game__divider"/>
-      <NewGame {...{ onCreateGame, cannotCreateGame }} />
+      <NewGame {...{ onCreateGame, cannotCreateGame, timer, setTimer }} />
       <hr className="pre-game__divider"/>
       <JoinGameInput {...{ gameId, onChangeGameId, onJoinGame, cannotJoinGame }} />
     </div>