Tic Tac Toe

The classic project for every React developer. This time, with persistent states, a bot to play against and having multiple languages to choose from.

Overview

The basic challenges specified in Frontend Mentor challenge. Users should be able to:

View the optimal layout for the game depending on their device’s screen size
See hover states for all interactive elements on the page
Play the game either solo vs the computer or multiplayer against another person
Bonus 1: Save the game state in the browser so that it’s preserved if the player refreshes their browser
Bonus 2: Instead of having the computer randomly make their moves, try making it clever so it’s proactive in blocking your moves and trying to win

Expected behaviors:

On the new game screen, whichever mark isn’t selected for the first player is automatically assigned to the second player when the game is started.
The first turn of the first round is always played by whoever is playing as X. For every following round, the first turn alternates between O and X.
After a round, if the player chooses to quit the game, they should be taken back to the new game menu.
If the restart icon in the top right is clicked, the “Restart game?” modal should show and allow the player to reset the game or cancel and continue to play.

Desktop

Mobile

Tablet

I learned to use the nanostores/i18n library to create dynamic translations for the website, instead of using page based routings.
I learned that there’s client:only directive to completely disable SSR for a component. Sometimes a component doesn’t render well on SSR, so for now, I think it’s better to disable it. There might be a way to make it so the component rerenders on a client mount, but this doesn’t seem to trigger a rerun of the component.

Definitely had a lot of fun utilizing nanostores/i18n and would like to continue to do so, since it feels much better than copying pages for translations.