feat(Winners): Intro for Game Winners screen. Closes #184

antoinezanardi · Apr 29, 2021 · f311fc0 · f311fc0
1 parent 6084cc3
commit f311fc0
Show file tree

Hide file tree

Showing 16 changed files with 156 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@
 * [#178](https://github.com/antoinezanardi/werewolves-assistant-web/issues/178) - Number of additional cards for Thief option.
 * [#179](https://github.com/antoinezanardi/werewolves-assistant-web/issues/179) - Rusty Sword Knight role.
 * [#183](https://github.com/antoinezanardi/werewolves-assistant-web/issues/183) - Audio options in parameters modal.
+* [#184](https://github.com/antoinezanardi/werewolves-assistant-web/issues/184) - Intro for Game Winners screen.
 * [#188](https://github.com/antoinezanardi/werewolves-assistant-web/issues/188) - Modal for helping players with roles.
 
 ### 🌟 Enhancements
@@ -62,8 +63,8 @@
 * `vue-slider-component` installed with version `3.2.11`.
 * `vuedraggable` installed with version `2.24.3`.
 * `@fortawesome/fontawesome-free` updated to version `5.15.3`.
-* `@sentry/browser` updated to version `6.3.3`.
-* `@sentry/integrations` updated to version `6.3.3`.
+* `@sentry/browser` updated to version `6.3.4`.
+* `@sentry/integrations` updated to version `6.3.4`.
 * `@vue/cli-plugin-e2e-cypress` updated to version `4.5.12`.
 * `@vue/cli-plugin-eslint` updated to version `4.5.12`.
 * `@vue/cli-plugin-router` updated to version `4.5.12`.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
     "dependencies": {
         "@chenfengyuan/vue-countdown": "^1.1.5",
         "@fortawesome/fontawesome-free": "^5.15.3",
-        "@sentry/browser": "^6.3.3",
-        "@sentry/integrations": "^6.3.3",
+        "@sentry/browser": "^6.3.4",
+        "@sentry/integrations": "^6.3.4",
         "animate.css": "^4.1.1",
         "axios": "^0.21.1",
         "bootstrap": "^4.6.0",

diff --git a/public/audio/ambient/other/suspense.mp3 b/public/audio/ambient/other/suspense.mp3
diff --git a/public/audio/sounds/angel-wins.mp3 b/public/audio/sounds/angel-wins.mp3
diff --git a/public/audio/sounds/crowd-cheering.mp3 b/public/audio/sounds/crowd-cheering.mp3
diff --git a/public/audio/sounds/game-ends.mp3 b/public/audio/sounds/game-ends.mp3
diff --git a/src/classes/AudioManager.js b/src/classes/AudioManager.js
@@ -10,6 +10,7 @@ class AudioManager {
             volume: userPreferences.audio.ambient.volume / 100,
             dayMusics: [],
             nightMusics: [],
+            suspenseMusic: undefined,
         };
         this.soundEffects = {
             volume: userPreferences.audio.soundEffects.volume / 100,
@@ -40,6 +41,7 @@ class AudioManager {
         for (const ambientDayFile of ambientDayFiles) {
             this.ambient.dayMusics.push(new Howl({ src: ambientDayFile, ...options }));
         }
+        this.ambient.suspenseMusic = new Howl({ src: "/audio/ambient/other/suspense.mp3", ...options, loop: false });
     }
 
     // eslint-disable-next-line max-lines-per-function
@@ -75,6 +77,9 @@ class AudioManager {
             "scapegoat-plays": new Howl({ src: `${basePath}/scapegoat-plays.mp3`, ...options }),
             "fox-plays": new Howl({ src: `${basePath}/fox-plays.mp3`, ...options }),
             "bear-growls": new Howl({ src: `${basePath}/bear-growls.mp3`, ...options }),
+            "game-ends": new Howl({ src: `${basePath}/game-ends.mp3`, ...options }),
+            "crowd-cheering": new Howl({ src: `${basePath}/crowd-cheering.mp3`, ...options }),
+            "angel-wins": new Howl({ src: `${basePath}/angel-wins.mp3`, ...options }),
         };
     }
 
@@ -111,11 +116,26 @@ class AudioManager {
         }
     }
 
-    stopAllMusics() {
+    playSuspenseMusic() {
+        this.ambient.suspenseMusic.fade(0, this.ambient.volume, 5000);
+        this.ambient.suspenseMusic.play();
+    }
+
+    stopSuspenseMusic() {
+        this.ambient.suspenseMusic.fade(this.ambient.volume, 0, 5000);
+        setTimeout(() => this.ambient.suspenseMusic.stop(), 5000);
+    }
+
+    stopGamePhaseMusics() {
         this.stopDayMusic();
         this.stopNightMusic();
     }
 
+    stopAllMusics() {
+        this.stopGamePhaseMusics();
+        this.stopSuspenseMusic();
+    }
+
     playSoundEffect(soundEffect) {
         if (this.soundEffects.sounds[soundEffect]) {
             this.soundEffects.sounds[soundEffect].play();

diff --git a/src/classes/Game.js b/src/classes/Game.js
@@ -189,6 +189,10 @@ class Game {
         return this.players.filter(player => player.isAlive);
     }
 
+    get deadPlayers() {
+        return this.players.filter(player => !player.isAlive);
+    }
+
     get canVotePlayers() {
         return this.players.filter(player => player.isAlive && !player.hasActiveAttribute("cant-vote", this));
     }
@@ -565,6 +569,18 @@ class Game {
     get hasRoleDependingOnPlayerPosition() {
         return !!this.getPlayerWithRole("rusty-sword-knight") || !!this.getPlayerWithRole("bear-tamer") || !!this.getPlayerWithRole("fox");
     }
+
+    get isPlaying() {
+        return this.status === "playing";
+    }
+
+    get isDone() {
+        return this.status === "done";
+    }
+
+    get isCanceled() {
+        return this.status === "canceled";
+    }
 }
 
 export default Game;
diff --git a/src/components/Game/Game.vue b/src/components/Game/Game.vue
@@ -7,12 +7,8 @@
             <div v-else key="game" class="row mx-0 h-100">
                 <GameVillagersSide class="col-lg-2 col-md-3 d-none d-md-block h-100"/>
                 <transition mode="out-in" name="fade">
-                    <GameContent v-if="game.status === 'playing'" key="playing-game"
-                                 class="col-lg-8 col-md-6 col-12 h-100 pb-2"/>
-                    <GameWinners v-else-if="game.status === 'done'" key="done-game"
-                                 class="col-lg-8 col-md-6 col-12 h-100 pb-2"/>
-                    <GameCanceled v-else-if="game.status === 'canceled'" key="canceled-game"
-                                  class="col-lg-8 col-md-6 col-12 h-100 pb-2"/>
+                    <GameCanceled v-if="game.isCanceled" key="canceled-game" class="col-lg-8 col-md-6 col-12 h-100 pb-2"/>
+                    <GameContent v-else key="game" class="col-lg-8 col-md-6 col-12 h-100 pb-2"/>
                 </transition>
                 <GameWerewolvesSide class="col-lg-2 col-md-3 d-none d-md-block h-100"/>
             </div>
@@ -24,16 +20,15 @@
 import { mapActions, mapGetters } from "vuex";
 import Swal from "sweetalert2";
 import Loading from "@/components/shared/Loading";
-import GameVillagersSide from "../shared/Game/Sides/GameVillagersSide/GameVillagersSide";
-import GameWerewolvesSide from "../shared/Game/Sides/GameWerewolvesSide/GameWerewolvesSide";
+import GameVillagersSide from "@/components/shared/Game/Sides/GameVillagersSide/GameVillagersSide";
+import GameWerewolvesSide from "@/components/shared/Game/Sides/GameWerewolvesSide/GameWerewolvesSide";
 import GameContent from "./GameContent/GameContent";
-import GameWinners from "./GameWinners/GameWinners";
-import { isAPIError } from "@/helpers/functions/Error";
 import GameCanceled from "@/components/Game/GameCanceled/GameCanceled";
+import { isAPIError } from "@/helpers/functions/Error";
 
 export default {
     name: "Game",
-    components: { GameCanceled, GameWinners, GameContent, GameWerewolvesSide, GameVillagersSide, Loading },
+    components: { GameCanceled, GameContent, GameWerewolvesSide, GameVillagersSide, Loading },
     async beforeRouteLeave(to, from, next) {
         if (this.game.status === "playing") {
             const { value: confirmLeaveGame } = await this.confirmLeaveGame();

diff --git a/src/components/Game/GameContent/GameContent.vue b/src/components/Game/GameContent/GameContent.vue
@@ -2,9 +2,10 @@
     <div id="game-content" class="d-flex flex-column">
         <transition mode="out-in" name="fade">
             <GameEventMonitor v-if="events.length" key="game-event-monitor" :events="events" @skip-event="removeEvent"/>
-            <GamePlayField v-else key="game-play-field" :play="play" @player-selected="playerSelected" @player-votes="playerVotes"
-                           @side-selected="sideSelected" @vile-father-of-wolves-infects="vileFatherOfWolvesInfects" @card-selected="cardSelected"
-                           @stuttering-judge-requests-another-vote="stutteringJudgeRequestsAnotherVote"/>
+            <GamePlayField v-else-if="game.isPlaying" key="game-play-field" :play="play" class="h-100" @player-selected="playerSelected"
+                           @player-votes="playerVotes" @side-selected="sideSelected" @vile-father-of-wolves-infects="vileFatherOfWolvesInfects"
+                           @card-selected="cardSelected" @stuttering-judge-requests-another-vote="stutteringJudgeRequestsAnotherVote"/>
+            <GameWinners v-else-if="game.isDone" key="game-play-field" class="h-100"/>
         </transition>
     </div>
 </template>
@@ -15,10 +16,11 @@ import GamePlayField from "./GamePlayField/GamePlayField";
 import GameEvent from "@/classes/GameEvent";
 import GameEventMonitor from "@/components/Game/GameEventMonitor/GameEventMonitor";
 import { maxTargetLengthForPlayerAttribute } from "@/helpers/functions/Player";
+import GameWinners from "@/components/Game/GameWinners/GameWinners";
 
 export default {
     name: "GameContent",
-    components: { GameEventMonitor, GamePlayField },
+    components: { GameWinners, GameEventMonitor, GamePlayField },
     data() {
         return {
             play: {
@@ -40,7 +42,7 @@ export default {
             handler(newGame) {
                 this.resetPlay();
                 this.generateLastActionEvents();
-                if (newGame.tick === 1) {
+                if (newGame.isPlaying && newGame.tick === 1) {
                     this.events.push(new GameEvent({ type: "game-starts" }));
                     this.generatePlayerStartsGameRevealedEvents();
                 }
@@ -52,7 +54,11 @@ export default {
                     this.generateGameDeathAndRevealEvents();
                     this.generateGamePhaseEvent();
                 }
-                this.generateGameRoleTurnEvents();
+                if (newGame.isPlaying) {
+                    this.generateGameRoleTurnEvents();
+                } else if (newGame.isDone) {
+                    this.events.push(new GameEvent({ type: "game-ends" }));
+                }
             },
             deep: true,
             immediate: true,
@@ -61,8 +67,9 @@ export default {
     created() {
         const firstEvent = this.events.length ? this.events[0] : undefined;
         if (!firstEvent || firstEvent.type !== "day-rises" && firstEvent.type !== "night-falls") {
-            if (this.game.isFirstWaitingPreFirstNightPlay || this.game.phase === "day" && !this.events.find(({ type }) => type === "day-rises") ||
-                this.game.phase === "night" && this.events.find(({ type }) => type === "night-falls")) {
+            if (this.game.tick === 1 || this.game.isFirstWaitingPreFirstNightPlay || this.game.phase === "day" &&
+                !this.events.find(({ type }) => type === "day-rises") || this.game.phase === "night" &&
+                this.events.find(({ type }) => type === "night-falls")) {
                 this.audioManager.playDayMusic();
             } else {
                 this.audioManager.playNightMusic();
@@ -151,12 +158,14 @@ export default {
             }
         },
         generateGamePhaseEvent() {
-            if (this.game.history.length && this.game.history[0].isPreFirstNightPlay && !this.game.isFirstWaitingPreFirstNightPlay) {
+            if (this.game.tick === 1 && !this.game.isFirstWaitingPreFirstNightPlay ||
+                this.game.history.length && this.game.history[0].isPreFirstNightPlay && !this.game.isFirstWaitingPreFirstNightPlay) {
                 return this.events.push(new GameEvent({ type: "night-falls" }));
-            } else if (this.game.history.length &&
-                (this.game.phase !== this.game.history[0].phase || this.game.turn !== this.game.history[0].turn)) {
+            } else if (this.game.history.length && (this.game.phase !== this.game.history[0].phase || this.game.turn !== this.game.history[0].turn)) {
                 const event = this.game.phase === "day" ? new GameEvent({ type: "day-rises" }) : new GameEvent({ type: "night-falls" });
-                this.events.push(event);
+                if (this.game.isPlaying || event.type === "day-rises") {
+                    this.events.push(event);
+                }
             }
         },
         generatePlayerStartsGameRevealedEvents() {
@@ -192,8 +201,8 @@ export default {
             }
         },
         generateBearGrowlEvent() {
-            const { bearTamerPlayer } = this.game;
-            if (this.events.find(event => event.type === "day-rises") && bearTamerPlayer) {
+            const { bearTamerPlayer, isPlaying } = this.game;
+            if (isPlaying && this.events.find(event => event.type === "day-rises") && bearTamerPlayer) {
                 if (bearTamerPlayer.hasActiveAttribute("growls", this.game)) {
                     this.events.push(new GameEvent({ type: `bear-growls`, targets: [{ player: bearTamerPlayer }] }));
                 } else {

diff --git a/src/components/Game/GameContent/GamePlayField/GamePlayField.vue b/src/components/Game/GameContent/GamePlayField/GamePlayField.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="game-play-field" class="h-100">
+    <div id="game-play-field">
         <transition mode="out-in" name="fade">
             <div v-if="loadings.pastEvents" key="loading-past-events" class="d-flex justify-content-center align-items-center h-100">
                 <Loading/>