card flash fixes

src/components/CardFlash/provider.tsx

@@ -10,11 +10,12 @@ import { CardFlashDialog } from "./dialog";
 
 const CardFlashContext = createContext({
   show: false,
-  flashCard: (card: Card, options?: flashCardOptions) => {},
+  flash: (card: Card, options?: flashCardOptions) => {},
+  hide: () => {},
 });
 
 export const useCardFlash = () => {
-  return useContext(CardFlashContext).flashCard;
+  return useContext(CardFlashContext);
 };
 
 export interface CardFlashProviderProps {
@@ -34,14 +35,9 @@ export const CardFlashProvider: FunctionComponent<CardFlashProviderProps> = ({
   const [card, setCard] = useState<Card>();
   const [_, setTimeoutRef] = useState<ReturnType<typeof setInterval>>();
 
-  const flashCard = (card: Card, options?: flashCardOptions) => {
+  const flash = (card: Card, options?: flashCardOptions) => {
     setCard(card);
 
-    if (card.value === 14) {
-      setShow(false);
-      return;
-    }
-
     setTimeoutRef((prev) => {
       prev && clearTimeout(prev);
       return setTimeout(() => {
@@ -52,11 +48,16 @@ export const CardFlashProvider: FunctionComponent<CardFlashProviderProps> = ({
     setShow(true);
   };
 
+  const hide = () => {
+    setShow(false);
+  };
+
   return (
     <CardFlashContext.Provider
       value={{
         show,
-        flashCard,
+        flash,
+        hide,
       }}
     >
       {card && <CardFlashDialog open={show} card={card} />}

src/stores/game.ts

@@ -50,7 +50,7 @@ interface GameActions {
   StartChug: () => number;
   StopChug: () => number;
 
-  DrawCard: () => Card;
+  DrawCard: () => [Card, number];
 
   Exit: (options?: { dnf: boolean; description?: string }) => void;
 
@@ -218,7 +218,8 @@ const useGame = create<GameState & GameActions>()(
           throw new Error("Cannot draw a new card while chugging");
         }
 
-        const cardsLeft = (CardValues.length - 1) * state.players.length;
+        const cardsLeft: number =
+          CardValues.length * state.players.length - state.draws.length;
         if (cardsLeft <= 0) {
           throw new Error("Cannot draw from an empty deck!");
         }
@@ -254,7 +255,7 @@ const useGame = create<GameState & GameActions>()(
         set(update);
 
         if (state.offline) {
-          return card;
+          return [card, cardsLeft - 1];
         }
 
         try {
@@ -268,7 +269,7 @@ const useGame = create<GameState & GameActions>()(
         } catch (error) {
           console.error("[Game]", "Failed to update game state", error);
         } finally {
-          return card;
+          return [card, cardsLeft - 1];
         }
       },
 

src/views/Game/components/CardInventory.tsx

@@ -1,5 +1,6 @@
 import { Box, Card, darken, Stack, Typography } from "@mui/material";
 import { FunctionComponent, memo } from "react";
+import { useCardFlash } from "../../../components/CardFlash";
 import useGame from "../../../stores/game";
 import { useGameMetrics } from "../../../stores/metrics";
 
@@ -12,6 +13,8 @@ const CardInventory: FunctionComponent<CardInventoryProps> = () => {
     DrawCard: state.DrawCard,
   }));
 
+  const cardFlasher = useCardFlash();
+
   const gameMetrics = useGameMetrics();
 
   const cardsLeftOfValue = (value: number) => {
@@ -21,6 +24,24 @@ const CardInventory: FunctionComponent<CardInventoryProps> = () => {
     );
   };
 
+  const drawCard = () => {
+    const [card, cardsLeft] = game.DrawCard();
+
+    // If chug card, don't flash it
+    if (card.value === 14) {
+      cardFlasher.hide();
+      return;
+    }
+
+    // If last card, don't flash it
+    if (cardsLeft === 0) {
+      cardFlasher.hide();
+      return;
+    }
+
+    cardFlasher.flash(card);
+  };
+
   return (
     <Stack
       direction="row"
@@ -37,7 +58,7 @@ const CardInventory: FunctionComponent<CardInventoryProps> = () => {
             key={i}
             kind={valueToSymbol(i + 2)}
             value={empty ? 0 : cardsLeftOfValue(i + 2)}
-            onClick={game.DrawCard}
+            onClick={drawCard}
           />
         );
       })}

src/views/Game/index.tsx

@@ -19,7 +19,7 @@ import GameTable from "./components/Table";
 const GameView: FunctionComponent = () => {
   const [showTerminal, setShowTerminal] = useState<boolean>(false);
 
-  const flashCard = useCardFlash();
+  const cardFlasher = useCardFlash();
 
   const game = useGame((state) => ({
     DrawCard: state.DrawCard,
@@ -139,9 +139,21 @@ const GameView: FunctionComponent = () => {
   };
 
   const drawCard = () => {
-    const card = game.DrawCard();
+    const [card, cardsLeft] = game.DrawCard();
 
-    flashCard(card);
+    // If chug card, don't flash it
+    if (card.value === 14) {
+      cardFlasher.hide();
+      return;
+    }
+
+    // If last card, don't flash it
+    if (cardsLeft === 0) {
+      cardFlasher.hide();
+      return;
+    }
+
+    cardFlasher.flash(card);
   };
 
   return (