NB: Consult the code and play with the app here: ⚡️
The example app allows FANS to vote for either Blue or Red. Notice when voting for either the results panel on top does show the updated score. At the bottom, both "FANS" areas show their respective mood with an emoji. If it's a tie both moods are neutral 😐. Otherwise, the winning team displays 😃 and the losing one 🤬. Click/Vote to see the results pannel update immediately. On the other hand, the "FANS" areas only updates if there is a "change of mood".
State (in: "./src/state.ts"): The app's state/data and the functions to read/query or write/mutate it. This file also contains the app's rules!
App (in: "./src/App.vue"): The app entry point where component are imported and rendered.
Result Panel (in: "./src/components/ResultPanel.vue"): Result Panel continuously displays current score.
Fans Group (in: "./src/components/FansGroup.vue"): Two instances of this component are shown in the App. One for each group/team (i.e. Red & Blue). Each allows for voting for the given group/team and shows the mood of that team. Note that this component only re-renders when applicable (i.e. when the mood changes)