Tic Tac Toe

Overview

This is a challenge by Frontend Mentor.

Features

• 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
• 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.

Keyboard Navigation

• You can use number keys 1 to 9 to select a cell.
• You can use arrow keys ←, ↑, →, ↓ to navigate the board.
• You can use R to restart the game.
• You can use T to focus on the translation tab.

Screenshots

The Learning Experience

What I learned

• 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.

Continued development

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.