Off-Topic: Best way to orchestrate a sequence of events based on user input in a browser game?

[katerlouis]

This is off-topic, but I have no where else to turn to  ... but hey– maybe there is a magic GSAP way of handling what I'm asking? Joking aside. Feel free to delete this post if its not desired.

 

–––

 

I really struggled to phrase the title, which shows how lost I am. I consider myself a good web developer, but structures like this break my head

 

–––

The game

I'm remaking a little ear-training game of mine (https://twelvenotes.co/) with Nuxt3 (and yeees, also GSAP of course)

 

The game features 8 rounds of questions. Each round plays 2 musical notes and the player must tell which one is higher. 

 

The interactive concept for the new version has changed. The game does not start automatically, but waits for a "Start now" input from the Playeyr. Each round the two notes play automatically in sequence. The Player has two options now: 

 

1. Click on one note to lock in the answer to which note he thinks is higher
2. Replay the two notes in the same sequence, but lose "1 life" (or "extra listen") of 3

 

Answering a question shows an animation indicating if Player is right or wrong. After the animation is completed the game should move to the next round automatically and also start the round automatically, after the animated transition to the new round is done.

 

The whole game and each round individually is timed with a visible stop watch which will influence the final score.

 

After 8 rounds the Player is presented with an end screen showing the performance and a score.

 

The problem

As of right now, Creating the array of playable rounds, locking in the answer, moving to the next round, playing notes, replaying notes are all separate functions.

 

Now to the question: Whats the best way to control all these functions? Especially with timeouts needed for animations and playing notes etc. it's hard to structure which function does what and who tells it when to do it.

 

Who controls when we move to the next round and when we will start that round? Moving to the next round should only be possible when the current round has been answered. But should all of this be the job of `moveToNextRound()`? And who actually starts the round as in playing the notes, starting a stopwatch for this round etc. – And who stops the timer of the played round when the round has been answered? Is that a job for `moveToNextRound()` or `startRound(roundIndex)` or is that the job of a new function `finishRound()` - but who then calls `finishRound()`? Or should it be `finishCurrentRound()`. When a question is answered we need time for an animation telling the player if his answer was right or not and so on and so forth...

 

... I guess you get the picture. Structuring this is not easy for me. While doing it I constantly go back and forth between which function does what.

The question

Can you guys point me to best practices or resources in that field? Is there a common pattern I just don't know (the name of)? Only thing I can think of googling is: "Gamecontroller"... which obviously only gives you results for gaming console gamepads.

 

Thanks!

[Rodrigo]

Hi,

 

In general we can't give advice or general consulting based on a few paragraphs an without seeing more details about the project.

 

If you have an animation after the question is answered, the way to go should be to use an onComplete callback in that particular animation to start the sequence of the next question. Once the next question is animated in, again an onComplete callback start the notes or animations that show the details of the question.

 

As for the timers you can use GSAP Delayed Call in order to sync everything with GSAP:

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

As for a global timer, you can also create GSAP instance that takes the number to zero or that increases a number from zero. Basically you can create a GSAP instance that has a 1 second duration and a repeat -1 in order to play endlessly and that you can pause, play and restart.

 

If you can you can create a minimal demo that shows the approach you have right now and maybe we can have a look at it and perhaps offer some pointers.

 

Hopefully this helps.

Happy Tweening!

[Cassie]

I'd recommend using a framework that has state management for this tbh, then you can just increment state for the level and have the components visibility tied into that state to decide what components show/hide at what times. Give components entrance/exit animations and jobs a goodun!

This might be helpful? Same kind of flow logic? A little simpler perhaps?
https://github.com/elifitch/am-i-a-real-developer

[katerlouis]

Thanks for your help, guys! 

Unfortunately I seem to have failed explaining the actual issue– its hard for me to grasp it. I use Nuxt3 with Pinia (basically Vuex 5) as global store. So I'm already using something with proper state management. 

 

I'll look into "Am I a real developer" further, but at first glance it seems to be a questionnaire. I've made one myself using Vue a few years back and hadn't had much issue doing that. Maybe the "state management" was more straight forward in that. 

 

If my game was "only" determined on the current round played, I also wouldn't have issues I guess. But inside one round are more "little moments" that the UI needs to reflect. It feels like just using animations for entering and exiting a round is not enough. Hm. 

 

I can't shake the feeling that there must be a common pattern for this. Some kind of "controller"  – I lack the words to express my issue 😢

[Rodrigo]

Hi,

 

Well with Pinia you can definitely listen to certain state changes, like current question, timer, etc and use those to create the animations. I assume that each question resides in it's own component and that you're using v-for for each question? That should simplify things because each animation will reside in it's own component then all you should consider outside those components is when you go from one to the other in order to sequence the animations in the best possible way.

 

Just giving my two cents on the subject based on the first thing that comes to my mind. Not having a flow chart when I think about something like this makes me a bit uncomfortable I must say 

 

Happy Tweening!