397 lines
No EOL
15 KiB
TypeScript
397 lines
No EOL
15 KiB
TypeScript
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;
|