From 0e4907984ff68357a3f04de073f1fb9c9d2017e0 Mon Sep 17 00:00:00 2001
From: conor <conormurphyx@gmail.com>
Date: Fri, 2 Feb 2024 00:22:38 -0800
Subject: [PATCH]  * convert all views to composition api

---
 .idea/inspectionProfiles/Project_Default.xml |  18 ---
 client/.eslintrc.cjs                         |   1 +
 client/package.json                          |   2 +-
 client/src/App.vue                           |  14 +-
 client/src/components/endGame/EndGame.vue    |   2 +-
 client/src/locales/index.ts                  |   1 +
 client/src/mixins/audiowrap.ts               |   4 +-
 client/src/stores/game.ts                    |  48 +++----
 client/src/views/About.vue                   |  24 +---
 client/src/views/Game.vue                    | 138 ++++++++++---------
 client/src/views/Home.vue                    |  84 ++++++-----
 client/src/views/HowToPlay.vue               |  86 ++++++------
 package-lock.json                            |  36 ++---
 13 files changed, 214 insertions(+), 244 deletions(-)

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 86f2bdc..7394788 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -12,23 +12,5 @@
       </option>
       <option name="myCustomValuesEnabled" value="true" />
     </inspection_tool>
-    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="9">
-            <item index="0" class="java.lang.String" itemvalue="nobr" />
-            <item index="1" class="java.lang.String" itemvalue="noembed" />
-            <item index="2" class="java.lang.String" itemvalue="comment" />
-            <item index="3" class="java.lang.String" itemvalue="noscript" />
-            <item index="4" class="java.lang.String" itemvalue="embed" />
-            <item index="5" class="java.lang.String" itemvalue="script" />
-            <item index="6" class="java.lang.String" itemvalue="lobby" />
-            <item index="7" class="java.lang.String" itemvalue="notification-count" />
-            <item index="8" class="java.lang.String" itemvalue="volume-control" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
   </profile>
 </component>
\ No newline at end of file
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
index 9735d61..3657cd8 100644
--- a/client/.eslintrc.cjs
+++ b/client/.eslintrc.cjs
@@ -21,6 +21,7 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/consistent-type-imports': ['error'],
+    '@typescript-eslint/unbound-method': ['off'],
     '@typescript-eslint/no-unused-vars': ['off'],
     '@typescript-eslint/no-unsafe-assignment': ['off'],
     'vue/multi-word-component-names': ['off'],
diff --git a/client/package.json b/client/package.json
index 37b5968..9bb2b6f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,7 +20,7 @@
     "portal-vue": "^3.0.0",
     "socket.io-client": "^4.7.2",
     "vue": "^3.2.47",
-    "vue-i18n": "^9.8.0",
+    "vue-i18n": "^9.9.1",
     "vue-router": "^4.2.5",
     "vue-slider-component": "^4.1.0-beta.7",
     "@types/bootstrap": "^5.2.10",
diff --git a/client/src/App.vue b/client/src/App.vue
index 9dd4975..c27d09d 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { PortalTarget } from 'portal-vue';
+</script>
+
 <template>
   <div class="container min-vh-100">
     <div class="d-flex min-vh-100 flex-column justify-content-evenly align-items-center">
@@ -8,16 +12,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PortalTarget } from 'portal-vue';
-import { defineComponent } from 'vue';
-export default defineComponent({
-  components: {
-    PortalTarget
-  }
-});
-</script>
-
 <style lang="scss">
 @import '@/styles/app';
 </style>
diff --git a/client/src/components/endGame/EndGame.vue b/client/src/components/endGame/EndGame.vue
index bb611a5..e19384c 100644
--- a/client/src/components/endGame/EndGame.vue
+++ b/client/src/components/endGame/EndGame.vue
@@ -45,7 +45,7 @@ export default defineComponent({
     ...mapActions(useGameStore, ['setScene']),
     toLobby() {
       click.play();
-      this.setScene('lobby');
+      this.setScene('Lobby');
     }
   }
 });
diff --git a/client/src/locales/index.ts b/client/src/locales/index.ts
index 2374dd1..9648c3c 100644
--- a/client/src/locales/index.ts
+++ b/client/src/locales/index.ts
@@ -10,5 +10,6 @@ const messages = {
 export default createI18n<[typeof en], 'en'>({
   locale: 'en',
   fallbackLocale: 'en',
+  legacy: false,
   messages
 });
diff --git a/client/src/mixins/audiowrap.ts b/client/src/mixins/audiowrap.ts
index 305e96c..b907def 100644
--- a/client/src/mixins/audiowrap.ts
+++ b/client/src/mixins/audiowrap.ts
@@ -1,7 +1,7 @@
 // won't adjust audio while playing, but will be fine for short audio clips
 import { useSettingsStore } from '@/stores/settings.js';
 
-export const AudioWrap = class {
+export class AudioWrap {
   private audio: HTMLAudioElement;
   constructor(file: string) {
     this.audio = new Audio(file);
@@ -20,4 +20,4 @@ export const AudioWrap = class {
   set currentTime(val: number) {
     this.audio.currentTime = val;
   }
-};
+}
diff --git a/client/src/stores/game.ts b/client/src/stores/game.ts
index fbdb7db..2a12b81 100644
--- a/client/src/stores/game.ts
+++ b/client/src/stores/game.ts
@@ -18,14 +18,14 @@ import type { Result } from ':common/result';
 import { isOk } from ':common/result';
 
 type Scene =
-  | 'lobby'
-  | 'countdown'
-  | 'promptResponse'
-  | 'selection'
-  | 'activeMatching'
-  | 'matchingSummary'
-  | 'endRound'
-  | 'endGame';
+  | 'Lobby'
+  | 'Countdown'
+  | 'PromptResponse'
+  | 'Selection'
+  | 'ActiveMatching'
+  | 'MatchingSummary'
+  | 'EndRound'
+  | 'EndGame';
 
 export type Match = Omit<ServerMatch, 'player'> & { player: Player };
 
@@ -59,7 +59,7 @@ interface State {
 
 export const useGameStore = defineStore('game', {
   state: (): State => ({
-    scene: 'lobby',
+    scene: 'Lobby',
     prompt: '',
     timer: 0,
     // for cancelling the timer
@@ -207,7 +207,7 @@ export const useGameStore = defineStore('game', {
         }
         if (match.player === room.self!.id) {
           this.useResponse(match.response);
-          this.scene = 'matchingSummary';
+          this.scene = 'MatchingSummary';
         }
       }
     },
@@ -217,7 +217,7 @@ export const useGameStore = defineStore('game', {
       const usedResponse = this.matches.find((match: Match) => match.player.id === selfId)!.response;
       this.unuseResponse(usedResponse);
       this.unmatched = true;
-      this.scene = 'activeMatching';
+      this.scene = 'ActiveMatching';
     },
     async getResponses(id: string): Promise<void> {
       return new Promise((resolve, reject) => {
@@ -253,12 +253,12 @@ export const useGameStore = defineStore('game', {
         this.resetResponses();
         this.matches = [];
         this.voteCounts['skipPrompt'] = { count: 0, next: false };
-        this.scene = 'countdown';
+        this.scene = 'Countdown';
         this.firstSelection = true;
         void this.startTimer().then(() => {
           this.timer = this.options.promptTimer;
           void this.startTimer();
-          this.scene = 'promptResponse';
+          this.scene = 'PromptResponse';
         });
       });
 
@@ -282,7 +282,7 @@ export const useGameStore = defineStore('game', {
         this.selectionType = data.selectionType;
         this.voteCounts['sikeDispute'] = { count: 0, next: false };
         this.selectionTypeChoice = data.selectionType === 'choice';
-        this.scene = 'selection';
+        this.scene = 'Selection';
       });
 
       socket.on('beginMatching', (response: string) => {
@@ -291,9 +291,9 @@ export const useGameStore = defineStore('game', {
         this.selectedResponse = response;
         if (this.isSelector) {
           this.useSelectorResponse(response);
-          this.scene = 'matchingSummary';
+          this.scene = 'MatchingSummary';
         } else {
-          this.scene = 'activeMatching';
+          this.scene = 'ActiveMatching';
         }
       });
 
@@ -302,14 +302,14 @@ export const useGameStore = defineStore('game', {
       });
 
       socket.on('endRound', (data: { hasNextRound: boolean }) => {
-        this.scene = 'endRound';
+        this.scene = 'EndRound';
         this.hasNextRound = data.hasNextRound;
         this.voteCounts['startNextRound'] = { count: 0, next: false };
       });
 
       socket.on('gameOver', (data: { player: string; points: number }[]) => {
         const room = useRoomStore();
-        this.scene = 'endGame';
+        this.scene = 'EndGame';
         const scores = [];
         for (const score of data) {
           scores.push({
@@ -338,23 +338,23 @@ export const useGameStore = defineStore('game', {
           void this.startTimer();
         }
         const isSelector = this.selector?.id === room.self!.id;
-        let scene: Scene = 'lobby';
+        let scene: Scene = 'Lobby';
         //'lobby', 'response', 'selection', 'matching'
         switch (data.stage) {
           case 'lobby':
-            scene = 'lobby';
+            scene = 'Lobby';
             break;
           case 'response':
-            scene = 'promptResponse';
+            scene = 'PromptResponse';
             break;
           case 'selection':
-            scene = 'selection';
+            scene = 'Selection';
             break;
           case 'matching':
-            scene = isSelector ? 'matchingSummary' : 'activeMatching';
+            scene = isSelector ? 'MatchingSummary' : 'ActiveMatching';
             break;
           case 'endRound':
-            scene = 'endRound';
+            scene = 'EndRound';
             break;
         }
         this.scene = scene;
diff --git a/client/src/views/About.vue b/client/src/views/About.vue
index 7955d79..1af6249 100644
--- a/client/src/views/About.vue
+++ b/client/src/views/About.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import ClickMp3 from '@/assets/audio/click1.mp3';
+import { AudioWrap } from '@/mixins/audiowrap';
+const click = new AudioWrap(ClickMp3);
+</script>
+
 <template>
   <div class="main-content w-75 p-3 p-lg-5 text-center">
     <h1 v-t="'about.header'" class="display-3 font-fancy text-burgundy" />
@@ -21,24 +27,8 @@
         <a v-t="'about.coffee'" href="https://www.buymeacoffee.com/ConorMurphy/" />
       </template>
     </i18n-t>
-    <router-link to="/" @click="onClick">
+    <router-link to="/" @click="click.play()">
       <button v-t="'homeButton'" type="button" class="btn btn-burgundy mt-3 w-25" />
     </router-link>
   </div>
 </template>
-
-<script lang="ts">
-import ClickMp3 from '@/assets/audio/click1.mp3';
-import { AudioWrap } from '@/mixins/audiowrap';
-import { defineComponent } from 'vue';
-
-const click = new AudioWrap(ClickMp3);
-
-export default defineComponent({
-  methods: {
-    onClick() {
-      click.play();
-    }
-  }
-});
-</script>
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 02a57a8..12f91b0 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -1,20 +1,87 @@
+<script setup lang="ts">
+import Lobby from '@/components/lobby/Lobby.vue';
+import Countdown from '@/components/countdown/Countdown.vue';
+import PromptResponse from '@/components/promptResponse/PromptResponse.vue';
+import Selection from '@/components/responseSelection/Selection.vue';
+import ActiveMatching from '@/components/responseMatching/ActiveMatching.vue';
+import MatchingSummary from '@/components/responseMatching/MatchingSummary.vue';
+import EndRound from '@/components/endRound/EndRound.vue';
+import EndGame from '@/components/endGame/EndGame.vue';
+import VolumeControl from '@/components/gameShared/VolumeControl.vue';
+import TooltipToggle from '@/components/gameShared/TooltipToggle.vue';
+import { useRoomStore } from '@/stores/room';
+import { useGameStore } from '@/stores/game';
+import { Portal } from 'portal-vue';
+import { computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const gameStore = useGameStore();
+const roomStore = useRoomStore();
+const router = useRouter();
+
+const { t } = useI18n();
+
+const props = defineProps({
+  roomName: {
+    type: String,
+    required: true
+  }
+});
+
+const gameScenes = {
+  Lobby,
+  Countdown,
+  PromptResponse,
+  Selection,
+  ActiveMatching,
+  MatchingSummary,
+  EndRound,
+  EndGame
+};
+
+onMounted(() => {
+  if (props.roomName !== roomStore.roomName) {
+    void router.push({ name: 'home', query: { name: props.roomName } });
+  }
+});
+
+const helpLink = computed(() => {
+  const tips = {
+    Lobby: '#overview',
+    Countdown: '#prompt',
+    PromptResponse: '#prompt',
+    Selection: '#selection',
+    ActiveMatching: '#matching',
+    MatchingSummary: '#matching',
+    EndRound: '#overview',
+    EndGame: '#overview'
+  };
+  return router.resolve({ name: 'howToPlay', hash: tips[gameStore.scene] }).href;
+});
+
+const isMobile = computed(() => {
+  return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+});
+</script>
+
 <template>
   <div class="main-content d-flex w-xl-75 w-100 flex-grow-1 p-1 position-relative">
     <a
       class="btn btn-burgundy position-absolute top-0 end-0 mt-2 me-2 bi-question py-0 px-1 fs-6"
       target="_blank"
       :href="helpLink" />
-    <component :is="scene" />
+    <component :is="gameScenes[gameStore.scene]" />
 
     <portal to="banner">
       <a
-        v-if="scene === 'lobby' || scene === 'endGame'"
+        v-if="gameStore.scene === 'Lobby' || gameStore.scene === 'EndGame'"
         href="https://www.buymeacoffee.com/ConorMurphy/"
         target="_blank"
         class="link-yellow fs-6 text-center">
         <div class="d-flex align-items-center justify-content-center gap-1">
           <span v-t="'coffeeBannerLink'" />
-          <img :alt="$t('coffeeAlt')" src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" height="25" />
+          <img :alt="t('coffeeAlt')" src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" height="25" />
         </div>
       </a>
     </portal>
@@ -26,68 +93,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import Lobby from '@/components/lobby/Lobby.vue';
-import Countdown from '@/components/countdown/Countdown.vue';
-import PromptResponse from '@/components/promptResponse/PromptResponse.vue';
-import Selection from '@/components/responseSelection/Selection.vue';
-import ActiveMatching from '@/components/responseMatching/ActiveMatching.vue';
-import MatchingSummary from '@/components/responseMatching/MatchingSummary.vue';
-import EndRound from '@/components/endRound/EndRound.vue';
-import EndGame from '@/components/endGame/EndGame.vue';
-import VolumeControl from '@/components/gameShared/VolumeControl.vue';
-import TooltipToggle from '@/components/gameShared/TooltipToggle.vue';
-import { mapState } from 'pinia';
-import { useRoomStore } from '@/stores/room';
-import { useGameStore } from '@/stores/game';
-import { Portal } from 'portal-vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    Portal,
-    Lobby,
-    Countdown,
-    PromptResponse,
-    Selection,
-    ActiveMatching,
-    MatchingSummary,
-    EndRound,
-    EndGame,
-    VolumeControl,
-    TooltipToggle
-  },
-  props: {
-    roomName: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    ...mapState(useGameStore, ['scene']),
-    ...mapState(useRoomStore, { storeRoomName: 'roomName' }),
-    helpLink() {
-      const tips = {
-        lobby: '#overview',
-        countdown: '#prompt',
-        promptResponse: '#prompt',
-        selection: '#selection',
-        activeMatching: '#matching',
-        matchingSummary: '#matching',
-        endRound: '#overview',
-        endGame: '#overview'
-      };
-      return this.$router.resolve({ name: 'howToPlay', hash: tips[this.scene] }).href;
-    },
-    isMobile() {
-      return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-    }
-  },
-  mounted() {
-    if (this.roomName !== this.storeRoomName) {
-      void this.$router.push({ name: 'home', query: { name: this.roomName } });
-    }
-  }
-});
-</script>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 980b9b7..3165fd9 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,13 +1,49 @@
+<script setup lang="ts">
+import { Instance } from '@popperjs/core';
+import { onMounted, reactive, type Ref, ref } from 'vue';
+import ClickMp3 from '@/assets/audio/click2.mp3';
+import { AudioWrap } from '@/mixins/audiowrap';
+import { useGameStore } from '@/stores/game.js';
+import { useRoomStore } from '@/stores/room.js';
+import { useRoute } from 'vue-router';
+import socket from '@/socket/socket';
+const click = new AudioWrap(ClickMp3);
+
+const route = useRoute();
+const form = reactive({ name: '', roomName: (route.query.name as string) ?? '' });
+
+const usernameInput: Ref<InstanceType<typeof HTMLInputElement> | null> = ref(null);
+
+const roomStore = useRoomStore();
+
+onMounted(() => {
+  if (route.query.error) {
+    roomStore.setError(route.query.error as string);
+  }
+  if (usernameInput.value) {
+    usernameInput.value.focus();
+  }
+  useGameStore().$reset();
+});
+
+function onSubmit(joinGame: boolean) {
+  click.play();
+  const event = joinGame ? 'joinRoom' : 'createRoom';
+  roomStore.setName(form.name);
+  socket.emit(event, form.name, form.roomName, navigator.languages);
+}
+</script>
+
 <template>
-  <div class="main-content w-93 w-lg-50 px-3 px-lg-5 py-3 py-lg-4" :class="{ shake: receivedError }">
+  <div class="main-content w-93 w-lg-50 px-3 px-lg-5 py-3 py-lg-4" :class="{ shake: roomStore.receivedError }">
     <form class="form" @submit.prevent="onSubmit(true)">
-      <h4 v-if="error" v-t="error" class="mb-1 text-center text-red fs-4" />
+      <h4 v-if="roomStore.error" v-t="roomStore.error" class="mb-1 text-center text-red fs-4" />
 
       <div class="mb-3">
         <label v-t="'usernameLabel'" for="username" class="form-label" />
         <input
           id="username"
-          ref="username"
+          ref="usernameInput"
           v-model="form.name"
           type="text"
           class="form-control"
@@ -44,48 +80,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import { AudioWrap } from '@/mixins/audiowrap';
-import socket from '@/socket/socket';
-import { mapState, mapActions } from 'pinia';
-import { useRoomStore } from '@/stores/room.js';
-import { useGameStore } from '@/stores/game.js';
-import { Instance } from '@popperjs/core';
-const click = new AudioWrap(ClickMp3);
-
-export default defineComponent({
-  data() {
-    return {
-      form: {
-        name: '',
-        roomName: (this.$route.query.name as string) ?? ''
-      }
-    };
-  },
-  computed: {
-    ...mapState(useRoomStore, ['error', 'receivedError'])
-  },
-  mounted() {
-    if (this.$route.query.error) {
-      this.setError(this.$route.query.error as string);
-    }
-    (this.$refs.username as InstanceType<typeof HTMLInputElement>).focus();
-    useGameStore().$reset();
-  },
-  methods: {
-    ...mapActions(useRoomStore, ['setName', 'setRoomName', 'setError']),
-    onSubmit(joinGame: boolean) {
-      click.play();
-      const event = joinGame ? 'joinRoom' : 'createRoom';
-      this.setName(this.form.name);
-      socket.emit(event, this.form.name, this.form.roomName, navigator.languages);
-    }
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 input {
   background-color: $orange;
diff --git a/client/src/views/HowToPlay.vue b/client/src/views/HowToPlay.vue
index ac58be1..8db4a71 100644
--- a/client/src/views/HowToPlay.vue
+++ b/client/src/views/HowToPlay.vue
@@ -1,24 +1,61 @@
+<script setup lang="ts">
+import Prompt from '@/assets/images/howToPlay/prompt.png';
+import Strike from '@/assets/images/howToPlay/strike.png';
+import Sike from '@/assets/images/howToPlay/sike.png';
+import Choice from '@/assets/images/howToPlay/choice.png';
+import Matching from '@/assets/images/howToPlay/matching.png';
+import ClickMp3 from '@/assets/audio/click1.mp3';
+import { AudioWrap } from '@/mixins/audiowrap';
+import { useI18n } from 'vue-i18n';
+const click = new AudioWrap(ClickMp3);
+
+const imgs = {
+  prompt: Prompt,
+  strike: Strike,
+  sike: Sike,
+  choice: Choice,
+  matching: Matching
+};
+
+type ImgKey = keyof typeof imgs;
+
+function onClick() {
+  click.play();
+}
+
+type Section = {
+  key: string;
+  alt: string | undefined;
+  header: string;
+  body: string;
+  children: Section[];
+};
+
+const { tm, rt } = useI18n();
+const sections: Section[] = tm('howToPlay');
+</script>
+
 <template>
   <div class="main-content w-93 p-3 p-lg-5 text-center">
-    <div v-for="section in $tm('howToPlay')" :key="section.key">
+    <div v-for="section in sections" :key="section.key">
       <h1 :id="section.key" class="font-fancy text-burgundy display-2 mb-3">
-        {{ $rt(section.header) }}
+        {{ rt(section.header) }}
       </h1>
-      <p class="fw-normal">{{ $rt(section.body) }}</p>
+      <p class="fw-normal">{{ rt(section.body) }}</p>
       <img
-        v-if="imgs[section.key]"
+        v-if="section.key in imgs"
         class="border border-4 border-burgundy rounded w-93 w-md-50 mb-4"
-        :src="imgs[section.key]"
+        :src="imgs[section.key as ImgKey]"
         :alt="section.alt" />
       <div v-for="child in section.children" :key="child.key">
         <h3 :id="child.key" class="fw-bold display-6">
-          {{ $rt(child.header) }}
+          {{ rt(child.header) }}
         </h3>
-        <p class="fw-normal">{{ $rt(child.body) }}</p>
+        <p class="fw-normal">{{ rt(child.body) }}</p>
         <img
-          v-if="imgs[child.key]"
+          v-if="section.key in imgs"
           class="border border-4 border-burgundy rounded w-93 w-md-50 mb-4"
-          :src="imgs[child.key]"
+          :src="imgs[child.key as ImgKey]"
           :alt="child.alt" />
       </div>
     </div>
@@ -27,34 +64,3 @@
     </router-link>
   </div>
 </template>
-
-<script lang="js">
-import Prompt from '@/assets/images/howToPlay/prompt.png';
-import Strike from '@/assets/images/howToPlay/strike.png';
-import Sike from '@/assets/images/howToPlay/sike.png';
-import Choice from '@/assets/images/howToPlay/choice.png';
-import Matching from '@/assets/images/howToPlay/matching.png';
-import ClickMp3 from '@/assets/audio/click1.mp3';
-import { AudioWrap } from '@/mixins/audiowrap';
-import { defineComponent } from 'vue';
-const click = new AudioWrap(ClickMp3);
-
-export default defineComponent({
-  data() {
-    return {
-      imgs: {
-        prompt: Prompt,
-        strike: Strike,
-        sike: Sike,
-        choice: Choice,
-        matching: Matching
-      }
-    };
-  },
-  methods: {
-    onClick() {
-      click.play();
-    }
-  }
-});
-</script>
diff --git a/package-lock.json b/package-lock.json
index d6fad1d..e9f9632 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,7 @@
         "socket.io-client": "^4.7.2",
         "vite": "^5.0.10",
         "vue": "^3.2.47",
-        "vue-i18n": "^9.8.0",
+        "vue-i18n": "^9.9.1",
         "vue-router": "^4.2.5",
         "vue-slider-component": "^4.1.0-beta.7"
       },
@@ -1235,13 +1235,13 @@
       "dev": true
     },
     "node_modules/@intlify/core-base": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.9.0.tgz",
-      "integrity": "sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==",
+      "version": "9.9.1",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.9.1.tgz",
+      "integrity": "sha512-qsV15dg7jNX2faBRyKMgZS8UcFJViWEUPLdzZ9UR0kQZpFVeIpc0AG7ZOfeP7pX2T9SQ5jSiorq/tii9nkkafA==",
       "dev": true,
       "dependencies": {
-        "@intlify/message-compiler": "9.9.0",
-        "@intlify/shared": "9.9.0"
+        "@intlify/message-compiler": "9.9.1",
+        "@intlify/shared": "9.9.1"
       },
       "engines": {
         "node": ">= 16"
@@ -1251,12 +1251,12 @@
       }
     },
     "node_modules/@intlify/message-compiler": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.9.0.tgz",
-      "integrity": "sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==",
+      "version": "9.9.1",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.9.1.tgz",
+      "integrity": "sha512-zTvP6X6HeumHOXuAE1CMMsV6tTX+opKMOxO1OHTCg5N5Sm/F7d8o2jdT6W6L5oHUsJ/vvkGefHIs7Q3hfowmsA==",
       "dev": true,
       "dependencies": {
-        "@intlify/shared": "9.9.0",
+        "@intlify/shared": "9.9.1",
         "source-map-js": "^1.0.2"
       },
       "engines": {
@@ -1267,9 +1267,9 @@
       }
     },
     "node_modules/@intlify/shared": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.9.0.tgz",
-      "integrity": "sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==",
+      "version": "9.9.1",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.9.1.tgz",
+      "integrity": "sha512-b3Pta1nwkz5rGq434v0psHwEwHGy1pYCttfcM22IE//K9owbpkEvFptx9VcuRAxjQdrO2If249cmDDjBu5wMDA==",
       "dev": true,
       "engines": {
         "node": ">= 16"
@@ -7874,13 +7874,13 @@
       }
     },
     "node_modules/vue-i18n": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.9.0.tgz",
-      "integrity": "sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==",
+      "version": "9.9.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.9.1.tgz",
+      "integrity": "sha512-xyQ4VspLdNSPTKBFBPWa1tvtj+9HuockZwgFeD2OhxxXuC2CWeNvV4seu2o9+vbQOyQbhAM5Ez56oxUrrnTWdw==",
       "dev": true,
       "dependencies": {
-        "@intlify/core-base": "9.9.0",
-        "@intlify/shared": "9.9.0",
+        "@intlify/core-base": "9.9.1",
+        "@intlify/shared": "9.9.1",
         "@vue/devtools-api": "^6.5.0"
       },
       "engines": {