* replace props with typed props

 * add vue-i18n linting
 * fix i18n linting errors

client/.eslintrc.cjs

@@ -3,10 +3,9 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
   extends: [
-    'plugin:vue/vue3-essential',
-    'plugin:vue/vue3-strongly-recommended',
     'plugin:vue/vue3-recommended',
     'eslint:recommended',
+    'plugin:@intlify/vue-i18n/recommended',
     'plugin:@typescript-eslint/recommended-type-checked',
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting',
@@ -29,13 +28,23 @@ module.exports = {
     'vue/component-api-style': [2, ['script-setup']],
     'vue/block-lang': [2, { script: { lang: 'ts' } }],
     'vue/define-macros-order': 2,
-    // 'vue/define-props-declaration': 2,
+    'vue/define-props-declaration': 2,
     'vue/no-ref-object-reactivity-loss': 2,
     'vue/no-undef-properties': 2,
     'vue/no-unused-components': [2, { ignoreWhenBindingPresent: true }],
     'vue/no-unused-properties': 2,
     'vue/no-unused-refs': 2,
+    '@intlify/vue-i18n/valid-message-syntax': 2,
+    '@intlify/vue-i18n/key-format-style': [2, 'camelCase', {allowArray: true}],
+    '@intlify/vue-i18n/no-duplicate-keys-in-locale': 2,
+    '@intlify/vue-i18n/no-missing-keys-in-other-locales': 2,
     'prettier/prettier': 2
   },
-  ignorePatterns: ['/*', '!/src']
+  ignorePatterns: ['/*', '!/src'],
+  settings: {
+    'vue-i18n': {
+      localeDir: './src/locales/*.{ts}', // extension is glob formatting!
+      messageSyntaxVersion: '^9.9.1'
+    }
+  }
 };

client/src/components/endGame/EndGame.vue

@@ -9,7 +9,7 @@ const click = new AudioWrap(ClickMp3);
 
 const gameStore = useGameStore();
 
-const rank = computed((): number[] => {
+const rank = computed<number[]>(() => {
   let result = [];
   let lastScore = -1;
   let lastRank = 1;
@@ -39,7 +39,11 @@ const { n } = useI18n();
 
     <div class="list-group w-75 w-xl-50">
       <div v-for="(score, index) in gameStore.scores" :key="score.player.id" class="list-group-item">
-        {{ rank[index] }}. {{ score.player.name }}: {{ n(score.points) }}
+        <span
+          v-t="{
+            path: 'scoreFormat',
+            args: { rank: rank[index], player: score.player.name, points: n(score.points) }
+          }" />
       </div>
     </div>
 

client/src/components/endRound/PlayerChooser.vue

@@ -11,7 +11,7 @@ const hoverLeft = ref(false);
 const hoverRight = ref(false);
 const model = defineModel({ type: String, required: true });
 
-const selectedName = computed((): string => {
+const selectedName = computed<string>(() => {
   if (!model.value) return '';
   const name = roomStore.players.find((player: Player) => player.id === model.value)?.name;
   return name === undefined ? '' : name;

client/src/components/gameShared/NotificationCount.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-const props = defineProps({
-  width: {
-    type: Number,
-    default: 24
-  },
-  nextMajority: {
-    type: Boolean,
-    default: false
-  }
+interface Props {
+  width?: number;
+  nextMajority?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  width: 24,
+  nextMajority: false
 });
 
-const cssProps = computed((): Record<string, string> => {
+const cssProps = computed<Record<string, string>>(() => {
   return {
     '--min-width': props.width + 'px'
   };

client/src/components/gameShared/Prompt.vue

@@ -2,24 +2,21 @@
 import VoteSkip from '@/components/promptResponse/VoteSkip.vue';
 import { computed } from 'vue';
 
-const props = defineProps({
-  prompt: {
-    type: String,
-    required: true
-  },
-  skippable: {
-    type: Boolean,
-    default: false
-  }
+interface Props {
+  prompt: string;
+  skippable?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  skippable: false
 });
 
-const containsBlank = computed((): boolean => {
+const containsBlank = computed<boolean>(() => {
   return props.prompt.includes('_');
 });
-const left = computed((): string => {
+const left = computed<string>(() => {
   return props.prompt.substring(0, props.prompt.indexOf('_'));
 });
-const right = computed((): string => {
+const right = computed<string>(() => {
   return props.prompt.substring(props.prompt.lastIndexOf('_') + 1);
 });
 </script>

client/src/components/gameShared/ResponseList.vue

@@ -6,19 +6,14 @@ import Click1Mp3 from '@/assets/audio/click1.mp3';
 import Click2Mp3 from '@/assets/audio/click2.mp3';
 import { useGameStore } from '@/stores/game.js';
 
-const props = defineProps({
-  selectable: {
-    type: Boolean,
-    required: true
-  },
-  playerId: {
-    type: String,
-    default: ''
-  },
-  height: {
-    type: Number,
-    default: 30
-  }
+interface Props {
+  selectable: boolean;
+  playerId?: string;
+  height?: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+  playerId: '',
+  height: 30
 });
 
 const gameStore = useGameStore();
@@ -27,19 +22,19 @@ const model = defineModel({ type: String });
 
 const selected = ref(-1);
 
-const responses = computed((): string[] => {
+const responses = computed<string[]>(() => {
   return gameStore.playerResponses(props.playerId).all;
 });
-const usedResponses = computed((): string[] => {
+const usedResponses = computed<string[]>(() => {
   return gameStore.playerResponses(props.playerId).used;
 });
-const selectedStrike = computed((): string => {
+const selectedStrike = computed<string>(() => {
   return gameStore.playerResponses(props.playerId).selectedStrike;
 });
-const selectedSike = computed((): string => {
+const selectedSike = computed<string>(() => {
   return gameStore.playerResponses(props.playerId).selectedSike;
 });
-const cssProps = computed((): Record<string, string> => {
+const cssProps = computed<Record<string, string>>(() => {
   return {
     '--max-height': props.height + 'vh'
   };

client/src/components/gameShared/SelectionType.vue

@@ -6,16 +6,16 @@ import ChoiceImg from '@/assets/images/choice.png';
 import { useGameStore } from '@/stores/game.js';
 import { useI18n } from 'vue-i18n';
 
-defineProps({
-  tooltip: {
-    type: Boolean,
-    default: true
-  }
+interface Props {
+  tooltip?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  tooltip: true
 });
 
 const gameStore = useGameStore();
 
-const typeImg = computed(() => {
+const typeImg = computed<string>(() => {
   if (gameStore.selectionType === 'strike') {
     return StrikeImg;
   } else if (gameStore.selectionType === 'sike') {

client/src/components/gameShared/Timer.vue

@@ -6,12 +6,10 @@ import timerMp3 from '@/assets/audio/timer_full.mp3';
 import timerCompleteMp3 from '@/assets/audio/timerComplete.mp3';
 import { useI18n } from 'vue-i18n';
 
-defineProps({
-  time: {
-    type: Number,
-    required: true
-  }
-});
+defineProps<{
+  time: number;
+}>();
+
 const timer = new AudioWrap(timerMp3);
 const timerComplete = new AudioWrap(timerCompleteMp3);
 const gameStore = useGameStore();

client/src/components/gameShared/VolumeControl.vue

@@ -7,7 +7,7 @@ const settingsStore = useSettingsStore();
 
 const showing = ref(false);
 const timer: Ref<null | NodeJS.Timeout> = ref(null);
-const value = computed({
+const value = computed<number>({
   get(): number {
     return Math.round(settingsStore.volume * 100);
   },

client/src/components/lobby/Lobby.vue

@@ -10,10 +10,10 @@ import { useI18n } from 'vue-i18n';
 const click = new AudioWrap(ClickMp3);
 const roomStore = useRoomStore();
 
-const leader = computed((): boolean => {
+const leader = computed<boolean>(() => {
   return !!roomStore.self && roomStore.self.leader;
 });
-const canStart = computed((): boolean => {
+const canStart = computed<boolean>(() => {
   return leader.value && roomStore.players.length >= 3;
 });
 

client/src/components/lobby/Options.vue

@@ -6,12 +6,9 @@ import { useGameStore } from '@/stores/game.js';
 import { useI18n } from 'vue-i18n';
 import { useRoomStore } from '@/stores/room.js';
 
-defineProps({
-  disabled: {
-    type: Boolean,
-    required: true
-  }
-});
+defineProps<{
+  disabled: boolean;
+}>();
 
 const customSelected = ref(false);
 const timerDuration: Ref<null | HTMLFormElement> = ref(null);
@@ -204,14 +201,13 @@ const { t } = useI18n();
       </div>
       <h2 id="options-heading" class="accordion-header">
         <button
+          v-t="'optionsLabel'"
           class="accordion-button"
           type="button"
           data-bs-toggle="collapse"
           data-bs-target="#form"
           aria-expanded="false"
-          aria-controls="form">
-          Game Options
-        </button>
+          aria-controls="form" />
       </h2>
     </div>
   </div>

client/src/components/lobby/PlayerCard.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import { type PropType } from 'vue';
 import type { Player } from ':common/stateTypes.js';
-defineProps({
-  player: {
-    type: Object as PropType<Player>,
-    required: true
-  }
-});
+defineProps<{
+  player: Player;
+}>();
 </script>
 
 <template>

client/src/components/lobby/PlayerList.vue

@@ -6,7 +6,7 @@ import { useRoomStore } from '@/stores/room.js';
 
 const roomStore = useRoomStore();
 
-const columns = computed((): [Player[], Player[]] => {
+const columns = computed<[Player[], Player[]]>(() => {
   const columns = [[], []] as [Player[], Player[]];
   for (let i = 0; i < roomStore.players.length; i++) {
     columns[i % 2].push(roomStore.players[i]);

client/src/components/responseMatching/ActiveMatching.vue

@@ -63,7 +63,7 @@ const { t } = useI18n();
         <img class="my-auto w-75 w-sm-50 w-lg-25" src="@/assets/images/sike.png" :alt="t('sike')" />
       </div>
     </button>
-    or
+    <span v-t="'or'" />
     <response-list v-model="matchedResponse" :selectable="true" :height="40" />
   </div>
 </template>

client/src/components/responseMatching/DisputeIcon.vue

@@ -7,19 +7,13 @@ import socket from '@/socket/socket.js';
 import { useI18n } from 'vue-i18n';
 import { useGameStore } from '@/stores/game.js';
 
-defineProps({
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  response: {
-    type: String,
-    required: true
-  },
-  placement: {
-    type: String,
-    required: true
-  }
+interface Props {
+  disabled?: boolean;
+  response: string;
+  placement: string;
+}
+withDefaults(defineProps<Props>(), {
+  disabled: false
 });
 
 const pressedVote = ref(false);

client/src/components/responseMatching/MatchCard.vue

@@ -1,21 +1,15 @@
 <script setup lang="ts">
 import ClickMp3 from '@/assets/audio/click2.mp3';
 import { AudioWrap } from '@/mixins/audiowrap.js';
-import { type PropType, computed, ref } from 'vue';
+import { computed, ref } from 'vue';
 import type { Player } from ':common/stateTypes.js';
 import { type Match, useGameStore } from '@/stores/game.js';
 import { useRoomStore } from '@/stores/room.js';
 import { useI18n } from 'vue-i18n';
-const props = defineProps({
-  player: {
-    type: Object as PropType<Player>,
-    required: true
-  },
-  match: {
-    type: Object as PropType<Match>,
-    required: true
-  }
-});
+const props = defineProps<{
+  player: Player;
+  match: Match;
+}>();
 
 const click = new AudioWrap(ClickMp3);
 
@@ -24,7 +18,7 @@ const hovering = ref(false);
 const gameStore = useGameStore();
 const roomStore = useRoomStore();
 
-const showUnmatch = computed((): boolean => {
+const showUnmatch = computed<boolean>(() => {
   return props.player?.name === roomStore.name && !props.match?.exact;
 });
 

client/src/components/responseMatching/MatchingSummary.vue

@@ -17,7 +17,7 @@ const click = new AudioWrap(ClickMp3);
 const gameStore = useGameStore();
 const roomStore = useRoomStore();
 
-const matchers = computed((): Player[] => {
+const matchers = computed<Player[]>(() => {
   return roomStore.players.filter((player: Player) => player.active && player.id !== gameStore.selector!.id);
 });