Add Assisted Nim Game and update components
This commit is contained in:
parent
3705152d34
commit
6af3ec81ef
6 changed files with 435 additions and 0 deletions
|
|
@ -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 />} />
|
||||
|
|
|
|||
397
src/components/AssistedNimGame.tsx
Normal file
397
src/components/AssistedNimGame.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
12
src/pages/AssistedNimGamePage.tsx
Normal file
12
src/pages/AssistedNimGamePage.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue