feat: Add more logic to card game and tests

apps/game/package.json

@@ -7,9 +7,13 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   },
   "dependencies": {
+    "@heroui/react": "^2.8.2",
     "@redux-devtools/extension": "^3.3.0",
     "@tailwindcss/vite": "^4.1.14",
     "@xstate/react": "^6.0.0",
@@ -25,18 +29,25 @@
   "devDependencies": {
     "@eslint/js": "^9.36.0",
     "@svgr/plugin-svgo": "^8.1.0",
+    "@statelyai/inspect": "^0.4.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.4",
-    "babel-plugin-react-compiler": "^19.1.0-rc.3",
+    "@vitest/ui": "^4.0.3",
+    "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
+    "jsdom": "^27.0.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
     "vite": "npm:[email protected]",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.3"
   }
 }

apps/game/src/App.tsx

@@ -1,18 +1,21 @@
 import { ScreenRenderer } from '@/components';
 import { Game } from './components/Game';
 import { GameProvider } from './providers/GameProvider';
+import { HeroUIProvider } from '@heroui/react';
 
 /**
  * This is the main container of the application.
  */
 function App() {
   return (
-    <GameProvider>
-      <div className="h-[100vh] w-[100vw] bg-black flex items-center justify-center">
-        <Game />
-        <ScreenRenderer />
-      </div>
-    </GameProvider>
+    <HeroUIProvider>
+      <GameProvider>
+        <div className="h-[100vh] w-[100vw] bg-black flex items-center justify-center">
+          <Game />
+          <ScreenRenderer />
+        </div>
+      </GameProvider>
+    </HeroUIProvider>
   );
 }
 

apps/game/src/components/Card/index.tsx

@@ -32,22 +32,18 @@ export const Card: FC<CardProps> = ({
         y: currentPosition.y,
         width: isFrontVisible ? '7.8125rem' : '5.375rem',
         height: isFrontVisible ? '10.9375rem' : '7.5rem',
+        maxWidth: isFrontVisible ? '125px' : '86px',
+        maxHeight: isFrontVisible ? '175px' : '120px',
       }}
-      transition={{
-        duration: 0.7,
-        ease: 'easeInOut',
-      }}
+      transition={{ duration: 0.7, ease: 'easeInOut' }}
       style={{ perspective: '1000px' }}
     >
       <motion.div
         className="relative w-full h-full [transform-style:preserve-3d] overflow-visible"
         animate={{
           rotateY: isFrontVisible ? 180 : 0,
         }}
-        transition={{
-          duration: 0.7,
-          ease: 'easeInOut',
-        }}
+        transition={{ duration: 0.7, ease: 'easeInOut' }}
       >
         {/* Back face */}
         <div className="absolute w-full h-full backface-hidden overflow-visible">

apps/game/src/components/DeckPile/index.tsx

@@ -2,57 +2,58 @@
  * DeckPile - Displays a deck of cards with card back and counter
  */
 
+import { Tooltip } from '@heroui/tooltip';
 import { type FC } from 'react';
-import type { DeckPileProps } from './types';
+import { CARD_BACK_IMAGE } from '../../config/game-config';
 import { Card } from '../Card';
-import { CARD_BACK_IMAGE } from '../../config/gameConfig';
+import type { DeckPileProps } from './types';
 
-export const DeckPile: FC<DeckPileProps> = ({ cardCount, owner, onClick }) => {
+export const DeckPile: FC<DeckPileProps> = ({
+  cardCount,
+  owner,
+  onClick,
+  showTooltip = false,
+  tooltipContent,
+}) => {
   const isPlayer = owner === 'player';
 
   return (
-    <div className="flex flex-col items-center gap-2">
-      {/* Counter for CPU (top) */}
-      {!isPlayer && (
-        <div className="text-white text-sm font-medium">
-          {cardCount} Cards left
-        </div>
-      )}
+    <Tooltip content={tooltipContent} isOpen={showTooltip}>
+      <div className="flex flex-col items-center gap-2">
+        {/* Counter for CPU (top) */}
+        {!isPlayer && <div className="text-white text-sm font-medium">{cardCount} Cards left</div>}
 
-      {/* Card stack */}
-      <div
-        className="relative p-2"
-        onClick={cardCount > 0 ? onClick : undefined}
-        role={cardCount > 0 ? 'button' : undefined}
-        tabIndex={cardCount > 0 ? 0 : undefined}
-      >
-        {/* Show stacked effect if cards > 0 */}
-        {cardCount > 0 ? (
-          <div className="relative">
-            {/* Back cards for stacking effect - offset to top-left */}
-            <div className="absolute -translate-x-2 -translate-y-2 pointer-events-none">
+        {/* Card stack */}
+        <div
+          className="relative p-2"
+          onClick={cardCount > 0 ? onClick : undefined}
+          role={cardCount > 0 ? 'button' : undefined}
+          tabIndex={cardCount > 0 ? 0 : undefined}
+        >
+          {/* Show stacked effect if cards > 0 */}
+          {cardCount > 0 ? (
+            <div className="relative">
+              {/* Back cards for stacking effect - offset to top-left */}
+              <div className="absolute -translate-x-2 -translate-y-2 pointer-events-none">
+                <Card cardFrontSrc={CARD_BACK_IMAGE} state="initial" />
+              </div>
+              <div className="absolute -translate-x-1 -translate-y-1 pointer-events-none">
+                <Card cardFrontSrc={CARD_BACK_IMAGE} state="initial" />
+              </div>
+              {/* Top card (main visible card) */}
               <Card cardFrontSrc={CARD_BACK_IMAGE} state="initial" />
             </div>
-            <div className="absolute -translate-x-1 -translate-y-1 pointer-events-none">
-              <Card cardFrontSrc={CARD_BACK_IMAGE} state="initial" />
+          ) : (
+            /* Empty deck indicator */
+            <div className="w-[7.5rem] h-[10.5rem] rounded-lg border-2 border-dashed border-white/30 flex items-center justify-center">
+              <span className="text-white/50 text-xs">Empty</span>
             </div>
-            {/* Top card (main visible card) */}
-            <Card cardFrontSrc={CARD_BACK_IMAGE} state="initial" />
-          </div>
-        ) : (
-          /* Empty deck indicator */
-          <div className="w-[7.5rem] h-[10.5rem] rounded-lg border-2 border-dashed border-white/30 flex items-center justify-center">
-            <span className="text-white/50 text-xs">Empty</span>
-          </div>
-        )}
-      </div>
-
-      {/* Counter for Player (bottom) */}
-      {isPlayer && (
-        <div className="text-white text-sm font-medium">
-          {cardCount} Cards left
+          )}
         </div>
-      )}
-    </div>
+
+        {/* Counter for Player (bottom) */}
+        {isPlayer && <div className="text-white text-sm font-medium">{cardCount} Cards left</div>}
+      </div>
+    </Tooltip>
   );
 };

apps/game/src/components/DeckPile/types.ts

@@ -6,4 +6,6 @@ export interface DeckPileProps {
   cardCount: number;
   owner: 'player' | 'cpu';
   onClick?: () => void;
+  showTooltip?: boolean;
+  tooltipContent?: string;
 }