voting terminology adjusted (closes #66)

highlight currently selected vote option

src/components/Player.vue

@@ -44,15 +44,15 @@
       <!-- Overlay icons -->
       <div class="overlay">
         <font-awesome-icon
-          icon="skull"
+          icon="hand-paper"
           class="vote"
-          title="Voted YES"
+          title="Hand UP"
           @click="vote()"
         />
         <font-awesome-icon
           icon="times"
           class="vote"
-          title="Voted NO"
+          title="Hand DOWN"
           @click="vote()"
         />
         <font-awesome-icon
@@ -500,7 +500,7 @@ export default {
       fill: url(#default);
     }
     &:hover *,
-    &.fa-skull * {
+    &.fa-hand-paper * {
       fill: url(#demon);
     }
     &.fa-times * {
@@ -510,14 +510,14 @@ export default {
 }
 
 // other player voted yes, but is not locked yet
-#townsquare.vote .player.vote-yes .overlay svg.vote.fa-skull {
+#townsquare.vote .player.vote-yes .overlay svg.vote.fa-hand-paper {
   opacity: 0.5;
   transform: scale(1);
 }
 
 // you voted yes | a locked vote yes | a locked vote no
-#townsquare.vote .player.you.vote-yes .overlay svg.vote.fa-skull,
-#townsquare.vote .player.vote-lock.vote-yes .overlay svg.vote.fa-skull,
+#townsquare.vote .player.you.vote-yes .overlay svg.vote.fa-hand-paper,
+#townsquare.vote .player.vote-lock.vote-yes .overlay svg.vote.fa-hand-paper,
 #townsquare.vote .player.vote-lock:not(.vote-yes) .overlay svg.vote.fa-times {
   opacity: 1;
   transform: scale(1);

src/components/Vote.vue

@@ -24,7 +24,7 @@
       <div v-if="session.lockedVote > 1">
         <em class="blue" v-if="voters.length">{{ voters.join(", ") }} </em>
         <span v-else>nobody</span>
-        voted <em>YES</em>
+        had their hand <em>UP</em>
       </div>
 
       <template v-if="!session.isSpectator">
@@ -55,8 +55,20 @@
           {{ session.votingSpeed }} seconds between votes
         </div>
         <div class="button-group">
-          <div class="button vote-no" @click="vote(false)">Vote NO</div>
-          <div class="button vote-yes" @click="vote(true)">Vote YES</div>
+          <div
+            class="button vote-no"
+            @click="vote(false)"
+            :class="{ disabled: !currentVote }"
+          >
+            Hand DOWN
+          </div>
+          <div
+            class="button vote-yes"
+            @click="vote(true)"
+            :class="{ disabled: currentVote }"
+          >
+            Hand UP
+          </div>
         </div>
       </template>
       <div v-else-if="!player">
@@ -101,6 +113,10 @@ export default {
     player: function() {
       return this.players.find(p => p.id === this.session.playerId);
     },
+    currentVote: function() {
+      const index = this.players.findIndex(p => p.id === this.session.playerId);
+      return index >= 0 ? !!this.session.votes[index] : undefined;
+    },
     canVote: function() {
       if (!this.player) return false;
       if (this.player.isVoteless && this.nominee.role.team !== "traveler")
@@ -257,6 +273,10 @@ export default {
   }
 }
 
+.button.disabled {
+  opacity: 0.75;
+}
+
 .button.vote-no {
   background: radial-gradient(
         at 0 -15%,
@@ -267,7 +287,7 @@ export default {
     linear-gradient(#0031ad, rgba(5, 0, 0, 0.22)) content-box,
     linear-gradient(#292929, #001142) border-box;
   box-shadow: inset 0 1px 1px #002c9c, 0 0 10px #000;
-  &:hover {
+  &:hover:not(.disabled) {
     color: #008cf7;
   }
 }

src/main.js

@@ -20,6 +20,7 @@ const faIcons = [
   "Dragon",
   "ExchangeAlt",
   "FileUpload",
+  "HandPaper",
   "HandPointRight",
   "Heartbeat",
   "Image",
@@ -32,7 +33,6 @@ const faIcons = [
   "RedoAlt",
   "SearchMinus",
   "SearchPlus",
-  "Skull",
   "Square",
   "Sun",
   "TheaterMasks",