added icons and info

package-lock.json

@@ -27,6 +27,32 @@
         "js-tokens": "^4.0.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
+      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
+      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.9.tgz",
+      "integrity": "sha512-h/emhmZz+DfB2zOGLWawNwXq82UYhn9waTfUjLLmeaIqtnIyNt6kYlpQT/vzJjLZRDRvY2IEJAh1di5qKpKVpA=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",

package.json

@@ -10,6 +10,9 @@
   },
   "main": "App.vue",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/vue-fontawesome": "^0.1.9",
     "@vue/cli-service": "^4.2.3",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",

src/App.vue

@@ -1,31 +1,123 @@
 <template>
   <div id="app">
-    <TownSquare :is-public="isPublic"></TownSquare>
+    <ul class="info">
+      <li>
+        {{ players.length }} <font-awesome-icon icon="users" />
+        {{ teams.alive }} <font-awesome-icon icon="heartbeat" />
+        {{ teams.votes }} <font-awesome-icon icon="vote-yea" />
+      </li>
+      <li>
+        {{ teams.townsfolk }}
+        <span class="townsfolk"><font-awesome-icon icon="user-friends"/></span>
+        {{ teams.outsiders }}
+        <span class="outsider"><font-awesome-icon v-bind:icon="teams.outsiders > 1 ? 'user-friends' : 'user'"/></span>
+        {{ teams.minions }}
+        <span class="minion"><font-awesome-icon v-bind:icon="teams.minions > 1 ? 'user-friends' : 'user'"/></span>
+        {{ teams.demons }}
+        <span class="demon"><font-awesome-icon v-bind:icon="teams.demons > 1 ? 'user-friends' : 'user'"/></span>
+        <template v-if="teams.travellers">
+          {{ teams.travellers }}
+          <span class="traveller"
+            ><font-awesome-icon v-bind:icon="teams.travellers > 1 ? 'user-friends' : 'user'"/></span>
+        </template>
+      </li>
+    </ul>
+    <TownSquare
+      v-if="players.length >= 5"
+      :is-public="isPublic"
+      :players="players"
+      :roles="roles"
+    ></TownSquare>
     <div class="controls">
       <button v-on:click="togglePublic">Toggle</button>
+      <button v-on:click="addPlayer" v-bind:disabled="players.length >= 20">
+        Add Player
+      </button>
+      <button v-on:click="togglePublic" v-bind:disabled="players.length <= 0">
+        Remove Player
+      </button>
+      <button v-on:click="togglePublic">Select Roles</button>
+      <button v-on:click="togglePublic">Randomize Roles</button>
     </div>
   </div>
 </template>
 
 <script>
 import TownSquare from "./components/TownSquare.vue";
+import rolesJSON from "./roles";
+import gameJSON from "./game";
+
+const roles = new Map(
+  rolesJSON
+    .sort((a, b) => b.team.localeCompare(a.team))
+    .map(role => [role.id, role])
+);
 
 export default {
   components: {
     TownSquare
   },
+  computed: {
+    teams: function() {
+      const nontravellers = this.players.filter(
+        player => player.role.team !== "traveller"
+      ).length;
+      const alive = this.players.filter(player => player.hasDied !== true)
+        .length;
+      return {
+        ...gameJSON[nontravellers - 5],
+        travellers: this.players.length - nontravellers,
+        alive,
+        votes:
+          alive +
+          this.players.filter(
+            player => player.hasDied === true && player.hasVoted !== true
+          ).length
+      };
+    }
+  },
   data: () => ({
-    isPublic: false
+    isPublic: true,
+    players: [
+      {
+        name: "Steffen",
+        role: roles.get("baron"),
+        reminders: [{ role: "imp", name: "Die" }]
+      },
+      { name: "Tino", role: roles.get("harlot"), reminders: [] },
+      { name: "Basti", role: roles.get("chef"), reminders: [] },
+      { name: "Bernd", role: roles.get("ravenkeeper"), reminders: [] },
+      { name: "Tim", role: roles.get("drunk"), reminders: [] },
+      { name: "Yann", role: roles.get("librarian"), reminders: [] },
+      { name: "Marie", role: roles.get("empath"), reminders: [] },
+      { name: "Bogdan", role: roles.get("scarletwoman"), reminders: [] },
+      { name: "Sean", role: roles.get("recluse"), reminders: [] },
+      { name: "Petra", role: roles.get("undertaker"), reminders: [] }
+    ],
+    roles,
+    set: "TB"
   }),
   methods: {
     togglePublic() {
       this.isPublic = !this.isPublic;
+    },
+    addPlayer() {
+      const name = prompt("Player name");
+      if (name) {
+        this.players.push({
+          name,
+          role: {},
+          reminders: []
+        });
+      }
     }
   }
 };
 </script>
 
 <style lang="scss">
+@import "vars.scss";
+
 @font-face {
   font-family: "Papyrus";
   src: url("assets/fonts/papyrus.eot"); /* IE9*/
@@ -52,6 +144,11 @@ body {
   margin: 0;
 }
 
+* {
+  box-sizing: border-box;
+  position: relative;
+}
+
 #app {
   height: 100%;
 }
@@ -62,4 +159,56 @@ body {
   right: 0;
   top: 0;
 }
+
+.info {
+  position: absolute;
+  display: flex;
+  left: 50%;
+  top: 50%;
+  width: 20%;
+  height: 20%;
+  margin-left: -10%;
+  margin-top: -5%;
+  padding: 0;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  background: url("assets/demon-head.png") center center no-repeat;
+  background-size: auto 100%;
+
+  li {
+    display: block;
+    white-space: nowrap;
+    font-weight: bold;
+    text-shadow: 0 0 2px black;
+    text-align: center;
+    padding: 0 5px;
+    width: 100%;
+
+    svg {
+      margin-right: 10px;
+    }
+
+    .townsfolk {
+      color: $townsfolk;
+    }
+    .outsider {
+      color: $outsider;
+    }
+    .minion {
+      color: $minion;
+    }
+    .demon {
+      color: $demon;
+    }
+    .traveller {
+      color: $traveller;
+    }
+    .alive,
+    .votes {
+      color: #aaa;
+    }
+  }
+}
 </style>

src/components/Player.vue

@@ -2,14 +2,18 @@
   <li>
     <div
       class="player"
-      :class="{ dead: player.hasDied, 'no-vote': player.hasVoted }"
+      :class="{
+        dead: player.hasDied,
+        'no-vote': player.hasVoted,
+        traveller: player.role.team === 'traveller'
+      }"
     >
       <div class="shroud" @click="toggleStatus()"></div>
       <div class="token" @click="changeRole()" :class="[player.role.id]">
         <span class="leaf-left" v-if="player.role.firstNight"></span>
         <span class="leaf-right" v-if="player.role.otherNight"></span>
         <span
-          v-if="player.role.reminders.length"
+          v-if="player.role.reminders && player.role.reminders.length"
           v-bind:class="['leaf-top' + player.role.reminders.length]"
         ></span>
         <span class="leaf-orange" v-if="player.role.setup"></span>
@@ -18,7 +22,7 @@
       <div class="ability" v-if="player.role.ability">
         {{ player.role.ability }}
       </div>
-      <div class="name">{{ player.name }}</div>
+      <div class="name" @click="changeName">{{ player.name }}</div>
     </div>
     <template v-if="player.reminders">
       <div
@@ -72,6 +76,10 @@ export default {
         this.toggleStatus();
       }
     },
+    changeName() {
+      const name = prompt("Player name", this.player.name);
+      this.player.name = name || this.player.name;
+    },
     removeReminder(reminder) {
       this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
     }
@@ -80,8 +88,7 @@ export default {
 </script>
 
 <style lang="scss">
-// token size
+@import "../vars.scss";
-$token: 150px;
 
 /***** Player token *****/
 .circle .player {
@@ -115,7 +122,7 @@ $token: 150px;
     transform: scale(1);
   }
   &.dead .name {
-    color: #999;
+    opacity: 0.5;
   }
 }
 
@@ -151,14 +158,12 @@ $token: 150px;
   background: url("../assets/token.png") center center;
   background-size: 100%;
   text-align: center;
-  position: relative;
   color: black;
   margin: auto;
   font-weight: 600;
   text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
     1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75);
   padding-top: $token * 0.7;
-  box-sizing: border-box;
   font-family: "Papyrus", serif;
   border: 3px solid black;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -235,6 +240,7 @@ $token: 150px;
   line-height: 120%;
   text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
     2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.75);
+  cursor: pointer;
 }
 
 /***** Ability text *****/
@@ -283,8 +289,6 @@ $token: 150px;
   display: block;
   margin: 5px ($token / -4) 0;
   text-align: center;
-  position: relative;
-  box-sizing: border-box;
   padding-top: $token * 0.3;
   border-radius: 50%;
   border: 3px solid black;

src/components/TownSquare.vue

@@ -2,8 +2,8 @@
   <div id="townsquare" class="square" v-bind:class="{ public: isPublic }">
     <ul class="circle" v-bind:class="['size-' + players.length]">
       <Player
-        v-for="player in players"
+        v-for="(player, index) in players"
-        :key="player.name"
+        :key="index"
         :player="player"
         :roles="roles"
         :is-public="isPublic"
@@ -43,41 +43,17 @@
 </template>
 
 <script>
-import rolesJSON from "../roles.json";
 import Player from "./Player";
 import Modal from "./Modal";
 
-const roles = new Map(
-  rolesJSON
-    .sort((a, b) => b.team.localeCompare(a.team))
-    .map(role => [role.id, role])
-);
-
 export default {
   components: {
     Modal,
     Player
   },
-  props: ["isPublic"],
+  props: ["isPublic", "players", "roles"],
   data() {
     return {
-      players: [
-        {
-          name: "Steffen",
-          role: roles.get("baron"),
-          reminders: [{ role: "imp", name: "Die" }]
-        },
-        { name: "Tino", role: roles.get("imp") },
-        { name: "Basti", role: roles.get("chef"), reminders: [] },
-        { name: "Bernd", role: roles.get("ravenkeeper"), reminders: [] },
-        { name: "Tim", role: roles.get("drunk"), reminders: [] },
-        { name: "Yann", role: roles.get("librarian"), reminders: [] },
-        { name: "Marie", role: roles.get("empath"), reminders: [] },
-        { name: "Bogdan", role: roles.get("scarletwoman"), reminders: [] },
-        { name: "Sean", role: roles.get("recluse"), reminders: [] },
-        { name: "Petra", role: roles.get("undertaker"), reminders: [] }
-      ],
-      roles,
       selectedPlayer: false,
       availableReminders: [],
       availableRoles: []
@@ -95,6 +71,8 @@ export default {
           ];
         }
       });
+      this.availableReminders.push({ role: "good", name: "Good" });
+      this.availableReminders.push({ role: "evil", name: "Evil" });
     },
     openRoleModal(player) {
       this.selectedPlayer = player;
@@ -104,6 +82,7 @@ export default {
           this.availableRoles.push(role);
         }
       });
+      this.availableRoles.push({});
     },
     addReminder(reminder) {
       this.selectedPlayer.reminders.push(reminder);
@@ -123,7 +102,47 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../roles.scss";
+@import "../vars.scss";
+
+@each $img, $fontsize in $roles {
+  .token.#{$img} {
+    &:before {
+      background-image: url("../assets/icons/#{$img}.png");
+    }
+    font-size: $fontsize;
+  }
+
+  .reminder.#{$img}:before {
+    background-image: url("../assets/icons/#{$img}.png");
+  }
+}
+
+.circle {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  list-style: none;
+  overflow: hidden;
+  margin: 0;
+
+  li {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    height: 50%;
+    transform-origin: 0 100%;
+    text-align: center;
+
+    &:hover {
+      z-index: 25 !important;
+    }
+
+    > * {
+      margin-left: -100px;
+      width: 200px;
+    }
+  }
+}
 
 @mixin on-circle($item-count) {
   $angle: (360 / $item-count);
@@ -155,35 +174,6 @@ export default {
   }
 }
 
-.circle {
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  list-style: none;
-  overflow: hidden;
-  position: relative;
-  margin: 0;
-  box-sizing: border-box;
-
-  li {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    height: 50%;
-    transform-origin: 0 100%;
-    text-align: center;
-
-    &:hover {
-      z-index: 25 !important;
-    }
-
-    > * {
-      margin-left: -100px;
-      width: 200px;
-    }
-  }
-}
-
 @for $i from 5 through 20 {
   .circle.size-#{$i} li {
     @include on-circle($item-count: $i);
@@ -193,22 +183,10 @@ export default {
 #townsquare {
   width: 100%;
   height: 100%;
-  position: relative;
   border-radius: 50%;
-  box-sizing: border-box;
   padding: 20px;
 }
 
-// player circle
-.circle {
-  background: url("../assets/demon-head2.png") center center no-repeat;
-  background-size: 10%;
-}
-
-#townsquare.public .circle {
-  background-image: url("../assets/demon-head.png");
-}
-
 /***** Role token modal ******/
 ul.tokens {
   list-style-type: none;
@@ -230,14 +208,12 @@ ul.tokens {
     background: url("../assets/token.png") center center;
     background-size: 100%;
     text-align: center;
-    position: relative;
     color: black;
     margin: 5px;
     font-weight: 600;
     text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
       1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75);
     padding-top: 85px;
-    box-sizing: border-box;
     font-family: "Papyrus", serif;
     border: 3px solid black;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -245,16 +221,19 @@ ul.tokens {
     transition: transform 500ms ease;
 
     &.townsfolk {
-      box-shadow: 0 0 10px #004cff, 0 0 10px #004cff;
+      box-shadow: 0 0 10px $townsfolk, 0 0 10px #004cff;
     }
     &.outsider {
-      box-shadow: 0 0 10px #00d6ff, 0 0 10px #00d6ff;
+      box-shadow: 0 0 10px $outsider, 0 0 10px $outsider;
     }
     &.minion {
-      box-shadow: 0 0 10px #ff6900, 0 0 10px #ff6900;
+      box-shadow: 0 0 10px $minion, 0 0 10px $minion;
     }
     &.demon {
-      box-shadow: 0 0 10px #ff0000, 0 0 10px #ff0000;
+      box-shadow: 0 0 10px $demon, 0 0 10px $demon;
+    }
+    &.traveller {
+      box-shadow: 0 0 10px $traveller, 0 0 10px $traveller;
     }
 
     &:before {
@@ -288,12 +267,10 @@ ul.reminders {
     display: block;
     margin: 5px;
     text-align: center;
-    position: relative;
     border-radius: 50%;
     border: 3px solid black;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     cursor: pointer;
-    box-sizing: border-box;
     padding-top: 65px;
     transition: transform 500ms ease;
 

src/game.json

@@ -0,0 +1,13 @@
+[
+  {"townsfolk": 3, "outsiders": 0, "minions": 1, "demons": 1},
+  {"townsfolk": 3, "outsiders": 1, "minions": 1, "demons": 1},
+  {"townsfolk": 5, "outsiders": 0, "minions": 1, "demons": 1},
+  {"townsfolk": 5, "outsiders": 1, "minions": 1, "demons": 1},
+  {"townsfolk": 5, "outsiders": 2, "minions": 1, "demons": 1},
+  {"townsfolk": 7, "outsiders": 0, "minions": 2, "demons": 1},
+  {"townsfolk": 7, "outsiders": 1, "minions": 2, "demons": 1},
+  {"townsfolk": 7, "outsiders": 2, "minions": 2, "demons": 1},
+  {"townsfolk": 9, "outsiders": 0, "minions": 3, "demons": 1},
+  {"townsfolk": 9, "outsiders": 1, "minions": 3, "demons": 1},
+  {"townsfolk": 9, "outsiders": 2, "minions": 3, "demons": 1}
+]

src/main.js

@@ -1,5 +1,18 @@
 import Vue from "vue";
 import App from "./App";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+  faUsers,
+  faHeartbeat,
+  faVoteYea,
+  faUserFriends,
+  faUser
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(faUsers, faHeartbeat, faVoteYea, faUserFriends, faUser);
+
+Vue.component("font-awesome-icon", FontAwesomeIcon);
 
 Vue.config.productionTip = false;
 

src/roles.json

@@ -240,5 +240,16 @@
     "reminders": ["Die"],
     "setup": false,
     "ability": "Each night*, choose a player: they die. If you kill yourself this way, a Minion becomes the Imp."
+  },
+  {
+    "id": "harlot",
+    "name": "Harlot",
+    "set": "SNV",
+    "team": "traveller",
+    "firstNight": false,
+    "otherNight": true,
+    "reminders": ["Die"],
+    "setup": false,
+    "ability": "Each night*, choose a living player: if they agree, you learn their character, but you both might die."
   }
 ]

src/vars.scss

@@ -1,4 +1,13 @@
+$token: 150px;
+$townsfolk: #1f65ff;
+$outsider: #46d5ff;
+$minion: #ff6900;
+$demon: #ff0000;
+$traveller: #cc04ff;
+
 $roles:
+  'good',
+  'evil',
   'baron',
   'butler',
   'chef',
@@ -20,17 +29,6 @@ $roles:
   'scarletwoman' 75%,
   'undertaker' 85%,
   'virgin',
+  'harlot',
   'washerwoman' 75%;
 
-@each $img, $fontsize in $roles {
-  .token.#{$img} {
-    &:before {
-      background-image: url('../assets/icons/#{$img}.png');
-    }
-    font-size: $fontsize;
-  }
-
-  .reminder.#{$img}:before {
-    background-image: url('../assets/icons/#{$img}.png');
-  }
-}