Skip to content
Submitted 10 days ago

Real-time gameplay with Colyseus

angular, tailwind-css, xstate
P
LVL 3
@Chious
A solution to the Tic Tac Toe game challenge

Solution retrospective


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

To make the project more interesting, I've added a few extra features:

  • Single-player mode with Bot: Implemented using the Minimax algorithm
  • Multiplayer mode: Real-time competition powered by Colyseus.
What challenges did you encounter, and how did you overcome them?

Challenges encountered with AI:

  • Complex Logic & Edge Cases: When the logic became complex (e.g., handling user disconnections, redesigning server state, providing proper UI hints, or managing async side effects on the frontend), the AI didn't do so well. I found it necessary to think through the edge cases myself and decide on the best user experience.

  • Outdated Packages: While setting up Colyseus, the AI fell into an infinite loop trying to use the deprecated colyseus.js package. Instead, I used npm create colyseus-app@latest ./server based on the official documentation, and manually edited the files step-by-step before integrating with the Angular client.

  • Testing Constraints: Writing E2E or Unit tests with AI still requires careful review. Although AI writes code quickly, it doesn't always reflect a true double-check for edge cases or real user expectations. Relying on official documentation is still the best practice here.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Chiou Jia Sheng’s solution.

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