diff --git a/package-lock.json b/package-lock.json index c621167..7f5663a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "immer": "^10.1.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "use-immer": "^0.9.0", "zustand": "^4.5.2" }, "devDependencies": { @@ -3232,6 +3233,15 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/use-immer": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/use-immer/-/use-immer-0.9.0.tgz", + "integrity": "sha512-/L+enLi0nvuZ6j4WlyK0US9/ECUtV5v9RUbtxnn5+WbtaXYUaOBoKHDNL9I5AETdurQ4rIFIj/s+Z5X80ATyKw==", + "peerDependencies": { + "immer": ">=2.0.0", + "react": "^16.8.0 || ^17.0.1 || ^18.0.0" + } + }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", diff --git a/package.json b/package.json index d97e804..e5134f3 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "immer": "^10.1.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "use-immer": "^0.9.0", "zustand": "^4.5.2" }, "devDependencies": { diff --git a/src/game.jsx b/src/game.jsx index f52c6c3..6012c1b 100644 --- a/src/game.jsx +++ b/src/game.jsx @@ -1,33 +1,34 @@ +import { useImmer } from "use-immer"; + +import Cross from "../assets/icon-x.svg?react"; +import CrossOutline from "../assets/icon-x-outline.svg?react"; +import Oval from "../assets/icon-o.svg?react"; +import OvalOutline from "../assets/icon-o-outline.svg?react"; import logo from "../assets/logo.svg"; import restart from "../assets/icon-restart.svg"; -import Cross from "../assets/icon-x.svg?react"; -import Oval from "../assets/icon-o.svg?react"; -import CrossOutline from "../assets/icon-x-outline.svg?react"; -import OvalOutline from "../assets/icon-o-outline.svg?react"; - export default () => { - const grid = ["", "X", "O", "X", "O", "X", "", "O", "X"]; + const [grid, updateGrid] = useImmer(Array(9).fill("")); + const turn = grid.filter((s) => s == "").length % 2 != 0 ? "X" : "O"; + + const TurnOutline = turn == "X" ? CrossOutline : OvalOutline; + const TurnIndicator = turn == "X" ? Cross : Oval; const renderSymbol = (symbol) => { - let Component; - let colorClass; + if (symbol == "") { + let colorClass = turn == "X" ? "text-blue-700" : "text-yellow-700"; - if (symbol == "X") { - Component = Cross; - colorClass = "text-blue-700"; - } else if (symbol == "O") { - Component = Oval; - colorClass = "text-yellow-700"; - } else { return ( - ); } - return ; + let Symbol = symbol == "X" ? Cross : Oval; + let colorClass = symbol == "X" ? "text-blue-700" : "text-yellow-700"; + + return ; }; return ( @@ -38,7 +39,7 @@ export default () => {
- +

Turn

@@ -50,10 +51,16 @@ export default () => {
- {grid.map((symbol) => ( + {grid.map((symbol, index) => (