Rock Paper Scissors using XState

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

My main objective was to get my hands dirty by testing out xstate. It may not have been the smartest to try and test it out for a project this size, but it was a fun challenge.

Apart from not giving up, I'm fairly proud of how I calculate the winner and also using a lot of css to style the gesture buttons (no need for using a lot of divs). But I ran in to issue to actually change the size of the icons, so maybe I would rather go the html heavy approach.

I'm also proud of testing out some more sound/animation design, was a lot of fun.

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

Oboy the hardest part was for sure getting my head around a good approach to persist the xstate state. I needed to do many iterations and changes to get an so what acceptable solution.

1. Issue one was that I used delays between the states, to mimic going from loading to gameOver. However these delays didn't seems to play nicely when persisting the state, and the user would get trapped in a state infinitly. I solved this by moving the delays to the components instead.

2. The next issue was how I wanted to save the state, when I tried to solve the above issue, I thought saving the events in localstorage and then replaying them, may trigger the delays. However the issue I had there was that the modal / popover was flickering (due to the fact that the xstate controlled the open states for these components). I solved this by making them un-controlled components.

3. I gave up the idea to save the events, the state machine never have an ending state, you just play and play and that would resolve in memory issue and I didn't feel like manage that aswell. I solved this by only saving the snapshot (kind of a standard thing to do).

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

Anyone out there who have done a lot of projects with xstate? Feel free to start an discussion!

If not, feel free to write a nice comment!

All the best,

// Kim