Dev

src/App.js

@@ -1,23 +1,12 @@
-import logo from './logo.svg';
 import './App.css';
+import Board from './components/Board/Board';
+
+
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Board />
     </div>
   );
 }

src/components/Board/Board.css

@@ -0,0 +1,20 @@
+.board {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-content: center;
+  height: 90vh;
+  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7s9yhHPtcMcWRQFDm9tCBS2RhsUyyOye46A&usqp=CAU);
+
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.message {
+  font-size: 2em;
+  margin: 10px;
+}

src/components/Board/Board.js

@@ -0,0 +1,76 @@
+import './Board.css';
+import { React } from 'react';
+import Tile from '../../components/Tile/Tile';
+import { useContext } from 'react';
+import { GameContext } from '../../context/GameContext';
+
+export default function Board() {
+  const { board, setBoard, setActive, currentPlayer, setCurrentPlayer } = useContext(GameContext);
+
+  function ResetGame() {
+    setActive(true);
+    setCurrentPlayer('X');
+    setBoard([
+      {
+        place: 0,
+        value: ''
+      },
+      {
+        place: 1,
+        value: ''
+      },
+      {
+        place: 2,
+        value: ''
+      },
+      {
+        place: 3,
+        value: ''
+      },
+      {
+        place: 4,
+        value: ''
+      },
+      {
+        place: 5,
+        value: ''
+      },
+      {
+        place: 6,
+        value: ''
+      },
+      {
+        place: 7,
+        value: ''
+      },
+      {
+        place: 8,
+        value: ''
+      }
+    ]);
+  }
+  return (
+    <main>
+      <div className = "message">WELCOME TO ALCHEMY TIC TAC-O</div>
+      <div className = "message">It is {currentPlayer}s turn</div>
+      <button onClick={ResetGame}>Reset game</button>
+      <div className = "board">
+        <div className="row">
+          <Tile key={board[0].place} location={0} />
+          <Tile key={board[1].place} location={1} />
+          <Tile key={board[2].place} location={2} />
+        </div>
+        <div className="row">
+          <Tile key={board[3].place} location={3} />
+          <Tile key={board[4].place} location={4} />
+          <Tile key={board[5].place} location={5} />
+        </div>
+        <div className="row">
+          <Tile key={board[6].place} location={6} />
+          <Tile key={board[7].place} location={7} />
+          <Tile key={board[8].place} location={8} />
+        </div>
+      </div>
+    </main>
+  );
+}

src/components/Tile/Tile.css

@@ -0,0 +1,10 @@
+.tile {
+  width: 100px;
+  height: 100px;
+  margin: 5px;
+  border: 2px solid;
+  box-sizing: border-box;
+  background-color: aquamarine;
+  font-size: 3em;
+  text-align: center;
+}

src/components/Tile/Tile.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useContext } from 'react';
+import { GameContext } from '../../context/GameContext';
+import './Tile.css';
+
+
+export default function Tile({ location }) {
+  const { board, setBoard, active, currentPlayer, setCurrentPlayer } = useContext(GameContext);
+
+  function handleTileClick() {
+    if (!active) {
+      return;
+    } else {
+      setBoard((prevState) => {
+        return prevState.map((space)=>{
+          if (space.place === location && space.value === '') {
+            if (currentPlayer === 'X') {
+              setCurrentPlayer('O');
+            } else {
+              setCurrentPlayer('X');
+            } return { place: location, value: currentPlayer };
+          } else {
+            return { ...space };
+          }
+        });
+      });
+
+    }
+  }
+
+
+  return (
+    <div className= "tile" onClick={handleTileClick}>
+      <div>{board[location].value}</div>
+    </div>
+  );
+}

src/context/GameContext.js

@@ -0,0 +1,136 @@
+import { createContext, useState } from 'react';
+import initialBoard from '../initial-board-data';
+const GameContext = createContext();
+
+const GameProvider = ({ children }) => {
+  const [board, setBoard] = useState(initialBoard);
+  const [playerX, setPlayerX] = useState();
+  const [playerO, setPlayerO] = useState();
+  const [tile, setTile] = useState();
+  const [active, setActive] = useState(true);
+  const [currentPlayer, setCurrentPlayer] = useState('X');
+
+  const gameState = {
+    board,
+    setBoard,
+    tile,
+    setTile,
+    playerX,
+    setPlayerX,
+    playerO,
+    setPlayerO,
+    active, 
+    setActive,
+    currentPlayer,
+    setCurrentPlayer
+  };
+
+  const checkWinner = () => {
+    if (!active)
+      return;
+    // conditions for player X to win
+
+    if (board[0].value === 'X' && board[1].value === 'X' && board[2].value === 'X') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[3].value === 'X' && board[4].value === 'X' && board[5].value === 'X') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[6].value === 'X' && board[7].value === 'X' && board[8].value === 'X') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[0].value === 'X' && board[4].value === 'X' && board[8].value === 'X') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[6].value === 'X' && board[4].value === 'X' && board[2].value === 'X') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[0].value === 'X' && board[3].value === 'X' && board[6].value === 'X') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[1].value === 'X' && board[4].value === 'X' && board[7].value === 'X') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[2].value === 'X' && board[5].value === 'X' && board[8].value === 'X') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+
+    // conditions for player O to win
+    if (board[0].value === 'O' && board[1].value === 'O' && board[2].value === 'O') {
+      setActive(false);
+      alert('O wins!');
+      return;
+    }
+    if (board[3].value === 'O' && board[4].value === 'O' && board[5].value === 'O') {
+      setActive(false);
+      alert('O wins!');
+      return;
+    }
+    if (board[6].value === 'O' && board[7].value === 'O' && board[8].value === 'O') {
+      setActive(false);
+      alert('O wins!');
+      return;
+    }
+    if (board[0].value === 'O' && board[4].value === 'O' && board[8].value === 'O') {
+      setActive(false);
+      alert('O wins!');
+      return;
+    }
+    if (board[6].value === 'O' && board[4].value === 'O' && board[2].value === 'O') {
+      setActive(false);
+      alert('O wins!');
+      return;
+    }
+    if (board[0].value === 'O' && board[3].value === 'O' && board[6].value === 'O') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[1].value === 'O' && board[4].value === 'O' && board[7].value === 'O') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    if (board[2].value === 'O' && board[5].value === 'O' && board[8].value === 'O') {
+      setActive(false);
+      alert('X wins!');
+      return;
+    }
+    // check for cats game
+    else if (active && 
+      board[0].value && 
+      board[1].value &&
+      board[2].value &&
+      board[3].value &&
+      board[4].value && 
+      board[5].value &&
+      board[6].value &&
+      board[7].value &&
+      board[8].value) {
+      setActive(false);
+      alert('cats game!');
+    }
+  };
+  checkWinner();
+
+
+  return <GameContext.Provider value = {{ ...gameState }}>{children}</GameContext.Provider>;
+};
+
+export { GameProvider, GameContext };

src/index.js

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { GameProvider } from './context/GameContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <GameProvider>
+      <App />
+    </GameProvider>
   </React.StrictMode>
 );
 

src/initial-board-data.js

@@ -0,0 +1,38 @@
+export default [
+  {
+    place: 0,
+    value: ''
+  },
+  {
+    place: 1,
+    value: ''
+  },
+  {
+    place: 2,
+    value: ''
+  },
+  {
+    place: 3,
+    value: ''
+  },
+  {
+    place: 4,
+    value: ''
+  },
+  {
+    place: 5,
+    value: ''
+  },
+  {
+    place: 6,
+    value: ''
+  },
+  {
+    place: 7,
+    value: ''
+  },
+  {
+    place: 8,
+    value: ''
+  }
+];