* add some linting rules

 * minor linting fixes
 * add file extensions

client/.eslintrc.cjs

@@ -20,11 +20,21 @@ module.exports = {
     parser: '@typescript-eslint/parser'
   },
   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'],
+    '@typescript-eslint/consistent-type-imports': 2,
+    '@typescript-eslint/unbound-method': 0,
+    '@typescript-eslint/no-unused-vars': 0,
+    '@typescript-eslint/no-unsafe-assignment': 0,
+    'vue/multi-word-component-names': 0,
+    'vue/require-typed-ref': 2,
+    '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/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,
     'prettier/prettier': 2
   },
   ignorePatterns: ['/*', '!/src']

client/src/components/endRound/EndRound.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
+import NotificationCount from '@/components/gameShared/NotificationCount.vue';
+import PlayerChooser from '@/components/endRound/PlayerChooser.vue';
+import ResponseList from '@/components/gameShared/ResponseList.vue';
+import Prompt from '@/components/gameShared/Prompt.vue';
 import { onMounted, ref, watch } from 'vue';
 import { AudioWrap } from '@/mixins/audiowrap.js';
 import ClickMp3 from '@/assets/audio/click2.mp3';
 import socket from '@/socket/socket.js';
 import { useRoomStore } from '@/stores/room.js';
 import { useGameStore } from '@/stores/game.js';
-import NotificationCount from '@/components/gameShared/NotificationCount.vue';
-import PlayerChooser from '@/components/endRound/PlayerChooser.vue';
-import ResponseList from '@/components/gameShared/ResponseList.vue';
-import Prompt from '@/components/gameShared/Prompt.vue';
 import { useI18n } from 'vue-i18n';
 
 const roomStore = useRoomStore();

client/src/components/endRound/PlayerChooser.vue

@@ -3,8 +3,8 @@ import { computed, ref } from 'vue';
 import { AudioWrap } from '@/mixins/audiowrap.js';
 import Click2Mp3 from '@/assets/audio/click2.mp3';
 import Click1Mp3 from '@/assets/audio/click1.mp3';
-import { useRoomStore } from '@/stores/room';
-import { type Player } from ':common/stateTypes';
+import { useRoomStore } from '@/stores/room.js';
+import { type Player } from ':common/stateTypes.js';
 
 const roomStore = useRoomStore();
 const hoverLeft = ref(false);

client/src/components/gameShared/Prompt.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import VoteSkip from '@/components/promptResponse/VoteSkip.vue';
 import { computed } from 'vue';
 
 const props = defineProps({

client/src/components/gameShared/ResponseList.vue

@@ -6,10 +6,6 @@ import Click1Mp3 from '@/assets/audio/click1.mp3';
 import Click2Mp3 from '@/assets/audio/click2.mp3';
 import { useGameStore } from '@/stores/game.js';
 
-const gameStore = useGameStore();
-
-const model = defineModel({ type: String });
-
 const props = defineProps({
   selectable: {
     type: Boolean,
@@ -25,6 +21,10 @@ const props = defineProps({
   }
 });
 
+const gameStore = useGameStore();
+
+const model = defineModel({ type: String });
+
 const selected = ref(-1);
 
 const responses = computed((): string[] => {

client/src/components/gameShared/SelectionType.vue

@@ -3,18 +3,18 @@ import { computed } from 'vue';
 import StrikeImg from '@/assets/images/strike.png';
 import SikeImg from '@/assets/images/sike.png';
 import ChoiceImg from '@/assets/images/choice.png';
-import { useGameStore } from '@/stores/game';
+import { useGameStore } from '@/stores/game.js';
 import { useI18n } from 'vue-i18n';
 
-const gameStore = useGameStore();
-
 defineProps({
   tooltip: {
     type: Boolean,
     default: true
   }
 });
 
+const gameStore = useGameStore();
+
 const typeImg = computed(() => {
   if (gameStore.selectionType === 'strike') {
     return StrikeImg;

client/src/components/gameShared/Timer.vue

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

client/src/components/gameShared/VolumeControl.vue

@@ -1,7 +1,7 @@
 <!--suppress CssUnusedSymbol -->
 <script setup lang="ts">
 import { computed, type Ref, ref } from 'vue';
-import { useSettingsStore } from '@/stores/settings';
+import { useSettingsStore } from '@/stores/settings.js';
 import VueSlider from 'vue-slider-component';
 const settingsStore = useSettingsStore();
 

client/src/components/lobby/Lobby.vue

@@ -2,10 +2,10 @@
 import PlayerList from '@/components/lobby/PlayerList.vue';
 import Options from '@/components/lobby/Options.vue';
 import { computed } from 'vue';
-import socket from '@/socket/socket';
-import { AudioWrap } from '@/mixins/audiowrap';
+import socket from '@/socket/socket.js';
+import { AudioWrap } from '@/mixins/audiowrap.js';
 import ClickMp3 from '@/assets/audio/click2.mp3';
-import { useRoomStore } from '@/stores/room';
+import { useRoomStore } from '@/stores/room.js';
 import { useI18n } from 'vue-i18n';
 const click = new AudioWrap(ClickMp3);
 const roomStore = useRoomStore();

client/src/components/lobby/Options.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { onMounted, type Ref, ref } from 'vue';
-import type { SettableOptions } from ':common/options';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game';
+import type { SettableOptions } from ':common/options.js';
+import socket from '@/socket/socket.js';
+import { useGameStore } from '@/stores/game.js';
 import { useI18n } from 'vue-i18n';
-import { useRoomStore } from '@/stores/room';
+import { useRoomStore } from '@/stores/room.js';
 
 defineProps({
   disabled: {
@@ -127,7 +127,6 @@ const { t } = useI18n();
                 <label v-t="'customPromptsLabel'" for="customPrompts" class="form-label" />
                 <textarea
                   id="customPrompts"
-                  ref="customPrompts"
                   class="form-control fs-6"
                   :class="{ Disabled: !customSelected }"
                   :disabled="!customSelected"

client/src/components/lobby/PlayerCard.vue

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

client/src/components/lobby/PlayerList.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import type { Player } from ':common/stateTypes';
 import PlayerCard from '@/components/lobby/PlayerCard.vue';
-import { useRoomStore } from '@/stores/room';
+import { computed } from 'vue';
+import type { Player } from ':common/stateTypes.js';
+import { useRoomStore } from '@/stores/room.js';
 
 const roomStore = useRoomStore();
 

client/src/components/promptResponse/PromptResponse.vue

@@ -3,8 +3,8 @@ import Timer from '@/components/gameShared/Timer.vue';
 import ResponseList from '@/components/gameShared/ResponseList.vue';
 import Prompt from '@/components/gameShared/Prompt.vue';
 import { onMounted, type Ref, ref } from 'vue';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game';
+import socket from '@/socket/socket.js';
+import { useGameStore } from '@/stores/game.js';
 
 const response = ref('');
 const resInput: Ref<null | HTMLInputElement> = ref(null);

client/src/components/promptResponse/VoteSkip.vue

@@ -5,7 +5,7 @@ import { AudioWrap } from '@/mixins/audiowrap.js';
 import ClickMp3 from '@/assets/audio/click2.mp3';
 import socket from '@/socket/socket.js';
 import { useI18n } from 'vue-i18n';
-import { useGameStore } from '@/stores/game';
+import { useGameStore } from '@/stores/game.js';
 
 const pressedVote = ref(false);
 

client/src/components/responseMatching/MatchCard.vue

@@ -4,10 +4,8 @@ import { AudioWrap } from '@/mixins/audiowrap.js';
 import { type PropType, computed, ref } from 'vue';
 import type { Player } from ':common/stateTypes.js';
 import { type Match, useGameStore } from '@/stores/game.js';
-import { useRoomStore } from '@/stores/room';
+import { useRoomStore } from '@/stores/room.js';
 import { useI18n } from 'vue-i18n';
-const click = new AudioWrap(ClickMp3);
-
 const props = defineProps({
   player: {
     type: Object as PropType<Player>,
@@ -19,6 +17,8 @@ const props = defineProps({
   }
 });
 
+const click = new AudioWrap(ClickMp3);
+
 const hovering = ref(false);
 
 const gameStore = useGameStore();

client/src/views/About.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ClickMp3 from '@/assets/audio/click1.mp3';
-import { AudioWrap } from '@/mixins/audiowrap';
+import { AudioWrap } from '@/mixins/audiowrap.js';
 const click = new AudioWrap(ClickMp3);
 </script>
 

client/src/views/Game.vue

@@ -9,25 +9,24 @@ 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 { useRoomStore } from '@/stores/room.js';
+import { useGameStore } from '@/stores/game.js';
 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 gameStore = useGameStore();
+const roomStore = useRoomStore();
+const router = useRouter();
+
+const { t } = useI18n();
 
 const gameScenes = {
   Lobby,

client/src/views/Home.vue

@@ -2,11 +2,11 @@
 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 { AudioWrap } from '@/mixins/audiowrap.js';
 import { useGameStore } from '@/stores/game.js';
 import { useRoomStore } from '@/stores/room.js';
 import { useRoute } from 'vue-router';
-import socket from '@/socket/socket';
+import socket from '@/socket/socket.js';
 import { useI18n } from 'vue-i18n';
 const click = new AudioWrap(ClickMp3);
 

client/src/views/HowToPlay.vue

@@ -5,7 +5,7 @@ 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 { AudioWrap } from '@/mixins/audiowrap.js';
 import { useI18n } from 'vue-i18n';
 const click = new AudioWrap(ClickMp3);
 

tsconfig.options.json

@@ -17,6 +17,7 @@
     "moduleResolution": "node",
     "noEmitOnError": false,
     "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,