diff --git a/src/app.jsx b/src/app.jsx index 1f12d13..c8415f1 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,5 +1,6 @@ import MainMenu from "./mainMenu"; import Game from "./game"; +import Modal from "./modal"; export default () => { return ( diff --git a/src/game.jsx b/src/game.jsx index 8ad2a06..db21c47 100644 --- a/src/game.jsx +++ b/src/game.jsx @@ -1,4 +1,5 @@ import { useImmer } from "use-immer"; +import { useState } from "react"; import Cross from "../assets/icon-x.svg?react"; import CrossOutline from "../assets/icon-x-outline.svg?react"; @@ -7,10 +8,13 @@ import OvalOutline from "../assets/icon-o-outline.svg?react"; import logo from "../assets/logo.svg"; import restart from "../assets/icon-restart.svg"; +import Modal from "./modal"; + export default () => { const [grid, updateGrid] = useImmer(Array(9).fill("")); - const turn = grid.filter((s) => s == "").length % 2 != 0 ? "X" : "O"; + const [modal, setModal] = useState(false); + const turn = grid.filter((s) => s == "").length % 2 != 0 ? "X" : "O"; const TurnOutline = turn == "X" ? CrossOutline : OvalOutline; const TurnIndicator = turn == "X" ? Cross : Oval; @@ -32,58 +36,85 @@ export default () => { }; return ( -
-
-
- logo -
-
-
- -

Turn

+ <> +
+
+
+ logo
-
-
- -
-
+
+
+ +

Turn

+
+
+
+ +
+ -
- {grid.map((symbol, index) => ( +
+ {grid.map((symbol, index) => ( + + ))} +
+ + +
+ { + setModal(false); + }} + > +

Restart game?

+
+ - ))} - - - - +
+
+ ); }; diff --git a/src/mainMenu.jsx b/src/mainMenu.jsx index b0ab6f5..6dbe016 100644 --- a/src/mainMenu.jsx +++ b/src/mainMenu.jsx @@ -3,7 +3,7 @@ import * as RadioGroup from "@radix-ui/react-radio-group"; import logo from "../assets/logo.svg"; import Cross from "../assets/icon-x.svg?react"; import Oval from "../assets/icon-o.svg?react"; -import { useStore, setPlayerOneSymbol } from "./store.jsx"; +import { useStore, setPlayerOneSymbol } from "./store"; export default () => { const playerOneSymbol = useStore((state) => state.playerOneSymbol); @@ -11,7 +11,7 @@ export default () => { return (
logo -
+

Pick player 1's mark

@@ -43,10 +43,10 @@ export default () => {

- -