From 80c78334369440ed629c826c3f702b6da421a520 Mon Sep 17 00:00:00 2001
From: conor <conormurphyx@gmail.com>
Date: Sat, 3 Feb 2024 00:54:47 -0800
Subject: [PATCH]  * Migrate DisputeIcon, MatchCard, Options, PlayerCard,
 PlayerList PromptResponse and VoteSkip to compositon api

---
 client/src/components/lobby/Options.vue       | 222 +++++++++---------
 client/src/components/lobby/PlayerCard.vue    |  25 +-
 client/src/components/lobby/PlayerList.vue    |  41 ++--
 .../promptResponse/PromptResponse.vue         |  71 +++---
 .../components/promptResponse/VoteSkip.vue    |  58 ++---
 .../responseMatching/DisputeIcon.vue          |  92 ++++----
 .../components/responseMatching/MatchCard.vue |  84 +++----
 7 files changed, 272 insertions(+), 321 deletions(-)

diff --git a/client/src/components/lobby/Options.vue b/client/src/components/lobby/Options.vue
index 37b168a..b601393 100644
--- a/client/src/components/lobby/Options.vue
+++ b/client/src/components/lobby/Options.vue
@@ -1,3 +1,107 @@
+<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 { useI18n } from 'vue-i18n';
+import { useRoomStore } from '@/stores/room';
+
+defineProps({
+  disabled: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const customSelected = ref(false);
+const timerDuration: Ref<null | HTMLFormElement> = ref(null);
+
+const gameStore = useGameStore();
+const roomStore = useRoomStore();
+
+onMounted(() => {
+  const form = document.getElementById('form') as HTMLFormElement;
+  const firstForm = timerDuration.value;
+  form.addEventListener('shown.bs.collapse', () => {
+    firstForm?.focus();
+  });
+});
+
+type NumericKeyOfOptions = {
+  [K in keyof SettableOptions]: SettableOptions[K] extends number ? K : never;
+}[keyof SettableOptions];
+
+function arraysEqual(a: string[], b: string[]) {
+  return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
+}
+
+function validateNumRounds(event: Event) {
+  validateNum(event, 'numRounds', { autoNumRounds: false });
+}
+function onNumRoundChange(event: Event) {
+  onNumChange(event, 'numRounds', { autoNumRounds: false });
+}
+function onNumChange(event: Event, label: NumericKeyOfOptions, options?: Partial<SettableOptions>) {
+  const inputValue = parseInt((event.currentTarget! as HTMLInputElement).value);
+  const actualValue = gameStore.options[label];
+  if (Math.abs(inputValue - actualValue) !== 0) {
+    validateNum(event, label, options);
+  }
+}
+
+function validateNum(event: Event, label: NumericKeyOfOptions, options?: Partial<SettableOptions>) {
+  const input = event.currentTarget! as HTMLInputElement;
+  const inputValue = parseInt(input.value);
+  const max = parseInt(input.max);
+  const min = parseInt(input.min);
+  let sanitizedVal;
+  if (inputValue > max) {
+    sanitizedVal = max;
+  } else if (inputValue < min) {
+    sanitizedVal = min;
+  } else {
+    sanitizedVal = inputValue;
+  }
+  if (sanitizedVal !== gameStore.options[label]) {
+    options = options ?? {};
+    options[label] = sanitizedVal;
+    socket.emit('setOptions', options);
+  } else {
+    input.value = String(gameStore.options[label]);
+  }
+}
+function validateSikeDispute(event: Event) {
+  const input = event.currentTarget! as HTMLInputElement;
+  const options: Partial<SettableOptions> = {};
+  options.sikeDispute = input.checked;
+  if (!input.checked) {
+    options.sikeRetries = 0;
+  }
+  socket.emit('setOptions', options);
+}
+
+function packChange(event: Event, label: string, index: number) {
+  const input = event.currentTarget! as HTMLInputElement;
+  if (index === Object.keys(gameStore.options.packs).length - 1) {
+    customSelected.value = input.checked;
+  }
+  const packs = { ...gameStore.options.packs };
+  packs[label] = input.checked;
+  const options = { packs: packs };
+  socket.emit('setOptions', options);
+}
+
+function customPromptsChange(input: Event) {
+  const prompts = (input.currentTarget! as HTMLInputElement).value.split(/\r?\n/);
+  if (!arraysEqual(prompts, gameStore.options.customPrompts)) {
+    const options = { customPrompts: prompts };
+    socket.emit('setOptions', options);
+  }
+}
+
+const { t } = useI18n();
+</script>
+
 <template>
   <div class="accordion w-75">
     <div class="accordion-item">
@@ -6,7 +110,7 @@
           <form>
             <div class="row">
               <label v-t="'promptPacksLabel'" class="form-label" />
-              <div v-for="(value, label, index) in options.packs" :key="label" class="col-md-auto">
+              <div v-for="(value, label, index) in gameStore.options.packs" :key="label" class="col-md-auto">
                 <input
                   :id="'pack' + index"
                   type="checkbox"
@@ -15,7 +119,7 @@
                   :disabled="disabled"
                   :checked="value"
                   @click="packChange($event, label, index)" />
-                <label :for="'pack' + index" class="form-check-label ms-2">{{ $t(`packLabels.${label}`) }}</label>
+                <label :for="'pack' + index" class="form-check-label ms-2">{{ t(`packLabels.${label}`) }}</label>
               </div>
             </div>
             <div class="row mt-2" :class="{ 'd-sm-none': disabled }">
@@ -45,7 +149,7 @@
                   class="form-control"
                   :class="{ Disabled: disabled }"
                   :disabled="disabled"
-                  :value="options.promptTimer"
+                  :value="gameStore.options.promptTimer"
                   @focusout="validateNum($event, 'promptTimer')"
                   @change="onNumChange($event, 'promptTimer')" />
               </div>
@@ -60,7 +164,7 @@
                   class="form-control"
                   :class="{ Disabled: disabled }"
                   :disabled="disabled"
-                  :value="options.autoNumRounds ? players.length : options.numRounds"
+                  :value="gameStore.options.autoNumRounds ? roomStore.players.length : gameStore.options.numRounds"
                   @focusout="validateNumRounds($event)"
                   @change="onNumRoundChange($event)" />
               </div>
@@ -76,7 +180,7 @@
                     class="form-check-input"
                     :class="{ Disabled: disabled }"
                     :disabled="disabled"
-                    :checked="options.sikeDispute"
+                    :checked="gameStore.options.sikeDispute"
                     @click="validateSikeDispute($event)" />
                 </div>
               </div>
@@ -89,9 +193,9 @@
                   min="0"
                   max="2"
                   class="form-control"
-                  :value="options.sikeRetries"
-                  :class="{ Disabled: disabled || !options.sikeDispute }"
-                  :disabled="disabled || !options.sikeDispute"
+                  :value="gameStore.options.sikeRetries"
+                  :class="{ Disabled: disabled || !gameStore.options.sikeDispute }"
+                  :disabled="disabled || !gameStore.options.sikeDispute"
                   @focusout="validateNum($event, 'sikeRetries')"
                   @change="onNumChange($event, 'sikeRetries')" />
               </div>
@@ -113,105 +217,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import socket from '@/socket/socket';
-import { useRoomStore } from '@/stores/room.js';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-import type { SettableOptions } from ':common/options';
-
-type NumericKeyOfOptions = {
-  [K in keyof SettableOptions]: SettableOptions[K] extends number ? K : never;
-}[keyof SettableOptions];
-
-export default defineComponent({
-  props: {
-    disabled: Boolean
-  },
-  data() {
-    return {
-      customSelected: false,
-      tooltips: []
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, ['options']),
-    ...mapState(useRoomStore, ['players'])
-  },
-  mounted() {
-    const form = document.getElementById('form') as HTMLFormElement;
-    const firstForm = this.$refs.timerDuration as HTMLInputElement;
-    form.addEventListener('shown.bs.collapse', () => {
-      firstForm.focus();
-    });
-  },
-  methods: {
-    arraysEqual(a: string[], b: string[]) {
-      return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
-    },
-    validateNumRounds(event: Event) {
-      this.validateNum(event, 'numRounds', { autoNumRounds: false });
-    },
-    onNumRoundChange(event: Event) {
-      this.onNumChange(event, 'numRounds', { autoNumRounds: false });
-    },
-    onNumChange(event: Event, label: NumericKeyOfOptions, options?: Partial<SettableOptions>) {
-      const inputValue = parseInt((event.currentTarget! as HTMLInputElement).value);
-      const actualValue = this.options[label];
-      if (Math.abs(inputValue - actualValue) !== 0) {
-        this.validateNum(event, label, options);
-      }
-    },
-    validateNum(event: Event, label: NumericKeyOfOptions, options?: Partial<SettableOptions>) {
-      const input = event.currentTarget! as HTMLInputElement;
-      const inputValue = parseInt(input.value);
-      const max = parseInt(input.max);
-      const min = parseInt(input.min);
-      let sanitizedVal;
-      if (inputValue > max) {
-        sanitizedVal = max;
-      } else if (inputValue < min) {
-        sanitizedVal = min;
-      } else {
-        sanitizedVal = inputValue;
-      }
-      if (sanitizedVal !== this.options[label]) {
-        options = options ?? {};
-        options[label] = sanitizedVal;
-        socket.emit('setOptions', options);
-      } else {
-        input.value = String(this.options[label]);
-      }
-    },
-    validateSikeDispute(event: Event) {
-      const input = event.currentTarget! as HTMLInputElement;
-      const options: Partial<SettableOptions> = {};
-      options.sikeDispute = input.checked;
-      if (!input.checked) {
-        options.sikeRetries = 0;
-      }
-      socket.emit('setOptions', options);
-    },
-    packChange(event: Event, label: string, index: number) {
-      const input = event.currentTarget! as HTMLInputElement;
-      if (index === Object.keys(this.options.packs).length - 1) {
-        this.customSelected = input.checked;
-      }
-      const packs = { ...this.options.packs };
-      packs[label] = input.checked;
-      const options = { packs: packs };
-      socket.emit('setOptions', options);
-    },
-    customPromptsChange(input: Event) {
-      const prompts = (input.currentTarget! as HTMLInputElement).value.split(/\r?\n/);
-      if (!this.arraysEqual(prompts, this.options.customPrompts)) {
-        const options = { customPrompts: prompts };
-        socket.emit('setOptions', options);
-      }
-    }
-  }
-});
-</script>
diff --git a/client/src/components/lobby/PlayerCard.vue b/client/src/components/lobby/PlayerCard.vue
index 4352212..8cb9528 100644
--- a/client/src/components/lobby/PlayerCard.vue
+++ b/client/src/components/lobby/PlayerCard.vue
@@ -1,23 +1,20 @@
+<script setup lang="ts">
+import { type PropType } from 'vue';
+import type { Player } from ':common/stateTypes';
+defineProps({
+  player: {
+    type: Object as PropType<Player>,
+    required: true
+  }
+});
+</script>
+
 <template>
   <div class="w-100 p-3" :class="{ disabled: !player!.active, 'bg-primary': player!.active }">
     <h1 class="fs-5 text-center my-auto">{{ player!.name }}</h1>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, type PropType } from 'vue';
-import type { Player } from ':common/stateTypes';
-
-export default defineComponent({
-  props: {
-    player: {
-      type: Object as PropType<Player>,
-      required: true
-    }
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 h1 {
   text-overflow: ellipsis;
diff --git a/client/src/components/lobby/PlayerList.vue b/client/src/components/lobby/PlayerList.vue
index 28d5865..5b25cd6 100644
--- a/client/src/components/lobby/PlayerList.vue
+++ b/client/src/components/lobby/PlayerList.vue
@@ -1,3 +1,20 @@
+<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';
+
+const roomStore = useRoomStore();
+
+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]);
+  }
+  return columns;
+});
+</script>
+
 <template>
   <div class="player-list d-flex flex-column flex-md-row align-items-start w-100 gap-4 px-4 flex-grow-1">
     <!-- eslint-disable-next-line vue/require-v-for-key -->
@@ -9,30 +26,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import PlayerCard from '@/components/lobby/PlayerCard.vue';
-import { useRoomStore } from '@/stores/room.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-import type { Player } from ':common/stateTypes';
-
-export default defineComponent({
-  components: {
-    PlayerCard
-  },
-  computed: {
-    ...mapState(useRoomStore, ['players']),
-    columns() {
-      const columns = [[], []] as [Player[], Player[]];
-      for (let i = 0; i < this.players.length; i++) {
-        columns[i % 2].push(this.players[i]);
-      }
-      return columns;
-    }
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .player-list {
   overflow-y: auto;
diff --git a/client/src/components/promptResponse/PromptResponse.vue b/client/src/components/promptResponse/PromptResponse.vue
index 5b61653..aa712a9 100644
--- a/client/src/components/promptResponse/PromptResponse.vue
+++ b/client/src/components/promptResponse/PromptResponse.vue
@@ -1,6 +1,33 @@
+<script setup lang="ts">
+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';
+
+const response = ref('');
+const resInput: Ref<null | HTMLInputElement> = ref(null);
+
+const gameStore = useGameStore();
+
+onMounted(() => {
+  if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+    resInput.value?.focus();
+  }
+});
+
+function sendResponse() {
+  if (response.value !== '') {
+    socket.emit('promptResponse', response.value);
+    response.value = '';
+  }
+}
+</script>
+
 <template>
   <div class="w-100 d-flex flex-column justify-content-between align-items-center py-3 px-4">
-    <prompt :prompt="prompt" :skippable="true" />
+    <prompt :prompt="gameStore.prompt" :skippable="true" />
     <response-list :selectable="false" :height="45" />
     <div class="d-flex flex-column align-items-center w-100 gap-2">
       <input
@@ -12,47 +39,7 @@
         autocomplete="off"
         enterkeyhint="send"
         @keyup.enter="sendResponse" />
-      <timer :time="timer"></timer>
+      <timer :time="gameStore.timer" />
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import ResponseList from '@/components/gameShared/ResponseList.vue';
-import Timer from '@/components/gameShared/Timer.vue';
-import Prompt from '@/components/gameShared/Prompt.vue';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    ResponseList,
-    Timer,
-    Prompt
-  },
-  data() {
-    return {
-      response: ''
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, ['timer', 'prompt', 'promptSkipping'])
-  },
-  mounted() {
-    // only autofocus if the user is not on mobile
-    if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-      (this.$refs.resInput as HTMLInputElement).focus();
-    }
-  },
-  methods: {
-    sendResponse() {
-      if (this.response !== '') {
-        socket.emit('promptResponse', this.response);
-        this.response = '';
-      }
-    }
-  }
-});
-</script>
diff --git a/client/src/components/promptResponse/VoteSkip.vue b/client/src/components/promptResponse/VoteSkip.vue
index cba8088..c80b6e6 100644
--- a/client/src/components/promptResponse/VoteSkip.vue
+++ b/client/src/components/promptResponse/VoteSkip.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+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';
+
+const pressedVote = ref(false);
+
+const gameStore = useGameStore();
+function sendVote() {
+  pressedVote.value = !pressedVote.value;
+  new AudioWrap(ClickMp3).play();
+  socket.emit('pollVote', 'skipPrompt');
+}
+
+const { n } = useI18n();
+</script>
+
 <template>
   <a
     v-tooltip.right="$t('tooltip.voteSkip')"
@@ -9,43 +29,11 @@
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-3 p-0 lh-sm" />
     <notification-count
-      v-if="skipVoteCount"
+      v-if="gameStore.skipVoteCount"
       :width="22"
       class="position-absolute top-0 start-100 translate-middle fs-6"
-      :next-majority="skipVoteNext">
-      {{ $n(skipVoteCount) }}
+      :next-majority="gameStore.skipVoteNext">
+      {{ n(gameStore.skipVoteCount) }}
     </notification-count>
   </a>
 </template>
-
-<script lang="ts">
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import NotificationCount from '@/components/gameShared/NotificationCount.vue';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    NotificationCount
-  },
-  data() {
-    return {
-      tooltips: [],
-      pressedVote: false
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, ['skipVoteCount', 'skipVoteNext'])
-  },
-  methods: {
-    sendVote() {
-      this.pressedVote = !this.pressedVote;
-      new AudioWrap(ClickMp3).play();
-      socket.emit('pollVote', 'skipPrompt');
-    }
-  }
-});
-</script>
diff --git a/client/src/components/responseMatching/DisputeIcon.vue b/client/src/components/responseMatching/DisputeIcon.vue
index 65d2e07..6486a62 100644
--- a/client/src/components/responseMatching/DisputeIcon.vue
+++ b/client/src/components/responseMatching/DisputeIcon.vue
@@ -1,6 +1,43 @@
+<script setup lang="ts">
+import NotificationCount from '@/components/gameShared/NotificationCount.vue';
+import { ref } from 'vue';
+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.js';
+
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  response: {
+    type: String,
+    required: true
+  },
+  placement: {
+    type: String,
+    required: true
+  }
+});
+
+const pressedVote = ref(false);
+
+const gameStore = useGameStore();
+
+function sendVote() {
+  pressedVote.value = !pressedVote.value;
+  new AudioWrap(ClickMp3).play();
+  socket.emit('pollVote', 'sikeDispute');
+}
+
+const { t, n } = useI18n();
+</script>
+
 <template>
   <button
-    v-tooltip="{ title: $t('tooltip.dispute', { response }), placement }"
+    v-tooltip="{ title: t('tooltip.dispute', { response }), placement }"
     class="btn btn-sm btn-blue ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
     :class="{
       'text-white shadow': !pressedVote,
@@ -10,62 +47,15 @@
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-5 lh-sm" />
     <notification-count
-      v-if="sikeDisputeCount"
+      v-if="gameStore.sikeDisputeCount"
       :width="22"
       class="position-absolute top-0 start-100 translate-middle"
-      :next-majority="sikeDisputeNext">
-      {{ $n(sikeDisputeCount) }}
+      :next-majority="gameStore.sikeDisputeNext">
+      {{ n(gameStore.sikeDisputeCount) }}
     </notification-count>
   </button>
 </template>
 
-<script lang="ts">
-import NotificationCount from '@/components/gameShared/NotificationCount.vue';
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    NotificationCount
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    response: {
-      type: String,
-      required: true
-    },
-    placement: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      tooltips: [],
-      pressedVote: false
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, ['sikeDisputeCount', 'sikeDisputeNext'])
-  },
-  methods: {
-    sendVote() {
-      this.pressedVote = !this.pressedVote;
-
-      new AudioWrap(ClickMp3).play();
-      socket.emit('pollVote', 'sikeDispute');
-    }
-  }
-});
-</script>
-
 <style>
 :focus:not(:focus-visible) {
   outline: 0;
diff --git a/client/src/components/responseMatching/MatchCard.vue b/client/src/components/responseMatching/MatchCard.vue
index 11a0e50..7846d7c 100644
--- a/client/src/components/responseMatching/MatchCard.vue
+++ b/client/src/components/responseMatching/MatchCard.vue
@@ -1,10 +1,48 @@
+<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 type { Player } from ':common/stateTypes.js';
+import { type Match, useGameStore } from '@/stores/game.js';
+import { useRoomStore } from '@/stores/room';
+import { useI18n } from 'vue-i18n';
+const click = new AudioWrap(ClickMp3);
+
+const props = defineProps({
+  player: {
+    type: Object as PropType<Player>,
+    required: true
+  },
+  match: {
+    type: Object as PropType<Match>,
+    required: true
+  }
+});
+
+const hovering = ref(false);
+
+const gameStore = useGameStore();
+const roomStore = useRoomStore();
+
+const showUnmatch = computed((): boolean => {
+  return props.player?.name === roomStore.name && !props.match?.exact;
+});
+
+function unmatchClick() {
+  click.play();
+  gameStore.unmatch();
+}
+
+const { t } = useI18n();
+</script>
+
 <template>
   <div class="root d-flex flex-column gap-0">
     <div class="d-flex flex-row w-100 gap-1 justify-content-center align-items-center">
       <h2 v-if="match && match.response" class="match-content fs-3">
         {{ match.response }}
       </h2>
-      <img v-else-if="match" class="fs-3" src="@/assets/images/sike.png" :alt="$t('sike')" />
+      <img v-else-if="match" class="fs-3" src="@/assets/images/sike.png" :alt="t('sike')" />
       <div v-else class="p-3 d-flex justify-content-center align-items-center position-relative">
         <div class="dot-pulse" />
       </div>
@@ -20,50 +58,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import { useRoomStore } from '@/stores/room.js';
-import { useGameStore, type Match } from '@/stores/game.js';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent, type PropType } from 'vue';
-import { type Player } from ':common/stateTypes';
-
-const click = new AudioWrap(ClickMp3);
-
-export default defineComponent({
-  props: {
-    player: {
-      type: Object as PropType<Player>,
-      required: true
-    },
-    match: {
-      type: Object as PropType<Match>,
-      required: true
-    }
-  },
-  data() {
-    return {
-      hovering: false
-    };
-  },
-  computed: {
-    ...mapState(useRoomStore, ['name']),
-    ...mapState(useGameStore, ['selectedResponse']),
-    showUnmatch() {
-      return this.player?.name === this.name && !this.match?.exact;
-    }
-  },
-  methods: {
-    ...mapActions(useGameStore, ['unmatch']),
-    unmatchClick() {
-      click.play();
-      this.unmatch();
-    }
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .root {
   width: 150px;