* convert all views to composition api

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'],

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",

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>

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');
     }
   }
 });

client/src/locales/index.ts

@@ -10,5 +10,6 @@ const messages = {
 export default createI18n<[typeof en], 'en'>({
   locale: 'en',
   fallbackLocale: 'en',
+  legacy: false,
   messages
 });

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;
   }
-};
+}

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;

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>