From 5c834b05a13e5876a515a98d6023ea4a33aef4e1 Mon Sep 17 00:00:00 2001
From: Jen <45193617+jengu288@users.noreply.github.com>
Date: Tue, 16 Jan 2024 18:05:56 -0800
Subject: [PATCH 1/4] Modify badge notification to indicate next vote causes
 action

---
 client/src/components/gameShared/NotificationCount.vue | 8 +++++++-
 client/src/components/responseMatching/DisputeIcon.vue | 7 +++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/src/components/gameShared/NotificationCount.vue b/client/src/components/gameShared/NotificationCount.vue
index b4025db..3ddfe9e 100644
--- a/client/src/components/gameShared/NotificationCount.vue
+++ b/client/src/components/gameShared/NotificationCount.vue
@@ -1,8 +1,10 @@
 <template>
   <span
     :style="cssProps"
-    class="rounded-pill badge bg-burgundy d-inline-flex align-items-center justify-content-center p-0">
+    class="rounded-pill badge bg-orange d-inline-flex align-items-center justify-content-center p-0"
+    :class="{ 'bg-blue': !nextMajority }">
     <slot />
+    {{ nextMajority }}
   </span>
 </template>
 
@@ -14,6 +16,10 @@ export default defineComponent({
     width: {
       type: Number,
       default: 24
+    },
+    nextMajority: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
diff --git a/client/src/components/responseMatching/DisputeIcon.vue b/client/src/components/responseMatching/DisputeIcon.vue
index a001456..75cb13b 100644
--- a/client/src/components/responseMatching/DisputeIcon.vue
+++ b/client/src/components/responseMatching/DisputeIcon.vue
@@ -6,8 +6,11 @@
     :disabled="disabled"
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-5 lh-sm" />
-
-    <notification-count v-if="sikeDisputeCount" :width="21" class="position-absolute top-0 start-100 translate-middle">
+    <notification-count
+      v-if="sikeDisputeCount"
+      :width="22"
+      class="position-absolute top-0 start-100 translate-middle"
+      :next-majority="sikeDisputeNext">
       {{ $n(sikeDisputeCount) }}
     </notification-count>
   </button>

From c3190ebe59558b2393ba1cad2572f88e0ae4aea9 Mon Sep 17 00:00:00 2001
From: Jen <45193617+jengu288@users.noreply.github.com>
Date: Tue, 16 Jan 2024 23:18:16 -0800
Subject: [PATCH 2/4] Expand badge modification to other voting places

---
 client/src/components/endRound/EndRound.vue            | 5 ++++-
 client/src/components/gameShared/NotificationCount.vue | 5 ++---
 client/src/components/promptResponse/VoteSkip.vue      | 3 ++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/src/components/endRound/EndRound.vue b/client/src/components/endRound/EndRound.vue
index f75c921..68980f1 100644
--- a/client/src/components/endRound/EndRound.vue
+++ b/client/src/components/endRound/EndRound.vue
@@ -8,7 +8,10 @@
       :class="{ 'btn-blue': !startNextRoundNext }"
       @click="sendVote">
       {{ hasNextRound ? $t('startNextRound') : $t('viewResults') }}
-      <notification-count v-if="startNextRoundCount" class="position-absolute top-0 start-100 translate-middle fs-6">
+      <notification-count
+        v-if="startNextRoundCount"
+        class="position-absolute top-0 start-100 translate-middle fs-6"
+        :next-majority="startNextRoundNext">
         {{ $n(startNextRoundCount) }}
       </notification-count>
     </button>
diff --git a/client/src/components/gameShared/NotificationCount.vue b/client/src/components/gameShared/NotificationCount.vue
index 3ddfe9e..8ef96ce 100644
--- a/client/src/components/gameShared/NotificationCount.vue
+++ b/client/src/components/gameShared/NotificationCount.vue
@@ -1,10 +1,9 @@
 <template>
   <span
     :style="cssProps"
-    class="rounded-pill badge bg-orange d-inline-flex align-items-center justify-content-center p-0"
-    :class="{ 'bg-blue': !nextMajority }">
+    class="rounded-pill badge d-inline-flex align-items-center justify-content-center p-0"
+    :class="{ 'bg-blue': !nextMajority, 'bg-orange': nextMajority }">
     <slot />
-    {{ nextMajority }}
   </span>
 </template>
 
diff --git a/client/src/components/promptResponse/VoteSkip.vue b/client/src/components/promptResponse/VoteSkip.vue
index 76e8850..110ec1b 100644
--- a/client/src/components/promptResponse/VoteSkip.vue
+++ b/client/src/components/promptResponse/VoteSkip.vue
@@ -9,7 +9,8 @@
     <notification-count
       v-if="skipVoteCount"
       :width="22"
-      class="position-absolute top-0 start-100 translate-middle fs-6">
+      class="position-absolute top-0 start-100 translate-middle fs-6"
+      :next-majority="skipVoteNext">
       {{ $n(skipVoteCount) }}
     </notification-count>
   </a>

From 918f947d9e11c4f1c3de270502a46fec69789b3a Mon Sep 17 00:00:00 2001
From: Jen <45193617+jengu288@users.noreply.github.com>
Date: Thu, 18 Jan 2024 00:15:49 -0800
Subject: [PATCH 3/4] Add logic to toggle button visual when voting

---
 client/src/components/endRound/EndRound.vue      |  5 +++--
 .../src/components/promptResponse/VoteSkip.vue   |  8 +++++---
 .../components/responseMatching/DisputeIcon.vue  |  5 +++--
 server/.eslintrc.cjs                             | 16 ++++++++--------
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/client/src/components/endRound/EndRound.vue b/client/src/components/endRound/EndRound.vue
index 68980f1..2c29380 100644
--- a/client/src/components/endRound/EndRound.vue
+++ b/client/src/components/endRound/EndRound.vue
@@ -5,7 +5,7 @@
     <player-chooser v-model="selectedId" class="w-50 w-lg-25 fs-4 mb-3" />
     <button
       class="btn btn-orange w-75 w-lg-50 w-xl-25 fs-4 mb-3 position-relative"
-      :class="{ 'btn-blue': !startNextRoundNext }"
+      :class="{ 'btn-blue': !pressedVote }"
       @click="sendVote">
       {{ hasNextRound ? $t('startNextRound') : $t('viewResults') }}
       <notification-count
@@ -41,7 +41,8 @@ export default defineComponent({
   data() {
     return {
       responsesId: '',
-      selectedId: ''
+      selectedId: '',
+      pressedVote: false
     }
   },
   computed: {
diff --git a/client/src/components/promptResponse/VoteSkip.vue b/client/src/components/promptResponse/VoteSkip.vue
index 110ec1b..2727402 100644
--- a/client/src/components/promptResponse/VoteSkip.vue
+++ b/client/src/components/promptResponse/VoteSkip.vue
@@ -1,8 +1,8 @@
 <template>
   <a
     v-tooltip.right="$t('tooltip.voteSkip')"
-    class="btn btn-sm btn-orange text-white ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
-    :class="{ 'btn-blue': !skipVoteNext }"
+    class="btn btn-sm btn-orange text-white ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center active"
+    :class="{ 'btn-blue': !pressedVote }"
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-3 p-0 lh-sm" />
 
@@ -31,7 +31,8 @@ export default defineComponent({
   },
   data() {
     return {
-      tooltips: []
+      tooltips: [],
+      pressedVote: false
     }
   },
   computed: {
@@ -39,6 +40,7 @@ export default defineComponent({
   },
   methods: {
     sendVote() {
+      this.pressedVote = !this.pressedVote
       new AudioWrap(ClickMp3).play()
       socket.emit('pollVote', 'skipPrompt')
     }
diff --git a/client/src/components/responseMatching/DisputeIcon.vue b/client/src/components/responseMatching/DisputeIcon.vue
index 75cb13b..514f6d1 100644
--- a/client/src/components/responseMatching/DisputeIcon.vue
+++ b/client/src/components/responseMatching/DisputeIcon.vue
@@ -2,7 +2,7 @@
   <button
     v-tooltip="{ title: $t('tooltip.dispute', { response }), placement }"
     class="btn btn-sm btn-orange text-white ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
-    :class="{ 'btn-blue': !sikeDisputeNext }"
+    :class="{ 'btn-blue': !pressedVote }"
     :disabled="disabled"
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-5 lh-sm" />
@@ -45,7 +45,8 @@ export default defineComponent({
   },
   data() {
     return {
-      tooltips: []
+      tooltips: [],
+      pressedVote: false
     }
   },
   computed: {
diff --git a/server/.eslintrc.cjs b/server/.eslintrc.cjs
index 0a664f2..253b358 100644
--- a/server/.eslintrc.cjs
+++ b/server/.eslintrc.cjs
@@ -1,21 +1,21 @@
-require('@rushstack/eslint-patch/modern-module-resolution')
+require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
   env: {
-    'es2022': true,
-    'node': true
+    es2022: true,
+    node: true
   },
   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended-type-checked', 'prettier'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    'ecmaVersion': 'latest',
-    'sourceType': 'module',
-    'project': true,
-    'tsconfigRootDir': '.'
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: true,
+    tsconfigRootDir: '.'
   },
   plugins: ['@typescript-eslint', 'prettier'],
   rules: {
     'prettier/prettier': 2
   },
   ignorePatterns: ['/*', '!/src', '!/tests']
-}
+};

From a1f48c274b9b8a3e2fe5ff5b0725d7e659358b65 Mon Sep 17 00:00:00 2001
From: Jen <45193617+jengu288@users.noreply.github.com>
Date: Thu, 25 Jan 2024 20:26:04 -0800
Subject: [PATCH 4/4] Modify icon color and dropshadow when button is clicked

---
 client/src/components/endRound/EndRound.vue            | 9 +++++++--
 client/src/components/promptResponse/VoteSkip.vue      | 8 +++++---
 client/src/components/responseMatching/DisputeIcon.vue | 9 +++++++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/client/src/components/endRound/EndRound.vue b/client/src/components/endRound/EndRound.vue
index 2c29380..0ae2765 100644
--- a/client/src/components/endRound/EndRound.vue
+++ b/client/src/components/endRound/EndRound.vue
@@ -4,8 +4,11 @@
     <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
-      class="btn btn-orange w-75 w-lg-50 w-xl-25 fs-4 mb-3 position-relative"
-      :class="{ 'btn-blue': !pressedVote }"
+      class="btn btn-blue w-75 w-lg-50 w-xl-25 fs-4 mb-3 position-relative"
+      :class="{
+        'text-white shadow': !pressedVote,
+        'text-white-50 shadow-none': pressedVote
+      }"
       @click="sendVote">
       {{ hasNextRound ? $t('startNextRound') : $t('viewResults') }}
       <notification-count
@@ -63,6 +66,8 @@ export default defineComponent({
   },
   methods: {
     sendVote() {
+      this.pressedVote = !this.pressedVote
+
       new AudioWrap(ClickMp3).play()
       socket.emit('pollVote', 'startNextRound')
     },
diff --git a/client/src/components/promptResponse/VoteSkip.vue b/client/src/components/promptResponse/VoteSkip.vue
index 2727402..d80cef2 100644
--- a/client/src/components/promptResponse/VoteSkip.vue
+++ b/client/src/components/promptResponse/VoteSkip.vue
@@ -1,11 +1,13 @@
 <template>
   <a
     v-tooltip.right="$t('tooltip.voteSkip')"
-    class="btn btn-sm btn-orange text-white ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center active"
-    :class="{ 'btn-blue': !pressedVote }"
+    class="btn btn-sm btn-blue ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
+    :class="{
+      'text-white shadow': !pressedVote,
+      'text-white-50 shadow-none': pressedVote
+    }"
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-3 p-0 lh-sm" />
-
     <notification-count
       v-if="skipVoteCount"
       :width="22"
diff --git a/client/src/components/responseMatching/DisputeIcon.vue b/client/src/components/responseMatching/DisputeIcon.vue
index 514f6d1..ff8ca58 100644
--- a/client/src/components/responseMatching/DisputeIcon.vue
+++ b/client/src/components/responseMatching/DisputeIcon.vue
@@ -1,8 +1,11 @@
 <template>
   <button
     v-tooltip="{ title: $t('tooltip.dispute', { response }), placement }"
-    class="btn btn-sm btn-orange text-white ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
-    :class="{ 'btn-blue': !pressedVote }"
+    class="btn btn-sm btn-blue ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
+    :class="{
+      'text-white shadow': !pressedVote,
+      'text-white-50 shadow-none': pressedVote
+    }"
     :disabled="disabled"
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-5 lh-sm" />
@@ -54,6 +57,8 @@ export default defineComponent({
   },
   methods: {
     sendVote() {
+      this.pressedVote = !this.pressedVote
+
       new AudioWrap(ClickMp3).play()
       socket.emit('pollVote', 'sikeDispute')
     }