Tic-Tac-React-Node
⚠️ Disclaimer: I have had no prior experience with Node.js aside from having it power React in the background, and I've tried TypeScript only recently with my Angular project. Forgive the patterns I used, but feel free to give me feedback (hello@caye.codes). Grateful as well for this guide as it helped me understand how backend works for Node.
Features:
1. Server-rendered React (CRA) responsive, mobile-friendly web app
2. Uses Bulma as CSS framework
3. X always goes first—alternate turns—until a winning grid matches, or a draw is called
4. New game clears grid
5. Counts X and O wins, as well as number of games played
Thought process:
1. Data entities include Grid and Game
2. On every click, it updates the Grid -> evaluateGrid -> updates Grid and Game (Ongoing | Draw | X_Wins | O_Wins for status, toggles player, tallies turn number/wins/game number)
3. Added pizzazz in that I highlighted the winning slots, and presented the game stats neatly below the grid
Caveats:
1. It does not validate the earliest occasion of a draw—only assumes it is if by Turn 8, there is still no winner
2. You can click on multiple boxes quickly and win (should've put a LOADING status to disable further clicks while validating grid 😅)
3. Matching the winning grid used a double loop (could've used Regex, but I know myself enough that that will take me forever 🥲)
Had fun though! I never knew a "simple" game could give such a tough challenge.