diff --git a/.github/workflows/vite_deploy.yaml b/.github/workflows/vite_deploy.yaml index c52f69b..784bdee 100644 --- a/.github/workflows/vite_deploy.yaml +++ b/.github/workflows/vite_deploy.yaml @@ -4,7 +4,7 @@ name: Deploy static content to Pages on: # Runs on pushes targeting the default branch push: - branches: ['main'] + branches: ["main"] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -17,7 +17,7 @@ permissions: # Allow one concurrent deployment concurrency: - group: 'pages' + group: "pages" cancel-in-progress: true jobs: @@ -34,7 +34,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: 20 - cache: 'npm' + cache: "npm" - name: Install dependencies run: | rm package-lock.json @@ -47,7 +47,7 @@ jobs: uses: actions/upload-pages-artifact@v3 with: # Upload dist folder - path: './dist' + path: "./dist" - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 diff --git a/README-template.md b/README-template.md index 0761b79..2b752c3 100644 --- a/README-template.md +++ b/README-template.md @@ -1,6 +1,6 @@ # Frontend Mentor - Tic Tac Toe solution -This is a solution to the [Tic Tac Toe challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/tic-tac-toe-game-Re7ZF_E2v). Frontend Mentor challenges help you improve your coding skills by building realistic projects. +This is a solution to the [Tic Tac Toe challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/tic-tac-toe-game-Re7ZF_E2v). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ## Table of contents @@ -36,7 +36,7 @@ Users should be able to: Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. -Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. @@ -71,15 +71,17 @@ To see how you can add code snippets, see below: ```html

Some HTML code I'm proud of

``` + ```css .proud-of-this-css { color: papayawhip; } ``` + ```js const proudOfThisFunc = () => { - console.log('🎉') -} + console.log("🎉"); +}; ``` If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. diff --git a/README.md b/README.md index 6a5ab6d..6133a20 100644 --- a/README.md +++ b/README.md @@ -83,12 +83,12 @@ Remember, if you're looking for feedback on your solution, be sure to ask questi There are multiple places you can share your solution: -1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). 2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. 3. Share your solution on other social channels like LinkedIn. 4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). -We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. The more specific you are with your questions the more likely it is that another member of the community will give you feedback. diff --git a/src/app.jsx b/src/app.jsx index c8415f1..cf51cc4 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,12 +1,15 @@ import MainMenu from "./mainMenu"; import Game from "./game"; -import Modal from "./modal"; +import { useStore } from "./store"; export default () => { + const isGameRunning = useStore((state) => state.isGameRunning); + const gameKey = useStore((state) => state.gameKey); + const players = useStore((state) => state.players); + return (
- {/* */} - + {isGameRunning ? : }
); }; diff --git a/src/game.jsx b/src/game.jsx index db21c47..16b1d16 100644 --- a/src/game.jsx +++ b/src/game.jsx @@ -8,9 +8,39 @@ import OvalOutline from "../assets/icon-o-outline.svg?react"; import logo from "../assets/logo.svg"; import restart from "../assets/icon-restart.svg"; +import { restartGame } from "./store"; import Modal from "./modal"; -export default () => { +const getWinner = (grid) => { + const combos = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], + ]; + + const wins = (combo) => { + const symbols = combo.map((i) => grid[i]); + + return symbols.every((symbol) => symbol == symbols[0] && symbol != ""); + }; + + const winningCombo = combos.find(wins); + + if (winningCombo) { + return grid[winningCombo[0]]; + } + + return ""; +}; + +export default ({ players: _players }) => { + const [score, updateScore] = useImmer({ X: 0, O: 0, ties: 0 }); + const [grid, updateGrid] = useImmer(Array(9).fill("")); const [modal, setModal] = useState(false); @@ -18,6 +48,15 @@ export default () => { const TurnOutline = turn == "X" ? CrossOutline : OvalOutline; const TurnIndicator = turn == "X" ? Cross : Oval; + const winner = getWinner(grid); + if (winner) { + updateScore((score) => { + score[winner]++; + }); + + updateGrid(() => Array(9).fill("")); + } + const renderSymbol = (symbol) => { if (symbol == "") { let colorClass = turn == "X" ? "text-blue-700" : "text-yellow-700"; @@ -77,16 +116,16 @@ export default () => { @@ -106,9 +145,7 @@ export default () => {

No, cancel

-