fix game exit and finish

src/api/websocket/index.tsx

@@ -34,7 +34,6 @@ const useWebSocket = () => {
 
   const send = (data: any) => {
     if (socket) {
-      console.log("sending", data);
       socket.send(JSON.stringify(data));
     }
   };

src/stores/game.mapper.ts

@@ -1,8 +1,18 @@
 import { Game } from "../api/models/game";
-import { CardValues } from "../models/card";
 import { GameState } from "./game";
 
-const mapToRemote = (state: GameState): Game => {
+const mapToRemote = (
+  state: GameState,
+  options: {
+    dnf: boolean;
+    has_ended: boolean;
+    description?: string;
+  } = {
+    dnf: false,
+    has_ended: false,
+    description: undefined,
+  },
+): Game => {
   return {
     id: state.id as number,
     token: state.token as string,
@@ -14,13 +24,14 @@ const mapToRemote = (state: GameState): Game => {
 
     official: !state.offline,
     shuffle_indices: state.shuffleIndices,
-    has_ended:
-      state.draws.length === (CardValues.length - 1) * state.players.length,
+    has_ended: options.has_ended,
 
     cards: state.draws,
 
     dnf_player_ids: playerIndexesToIds(state, state.dnf_player_indexes),
-    dnf: false, // TODO: Implement
+    dnf: options.dnf,
+
+    description: state.description,
   };
 };
 

src/stores/game.ts

@@ -33,6 +33,9 @@ interface GameState {
   dnf_player_indexes: number[];
 
   draws: Card[];
+
+  imageBlob?: Blob;
+  description?: string;
 }
 
 interface GameActions {
@@ -47,12 +50,15 @@ interface GameActions {
 
   SetPlayerDNF: (playerId: number, dnf: boolean) => void;
 
+  SetImageBlob: (blob: Blob | undefined) => void;
+  SetDescription: (description: string | undefined) => void;
+
   StartChug: () => number;
   StopChug: () => number;
 
   DrawCard: () => Card;
 
-  Exit: (dnf?: boolean) => void;
+  Exit: (options?: { dnf: boolean; description?: string }) => void;
 
   Resume: (state: GameState) => void;
 }
@@ -78,6 +84,9 @@ const initialState: GameState = {
   dnf_player_indexes: [],
 
   draws: [],
+
+  description: undefined,
+  imageBlob: undefined,
 };
 
 const useGame = create<GameState & GameActions>()(
@@ -153,6 +162,8 @@ const useGame = create<GameState & GameActions>()(
       },
 
       SetPlayerDNF: (playerIndex: number, dnf: boolean) => {
+        console.debug("[Game]", `Setting player ${playerIndex} DNF to ${dnf}`);
+
         const state = useGame.getState();
 
         let player;
@@ -202,6 +213,22 @@ const useGame = create<GameState & GameActions>()(
         }
       },
 
+      SetImageBlob: (blob: Blob | undefined) => {
+        console.debug("[Game]", "Setting image blob");
+
+        set({
+          imageBlob: blob,
+        });
+      },
+
+      SetDescription: (description: string | undefined) => {
+        console.debug("[Game]", "Setting game description");
+
+        set({
+          description: description,
+        });
+      },
+
       DrawCard: () => {
         console.debug("[Game]", "Drawing card");
 
@@ -231,15 +258,15 @@ const useGame = create<GameState & GameActions>()(
 
         const draws = [...state.draws, card];
 
-        const done =
-          draws.length === (CardValues.length - 1) * state.players.length;
+        const done = draws.length === CardValues.length * state.players.length;
 
         const update: Partial<GameState> = {
           draws: draws,
         };
 
         if (done) {
-          useGamesPlayed.getState().incrementCompleted();
+          console.debug("[Game]", "Last card drawn");
+
           update.gameEndTimestamp = Date.now();
         }
 
@@ -360,10 +387,35 @@ const useGame = create<GameState & GameActions>()(
         }
       },
 
-      Exit: (dnf = false) => {
+      Exit: (
+        options: {
+          dnf: boolean;
+          description?: string;
+        } = {
+          dnf: false,
+          description: undefined,
+        },
+      ) => {
         console.debug("[Game]", "Exiting game");
 
-        // TODO: Update game state on server
+        const state = useGame.getState();
+
+        if (!state.offline) {
+          try {
+            GameAPI.postUpdate(
+              state.token as string,
+              mapToRemote(state, {
+                dnf: options.dnf,
+                has_ended: true,
+                description: options.description,
+              }),
+            );
+          } catch (error) {
+            console.error("[Game]", "Failed to update game state", error);
+          }
+        }
+
+        useGamesPlayed.getState().incrementCompleted();
 
         set(initialState);
       },

src/views/Game/components/Chart.tsx

@@ -36,8 +36,6 @@ const Chart: FunctionComponent = () => {
       d.data.push(...Array(maxLength - d.data.length).fill(null));
     });
 
-    console.log(data);
-
     return data;
   }, [playerMetrics, settings.themeMode]);
 

src/views/Game/components/DNFDialog.tsx

@@ -32,10 +32,6 @@ const DNFDialog: FunctionComponent<DNFDialogProps> = (props) => {
 
     const isDNF = dnf_player_indexes.includes(index);
 
-    const player = players[index];
-
-    console.log("Setting DNF for player", player.id, !isDNF);
-
     SetPlayerDNF(index, !isDNF);
   };
 

src/views/Game/components/GamFinishedDialog.tsx

@@ -24,10 +24,19 @@ const GameFinishedDialog: FunctionComponent<GameFinishedDialogProps> = (
 ) => {
   const theme = useTheme();
 
+  const [description, setMessage] = useState("");
+
   const game = useGame((state) => ({
     Exit: state.Exit,
   }));
 
+  const saveAndExit = () => {
+    game.Exit({
+      dnf: false,
+      description,
+    });
+  };
+
   return (
     <>
       <Dialog
@@ -39,7 +48,7 @@ const GameFinishedDialog: FunctionComponent<GameFinishedDialogProps> = (
         }}
       >
         <DialogTitle textAlign="center" variant="h4">
-          Game finished!
+          Game finished
         </DialogTitle>
 
         <DialogContent
@@ -73,6 +82,8 @@ const GameFinishedDialog: FunctionComponent<GameFinishedDialogProps> = (
               }}
               placeholder="Write a description"
               maxLength={1000}
+              value={description}
+              onChange={(e) => setMessage(e.target.value)}
             />
           </Stack>
         </DialogContent>
@@ -86,7 +97,7 @@ const GameFinishedDialog: FunctionComponent<GameFinishedDialogProps> = (
             fullWidth
             variant="contained"
             size="large"
-            onClick={() => game.Exit()}
+            onClick={saveAndExit}
           >
             Save and exit
           </Button>
@@ -148,10 +159,6 @@ const Camera: FunctionComponent = () => {
     setSelectedDevice(cameraDevices[nextIndex]);
   };
 
-  // if (!cameraDevices || cameraDevices.length === 0 || !!cameraError) {
-  //   return null;
-  // }
-
   return (
     <Stack spacing={1} alignItems={"center"}>
       <Box

src/views/Game/components/Header.tsx

@@ -63,8 +63,11 @@ const Header: FunctionComponent = () => {
     setExitGameDialogOpen(false);
 
     if (e.ok) {
-      game.ExitGame(true); // DNF
-      navigate("/login"); // Should be handled by protected route
+      game.ExitGame({
+        dnf: true,
+      });
+
+      navigate("/login");
     }
   };