add DNF dialog

src/stores/game.mapper.ts

@@ -19,10 +19,8 @@ const mapToRemote = (state: GameState): Game => {
 
     cards: state.draws,
 
-    // TODO: Implement
-
-    dnf_player_ids: [],
-    dnf: false,
+    dnf_player_ids: state.dnf_player_ids,
+    dnf: false, // TODO: Implement
   };
 };
 
@@ -38,7 +36,7 @@ const mapToLocal = (game: Game): GameState => {
     gameStartDateString: game.start_datetime,
     gameStartTimestamp: Date.parse(game.start_datetime),
     turnStartTimestamp: 0, // TODO: Implement
-    gameEndTimestamp: 0,
+    gameEndTimestamp: 0, // TODO: Implement
 
     players: game.player_names.map((name, index) => ({
       id: game.player_ids[index],
@@ -48,6 +46,8 @@ const mapToLocal = (game: Game): GameState => {
     shuffleIndices: game.shuffle_indices,
 
     draws: game.cards,
+
+    dnf_player_ids: game.dnf_player_ids,
   };
 };
 

src/stores/game.ts

@@ -30,6 +30,8 @@ interface GameState {
 
   players: Player[];
 
+  dnf_player_ids: number[];
+
   draws: Card[];
 }
 
@@ -43,6 +45,8 @@ interface GameActions {
     },
   ) => Promise<void>;
 
+  SetPlayerDNF: (playerId: number, dnf: boolean) => void;
+
   StartChug: () => number;
   StopChug: () => number;
 
@@ -71,6 +75,8 @@ const initialState: GameState = {
 
   players: [],
 
+  dnf_player_ids: [],
+
   draws: [],
 };
 
@@ -146,6 +152,56 @@ const useGame = create<GameState & GameActions>()(
         useGamesPlayed.getState().incrementStarted();
       },
 
+      SetPlayerDNF: (playerId: 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");
+        }
+
+        if (dnf && state.dnf_player_ids.includes(playerId)) {
+          return;
+        }
+
+        let new_dnfs = [...state.dnf_player_ids];
+        if (dnf) {
+          if (state.dnf_player_ids.includes(playerId)) {
+            return;
+          }
+
+          new_dnfs.push(playerId);
+        }
+
+        if (!dnf) {
+          if (!state.dnf_player_ids.includes(playerId)) {
+            return;
+          }
+
+          new_dnfs = state.dnf_player_ids.filter((id) => id !== playerId);
+        }
+
+        set({
+          dnf_player_ids: new_dnfs,
+        });
+
+        try {
+          GameAPI.postUpdate(
+            state.token as string,
+            mapToRemote({
+              ...state,
+              dnf_player_ids: new_dnfs,
+            }),
+          );
+        } catch (error) {
+          console.error("[Game]", "Failed to update game state", error);
+        }
+      },
+
       DrawCard: () => {
         console.debug("[Game]", "Drawing card");
 

src/views/Game/components/DNFDialog.tsx

@@ -19,11 +19,28 @@ import useGame from "../../../stores/game";
 interface DNFDialogProps extends DialogProps {}
 
 const DNFDialog: FunctionComponent<DNFDialogProps> = (props) => {
-  const players = useGame((state) => state.players);
+  const { players, dnf_player_ids, SetPlayerDNF } = useGame((state) => ({
+    players: state.players,
+    dnf_player_ids: state.dnf_player_ids,
+    SetPlayerDNF: state.SetPlayerDNF,
+  }));
+
   const sound = useSounds();
 
   const toggle = (index: number) => {
-    sound.play("moops");
+    sound.play("click");
+
+    const player = players[index];
+
+    if (player.id === undefined) {
+      return;
+    }
+
+    const isDNF = dnf_player_ids.includes(player.id);
+
+    console.log("Setting DNF for player", player.id, !isDNF);
+
+    SetPlayerDNF(player.id, !isDNF);
   };
 
   return (
@@ -84,7 +101,7 @@ const DNFDialog: FunctionComponent<DNFDialogProps> = (props) => {
                   {player.username}
                 </Typography>
 
-                <PlayerCross />
+                {dnf_player_ids.includes(player.id || 0) && <PlayerCross />}
               </Box>
             );
           })}

src/views/Game/components/Header.tsx

@@ -45,6 +45,7 @@ const Header: FunctionComponent = () => {
     turnStartTimestamp: state.turnStartTimestamp,
     numberOfRounds: state.numberOfRounds,
     ExitGame: state.Exit,
+    offline: state.offline,
   }));
 
   const gameMetrics = useGameMetrics();
@@ -213,19 +214,24 @@ const Header: FunctionComponent = () => {
             },
           }}
         >
-          {/* <Tooltip title="Mark players as 'Did not finish'" placement="bottom">
-            <IconButton
-              sx={{
-                fontSize: 12,
-                width: 42,
-                height: 42,
-                color: "primary.contrastText",
-              }}
-              onClick={() => setDNFDialogOpen(true)}
+          {!game.offline && (
+            <Tooltip
+              title="Mark players as 'Did not finish'"
+              placement="bottom"
             >
-              DNF
-            </IconButton>
-          </Tooltip> */}
+              <IconButton
+                sx={{
+                  fontSize: 12,
+                  width: 42,
+                  height: 42,
+                  color: "primary.contrastText",
+                }}
+                onClick={() => setDNFDialogOpen(true)}
+              >
+                DNF
+              </IconButton>
+            </Tooltip>
+          )}
 
           <Tooltip
             title={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}

src/views/Game/components/PlayerItem.tsx

@@ -18,6 +18,7 @@ import {
 } from "react";
 import Bottle from "../../../components/Bottle";
 import Bubbles from "../../../components/Bubbles";
+import Conditional from "../../../components/Conditional";
 import { Crown, Jester } from "../../../components/Hats";
 import { Player } from "../../../models/player";
 import useGame from "../../../stores/game";
@@ -42,8 +43,14 @@ const PlayerItem: FunctionComponent<PlayerItemProps> = (props) => {
   const playerMetrics = usePlayerMetricsByIndex(props.index);
   const gameMetrics = useGameMetrics();
 
+  const game = useGame((state) => ({
+    dnf_player_ids: state.dnf_player_ids,
+  }));
+
   const isFirstRound = gameMetrics.currentRound === 1;
 
+  const isDNF = game.dnf_player_ids.includes(props.player.id || -1);
+
   const settings = useSettings((state) => ({
     simpleCardsMode: state.simpleCardsMode,
     SetSimpleCardsMode: state.SetSimpleCardsMode,
@@ -88,6 +95,9 @@ const PlayerItem: FunctionComponent<PlayerItemProps> = (props) => {
         transform: props.active ? "translateY(-32px)" : "none",
         transitionProperty: "transform",
         transitionDuration: "200ms",
+
+        filter: isDNF ? "grayscale(100%)" : "none",
+        opacity: isDNF ? 0.75 : 1,
       }}
     >
       <Stack
@@ -122,6 +132,22 @@ const PlayerItem: FunctionComponent<PlayerItemProps> = (props) => {
         }}
         onClick={() => settings.SetSimpleCardsMode(!settings.simpleCardsMode)}
       >
+        <Conditional value={isDNF}>
+          <Box
+            sx={{
+              position: "absolute",
+              background: "url(/skull.svg)",
+              backgroundSize: "40%",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              width: "100%",
+              height: "100%",
+              opacity: 0.5,
+              zIndex: 3,
+            }}
+          />
+        </Conditional>
+
         <Box
           sx={{
             position: "fixed",