Now, we will need to handle the action triggered when the user clicks on each overlay. We will create a map, with the key being the type of overlay and the value a function called when the action is triggered.
- Add it in the main.js file:
var overlayCloseHandlers = {
'player-turn' () {
if (state.turn > 1) {
state.activeOverlay = 'last-play'
} else {
newTurn()
}
},
'last-play' () {
newTurn()
},
'game-over' () {
// Reload the game
document.location.reload()
},
}
For the player-turn overlay, we only switch to the last-play overlay if it's the second or more turn, since at the start of the very first turn, the opponent does not play any card.
- In the main component, add the handleOverlayClose method that calls the action function corresponding to the currently active overlay with the activeOverlay property:
methods: {
// ...
handleOverlayClose () {
overlayCloseHandlers[this.activeOverlay]()
},
},
- On the overlay component, add an event listener of the 'close' type that will be triggered when the user clicks on the overlay:
<overlay v-if="activeOverlay" :key="activeOverlay"
@close="handleOverlayClose">