Merge pull request #191 from ConorMurphy21/158-buttons-dont-indicate-…

…that-the-user-has-already-clicked 158 buttons dont indicate that the user has already clicked
ConorMurphy21 · Feb 2, 2024 · ddfa375 · ddfa375
2 parents f254b14 + 4ac746d
commit ddfa375
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/client/src/components/endRound/EndRound.vue b/client/src/components/endRound/EndRound.vue
@@ -4,11 +4,17 @@
     <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': !startNextRoundNext }"
+      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 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>
@@ -38,7 +44,8 @@ export default defineComponent({
   data() {
     return {
       responsesId: '',
-      selectedId: ''
+      selectedId: '',
+      pressedVote: false
     };
   },
   computed: {
@@ -59,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/gameShared/NotificationCount.vue b/client/src/components/gameShared/NotificationCount.vue
@@ -1,7 +1,8 @@
 <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 d-inline-flex align-items-center justify-content-center p-0"
+    :class="{ 'bg-burgundy': !nextMajority, 'bg-orange': nextMajority }">
     <slot />
   </span>
 </template>
@@ -14,6 +15,10 @@ export default defineComponent({
     width: {
       type: Number,
       default: 24
+    },
+    nextMajority: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

diff --git a/client/src/components/promptResponse/VoteSkip.vue b/client/src/components/promptResponse/VoteSkip.vue
@@ -1,15 +1,18 @@
 <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-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"
-      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>
@@ -30,14 +33,16 @@ export default defineComponent({
   },
   data() {
     return {
-      tooltips: []
+      tooltips: [],
+      pressedVote: false
     };
   },
   computed: {
     ...mapState(useGameStore, ['skipVoteCount', 'skipVoteNext'])
   },
   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
@@ -1,13 +1,19 @@
 <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': !sikeDisputeNext }"
+    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" />
-
-    <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>
@@ -42,14 +48,17 @@ export default defineComponent({
   },
   data() {
     return {
-      tooltips: []
+      tooltips: [],
+      pressedVote: false
     };
   },
   computed: {
     ...mapState(useGameStore, ['sikeDisputeCount', 'sikeDisputeNext'])
   },
   methods: {
     sendVote() {
+      this.pressedVote = !this.pressedVote;
+
       new AudioWrap(ClickMp3).play();
       socket.emit('pollVote', 'sikeDispute');
     }