Tic Tac Toe
A recreation of the classic Tic Tac Toe game, but with a 1P mode as well as splash screens and internationalization.
Published onUpdated on
1.435
astro
nanostores
solidjs
tailwindcss
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/i18nlibrary to create dynamic translations for the website, instead of using page based routings. - I learned that there’s
client:onlydirective 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.