* migrate a few more components

ConorMurphy21 · Feb 2, 2024 · 4240ea6 · 4240ea6
1 parent e7d2cd4
commit 4240ea6
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 285 deletions.
diff --git 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
@@ -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
@@ -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;