player 1 and two state

src/App.js

@@ -18,6 +18,13 @@ export default function App() {
  </>)
 }
 
+/*IDEAS
+ - add dropdown to change theme
+ - form so players can punch in their own names for scoreboard
+ - reset one game or entire match
+ - extra points for actiing quickly
+*/
+
 /*
  Set Up Your React Project:
 Start by creating a new React project using a tool like Create React App or your preferred setup.

src/components/DashBoard.jsx

@@ -13,4 +13,5 @@ export default function DashBoard() {
  </div>
 
  )
-}
+}
+

src/components/GameBoard.jsx

@@ -15,7 +15,7 @@ export default function GameBoard() {
 
  <div className="game-board w-96 h-96 bg-slate-600 m-auto flex flex-wrap justify-center items-center">
  {boardState.map((cell, index) => (
- <GameCell key={index} />
+ <GameCell key={index} index={index} />
  ))}
  </div>
 
@@ -28,4 +28,3 @@ export default function GameBoard() {
  )
 }
 
-// need to figure out how to arrange cells

src/components/GameCell.jsx

@@ -1,5 +1,28 @@
-export default function GameCell() {
+import { useContext } from "react"
+import { GameState } from "../ContextFile"
+import { FaO, FaX } from "react-icons/fa6"
+
+export default function GameCell( { index } ) {
+
+ const [player, setPlayer, boardState, setBoardState, result, setResult] = useContext(GameState)
+
+ const clickHandler = (e) => {
+ const cellToAlter = e.target.classList[0]
+ const updatedBoardState = [...boardState]
+ updatedBoardState[cellToAlter] = player
+ setBoardState(updatedBoardState)
+
+ setPlayer(player === 1 ? 2 : 1)
+ console.log(player)
+ }
+
  return (
- <div className="game-cell w-28 h-28 m-2 bg-slate-400"></div>
+ <div className={`${index} game-cell w-28 h-28 m-2 bg-slate-400`} onClick={clickHandler}>
+ {
+ boardState[index] === 1 ? <FaO style={{display: "block"}} /> : boardState[index] === 2 ? <FaX style={{display: "block"}} /> : null
+
+ }
+
+ </div>
  )
 }