Enable DNF button for offline games + small changes

beeracademy · Jul 27, 2024 · bc75de5 · bc75de5
1 parent b789feb
commit bc75de5
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 57 deletions.
diff --git a/src/components/CardFlash/dialog.tsx b/src/components/CardFlash/dialog.tsx
@@ -7,22 +7,33 @@ interface CardFlashDialogProps {
   card: Card;
 }
 
-const CardFlashDialog: FunctionComponent<CardFlashDialogProps> = (props) => {
+const CardFlashDialog: FunctionComponent<CardFlashDialogProps> = ({
+  open,
+  card,
+}) => {
   const [cardImageURI, setCardImageURI] = useState<string | undefined>(
     undefined,
   );
 
   useEffect(() => {
-    setCardImageURI(getCardImageURI(props.card));
+    setCardImageURI(getCardImageURI(card));
 
     return () => {
       setCardImageURI(undefined);
     };
-  }, [props.card]);
+  }, [card]);
 
   return (
-    <Dialog open={props.open} hideBackdrop>
-      {cardImageURI && <img src={cardImageURI} height={300} />}
+    <Dialog open={open}>
+      {cardImageURI && (
+        <img
+          src={cardImageURI}
+          height={350}
+          style={{
+            backgroundColor: "#000",
+          }}
+        />
+      )}
     </Dialog>
   );
 };

diff --git a/src/components/CardFlash/provider.tsx b/src/components/CardFlash/provider.tsx
@@ -27,7 +27,7 @@ export interface flashCardOptions {
 }
 
 export const CardFlashProvider: FunctionComponent<CardFlashProviderProps> = ({
-  duration = 500,
+  duration = 750,
   ...props
 }) => {
   const [show, setShow] = useState(false);
@@ -37,6 +37,11 @@ export const CardFlashProvider: FunctionComponent<CardFlashProviderProps> = ({
   const flashCard = (card: Card, options?: flashCardOptions) => {
     setCard(card);
 
+    if (card.value === 14) {
+      setShow(false);
+      return;
+    }
+
     setTimeoutRef((prev) => {
       prev && clearTimeout(prev);
       return setTimeout(() => {

diff --git a/src/stores/game.mapper.ts b/src/stores/game.mapper.ts
@@ -19,11 +19,15 @@ const mapToRemote = (state: GameState): Game => {
 
     cards: state.draws,
 
-    dnf_player_ids: state.dnf_player_ids,
+    dnf_player_ids: playerIndexesToIds(state, state.dnf_player_indexes),
     dnf: false, // TODO: Implement
   };
 };
 
+const playerIndexesToIds = (state: GameState, indexes: number[]): number[] => {
+  return indexes.map((index) => state.players[index].id as number);
+};
+
 const mapToLocal = (game: Game): GameState => {
   return {
     id: game.id,
@@ -47,8 +51,12 @@ const mapToLocal = (game: Game): GameState => {
 
     draws: game.cards,
 
-    dnf_player_ids: game.dnf_player_ids,
+    dnf_player_indexes: playerIdsToIndexes(game, game.dnf_player_ids),
   };
 };
 
+const playerIdsToIndexes = (game: Game, ids: number[]): number[] => {
+  return ids.map((id) => game.player_ids.indexOf(id));
+};
+
 export { mapToLocal, mapToRemote };
diff --git a/src/stores/game.ts b/src/stores/game.ts
@@ -30,7 +30,7 @@ interface GameState {
 
   players: Player[];
 
-  dnf_player_ids: number[];
+  dnf_player_indexes: number[];
 
   draws: Card[];
 }
@@ -75,7 +75,7 @@ const initialState: GameState = {
 
   players: [],
 
-  dnf_player_ids: [],
+  dnf_player_indexes: [],
 
   draws: [],
 };
@@ -152,49 +152,49 @@ const useGame = create<GameState & GameActions>()(
         useGamesPlayed.getState().incrementStarted();
       },
 
-      SetPlayerDNF: (playerId: number, dnf: boolean) => {
+      SetPlayerDNF: (playerIndex: number, dnf: boolean) => {
         const state = useGame.getState();
 
-        if (state.offline) {
-          throw new Error("Cannot set DNF in offline mode");
-        }
-
-        const player = state.players.find((player) => player.id === playerId);
-        if (!player) {
-          throw new Error("Player id not found");
+        let player;
+        try {
+          player = state.players[playerIndex];
+        } catch (error) {
+          throw new Error("Player not found");
         }
 
-        if (dnf && state.dnf_player_ids.includes(playerId)) {
+        if (dnf && state.dnf_player_indexes.includes(playerIndex)) {
           return;
         }
 
-        let new_dnfs = [...state.dnf_player_ids];
+        let new_dnfs = [...state.dnf_player_indexes];
         if (dnf) {
-          if (state.dnf_player_ids.includes(playerId)) {
+          if (state.dnf_player_indexes.includes(playerIndex)) {
             return;
           }
 
-          new_dnfs.push(playerId);
+          new_dnfs.push(playerIndex);
         }
 
         if (!dnf) {
-          if (!state.dnf_player_ids.includes(playerId)) {
+          if (!state.dnf_player_indexes.includes(playerIndex)) {
             return;
           }
 
-          new_dnfs = state.dnf_player_ids.filter((id) => id !== playerId);
+          new_dnfs = state.dnf_player_indexes.filter(
+            (index) => index !== playerIndex,
+          );
         }
 
         set({
-          dnf_player_ids: new_dnfs,
+          dnf_player_indexes: new_dnfs,
         });
 
         try {
           GameAPI.postUpdate(
             state.token as string,
             mapToRemote({
               ...state,
-              dnf_player_ids: new_dnfs,
+              dnf_player_indexes: new_dnfs,
             }),
           );
         } catch (error) {

diff --git a/src/views/Game/components/DNFDialog.tsx b/src/views/Game/components/DNFDialog.tsx
@@ -19,9 +19,9 @@ import useGame from "../../../stores/game";
 interface DNFDialogProps extends DialogProps {}
 
 const DNFDialog: FunctionComponent<DNFDialogProps> = (props) => {
-  const { players, dnf_player_ids, SetPlayerDNF } = useGame((state) => ({
+  const { players, dnf_player_indexes, SetPlayerDNF } = useGame((state) => ({
     players: state.players,
-    dnf_player_ids: state.dnf_player_ids,
+    dnf_player_indexes: state.dnf_player_indexes,
     SetPlayerDNF: state.SetPlayerDNF,
   }));
 
@@ -30,17 +30,13 @@ const DNFDialog: FunctionComponent<DNFDialogProps> = (props) => {
   const toggle = (index: number) => {
     sound.play("click");
 
-    const player = players[index];
-
-    if (player.id === undefined) {
-      return;
-    }
+    const isDNF = dnf_player_indexes.includes(index);
 
-    const isDNF = dnf_player_ids.includes(player.id);
+    const player = players[index];
 
     console.log("Setting DNF for player", player.id, !isDNF);
 
-    SetPlayerDNF(player.id, !isDNF);
+    SetPlayerDNF(index, !isDNF);
   };
 
   return (
@@ -101,7 +97,7 @@ const DNFDialog: FunctionComponent<DNFDialogProps> = (props) => {
                   {player.username}
                 </Typography>
 
-                {dnf_player_ids.includes(player.id || 0) && <PlayerCross />}
+                {dnf_player_indexes.includes(index || 0) && <PlayerCross />}
               </Box>
             );
           })}

diff --git a/src/views/Game/components/Header.tsx b/src/views/Game/components/Header.tsx
@@ -214,24 +214,19 @@ const Header: FunctionComponent = () => {
             },
           }}
         >
-          {!game.offline && (
-            <Tooltip
-              title="Mark players as 'Did not finish'"
-              placement="bottom"
+          <Tooltip title="Mark players as 'Did not finish'" placement="bottom">
+            <IconButton
+              sx={{
+                fontSize: 12,
+                width: 42,
+                height: 42,
+                color: "primary.contrastText",
+              }}
+              onClick={() => setDNFDialogOpen(true)}
             >
-              <IconButton
-                sx={{
-                  fontSize: 12,
-                  width: 42,
-                  height: 42,
-                  color: "primary.contrastText",
-                }}
-                onClick={() => setDNFDialogOpen(true)}
-              >
-                DNF
-              </IconButton>
-            </Tooltip>
-          )}
+              DNF
+            </IconButton>
+          </Tooltip>
 
           <Tooltip
             title={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}

diff --git a/src/views/Game/components/PictureDialog.tsx b/src/views/Game/components/PictureDialog.tsx
@@ -25,7 +25,7 @@ const PictureDialog: FunctionComponent<PictureDialogProps> = ({
 }) => {
   const theme = useTheme();
 
-  const devices = useVideoDevices();
+  const { devices } = useVideoDevices();
   const [selectedDevice, setSelectedDevice] = useState<MediaDeviceInfo | null>(
     null,
   );

diff --git a/src/views/Game/components/PlayerItem.tsx b/src/views/Game/components/PlayerItem.tsx
@@ -44,12 +44,12 @@ const PlayerItem: FunctionComponent<PlayerItemProps> = (props) => {
   const gameMetrics = useGameMetrics();
 
   const game = useGame((state) => ({
-    dnf_player_ids: state.dnf_player_ids,
+    dnf_player_indexes: state.dnf_player_indexes,
   }));
 
   const isFirstRound = gameMetrics.currentRound === 1;
 
-  const isDNF = game.dnf_player_ids.includes(props.player.id || -1);
+  const isDNF = game.dnf_player_indexes.includes(props.index);
 
   const settings = useSettings((state) => ({
     simpleCardsMode: state.simpleCardsMode,

diff --git a/src/views/Login/New/contexts/newGame.tsx b/src/views/Login/New/contexts/newGame.tsx
@@ -77,8 +77,9 @@ export const NewGameProvider: React.FC<NewGameProviderProps> = ({
 
     if (offline) {
       setPlayers([
-        ...players.map((player) => {
+        ...players.map((player, i) => {
           return {
+            id: i,
             username: player.username,
             ready: !!player.username,
           };