Add confetti and sound effects to game over screen

package.json

@@ -19,6 +19,7 @@
         "core-js": "^3.34.0",
         "roboto-fontface": "*",
         "vue": "^3.4.0",
+        "vue-confetti-explosion": "^1.0.2",
         "vue-i18n": "^9.14.0",
         "vue-router": "^4.3.0",
         "vuetify": "^3.5.0",

src/pages/game/GameOver.vue

@@ -6,6 +6,10 @@
             </v-col>
         </v-row>
 
+        <v-row justify="center">
+            <ConfettiExplosion />
+        </v-row>
+
         <v-row>
             <v-col>
                 <v-list>
@@ -36,10 +40,19 @@
 
 <script>
 import {mapState, mapGetters} from 'vuex';
+import ConfettiExplosion from 'vue-confetti-explosion';
+import mp3 from '../../assets/sounds/game-over.mp3';
+
+const sound = new Audio(mp3);
 
 export default {
+    components: {
+        ConfettiExplosion,
+    },
+
     computed: {
         ...mapState([
+            'settings',
             'score',
         ]),
 
@@ -50,12 +63,22 @@ export default {
         ]),
     },
 
+    mounted() {
+        this.playSound();
+    },
+
     methods: {
         continueGame() {
             this.$store.dispatch('endGame').then(() => {
                 this.$router.replace({name: 'teams'});
             });
         },
+
+        playSound() {
+            if (this.settings.sounds) {
+                sound.play();
+            }
+        },
     },
 };
 </script>