Fix misalignment and add favicon

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Build project
+        run: npm run build
+
+      - name: Upload production-ready build files
+        uses: actions/upload-artifact@v3
+        with:
+          name: production-files
+          path: ./dist
+
+  deploy:
+    name: Deploy
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: production-files
+          path: ./dist
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

src/App.css

@@ -1,3 +1,3 @@
 .game-container {
-  @apply max-w-4xl mx-auto p-4;
+  @apply max-w-4xl mx-auto p-4 bg-white rounded-lg shadow-md;
 }

src/App.tsx

@@ -207,10 +207,10 @@ const SuperTicTacToe = () => {
 
   const renderPlayerIcon = (player: string) => {
     const xIconProps = {
-      className: "w-10 h-10 text-blue-500"
+      className: "w-10 h-10 text-blue-500 inline-block"
     };
     const oIconProps = {
-      className: "w-8 h-8 text-red-500 stroke-[2.5]"
+      className: "w-8 h-8 text-red-500 stroke-[2.5] inline-block"
     };
     return player === 'X' ? <X {...xIconProps} /> : <Circle {...oIconProps} />;
   };
@@ -235,7 +235,9 @@ const SuperTicTacToe = () => {
             className="text-2xl font-bold mb-4 flex items-center"
           >
             <span>Winner:</span>
-            {renderPlayerIcon(bigBoardWinner)}
+            <div className="w-10 h-10 ml-2 inline-flex items-center justify-center">
+              {renderPlayerIcon(bigBoardWinner)}
+            </div>
             <button 
               onClick={resetGame}
               className="ml-4 px-4 py-2 bg-blue-500 text-white rounded"
@@ -246,10 +248,12 @@ const SuperTicTacToe = () => {
         ) : (
           <motion.div 
             initial={false}
-            className="text-xl mb-4 flex items-center"
+            className="text-xl mb-4 flex items-center h-10" // Fixed height to prevent layout shift
           >
             <span className="mr-2">Current Player:</span> 
-            {renderPlayerIcon(currentPlayer)}
+            <div className="w-10 h-10 inline-flex items-center justify-center">
+              {renderPlayerIcon(currentPlayer)}
+            </div>
             {(nextValidBoard !== null && smallBoards[nextValidBoard].winner === null) && (
               <span className="ml-4 text-sm">
                 (Must play in board {nextValidBoard + 1})
@@ -265,11 +269,15 @@ const SuperTicTacToe = () => {
 
       <div className="mt-4 flex justify-center space-x-4 w-full">
         <div className="text-center flex flex-col items-center">
-          <div className="flex justify-center"><X className="w-10 h-10 text-blue-500" /></div>
+          <div className="flex justify-center h-10 items-center">
+            <X className="w-10 h-10 text-blue-500" />
+          </div>
           <div className="text-3xl font-bold">{scores.X}</div>
         </div>
         <div className="text-center flex flex-col items-center">
-          <div className="flex justify-center"><Circle className="w-8 h-8 text-red-500 stroke-[2.5]" /></div>
+          <div className="flex justify-center h-10 items-center">
+            <Circle className="w-8 h-8 text-red-500 stroke-[2.5]" />
+          </div>
           <div className="text-3xl font-bold">{scores.O}</div>
         </div>
       </div>

src/index.css

@@ -2,71 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+  @apply bg-gray-50 min-h-screen flex items-center justify-center text-gray-800;
+}