feat: Highlight winner cards

Fixes #18

Author: devklick

src/components/Card/Card.module.scss

@@ -20,6 +20,18 @@
     justify-content: center;
     container-type: inline-size;
 }
+
+.CardHighlight {
+    // border: 5px solid white;
+    -webkit-animation: glow 1s ease-in-out infinite alternate;
+    -moz-animation: glow 1s ease-in-out infinite alternate;
+    animation: glow 1s ease-in-out infinite alternate;
+}
+
+.CardDim {
+    opacity: 0.7;
+}
+
 .CardContent {
     text-align: center;
     overflow-wrap: break-word;
@@ -40,3 +52,14 @@
         transform: translateX(0);
     }
 }
+
+@keyframes glow {
+    from {
+        box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #84b893, 0 0 8px #84b893, 0 0 10px #84b893, 0 0 12px #84b893,
+            0 0 14px #84b893;
+    }
+    to {
+        box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #1e5e31, 0 0 8px #1e5e31, 0 0 10px #1e5e31, 0 0 12px #1e5e31,
+            0 0 14px #1e5e31;
+    }
+}

src/components/Card/Card.tsx

@@ -6,9 +6,12 @@ import {
 
 import styles from "./Card.module.scss";
 
-export interface CardProps extends CardObject {}
+export type CardEffect = "highlight" | "dim" | "none";
+export interface CardProps extends CardObject {
+  effect: CardEffect;
+}
 
-function Card({ rank, suit, facing }: CardProps) {
+function Card({ rank, suit, facing, effect }: CardProps) {
   const suitData = CardSuitMetadataMap[suit];
   const rankData = CardRankMetadataMap[rank];
 
@@ -20,9 +23,15 @@ function Card({ rank, suit, facing }: CardProps) {
     content = ["?"];
   }
 
+  const cardClasses = [
+    styles.Card,
+    effect === "dim" && styles.CardDim,
+    effect === "highlight" && styles.CardHighlight,
+  ].join(" ");
+
   return (
     <div className={styles.CardWrapper}>
-      <div className={styles.Card} style={{ backgroundColor: color }}>
+      <div className={cardClasses} style={{ backgroundColor: color }}>
         <div className={styles.CardContent}>{content}</div>
       </div>
     </div>

src/components/CardRow/CardRow.tsx

@@ -4,27 +4,35 @@ import { CardObject } from "../Card";
 
 import styles from "./CardRow.module.scss";
 import React from "react";
+import { CardEffect } from "../Card/Card";
 
 export interface CardRowProps {
   cardOwner: Participant;
   cards: CardObject[];
+  effect: CardEffect;
   children?: React.ReactNode;
 }
 
-const CardRow = (props: CardRowProps) => {
+const CardRow = ({ cardOwner, cards, effect, children }: CardRowProps) => {
   return (
     <div className={styles.CardRow}>
       <div className={styles.CardOwner}>
-        <span>{props.cardOwner} Cards</span>
+        <span>{cardOwner} Cards</span>
         {/* 
           Pretty hacky, but the settings icon is passed 
           into this row as a child element
         */}
-        {props.children}
+        {children}
       </div>
       <div className={styles.Cards}>
-        {props.cards.map(({ facing, rank, suit }, i) => (
-          <Card facing={facing} rank={rank} suit={suit} key={i}></Card>
+        {cards.map(({ facing, rank, suit }, i) => (
+          <Card
+            facing={facing}
+            rank={rank}
+            suit={suit}
+            key={i}
+            effect={effect}
+          />
         ))}
       </div>
     </div>

src/components/Table/Table.tsx

@@ -2,12 +2,13 @@ import { useState } from "react";
 import CardRow from "../CardRow";
 import InfoHud from "../InfoHud";
 import YesNoPopUp from "../YesNoPopUp";
-import { useGame } from ".";
+import { Participant, useGame } from ".";
 import { ScoreBoardRow } from "../ScoreBoard";
 import { useGameSettingsStore } from "../../stores/gameSettingsStore";
 
 import styles from "./Table.module.scss";
 import SettingsButton from "../SettingsButton";
+import { CardEffect } from "../Card/Card";
 
 const Table = ({ hide = false }: { hide?: boolean }) => {
   const game = useGame();
@@ -93,14 +94,27 @@ const Table = ({ hide = false }: { hide?: boolean }) => {
     ];
   }
 
+  function getCardEffect(cardOwner: Participant): CardEffect {
+    if (game.winner === "none") return "none";
+    return cardOwner === game.winner ? "highlight" : "dim";
+  }
+
   return (
     <div className={styles.Table} style={{ display: hide ? "none" : "" }}>
       {showHitWarning && getHitWarning()}
       {showStickWarning && getStickWarning()}
-      <CardRow cardOwner={"Dealer"} cards={game.dealer.cards}>
+      <CardRow
+        cardOwner={"Dealer"}
+        cards={game.dealer.cards}
+        effect={getCardEffect("Dealer")}
+      >
         <SettingsButton />
       </CardRow>
-      <CardRow cardOwner={"Player"} cards={game.player.cards} />
+      <CardRow
+        cardOwner={"Player"}
+        cards={game.player.cards}
+        effect={getCardEffect("Player")}
+      />
       <InfoHud
         gameState={game.state}
         outcome={game.outcome}

src/components/Table/hooks/useGame.tsx

@@ -13,10 +13,19 @@ export type GameState =
   | "GameOver";
 
 export type Participant = "Player" | "Dealer";
+export type Winner = Participant | "none";
+export type WinType =
+  | "opponent-bust"
+  | "five-card-trick"
+  | "high-score"
+  | "most-cards"
+  | "high-card"
+  | "draw";
 
 export function useGame() {
   const [state, setState] = useState<GameState>("WaitingForStart");
   const [outcome, setOutcome] = useState<string | null>(null);
+  const [winner, setWinner] = useState<Winner>("none");
 
   const deck = useDeck();
   const player = useCardPile();
@@ -133,6 +142,7 @@ export function useGame() {
    */
   function setup() {
     setOutcome(null);
+    setWinner("none");
     deck.init();
 
     player.setCards([]);
@@ -196,6 +206,7 @@ export function useGame() {
   function setResult(outcomeText: string, winner?: Participant | null): void {
     setState("GameOver");
     setOutcome(outcomeText);
+    setWinner(winner ?? "none");
 
     winner && stats.updateWinnerStats(winner);
   }
@@ -223,6 +234,11 @@ export function useGame() {
      * Statistics about the games played during this session.
      */
     stats,
+
+    /**
+     * The participant who won the round, if any.
+     */
+    winner,
     setup,
     startDealerRound,
     getParticipantScore,