Add Assisted Nim Game and update components

src/App.tsx

@@ -30,6 +30,7 @@ import TernarySearchTrickGreenScreen from "./pages/TernarySearchTrickGreenScreen
 import NorthcottsGamePage from "./pages/NorthcottsGamePage";
 import KnightsPuzzlePage from "./pages/KnightsPuzzlePage";
 import NimGamePage from "./pages/NimGamePage";
+import AssistedNimGamePage from "./pages/AssistedNimGamePage";
 import Foundations from "./pages/theme-pages/discrete-math/Foundations";
 import Proofs from "./pages/theme-pages/discrete-math/Proofs";
 import Counting from "./pages/theme-pages/discrete-math/Counting";
@@ -86,6 +87,7 @@ const App = () => (
           <Route path="/northcotts-game" element={<NorthcottsGamePage />} />
           <Route path="/knights-puzzle" element={<KnightsPuzzlePage />} />
           <Route path="/games/nim" element={<NimGamePage />} />
+          <Route path="/games/assisted-nim" element={<AssistedNimGamePage />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />

src/components/AssistedNimGame.tsx

@@ -0,0 +1,397 @@
+import React, { useState, useRef } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Slider } from '@/components/ui/slider';
+import SocialShare from '@/components/SocialShare';
+
+const SKY_BLUE = '#e0f2fe';
+const MAROON = '#800000';
+
+function getRandomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const MIN_HEAPS = 2;
+const MAX_HEAPS = 10;
+const MIN_STONES = 1;
+const MAX_STONES = 31; // Extended to 31 to include power-of-16 box
+
+type Mode = 'random' | 'user';
+
+type Heap = number;
+
+type Player = 0 | 1;
+
+const heapColors = [
+  '#fbbf24', '#60a5fa', '#34d399', '#f472b6', '#f87171', '#a78bfa', '#facc15', '#38bdf8', '#4ade80', '#f472b6',
+  '#f87171', '#a78bfa', '#fbbf24', '#60a5fa', '#34d399', '#f472b6', '#f87171', '#a78bfa', '#facc15', '#38bdf8',
+];
+
+// Function to break down a number into its binary representation (powers of 2)
+const getBinaryRepresentation = (num: number): number[] => {
+  const powers: number[] = [];
+  let remaining = num;
+  let power = 1;
+  
+  while (remaining > 0) {
+    if (remaining & 1) {
+      powers.push(power);
+    }
+    remaining >>= 1;
+    power <<= 1;
+  }
+  
+  return powers;
+};
+
+// Function to calculate which powers of 2 appear an odd number of times across all heaps
+const getOddPowers = (heaps: number[]): Set<number> => {
+  const powerCounts = new Map<number, number>();
+  
+  heaps.forEach(heap => {
+    const powers = getBinaryRepresentation(heap);
+    powers.forEach(power => {
+      powerCounts.set(power, (powerCounts.get(power) || 0) + 1);
+    });
+  });
+  
+  const oddPowers = new Set<number>();
+  powerCounts.forEach((count, power) => {
+    if (count % 2 === 1) {
+      oddPowers.add(power);
+    }
+  });
+  
+  return oddPowers;
+};
+
+const AssistedNimGame: React.FC = () => {
+  const [mode, setMode] = useState<Mode | null>(null);
+  const [showSetup, setShowSetup] = useState(false);
+  const [userHeapCount, setUserHeapCount] = useState(3);
+  const [userHeapSizes, setUserHeapSizes] = useState<number[]>([3, 3, 3]);
+  const [heaps, setHeaps] = useState<Heap[]>([]);
+  const [currentPlayer, setCurrentPlayer] = useState<Player>(0);
+  const [winner, setWinner] = useState<Player | null>(null);
+  const [heapsGroupWidth, setHeapsGroupWidth] = useState<string>('0px');
+  const initialHeapsRef = useRef<number[]>([]);
+
+  // Calculate the maximum number of powers of 2 needed for any heap
+  const getMaxPowers = (heaps: number[]): number => {
+    if (heaps.length === 0) return 0;
+    // Since we cap at 31, we need 5 powers: 1, 2, 4, 8, 16
+    return 5;
+  };
+
+  // Calculate width based on maximum powers of 2
+  React.useEffect(() => {
+    if (mode !== null && heaps.length > 0) {
+      const maxPowers = getMaxPowers(heaps);
+      const gapWidth = 0.5; // Gap between power groups
+      const labelWidth = 2; // Width for heap size label
+      
+      // Calculate total width accounting for different box sizes
+      let totalBoxWidth = 0;
+      for (let i = 0; i < maxPowers; i++) {
+        const power = 1 << i; // 1, 2, 4, 8, 16
+        if (power === 16) {
+          totalBoxWidth += 12; // Power-of-16 box is 12rem wide
+        } else if (power === 8) {
+          totalBoxWidth += 8; // Power-of-8 box is 8rem wide
+        } else {
+          totalBoxWidth += 4; // Other boxes are 4rem wide
+        }
+      }
+      
+      const totalWidthRem = labelWidth + totalBoxWidth + (maxPowers - 1) * gapWidth;
+      setHeapsGroupWidth(`${totalWidthRem}rem`);
+    }
+  }, [mode, heaps.length]);
+
+  // Store initial heaps for reset
+  React.useEffect(() => {
+    if (mode !== null && heaps.length > 0) {
+      initialHeapsRef.current = [...heaps];
+    }
+  }, [mode, heaps.length]);
+
+  // Start a new game
+  const startGame = (selectedMode: Mode) => {
+    setMode(selectedMode);
+    setWinner(null);
+    setCurrentPlayer(0);
+    if (selectedMode === 'random') {
+      const k = getRandomInt(MIN_HEAPS, MAX_HEAPS);
+      const randomHeaps = Array.from({ length: k }, () => getRandomInt(MIN_STONES, MAX_STONES));
+      setHeaps(randomHeaps);
+    } else {
+      setShowSetup(true);
+    }
+  };
+
+  // Handle user-defined setup
+  const handleUserSetupConfirm = () => {
+    setHeaps([...userHeapSizes]);
+    setShowSetup(false);
+    setWinner(null);
+    setCurrentPlayer(0);
+  };
+
+  // Handle stone click: remove all stones from clicked index to the end in that heap
+  const handleStoneClick = (heapIdx: number, stoneIdx: number) => {
+    if (winner !== null) return;
+    if (heaps[heapIdx] === 0) return;
+    const newHeaps = [...heaps];
+    newHeaps[heapIdx] = stoneIdx;
+    setHeaps(newHeaps);
+    
+    // Check for win
+    if (newHeaps.every(heap => heap === 0)) {
+      setWinner(currentPlayer);
+    } else {
+      setCurrentPlayer(currentPlayer === 0 ? 1 : 0);
+    }
+  };
+
+  const handlePlayAgain = () => {
+    setWinner(null);
+    setCurrentPlayer(0);
+    setHeaps([...initialHeapsRef.current]);
+  };
+
+  const handleResetGame = () => {
+    setWinner(null);
+    setCurrentPlayer(0);
+    setHeaps([...initialHeapsRef.current]);
+  };
+
+  const handleNewGame = () => {
+    setMode(null);
+    setHeaps([]);
+    setWinner(null);
+    setCurrentPlayer(0);
+  };
+
+  const handleHeapCountChange = (val: number) => {
+    setUserHeapCount(val);
+    setUserHeapSizes(Array.from({ length: val }, () => 3));
+  };
+
+  const handleHeapSizeChange = (idx: number, val: number) => {
+    const newSizes = [...userHeapSizes];
+    newSizes[idx] = val;
+    setUserHeapSizes(newSizes);
+  };
+
+  // Calculate which powers of 2 appear an odd number of times
+  const oddPowers = getOddPowers(heaps);
+
+  // Render a heap broken down into powers of 2
+  const renderHeap = (heap: number, idx: number) => {
+    const powers = getBinaryRepresentation(heap);
+    const maxPowers = getMaxPowers(heaps);
+    
+    return (
+      <div key={idx} className="flex flex-row items-center gap-2">
+        {/* Heap size label */}
+        <span className="font-mono text-sm text-muted-foreground min-w-[2ch] text-right">{heap}</span>
+        
+        {/* Powers of 2 groups - horizontal layout with fixed widths */}
+        <div className="flex gap-2">
+          {Array.from({ length: maxPowers }, (_, powerIdx) => {
+            const power = 1 << powerIdx; // 2^powerIdx (1, 2, 4, 8, 16)
+            const hasPower = powers.includes(power);
+            const isOdd = oddPowers.has(power);
+            const isPower8 = power === 8; // Check if this is the power-of-8 box
+            const isPower16 = power === 16; // Check if this is the power-of-16 box
+            
+            return (
+              <div
+                key={powerIdx}
+                className={`flex flex-col gap-1 p-2 rounded border-2 ${
+                  hasPower 
+                    ? (isOdd ? 'border-red-500 bg-red-50' : 'border-green-500 bg-green-50')
+                    : 'border-gray-200 bg-gray-50'
+                }`}
+                style={{ 
+                  minWidth: isPower16 ? '12rem' : (isPower8 ? '8rem' : '4rem'),
+                  width: isPower16 ? '12rem' : (isPower8 ? '8rem' : '4rem')
+                }}
+              >
+                {/* Stones for this power - single row layout */}
+                {hasPower ? (
+                  <div className="flex flex-row gap-0.5 justify-center">
+                    {Array.from({ length: power }, (_, stoneIdx) => (
+                      <span
+                        key={stoneIdx}
+                        className="inline-block w-2 h-2 rounded-full cursor-pointer border border-gray-400 hover:border-black transition-all"
+                        style={{ 
+                          background: heapColors[idx % heapColors.length], 
+                          opacity: winner !== null ? 0.5 : 1 
+                        }}
+                        onClick={() => {
+                          // Calculate the actual stone index in the heap
+                          const actualIndex = powers
+                            .filter(p => p < power)
+                            .reduce((sum, p) => sum + p, 0) + stoneIdx;
+                          handleStoneClick(idx, actualIndex);
+                        }}
+                        title={`Power of 2: ${power}, Stone ${stoneIdx + 1}`}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="w-2 h-2" /> // Fixed empty space
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  // Dynamic backdrop color based on current player
+  const backdropColor = winner === null ? (currentPlayer === 0 ? SKY_BLUE : MAROON) : '#f0f0f0';
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold text-center">Assisted Game of Nim</CardTitle>
+          <CardDescription className="text-center">
+            Visualize the XOR strategy! Heaps are broken down into powers of 2. Red borders show powers that appear an odd number of times - these are your winning moves!
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Game Controls */}
+          {mode === null && (
+            <div className="flex flex-col gap-4 items-center">
+              <Button onClick={() => startGame('random')}>Random Instance</Button>
+              <Button onClick={() => startGame('user')}>User-Defined Instance</Button>
+            </div>
+          )}
+
+          {mode !== null && (
+            <>
+              {/* Current Turn Indicator and Reset Button */}
+              <div className="text-center flex flex-col items-center gap-2">
+                {winner === null ? (
+                  <>
+                    <div>
+                      <p className="text-sm text-muted-foreground">Current Turn:</p>
+                      <span className={`inline-block text-lg px-4 py-2 rounded font-semibold ${currentPlayer === 0 ? 'bg-sky-200 text-sky-800' : 'bg-red-200 text-red-800'}`}>
+                        Player {currentPlayer + 1}
+                      </span>
+                    </div>
+                    <div className="flex gap-2 mt-2">
+                      <Button variant="outline" size="sm" onClick={handleResetGame}>Reset Game</Button>
+                      <Button variant="outline" size="sm" onClick={handleNewGame}>New Game</Button>
+                    </div>
+                  </>
+                ) : (
+                  <div className="space-y-2">
+                    <span className="inline-block text-lg px-4 py-2 rounded font-semibold bg-green-200 text-green-800">Winner: Player {winner + 1}!</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Heaps Display */}
+              <div className="w-full flex justify-center">
+                <div className="flex flex-col items-start gap-4 my-4 mx-auto" style={{ width: heapsGroupWidth }}>
+                  {heaps.map((heap, idx) => renderHeap(heap, idx))}
+                </div>
+              </div>
+
+              {/* Strategy Explanation */}
+              <div className="text-center space-y-2 p-4 bg-blue-50 rounded-lg border border-blue-200">
+                <p className="text-sm font-medium text-blue-800">XOR Strategy Visualization</p>
+                <p className="text-xs text-blue-600">
+                  Red borders = Powers of 2 that appear an odd number of times (your winning moves)<br/>
+                  Green borders = Powers of 2 that appear an even number of times (balanced)
+                </p>
+                <div className="mt-3 pt-2 border-t border-blue-200">
+                  <p className="text-xs text-blue-500">
+                    Strategy based on a well-known analysis, in particular the intuition explored by {' '}
+                    <a 
+                      href="https://jdh.hamkins.org/win-at-nim-the-secret-mathematical-strategy/" 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="underline hover:text-blue-700"
+                    >
+                      Joel David Hamkins
+                    </a>
+                  </p>
+                </div>
+              </div>
+
+              {/* Play Again Button */}
+              {winner !== null && (
+                <div className="flex justify-center">
+                  <Button onClick={handlePlayAgain}>Play Again</Button>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Instructions */}
+          <div className="text-center space-y-2 p-4 bg-muted rounded-lg">
+            <p className="text-sm text-muted-foreground">
+              Click any stone to remove it and all stones to its right. The visual breakdown shows powers of 2 - 
+              red borders indicate winning moves in the XOR strategy!
+            </p>
+          </div>
+
+          {/* User-defined setup modal */}
+          <Dialog open={showSetup} onOpenChange={setShowSetup}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Define Your Game</DialogTitle>
+              </DialogHeader>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium">Number of heaps: {userHeapCount}</label>
+                  <Slider
+                    value={[userHeapCount]}
+                    onValueChange={(value) => handleHeapCountChange(value[0])}
+                    min={MIN_HEAPS}
+                    max={MAX_HEAPS}
+                    step={1}
+                    className="mt-2"
+                  />
+                </div>
+                <div className="space-y-3">
+                  <label className="text-sm font-medium">Heap sizes:</label>
+                  {userHeapSizes.map((size, idx) => (
+                    <div key={idx}>
+                      <label className="text-sm">Heap {idx + 1}: {size}</label>
+                      <Slider
+                        value={[size]}
+                        onValueChange={(value) => handleHeapSizeChange(idx, value[0])}
+                        min={MIN_STONES}
+                        max={MAX_STONES}
+                        step={1}
+                        className="mt-1"
+                      />
+                    </div>
+                  ))}
+                </div>
+                <Button onClick={handleUserSetupConfirm} className="w-full">Start Game</Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+        </CardContent>
+      </Card>
+
+      {/* Social Share */}
+      <SocialShare 
+        title="Assisted Game of Nim - XOR Strategy Visualization"
+        description="Learn the mathematical strategy behind Nim with visual power-of-2 breakdown!"
+        url={window.location.href}
+      />
+    </div>
+  );
+};
+
+export default AssistedNimGame; 

src/components/GamesGallery.tsx

@@ -7,6 +7,7 @@ import Layout from '@/components/Layout';
 import GameOfSim from '@/components/GameOfSim';
 import NorthcottsGame from '@/components/NorthcottsGame';
 import NimGame from '@/components/NimGame';
+import AssistedNimGame from '@/components/AssistedNimGame';
 
 interface Game {
   id: string;
@@ -17,6 +18,13 @@ interface Game {
 }
 
 const games: Game[] = [
+  {
+    id: 'assisted-nim',
+    title: 'Assisted Game of Nim',
+    description: 'Learn the XOR strategy! Visualize how powers of 2 determine winning moves with color-coded borders.',
+    tags: ['strategy', 'two-player', 'math', 'logic', 'game-theory', 'xor-strategy', 'educational'],
+    component: AssistedNimGame
+  },
   {
     id: 'nim',
     title: 'Game of Nim',

src/components/InteractiveIndex.tsx

@@ -91,6 +91,15 @@ const allInteractives: Interactive[] = [
     theme: 'Puzzles',
     dateAdded: '2024-07-21'
   },
+  {
+    id: 'assisted-nim',
+    title: 'Assisted Game of Nim',
+    description: 'Learn the XOR strategy! Visualize how powers of 2 determine winning moves with color-coded borders.',
+    tags: ['strategy', 'two-player', 'math', 'logic', 'game-theory', 'xor-strategy', 'educational'],
+    path: '/games/assisted-nim',
+    theme: 'Games',
+    dateAdded: '2024-07-21'
+  },
   {
     id: 'nim',
     title: 'Game of Nim',

src/pages/AssistedNimGamePage.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import AssistedNimGame from '@/components/AssistedNimGame';
+
+const AssistedNimGamePage = () => {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <AssistedNimGame />
+    </div>
+  );
+};
+
+export default AssistedNimGamePage; 

src/pages/Index.tsx

@@ -69,6 +69,13 @@ const allInteractives = [{
   tags: ['strategy', 'two-player', 'math', 'logic'],
   path: '/games/nim',
   theme: 'Games'
+}, {
+  id: 'assisted-nim',
+  title: 'Assisted Game of Nim',
+  description: 'Learn the XOR strategy! Visualize how powers of 2 determine winning moves with color-coded borders.',
+  tags: ['strategy', 'two-player', 'math', 'logic', 'xor-strategy', 'educational'],
+  path: '/games/assisted-nim',
+  theme: 'Games'
 }];
 
 // Featured interactives (3 fixed ones)