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

Refine parity bits interactive

Browse source 
Update parity bits interactive to allow flipping any bit, include parity bits in highlights, display odd/even text alongside highlights, and remove red border from flipped bits.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 17:33:19 +00:00
parent 0bb5653759
commit 6813e73b97
1 changed files with 45 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/ParityBitsGame.tsx
View file

@ -97,7 +97,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
// Flip a bit in the parity grid
const flipBit = (row: number, col: number) => {
if (phase !== 'parity' || row >= gridSize || col >= gridSize) return;
if (phase !== 'parity') return;
const newGrid = [...parityGrid];
newGrid[row][col] = !newGrid[row][col];
@ -210,9 +210,9 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
const isParityCell = parityBitsAdded && (row === gridSize || col === gridSize);
const isFlipped = flippedCell?.row === row && flippedCell?.col === col;
const isError = errorDetected?.row === row && errorDetected?.col === col;
const isCurrentRowBeingChecked = animationState.currentRow === row && !isParityCell;
const isCurrentColBeingChecked = animationState.currentCol === col && !isParityCell;
const shouldHighlightForAnimation = (isCurrentRowBeingChecked || isCurrentColBeingChecked) && currentGrid[row]?.[col];
const isCurrentRowBeingChecked = animationState.currentRow === row;
const isCurrentColBeingChecked = animationState.currentCol === col;
const shouldHighlightForAnimation = isCurrentRowBeingChecked || isCurrentColBeingChecked;
return (
<button
@ -221,18 +221,16 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
w-12 h-12 border-2 transition-all duration-200
${currentGrid[row]?.[col] ? 'bg-foreground' : 'bg-background'}
${isParityCell ? 'border-primary' : 'border-foreground'}
${isFlipped ? 'ring-4 ring-destructive' : ''}
${isError ? 'ring-4 ring-green-500 bg-green-500/20' : ''}
${shouldHighlightForAnimation ? 'ring-4 ring-yellow-400 bg-yellow-400/30' : ''}
${phase === 'setup' && !isParityCell ? 'hover:bg-accent cursor-pointer' : ''}
${phase === 'parity' && !isParityCell ? 'hover:bg-accent cursor-pointer' : ''}
${isParityCell ? 'cursor-not-allowed' : ''}
${phase === 'parity' ? 'hover:bg-accent cursor-pointer' : ''}
`}
onClick={() => {
if (phase === 'setup') toggleCell(row, col);
else if (phase === 'parity') flipBit(row, col);
}}
disabled={isParityCell}
disabled={false}
/>
);
})
@ -240,7 +238,25 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
</div>
{/* Row parity labels */}
{(animationState.showRowParity || animationState.isAnimating) && (
{animationState.currentRow >= 0 && (
<div className="flex flex-col gap-1">
{Array(gridSize).fill(null).map((_, row) => {
const hasOddParity = animationState.rowParities[row];
const showLabel = row === animationState.currentRow;
return (
<div key={`row-${row}`} className="w-12 h-12 flex items-center justify-center">
{showLabel && (
<span className={`text-xs font-medium ${hasOddParity ? 'text-red-500' : 'text-foreground'}`}>
{hasOddParity ? 'odd' : 'even'}
</span>
)}
</div>
);
})}
<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];
@ -258,7 +274,25 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
</div>
{/* Column parity labels */}
{(animationState.showColParity || animationState.isAnimating) && (
{animationState.currentCol >= 0 && (
<div className="flex gap-1">
{Array(gridSize).fill(null).map((_, col) => {
const hasOddParity = animationState.colParities[col];
const showLabel = col === animationState.currentCol;
return (
<div key={`col-${col}`} className="w-12 h-6 flex items-center justify-center">
{showLabel && (
<span className={`text-xs font-medium ${hasOddParity ? 'text-red-500' : 'text-foreground'}`}>
{hasOddParity ? 'odd' : 'even'}
</span>
)}
</div>
);
})}
<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];
@ -291,7 +325,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
<Alert>
<AlertDescription>
{phase === 'setup' && 'Set your grid by clicking squares to make them black. Then add parity bits.'}
{phase === 'parity' && 'Parity bits added! Now flip exactly one bit in the main grid (not parity cells).'}
{phase === 'parity' && 'Parity bits added! Now flip exactly one bit anywhere in the grid.'}
{phase === 'flip' && 'Bit flipped! Click "Identify Flip" to see error detection in action.'}
{phase === 'detect' && 'Animation complete! Rows and columns with odd parity were highlighted, revealing the error location in green.'}
</AlertDescription>