diff --git a/src/components/SubtractionGame.tsx b/src/components/SubtractionGame.tsx index 4391679..b7c89f4 100644 --- a/src/components/SubtractionGame.tsx +++ b/src/components/SubtractionGame.tsx @@ -9,6 +9,7 @@ const SubtractionGame = () => { const [gameStarted, setGameStarted] = useState(false); const [circles, setCircles] = useState([]); const [removedCircles, setRemovedCircles] = useState>(new Set()); + const [removedByPlayer, setRemovedByPlayer] = useState>(new Map()); const [currentPlayer, setCurrentPlayer] = useState<'Lata' | 'Raj'>('Lata'); const [winner, setWinner] = useState(null); const [highlightedIndices, setHighlightedIndices] = useState([]); @@ -39,6 +40,7 @@ const SubtractionGame = () => { const initialCircles = Array.from({ length: n[0] }, (_, i) => i); setCircles(initialCircles); setRemovedCircles(new Set()); + setRemovedByPlayer(new Map()); setGameStarted(true); setCurrentPlayer('Lata'); setWinner(null); @@ -48,6 +50,7 @@ const SubtractionGame = () => { setGameStarted(false); setCircles([]); setRemovedCircles(new Set()); + setRemovedByPlayer(new Map()); setWinner(null); setCurrentPlayer('Lata'); setHighlightedIndices([]); @@ -61,15 +64,18 @@ const SubtractionGame = () => { // Mark all circles from clicked index onwards as removed const newRemovedCircles = new Set(removedCircles); + const newRemovedByPlayer = new Map(removedByPlayer); const activeCircles = circles.filter(i => !removedCircles.has(i)); const clickedPosition = activeCircles.indexOf(index); // Remove all circles from clicked position onwards for (let i = clickedPosition; i < activeCircles.length; i++) { newRemovedCircles.add(activeCircles[i]); + newRemovedByPlayer.set(activeCircles[i], currentPlayer); } setRemovedCircles(newRemovedCircles); + setRemovedByPlayer(newRemovedByPlayer); // Check if game is over (no active circles left) const remainingActive = circles.filter(i => !newRemovedCircles.has(i)); @@ -91,7 +97,7 @@ const SubtractionGame = () => { const getBackgroundColor = () => { if (!gameStarted || winner) return 'bg-background'; - return currentPlayer === 'Lata' ? 'bg-red-100 dark:bg-red-950' : 'bg-purple-100 dark:bg-purple-950'; + return currentPlayer === 'Lata' ? 'bg-blue-100 dark:bg-blue-950' : 'bg-purple-100 dark:bg-purple-950'; }; const getCircleClass = (index: number) => { @@ -100,7 +106,9 @@ const SubtractionGame = () => { const isHovered = hoveredIndex !== null && index >= hoveredIndex; if (isRemoved) { - return 'w-8 h-8 rounded-full border border-gray-300 bg-transparent'; + const removedBy = removedByPlayer.get(index); + const borderColor = removedBy === 'Lata' ? 'border-blue-400' : 'border-purple-400'; + return `w-8 h-8 rounded-full border-2 border-dashed bg-transparent ${borderColor}`; } const baseClass = `w-8 h-8 rounded-full border-2 border-black transition-colors ${isHighlighted ? 'cursor-pointer' : ''}`;