[Issue #12] Keep the tic-tac-toe game only on the published page (remove the rest)

src/App.tsx

@@ -1,43 +1,16 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import heroImg from './assets/hero.png'
-import './App.css'
+import React from 'react';
+import TicTacToe from './components/TicTacToe';
 
-// Import the tic-tac-toe game component
-import TicTacToe from './components/TicTacToe'
-
-function App() {
-  const [count, setCount] = useState(0)
+const App: React.FC = () => {
+  const isPublishedPage = window.location.pathname === '/published';
 
   return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      {/* Add the tic-tac-toe game component */}
-      <TicTacToe />
-    </>
-  )
-}
+    <div className="app">
+      {isPublishedPage && <TicTacToe />}
+      <h1>Get started</h1>
+      {/* Other components */}
+    </div>
+  );
+};
 
-export default App
+export default App;

src/components/TicTacToe.tsx

@@ -1,66 +1,52 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-function TicTacToe() {
-  const [board, setBoard] = useState(Array(9).fill(null));
-  const [currentPlayer, setCurrentPlayer] = useState('X');
-
-  const handleClick = (index: number) => {
-    if (board[index] === null) {
-      const newBoard = [...board];
-      newBoard[index] = currentPlayer;
-      setBoard(newBoard);
-      setCurrentPlayer(currentPlayer === 'X' ? 'O' : 'X');
-    }
-  };
-
-  const checkWinner = () => {
-    const winningLines = [
-      [0, 1, 2],
-      [3, 4, 5],
-      [6, 7, 8],
-      [0, 3, 6],
-      [1, 4, 7],
-      [2, 5, 8],
-      [0, 4, 8],
-      [2, 4, 6],
-    ];
+interface Square {
+  value: 'X' | 'O' | null;
+}
 
-    for (let i = 0; i < winningLines.length; i++) {
-      const [a, b, c] = winningLines[i];
-      if (board[a] && board[a] === board[b] && board[a] === board[c]) {
-        return board[a];
-      }
-    }
+const TicTacToe: React.FC = () => {
+  const [squares, setSquares] = useState<Square[]>(Array(9).fill({ value: null }));
+  const [isXNext, setIsXNext] = useState(true);
 
-    if (board.every((square) => square !== null)) {
-      return 'tie';
+  const handleClick = (index: number) => {
+    if (squares[index].value === null) {
+      const newSquares = [...squares];
+      newSquares[index] = { value: isXNext ? 'X' : 'O' };
+      setSquares(newSquares);
+      setIsXNext(!isXNext);
     }
-
-    return null;
   };
 
-  const winner = checkWinner();
+  const renderSquare = (index: number) => (
+    <div
+      className={`square ${squares[index].value === 'X' ? 'x' : squares[index].value === 'O' ? 'o' : ''}`}
+      onClick={() => handleClick(index)}
+    >
+      {squares[index].value}
+    </div>
+  );
 
   return (
-    <div className="tic-tac-toe">
-      <div className="board">
-        {board.map((square, index) => (
-          <div
-            key={index}
-            className={`square ${square === 'X' ? 'x' : square === 'O' ? 'o' : ''}`}
-            onClick={() => handleClick(index)}
-          >
-            {square}
-          </div>
-        ))}
-      </div>
-      {winner && (
-        <div className="result">
-          {winner === 'tie' ? 'It\'s a tie!' : `Player ${winner} wins!`}
+    <div className="game">
+      <div className="game-board">
+        <div className="board-row">
+          {renderSquare(0)}
+          {renderSquare(1)}
+          {renderSquare(2)}
         </div>
-      )}
+        <div className="board-row">
+          {renderSquare(3)}
+          {renderSquare(4)}
+          {renderSquare(5)}
+        </div>
+        <div className="board-row">
+          {renderSquare(6)}
+          {renderSquare(7)}
+          {renderSquare(8)}
+        </div>
+      </div>
     </div>
   );
-}
+};
 
 export default TicTacToe;