Skip to content
Submitted about 1 month ago

Responsive Tic Tac Toe game using tailwindcss + react aria components

#framer-motion#react#react-aria#tailwind-css#zustand
Kim Fransson•200
@kim-fransson
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tic Tac Toe game
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that I actually designed/implemented the "difficulty selection". Last time I tried to make a tic tac toe I gave up implementing the cpu logic, but this time I had the motivation/energy to implement it.

Next time (I guess when I will try to implement the four in a row game) I will focus more on fun animation (especially transitions between screens). Maybe also include some sound effects.

What challenges did you encounter, and how did you overcome them?

Not really any road blocks this time, the only brain farts was the svgs missing viewBoxs resulting in weird scaling issues with "vite-plugin-svgr".

What specific areas of your project would you like help with?

Not really, but feel free to write a nice comment or start a discussion

Community feedback

  • P
    Tsotne Meladze•1,060
    @tsotneforesterPosted 5 days ago

    Bravo!🌟 what a wonderful thing to experience! I have couple of things to suggest, but they are so minor, just not worth saying for this app. if you add winning pattern highlight, I will say this is far best solution

    Marked as helpful
    1
    Kim Fransson•200
    @kim-franssonPosted 5 days ago

    @tsotneforester

    Glad you enjoyed it, and thank you for your kind words, appreciate it!

    If I would add a winning pattern, I would probably try and create some kind of winning animation.

    1. Highlight the winning pattern (the square could have a thick border with the border color of the winner, or maybe change the background color). Maybe add some subtle bounce/scale animation.
    2. I would add a delay of the winning modal, so it does not hide the winning pattern directly.
    3. Would also like to play around with sound design, button presses, winning sound, background music etc.

    Once again, glad you took your time testing it.

    All the best,

    // Kim

    0
  • P
    Wannika123•890
    @Wannika123Posted about 1 month ago

    This is really good. Congrats!

    1
    Kim Fransson•200
    @kim-franssonPosted about 1 month ago

    @Wannika123 thank you very much!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord