From 4240ea6317cac88222df48126d83c00e2fc64d35 Mon Sep 17 00:00:00 2001
From: conor <conormurphyx@gmail.com>
Date: Fri, 2 Feb 2024 03:30:55 -0800
Subject: [PATCH]  * migrate a few more components

---
 client/src/components/endRound/EndRound.vue   | 106 ++++++-------
 .../gameShared/NotificationCount.vue          |  45 +++---
 client/src/components/gameShared/Prompt.vue   |  55 +++----
 .../components/gameShared/ResponseList.vue    | 149 +++++++++---------
 .../components/gameShared/SelectionType.vue   |  68 ++++----
 client/src/components/gameShared/Timer.vue    |  90 ++++++-----
 .../components/gameShared/TooltipToggle.vue   |  32 ++--
 7 files changed, 260 insertions(+), 285 deletions(-)

diff --git a/client/src/components/endRound/EndRound.vue b/client/src/components/endRound/EndRound.vue
index b385726..f768edb 100644
--- a/client/src/components/endRound/EndRound.vue
+++ b/client/src/components/endRound/EndRound.vue
@@ -1,6 +1,47 @@
+<script setup lang="ts">
+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();
+const gameStore = useGameStore();
+
+const responsesId = ref('');
+const selectedId = ref('');
+const pressedVote = ref(false);
+
+watch(selectedId, async (val: string) => {
+  if (val) {
+    await gameStore.getResponses(val).then(() => {
+      responsesId.value = val;
+    });
+  }
+});
+
+onMounted(() => {
+  selectedId.value = roomStore.self!.id;
+});
+
+function sendVote() {
+  new AudioWrap(ClickMp3).play();
+  pressedVote.value = !pressedVote.value;
+  socket.emit('pollVote', 'startNextRound');
+}
+
+const { t, n } = useI18n();
+</script>
+
 <template>
   <div class="w-100 d-flex flex-column justify-content-between align-items-center py-3 px-4">
-    <prompt :prompt="prompt" />
+    <prompt :prompt="gameStore.prompt" />
     <response-list :selectable="false" :height="45" :player-id="responsesId" />
     <player-chooser v-model="selectedId" class="w-50 w-lg-25 fs-4 mb-3" />
     <button
@@ -10,68 +51,13 @@
         'text-white-50 shadow-none': pressedVote
       }"
       @click="sendVote">
-      {{ hasNextRound ? $t('startNextRound') : $t('viewResults') }}
+      {{ gameStore.hasNextRound ? t('startNextRound') : t('viewResults') }}
       <notification-count
-        v-if="startNextRoundCount"
+        v-if="gameStore.startNextRoundCount"
         class="position-absolute top-0 start-100 translate-middle fs-6"
-        :next-majority="startNextRoundNext">
-        {{ $n(startNextRoundCount) }}
+        :next-majority="gameStore.startNextRoundNext">
+        {{ n(gameStore.startNextRoundCount) }}
       </notification-count>
     </button>
   </div>
 </template>
-
-<script lang="ts">
-import Prompt from '@/components/gameShared/Prompt.vue';
-import ResponseList from '@/components/gameShared/ResponseList.vue';
-import NotificationCount from '@/components/gameShared/NotificationCount.vue';
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import PlayerChooser from '@/components/endRound/PlayerChooser.vue';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game.js';
-import { useRoomStore } from '@/stores/room.js';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    PlayerChooser,
-    Prompt,
-    ResponseList,
-    NotificationCount
-  },
-  data() {
-    return {
-      responsesId: '',
-      selectedId: '',
-      pressedVote: false
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, ['prompt', 'hasNextRound', 'startNextRoundCount', 'startNextRoundNext']),
-    ...mapState(useRoomStore, ['self'])
-  },
-  watch: {
-    selectedId(val: string) {
-      if (val) {
-        void this.getResponses(val).then(() => {
-          this.responsesId = val;
-        });
-      }
-    }
-  },
-  mounted() {
-    this.selectedId = this.self!.id;
-  },
-  methods: {
-    sendVote() {
-      this.pressedVote = !this.pressedVote;
-
-      new AudioWrap(ClickMp3).play();
-      socket.emit('pollVote', 'startNextRound');
-    },
-    ...mapActions(useGameStore, ['getResponses'])
-  }
-});
-</script>
diff --git a/client/src/components/gameShared/NotificationCount.vue b/client/src/components/gameShared/NotificationCount.vue
index 5e189ce..bdd426c 100644
--- a/client/src/components/gameShared/NotificationCount.vue
+++ b/client/src/components/gameShared/NotificationCount.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: Number,
+    default: 24
+  },
+  nextMajority: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const cssProps = computed((): Record<string, string> => {
+  return {
+    '--min-width': props.width + 'px'
+  };
+});
+</script>
+
 <template>
   <span
     :style="cssProps"
@@ -7,30 +28,6 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    width: {
-      type: Number,
-      default: 24
-    },
-    nextMajority: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    cssProps() {
-      return {
-        '--min-width': this.width + 'px'
-      };
-    }
-  }
-});
-</script>
-
 <style scoped lang="scss">
 span {
   min-width: var(--min-width);
diff --git a/client/src/components/gameShared/Prompt.vue b/client/src/components/gameShared/Prompt.vue
index 63ba90c..d9ab0b1 100644
--- a/client/src/components/gameShared/Prompt.vue
+++ b/client/src/components/gameShared/Prompt.vue
@@ -1,40 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  prompt: {
+    type: String,
+    required: true
+  },
+  skippable: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const containsBlank = computed((): boolean => {
+  return props.prompt.includes('_');
+});
+const left = computed((): string => {
+  return props.prompt.substring(0, props.prompt.indexOf('_'));
+});
+const right = computed((): string => {
+  return props.prompt.substring(props.prompt.lastIndexOf('_') + 1);
+});
+</script>
+
 <template>
   <h1 v-if="containsBlank" class="display-5">
     {{ left }} <span class="blank" /> {{ right }} <vote-skip v-if="skippable" />
   </h1>
   <h1 v-else class="display-5">{{ prompt }} <vote-skip v-if="skippable" class="mb-2" /></h1>
 </template>
-<script lang="ts">
-import VoteSkip from '@/components/promptResponse/VoteSkip.vue';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  components: {
-    VoteSkip
-  },
-  props: {
-    prompt: {
-      type: String,
-      required: true
-    },
-    skippable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    containsBlank(): boolean {
-      return this.prompt.includes('_');
-    },
-    left(): string {
-      return this.prompt.substring(0, this.prompt.indexOf('_'));
-    },
-    right(): string {
-      return this.prompt.substring(this.prompt.lastIndexOf('_') + 1);
-    }
-  }
-});
-</script>
 <style lang="scss" scoped>
 h1 {
   font-weight: 650;
diff --git a/client/src/components/gameShared/ResponseList.vue b/client/src/components/gameShared/ResponseList.vue
index d2c898b..1f4bc95 100644
--- a/client/src/components/gameShared/ResponseList.vue
+++ b/client/src/components/gameShared/ResponseList.vue
@@ -1,8 +1,79 @@
 <!--suppress CssUnusedSymbol -->
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { AudioWrap } from '@/mixins/audiowrap.js';
+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,
+    required: true
+  },
+  playerId: {
+    type: String,
+    required: true
+  },
+  height: {
+    type: Number,
+    default: 30
+  }
+});
+
+const selected = ref(-1);
+
+const responses = computed((): string[] => {
+  return gameStore.playerResponses(props.playerId).all;
+});
+const usedResponses = computed((): string[] => {
+  return gameStore.playerResponses(props.playerId).used;
+});
+const selectedStrike = computed((): string => {
+  return gameStore.playerResponses(props.playerId).selectedStrike;
+});
+const selectedSike = computed((): string => {
+  return gameStore.playerResponses(props.playerId).selectedSike;
+});
+const cssProps = computed((): Record<string, string> => {
+  return {
+    '--max-height': props.height + 'vh'
+  };
+});
+
+function select(index: number, response: string) {
+  if (props.selectable && !used(response)) {
+    if (selected.value !== index) {
+      new AudioWrap(Click1Mp3).play();
+      selected.value = index;
+    } else {
+      new AudioWrap(Click2Mp3).play();
+      model.value = response;
+    }
+  }
+}
+function deselect() {
+  new AudioWrap(Click2Mp3).play();
+  selected.value = -1;
+}
+function confirm() {
+  select(selected.value, responses.value[selected.value]);
+}
+function responseSelectable(response: string) {
+  return !usedResponses.value.includes(response) && props.selectable;
+}
+function used(response: string) {
+  return response !== selectedStrike.value && response !== selectedSike.value && usedResponses.value.includes(response);
+}
+</script>
+
 <template>
   <div class="outer flex-grow-1 d-flex flex-column justify-content-between align-items-center w-100">
     <div
-      ref="box"
       :style="cssProps"
       class="box d-flex flex-column justify-content-center align-items-center w-75 m-2 overflow-auto">
       <div class="list-group w-100 h-100">
@@ -31,82 +102,6 @@
     </transition>
   </div>
 </template>
-<script lang="ts">
-import Click1Mp3 from '@/assets/audio/click1.mp3';
-import Click2Mp3 from '@/assets/audio/click2.mp3';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    selectable: Boolean,
-    height: {
-      type: Number,
-      default: 30
-    },
-    playerId: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      selected: -1
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, ['playerResponses']),
-    responses() {
-      return this.playerResponses(this.playerId).all;
-    },
-    usedResponses() {
-      return this.playerResponses(this.playerId).used;
-    },
-    selectedStrike() {
-      return this.playerResponses(this.playerId).selectedStrike;
-    },
-    selectedSike() {
-      return this.playerResponses(this.playerId).selectedSike;
-    },
-    cssProps() {
-      return {
-        '--max-height': this.height + 'vh'
-      };
-    }
-  },
-  methods: {
-    select(index: number, response: string) {
-      if (this.selectable && !this.used(response)) {
-        if (this.selected !== index) {
-          new AudioWrap(Click1Mp3).play();
-          this.selected = index;
-        } else {
-          new AudioWrap(Click2Mp3).play();
-          this.$emit('update:modelValue', response);
-        }
-      }
-    },
-    deselect() {
-      new AudioWrap(Click2Mp3).play();
-      this.selected = -1;
-    },
-    confirm() {
-      this.select(this.selected, this.responses[this.selected]);
-    },
-    responseSelectable(response: string) {
-      return !this.usedResponses.includes(response) && this.selectable;
-    },
-    used(response: string) {
-      return (
-        response !== this.selectedStrike && response !== this.selectedSike && this.usedResponses.includes(response)
-      );
-    }
-  }
-});
-</script>
 
 <style lang="scss" scoped>
 .outer {
diff --git a/client/src/components/gameShared/SelectionType.vue b/client/src/components/gameShared/SelectionType.vue
index b444626..5b32d27 100644
--- a/client/src/components/gameShared/SelectionType.vue
+++ b/client/src/components/gameShared/SelectionType.vue
@@ -1,44 +1,46 @@
-<template>
-  <img
-    v-if="tooltip"
-    v-tooltip.left.ds750="$t('tooltip.' + type)"
-    :src="typeImg"
-    :alt="$t(type)"
-    :class="{ 'sike-img': type === 'sike' }" />
-  <img v-else :src="typeImg" :alt="$t(type)" :class="{ 'sike-img': type === 'sike' }" />
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
+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.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
+import { useGameStore } from '@/stores/game';
+import { useI18n } from 'vue-i18n';
+
+const gameStore = useGameStore();
+
+defineProps({
+  tooltip: {
+    type: Boolean,
+    default: true
+  }
+});
 
-export default defineComponent({
-  props: {
-    tooltip: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    ...mapState(useGameStore, {
-      type: 'selectionType'
-    }),
-    typeImg() {
-      if (this.type === 'strike') {
-        return StrikeImg;
-      } else if (this.type === 'sike') {
-        return SikeImg;
-      }
-      return ChoiceImg;
-    }
+const typeImg = computed(() => {
+  if (gameStore.selectionType === 'strike') {
+    return StrikeImg;
+  } else if (gameStore.selectionType === 'sike') {
+    return SikeImg;
   }
+  return ChoiceImg;
 });
+
+const { t } = useI18n();
 </script>
 
+<template>
+  <img
+    v-if="tooltip"
+    v-tooltip.left.ds750="$t('tooltip.' + gameStore.selectionType)"
+    :src="typeImg"
+    :alt="t(gameStore.selectionType)"
+    :class="{ 'sike-img': gameStore.selectionType === 'sike' }" />
+  <img
+    v-else
+    :src="typeImg"
+    :alt="t(gameStore.selectionType)"
+    :class="{ 'sike-img': gameStore.selectionType === 'sike' }" />
+</template>
+
 <style lang="scss" scoped>
 img.sike-img {
   min-width: 96px;
diff --git a/client/src/components/gameShared/Timer.vue b/client/src/components/gameShared/Timer.vue
index 740159b..ca41660 100644
--- a/client/src/components/gameShared/Timer.vue
+++ b/client/src/components/gameShared/Timer.vue
@@ -1,3 +1,50 @@
+<script setup lang="ts">
+import { onUnmounted, watch } from 'vue';
+import { useGameStore } from '@/stores/game.js';
+import { AudioWrap } from '@/mixins/audiowrap.js';
+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
+  }
+});
+
+watch(
+  () => settingsStore.timer,
+  (val: number) => {
+    timer.volume = val;
+  }
+);
+watch(
+  () => gameStore.timer,
+  (val: number) => {
+    if (val === 10) {
+      timer.play();
+    } else if (val <= 0) {
+      timer.pause();
+      timer.currentTime = 0;
+      timerComplete.play();
+    }
+  }
+);
+
+onUnmounted(() => {
+  timer.pause();
+  timer.currentTime = 0;
+});
+
+const { n } = useI18n();
+</script>
+
 <template>
   <div>
     <h1
@@ -7,7 +54,7 @@
         'bounce bold-black': time > 10,
         'bounce-fast bolder-red': time <= 10
       }">
-      {{ $n(time) }}
+      {{ n(time) }}
     </h1>
     <h1 v-else class="display-5 bolder-red shake-rotate">
       <i class="bi-alarm" />
@@ -15,47 +62,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import timerMp3 from '@/assets/audio/timer_full.mp3';
-import timerCompleteMp3 from '@/assets/audio/timerComplete.mp3';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import { useSettingsStore } from '@/stores/settings.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-const timer = new AudioWrap(timerMp3);
-const timerComplete = new AudioWrap(timerCompleteMp3);
-export default defineComponent({
-  props: {
-    time: {
-      type: Number,
-      required: true
-    }
-  },
-  computed: {
-    ...mapState(useSettingsStore, ['volume'])
-  },
-  watch: {
-    volume(val: number) {
-      timer.volume = val;
-    },
-    time(val: number) {
-      if (val === 10) {
-        timer.play();
-      } else if (val <= 0) {
-        timer.pause();
-        timer.currentTime = 0;
-        timerComplete.play();
-      }
-    }
-  },
-  unmounted() {
-    timer.pause();
-    timer.currentTime = 0;
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 h1 {
   text-align: center;
diff --git a/client/src/components/gameShared/TooltipToggle.vue b/client/src/components/gameShared/TooltipToggle.vue
index 8a19168..f4a74ed 100644
--- a/client/src/components/gameShared/TooltipToggle.vue
+++ b/client/src/components/gameShared/TooltipToggle.vue
@@ -1,28 +1,22 @@
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue';
+import { useSettingsStore } from '@/stores/settings.js';
+
+const settingsStore = useSettingsStore();
+const instance = getCurrentInstance();
+function click() {
+  settingsStore.setShowTooltips(!settingsStore.showTooltips);
+  instance?.proxy?.$forceUpdate();
+}
+</script>
+
 <template>
   <button
     v-tooltip.left.ds250="$t('tooltip.showTooltips')"
     class="text-black"
-    :class="{ 'bi-lightbulb': showTooltips, 'bi-lightbulb-off': !showTooltips }"
+    :class="{ 'bi-lightbulb': settingsStore.showTooltips, 'bi-lightbulb-off': !settingsStore.showTooltips }"
     @click="click" />
 </template>
-<script lang="ts">
-import { useSettingsStore } from '@/stores/settings.js';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  computed: {
-    ...mapState(useSettingsStore, ['showTooltips'])
-  },
-  methods: {
-    ...mapActions(useSettingsStore, ['setShowTooltips']),
-    click() {
-      this.setShowTooltips(!this.showTooltips);
-      this.$forceUpdate();
-    }
-  }
-});
-</script>
 
 <style scoped lang="scss">
 button {