try again

src/App.js

@@ -7,9 +7,7 @@ export default function App() {
 
  const [player, setPlayer] = useState(1)
  const [boardState, setBoardState] = useState([
- [null, null, null],
- [null, null, null],
- [null, null, null],
+ null, null, null, null, null, null, null, null, null
  ])
  const [result, setResult] = useState("")
 

src/components/Button.jsx

@@ -0,0 +1,5 @@
+export default function Button( { btnTitle, btnFunction } ) {
+ return (<>
+ <button onClick={btnFunction}>{btnTitle}</button>
+ </>)
+}

src/components/DashBoard.jsx

@@ -0,0 +1,16 @@
+import Button from "./Button"
+
+export default function DashBoard() {
+
+ const resetFunc = () => {
+
+ }
+
+ return (
+
+ <div className="dashboard w-96 m-auto bg-slate-300 flex justify-center">
+ <Button btnTitle="Reset" btnFunction={resetFunc} />
+ </div>
+
+ )
+}

src/components/GameBoard.jsx

@@ -1,21 +1,30 @@
-import GameCell from "./GameCell"
 import { useContext, useState } from "react"
 import { GameState } from "../ContextFile"
+import GameCell from "./GameCell"
+import ScoreBoard from "./ScoreBoard"
+import DashBoard from "./DashBoard"
 
 export default function GameBoard() {
 
  const [player, setPlayer, boardState, setBoardState, result, setResult] = useContext(GameState)
 
  return (
 
- <div className="game-board w-96 h-96 bg-slate-600 m-auto relative top-12 flex flex-wrap justify-center items-center">
- {boardState.map((cell, index) => (
- cell.map((gameCell, index) => (
+ <div className="game-container">
+ <ScoreBoard />
+
+ <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} />
- ))
- ))}
+ ))}
+ </div>
+
+ <DashBoard />
+
  </div>
 
+
+
  )
 }
 

src/components/GameCell.jsx

@@ -1,5 +1,5 @@
 export default function GameCell() {
  return (
- <div className="game-cell w-28 h-28 mx-2 bg-slate-400"></div>
+ <div className="game-cell w-28 h-28 m-2 bg-slate-400"></div>
  )
 }

src/components/ScoreBoard.jsx

@@ -0,0 +1,11 @@
+export default function ScoreBoard() {
+ return (
+
+ <div className="scoreboard w-96 bg-slate-300 m-auto flex flex-wrap justify-around items-center">
+ <h3>P1: <span>00</span></h3>
+ <h3>P2: <span>00</span></h3>
+ </div>
+ )
+}
+
+// should build form so players can name themselves