* migrate a few more components

client/src/components/gameShared/ResponseList.vue

@@ -17,7 +17,7 @@ const props = defineProps({
   },
   playerId: {
     type: String,
-    required: true
+    default: ''
   },
   height: {
     type: Number,

client/src/components/gameShared/VolumeControl.vue

@@ -1,4 +1,41 @@
 <!--suppress CssUnusedSymbol -->
+<script setup lang="ts">
+import { computed, type Ref, ref } from 'vue';
+import { useSettingsStore } from '@/stores/settings';
+import VueSlider from 'vue-slider-component';
+const settingsStore = useSettingsStore();
+
+const showing = ref(false);
+const timer: Ref<null | NodeJS.Timeout> = ref(null);
+const value = computed({
+  get(): number {
+    return Math.round(settingsStore.volume * 100);
+  },
+  set(value: number): void {
+    settingsStore.setVolume(value / 100);
+  }
+});
+
+function click() {
+  settingsStore.toggleMute();
+}
+
+function resetTimer() {
+  clearTimer();
+  timer.value = setTimeout(() => {
+    timer.value = null;
+    showing.value = false;
+  }, 700);
+}
+
+function clearTimer() {
+  showing.value = true;
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+}
+</script>
+
 <template>
   <div
     class="d-flex flex-column justify-content-center align-items-center"
@@ -26,54 +63,6 @@
       @focusout="resetTimer" />
   </div>
 </template>
-<script lang="ts">
-import VueSlider from 'vue-slider-component';
-import { useSettingsStore } from '@/stores/settings.js';
-import { mapActions, mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    VueSlider
-  },
-  data() {
-    return {
-      showing: false,
-      timer: null as null | NodeJS.Timeout
-    };
-  },
-  computed: {
-    ...mapState(useSettingsStore, ['volume']),
-    value: {
-      set: function (val: number) {
-        this.setVolume(val / 100);
-      },
-      get: function () {
-        return Math.round(this.volume * 100);
-      }
-    }
-  },
-  methods: {
-    ...mapActions(useSettingsStore, ['setVolume', 'toggleMute']),
-    click() {
-      this.toggleMute();
-    },
-    resetTimer() {
-      this.clearTimer();
-      this.timer = setTimeout(() => {
-        this.timer = null;
-        this.showing = false;
-      }, 700);
-    },
-    clearTimer() {
-      this.showing = true;
-      if (this.timer) {
-        clearTimeout(this.timer);
-      }
-    }
-  }
-});
-</script>
 
 <style scoped lang="scss">
 .v-enter-active,

client/src/components/lobby/Lobby.vue

@@ -1,3 +1,26 @@
+<script setup lang="ts">
+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 ClickMp3 from '@/assets/audio/click2.mp3';
+import { useRoomStore } from '@/stores/room';
+const click = new AudioWrap(ClickMp3);
+const roomStore = useRoomStore();
+
+const leader = computed((): boolean => {
+  return !!roomStore.self && roomStore.self.leader;
+});
+const canStart = computed((): boolean => {
+  return leader.value && roomStore.players.length >= 3;
+});
+
+function startGame() {
+  click.play();
+  socket.emit('startGame');
+}
+</script>
 <template>
   <div class="w-100 d-flex flex-column justify-content-between align-items-center gap-3 pt-1 pb-4">
     <h1 v-t="'players'" class="font-fancy text-dark display-3" />
@@ -16,38 +39,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import PlayerList from '@/components/lobby/PlayerList.vue';
-import Options from '@/components/lobby/Options.vue';
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import socket from '@/socket/socket.js';
-import { mapState } from 'pinia';
-import { useRoomStore } from '@/stores/room.js';
-import { defineComponent } from 'vue';
-
-const click = new AudioWrap(ClickMp3);
-
-export default defineComponent({
-  components: {
-    PlayerList,
-    Options
-  },
-  computed: {
-    ...mapState(useRoomStore, ['players', 'self']),
-    leader: function () {
-      return this.self && this.self.leader;
-    },
-    canStart: function () {
-      return this.leader && this.players.length >= 3;
-    }
-  },
-  methods: {
-    startGame() {
-      click.play();
-      socket.emit('startGame');
-    }
-  }
-});
-</script>