From 4b5586ec825a790fa6201103a0620159a5d3e14a Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 22 Aug 2025 17:44:57 +0000
Subject: [PATCH] Fix column label alignment

Adjusted column labels for better alignment. Added the parity-magic interactive under the Games section with a working share component and copy link functionality.
-edited src/App.tsx
-edited src/components/ParityBitsGame.tsx
---
 src/App.tsx                       |  1 +
 src/components/GamesGallery.tsx   |  8 ++++++++
 src/components/ParityBitsGame.tsx | 13 ++++++++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index d5733a3..96c9751 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -90,6 +90,7 @@ const App = () => (
           <Route path="/themes/puzzles" element={<Puzzles />} />
           <Route path="/themes/puzzles/stacking-blocks" element={<StackingBlocksPage />} />
           <Route path="/parity-bits" element={<ParityBitsGamePage />} />
+          <Route path="/parity-magic" element={<ParityBitsGamePage />} />
           <Route path="/themes/miscellany" element={<Miscellany />} />
           <Route path="/themes/contest-problems" element={<ContestProblems />} />
           <Route path="/contest-problems/grid-tiling" element={<GridTilingPuzzlePage />} />
diff --git a/src/components/GamesGallery.tsx b/src/components/GamesGallery.tsx
index 0b7f7f3..a39de1f 100644
--- a/src/components/GamesGallery.tsx
+++ b/src/components/GamesGallery.tsx
@@ -11,6 +11,7 @@ import AssistedNimGame from '@/components/AssistedNimGame';
 import GoldCoinGame from '@/components/GoldCoinGame';
 import GuessingGame from '@/components/GuessingGame';
 import SubtractionGame from '@/components/SubtractionGame';
+import ParityBitsGame from '@/components/ParityBitsGame';
 
 interface Game {
   id: string;
@@ -21,6 +22,13 @@ interface Game {
 }
 
 const games: Game[] = [
+  {
+    id: 'parity-magic',
+    title: 'Parity Magic',
+    description: 'Learn how parity bits detect and correct single-bit errors! Set up a grid, add parity bits, flip a bit, and watch the magic of error detection unfold.',
+    tags: ['error-correction', 'parity', 'computer-science', 'educational', 'interactive', 'magic-trick'],
+    component: ParityBitsGame
+  },
   {
     id: 'subtraction-game-uid-2024',
     title: 'The Subtraction Game',
diff --git a/src/components/ParityBitsGame.tsx b/src/components/ParityBitsGame.tsx
index df51a43..6ccb53b 100644
--- a/src/components/ParityBitsGame.tsx
+++ b/src/components/ParityBitsGame.tsx
@@ -4,6 +4,7 @@ import { Slider } from '@/components/ui/slider';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { RotateCcw, Info } from 'lucide-react';
+import SocialShare from './SocialShare';
 
 interface ParityBitsGameProps {
   showSocialShare?: boolean;
@@ -306,7 +307,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
         
         {/* Column parity labels */}
         {(animationState.currentCol >= 0 || animationState.showColParity) && (
-          <div className="grid gap-1" style={{gridTemplateColumns: `repeat(${gridSize + 1}, 1fr)`}}>
+          <div className="grid gap-1 -ml-1" style={{gridTemplateColumns: `repeat(${gridSize + 1}, 1fr)`}}>
             {Array(gridSize + 1).fill(null).map((_, col) => {
               const hasOddParity = animationState.colParities[col];
               const count = animationState.colCounts[col];
@@ -429,6 +430,16 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
             <p><strong>How it works:</strong> Parity bits ensure even parity in each row/column.</p>
             <p>When a bit flips, the affected row and column will have odd parity, pinpointing the error.</p>
           </div>
+
+          {/* Social Share */}
+          {showSocialShare && (
+            <div className="mt-6">
+              <SocialShare 
+                title="Parity Bits Error Detection"
+                description="Learn how parity bits work for error detection and correction through this interactive demonstration!"
+              />
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>