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

Fix parity bits highlighting and labels

Browse source 
Updated parity bits game to make labels persistent after animation. Highlights now use yellow for white cells and orange for black cells, including the last row and column. Also fixed spacing issues with column labels.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 17:39:03 +00:00
parent 5c407b8b7f
commit de640b5029
1 changed files with 18 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/components/ParityBitsGame.tsx
View file

@ -148,8 +148,8 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
colCounts
});
// Animate through rows
for (let i = 0; i < gridSize; i++) {
// Animate through rows (including parity row)
for (let i = 0; i <= gridSize; i++) {
setAnimationState(prev => ({...prev, currentRow: i}));
await new Promise(resolve => setTimeout(resolve, 800));
}
@ -158,13 +158,13 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
setAnimationState(prev => ({...prev, currentRow: -1, showRowParity: true}));
await new Promise(resolve => setTimeout(resolve, 1000));
// Animate through columns
for (let j = 0; j < gridSize; j++) {
// Animate through columns (including parity column)
for (let j = 0; j <= gridSize; j++) {
setAnimationState(prev => ({...prev, currentCol: j}));
await new Promise(resolve => setTimeout(resolve, 800));
}
// Show column parities
// Show column parities and keep them persistent
setAnimationState(prev => ({...prev, currentCol: -1, showColParity: true}));
await new Promise(resolve => setTimeout(resolve, 1000));
@ -176,17 +176,13 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
setErrorDetected({row: errorRow, col: errorCol});
}
setAnimationState({
// Keep labels persistent - don't reset them
setAnimationState(prev => ({
...prev,
isAnimating: false,
currentRow: -1,
currentCol: -1,
showRowParity: false,
showColParity: false,
rowParities: [],
colParities: [],
rowCounts: [],
colCounts: []
});
currentCol: -1
}));
setPhase('detect');
};
@ -259,6 +255,8 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
const isCurrentRowBeingChecked = animationState.currentRow === row;
const isCurrentColBeingChecked = animationState.currentCol === col;
const shouldHighlightForAnimation = isCurrentRowBeingChecked || isCurrentColBeingChecked;
const isBlackCell = currentGrid[row]?.[col];
const highlightColor = isBlackCell ? 'ring-2 ring-orange-400 bg-orange-400/20' : 'ring-2 ring-yellow-400 bg-yellow-400/15';
return (
<button
@ -268,7 +266,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
${currentGrid[row]?.[col] ? 'bg-foreground' : 'bg-background'}
${isParityCell ? 'border-primary' : 'border-foreground'}
${isError ? 'ring-4 ring-green-500 bg-green-500/20' : ''}
${shouldHighlightForAnimation ? 'ring-2 ring-yellow-400 bg-yellow-400/15' : ''}
${shouldHighlightForAnimation ? highlightColor : ''}
${phase === 'setup' && !isParityCell ? 'hover:bg-accent cursor-pointer' : ''}
${phase === 'parity' ? 'hover:bg-accent cursor-pointer' : ''}
`}
@ -284,12 +282,12 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
</div>
{/* Row parity labels */}
{animationState.currentRow >= 0 && (
{(animationState.currentRow >= 0 || animationState.showRowParity) && (
<div className="flex flex-col gap-1">
{Array(gridSize).fill(null).map((_, row) => {
const hasOddParity = animationState.rowParities[row];
const count = animationState.rowCounts[row];
const showLabel = row === animationState.currentRow;
const showLabel = (row === animationState.currentRow) || animationState.showRowParity;
return (
<div key={`row-${row}`} className="w-12 h-12 flex items-center justify-center">
{showLabel && (
@ -303,31 +301,15 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
<div className="w-12 h-12"></div> {/* Empty space for parity cell */}
</div>
)}
{animationState.showRowParity && (
<div className="flex flex-col gap-1">
{Array(gridSize).fill(null).map((_, row) => {
const hasOddParity = animationState.rowParities[row];
const count = animationState.rowCounts[row];
return (
<div key={`row-${row}`} className="w-12 h-12 flex items-center justify-center">
<span className={`text-xs font-medium ${hasOddParity ? 'text-red-500' : 'text-foreground'}`}>
{count}
</span>
</div>
);
})}
<div className="w-12 h-12"></div> {/* Empty space for parity cell */}
</div>
)}
</div>
{/* Column parity labels */}
{animationState.currentCol >= 0 && (
<div className="flex gap-1">
{(animationState.currentCol >= 0 || animationState.showColParity) && (
<div className="flex gap-1 justify-center">
{Array(gridSize).fill(null).map((_, col) => {
const hasOddParity = animationState.colParities[col];
const count = animationState.colCounts[col];
const showLabel = col === animationState.currentCol;
const showLabel = (col === animationState.currentCol) || animationState.showColParity;
return (
<div key={`col-${col}`} className="w-12 h-6 flex items-center justify-center">
{showLabel && (
@ -341,22 +323,6 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
<div className="w-12 h-6"></div> {/* Empty space for parity cell */}
</div>
)}
{animationState.showColParity && (
<div className="flex gap-1">
{Array(gridSize).fill(null).map((_, col) => {
const hasOddParity = animationState.colParities[col];
const count = animationState.colCounts[col];
return (
<div key={`col-${col}`} className="w-12 h-6 flex items-center justify-center">
<span className={`text-xs font-medium ${hasOddParity ? 'text-red-500' : 'text-foreground'}`}>
{count}
</span>
</div>
);
})}
<div className="w-12 h-6"></div> {/* Empty space for parity cell */}
</div>
)}
</div>
);
};