Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add player-specific styling

Browse source 
Updated Subtraction Game to visually distinguish between moves made by "Lata" and "Raj". Circles taken by Lata will now have a dashed blue border, while those taken by Raj will have a dashed purple border. Additionally, Lata's background has been changed from red to a muted blue.
-edited src/components/SubtractionGame.tsx
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 11:09:58 +00:00
parent f48f7863cc
commit 24933851d7
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/SubtractionGame.tsx
View file

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