fix login form

src/components/CardFlash/provider.tsx

@@ -1,9 +1,9 @@
 import {
-  useState,
-  useContext,
   FunctionComponent,
   ReactNode,
   createContext,
+  useContext,
+  useState,
 } from "react";
 import { Card } from "../../models/card";
 import { CardFlashDialog } from "./dialog";
@@ -26,9 +26,10 @@ export interface flashCardOptions {
   duration?: number;
 }
 
-export const CardFlashProvider: FunctionComponent<CardFlashProviderProps> = (
-  props,
-) => {
+export const CardFlashProvider: FunctionComponent<CardFlashProviderProps> = ({
+  duration = 500,
+  ...props
+}) => {
   const [show, setShow] = useState(false);
   const [card, setCard] = useState<Card>();
   const [_, setTimeoutRef] = useState<ReturnType<typeof setInterval>>();
@@ -40,7 +41,7 @@ export const CardFlashProvider: FunctionComponent<CardFlashProviderProps> = (
       prev && clearTimeout(prev);
       return setTimeout(() => {
         setShow(false);
-      }, options?.duration || props.duration);
+      }, options?.duration || duration);
     });
 
     setShow(true);
@@ -58,7 +59,3 @@ export const CardFlashProvider: FunctionComponent<CardFlashProviderProps> = (
     </CardFlashContext.Provider>
   );
 };
-
-CardFlashProvider.defaultProps = {
-  duration: 500,
-};

src/stores/game.ts

@@ -1,18 +1,12 @@
 import create from "zustand";
 import { persist } from "zustand/middleware";
-import {
-  Card,
-  CardSuit,
-  CardSuits,
-  CardValue,
-  CardValues,
-} from "../models/card";
+import * as GameAPI from "../api/endpoints/game";
+import { Card, CardSuits, CardValues } from "../models/card";
 import { Chug } from "../models/chug";
 import { Player } from "../models/player";
 import { GenerateShuffleIndices } from "../utilities/deck";
-import useGamesPlayed from "./gamesPlayed";
-import * as GameAPI from "../api/endpoints/game";
 import { mapToRemote } from "./game.mapper";
+import useGamesPlayed from "./gamesPlayed";
 import useSettings from "./settings";
 /*
     Game state is only for essential game data that is required to resume a game.
@@ -184,4 +178,4 @@ const useGame = create<GameState & GameActions>()(
 
 export default useGame;
 export { initialState };
-export type { GameState, GameActions };
+export type { GameActions, GameState };

src/views/Login/components/ContinueGameDialog.tsx → src/views/Login/Continue/components/ContinueGameDialog.tsx

@@ -1,8 +1,8 @@
 import { DialogProps } from "@mui/material";
 import { FunctionComponent } from "react";
-import { IGameState } from "../../../api/endpoints/game";
-import ConfirmDialog from "../../../components/ConfirmDialog";
-import { datetimeToddmmHHMMSS } from "../../../utilities/time";
+import { IGameState } from "../../../../api/endpoints/game";
+import ConfirmDialog from "../../../../components/ConfirmDialog";
+import { datetimeToddmmHHMMSS } from "../../../../utilities/time";
 
 interface ContinueGameDialogProps extends DialogProps {
   game: IGameState;

src/views/Login/Continue/index.tsx

@@ -20,8 +20,7 @@ import { Player } from "../../../models/player";
 import useGame from "../../../stores/game";
 import { mapToLocal } from "../../../stores/game.mapper";
 import { datetimeToddmmHHMMSS } from "../../../utilities/time";
-import ContinueGameDialog from "../components/ContinueGameDialog";
-import PlayerItem from "../components/PlayerItem";
+import ContinueGameDialog from "./components/ContinueGameDialog";
 
 const ContinueGameView: FunctionComponent = () => {
   const theme = useTheme();
@@ -109,15 +108,15 @@ const ContinueGameView: FunctionComponent = () => {
           </CardContent>
 
           <CardContent>
-            <PlayerItem
+            {/* <PlayerItem
               onReady={async (p) => {
                 setPlayer(p);
               }}
               onRemove={() => {
                 setPlayer(null);
                 setResumableGames([]);
               }}
-            />
+            /> */}
           </CardContent>
 
           <Conditional value={player !== null}>

src/views/Login/New/components/Form.tsx

@@ -0,0 +1,124 @@
+import {
+  Box,
+  Button,
+  Divider,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { FunctionComponent } from "react";
+import { IoInformationCircleOutline, IoPlay } from "react-icons/io5";
+import { useSounds } from "../../../../hooks/sounds";
+import useGame from "../../../../stores/game";
+import { useNewGame } from "../contexts/newGame";
+import GameModeSelector from "./GameModeSelector";
+import NumberOfPlayersSelector from "./NumberOfPlayersSelector";
+import PlayerList from "./PlayerList";
+
+const MIN_PLAYERS = 2;
+const MAX_PLAYERS = 6;
+const SIP_IN_A_BEER = 14;
+const NUMBER_OF_ROUNDS = 13;
+
+interface NewGameFormProps {}
+
+const NewGameForm: FunctionComponent<NewGameFormProps> = () => {
+  const { play, stopAll } = useSounds();
+
+  const StartGame = useGame((state) => state.Start);
+
+  const newGame = useNewGame();
+
+  const startGame = () => {
+    StartGame(newGame.players, {
+      offline: newGame.offline,
+      numberOfRounds: NUMBER_OF_ROUNDS,
+      sipsInABeer: SIP_IN_A_BEER,
+    });
+
+    stopAll();
+    play("baladada");
+  };
+
+  const changeGameMode = (offline: boolean) => {
+    play("click");
+
+    newGame.setOffline(offline);
+  };
+
+  const changeNumberOfPlayers = (value: number) => {
+    play("click");
+
+    newGame.setNumberOfPlayers(value);
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={1}>
+        <Tooltip
+          title="Offline games will not be visible on the website and stats will not be collected."
+          placement="right"
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 1,
+              width: "fit-content",
+            }}
+          >
+            <Typography variant="body1">Game mode</Typography>
+            <IoInformationCircleOutline />
+          </Box>
+        </Tooltip>
+
+        <GameModeSelector value={newGame.offline} onChange={changeGameMode} />
+      </Stack>
+
+      <Stack spacing={1}>
+        <Typography variant="body1">Number of players</Typography>
+
+        <NumberOfPlayersSelector
+          min={MIN_PLAYERS}
+          max={MAX_PLAYERS}
+          value={newGame.numberOfPlayers}
+          onChange={changeNumberOfPlayers}
+        />
+      </Stack>
+
+      <Divider />
+
+      <Stack spacing={1}>
+        <Typography variant="body1" sx={{}}>
+          {newGame.offline ? "Player names" : "Player login"}
+        </Typography>
+
+        <PlayerList />
+      </Stack>
+      <Divider />
+
+      <Button
+        variant="contained"
+        color="primary"
+        size="large"
+        onClick={startGame}
+        endIcon={<IoPlay size={24} />}
+        disabled={!newGame.ready}
+      >
+        Start game
+      </Button>
+
+      {/* <Button
+      component={NavLink}
+      variant="outlined"
+      size="large"
+      to="/login/continue"
+    >
+      Continue a game
+    </Button> */}
+    </Stack>
+  );
+};
+
+export default NewGameForm;

src/views/Login/components/GameModeSelector.tsx → src/views/Login/New/components/GameModeSelector.tsx

@@ -1,15 +1,13 @@
 import { ToggleButton, ToggleButtonGroup } from "@mui/material";
 import { FunctionComponent, useState } from "react";
 
-type GameMode = "normal" | "time-attack" | "offline";
-
 interface GameModeSelectorProps {
-  value: GameMode;
-  onChange: (value: GameMode) => void;
+  value: boolean;
+  onChange: (value: boolean) => void;
 }
 
 const GameModeSelector: FunctionComponent<GameModeSelectorProps> = (props) => {
-  const [value, setValue] = useState<GameMode>(props.value);
+  const [value, setValue] = useState<boolean>(props.value);
 
   return (
     <ToggleButtonGroup
@@ -22,12 +20,11 @@ const GameModeSelector: FunctionComponent<GameModeSelectorProps> = (props) => {
       }}
       size="small"
     >
-      <ToggleButton value="normal">Normal</ToggleButton>
-      {/* <ToggleButton value="time-attack">Time Attack</ToggleButton> */}
-      <ToggleButton value="offline">Offline</ToggleButton>
+      <ToggleButton value={false}>Normal</ToggleButton>
+      <ToggleButton value={true}>Offline</ToggleButton>
     </ToggleButtonGroup>
   );
 };
 
 export default GameModeSelector;
-export type { GameMode, GameModeSelectorProps };
+export type { GameModeSelectorProps };