curved token names

edition icons added
refactored token icons

src/App.vue

@@ -373,9 +373,23 @@ ul {
 }
 
 // Editions
-@each $img in $editions {
+@each $img, $skipIcons in $editions {
   .edition-#{$img} {
-    background-image: url("./assets/edition-#{$img}.png");
+    background-image: url("./assets/editions/#{$img}.png");
+  }
+  @if $skipIcons != true {
+    .edition-#{$img}.townsfolk {
+      background-image: url("./assets/editions/#{$img}-townsfolk.png");
+    }
+    .edition-#{$img}.outsider {
+      background-image: url("./assets/editions/#{$img}-outsider.png");
+    }
+    .edition-#{$img}.minion {
+      background-image: url("./assets/editions/#{$img}-minion.png");
+    }
+    .edition-#{$img}.demon {
+      background-image: url("./assets/editions/#{$img}-demon.png");
+    }
   }
 }
 

src/components/Player.vue

@@ -47,10 +47,20 @@
         v-bind:class="[reminder.role]"
         @click="removeReminder(reminder)"
       >
+        <span
+          class="icon"
+          v-bind:style="{
+            backgroundImage: `url(${require('../assets/icons/' +
+              reminder.role +
+              '.png')})`
+          }"
+        ></span>
         {{ reminder.name }}
       </div>
     </template>
-    <div class="reminder add" @click="$emit('add-reminder', player)"></div>
+    <div class="reminder add" @click="$emit('add-reminder', player)">
+      <span class="icon"></span>
+    </div>
   </li>
 </template>
 
@@ -441,7 +451,7 @@ export default {
   transition: all 200ms;
   cursor: pointer;
 
-  &:before,
+  .icon,
   &:after {
     content: " ";
     position: absolute;

src/components/Token.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="token" @click="setRole" :class="[role.id]">
+    <span
+      class="icon"
+      v-if="role.id"
+      v-bind:style="{
+        backgroundImage: `url(${require('../assets/icons/' +
+          role.id +
+          '.png')})`
+      }"
+    ></span>
     <span class="leaf-left" v-if="role.firstNight"></span>
     <span class="leaf-right" v-if="role.otherNight"></span>
     <span
@@ -7,7 +16,28 @@
       v-bind:class="['leaf-top' + role.reminders.length]"
     ></span>
     <span class="leaf-orange" v-if="role.setup"></span>
-    <div class="name">{{ role.name }}</div>
+    <svg viewBox="0 0 150 150" class="name">
+      <path
+        d="M 13 75 C 13 160, 138 160, 138 75"
+        id="curve"
+        fill="transparent"
+      />
+      <text
+        width="150"
+        x="66.6%"
+        text-anchor="middle"
+        class="label"
+        v-bind:font-size="role.name | nameToFontSize"
+      >
+        <textPath xlink:href="#curve">
+          {{ role.name }}
+        </textPath>
+      </text>
+    </svg>
+    <div
+      class="edition"
+      v-bind:class="[`edition-${role.edition}`, role.team]"
+    ></div>
     <div class="ability" v-if="role.ability">
       {{ role.ability }}
     </div>
@@ -26,6 +56,9 @@ export default {
   data() {
     return {};
   },
+  filters: {
+    nameToFontSize: name => (name && name.length > 10 ? "20px" : "24px")
+  },
   methods: {
     setRole() {
       this.$emit("set-role");
@@ -47,15 +80,14 @@ export default {
   cursor: pointer;
   display: flex;
   align-items: center;
+  justify-content: center;
 
-  &:before {
-    content: " ";
+  .icon {
     background-size: 100%;
     position: absolute;
     width: 100%;
     height: 100%;
-    left: 0;
-    top: 0;
+    margin-top: 3%;
   }
 
   span {
@@ -63,8 +95,6 @@ export default {
     width: 100%;
     height: 100%;
     background-size: 100%;
-    left: 0;
-    top: 0;
     pointer-events: none;
 
     &.leaf-left {
@@ -100,6 +130,31 @@ export default {
     }
   }
 
+  .name {
+    width: 100%;
+    height: 100%;
+    .label {
+      fill: black;
+      stroke: white;
+      stroke-width: 2px;
+      paint-order: stroke;
+      font-family: "Papyrus", serif;
+      font-weight: bold;
+      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+      letter-spacing: 1px;
+    }
+  }
+
+  .edition {
+    position: absolute;
+    right: 0;
+    bottom: 5px;
+    width: 30px;
+    height: 30px;
+    background-size: 100%;
+    display: none;
+  }
+
   .ability {
     display: flex;
     position: absolute;
@@ -136,17 +191,6 @@ export default {
     }
   }
 
-  .name {
-    color: black;
-    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);
-    font-family: "Papyrus", serif;
-    position: absolute;
-    top: 73%;
-    width: 100%;
-    line-height: 100%;
-  }
   &:hover .ability {
     opacity: 1;
   }

src/components/TownSquare.vue

@@ -47,6 +47,14 @@
           v-bind:key="reminder.role + ' ' + reminder.name"
           @click="addReminder(reminder)"
         >
+          <span
+            class="icon"
+            v-bind:style="{
+              backgroundImage: `url(${require('../assets/icons/' +
+                reminder.role +
+                '.png')})`
+            }"
+          ></span>
           {{ reminder.name }}
         </li>
       </ul>
@@ -160,21 +168,6 @@ export default {
 <style lang="scss">
 @import "../vars.scss";
 
-@each $img, $fontsize in $roles {
-  .token.#{$img} {
-    &:before {
-      background-image: url("../assets/icons/#{$img}.png");
-    }
-    .name {
-      font-size: $fontsize;
-    }
-  }
-
-  .reminder.#{$img}:before {
-    background-image: url("../assets/icons/#{$img}.png");
-  }
-}
-
 .circle {
   padding: 0;
   width: 100%;
@@ -353,8 +346,7 @@ ul.reminders .reminder {
   line-height: 100%;
   transition: transform 500ms ease;
 
-  &:before {
-    content: " ";
+  .icon {
     position: absolute;
     left: 0;
     top: 0;

src/vars.scss

@@ -9,104 +9,5 @@ $editions:
   'tb',
   'bmr',
   'snv',
-  'luf'
-;
-
-$roles:
-  'apprentice',
-  'artist',
-  'assassin',
-  'barber',
-  'barista',
-  'baron',
-  'beggar',
-  'bishop',
-  'bonecollector' 75%,
-  'bureaucrat',
-  'butcher',
-  'butler',
-  'cerenovus',
-  'chambermaid' 90%,
-  'chef',
-  'clockmaker',
-  'courtier',
-  'deviant',
-  'devilsadvocate' 70%,
-  'dreamer',
-  'drunk',
-  'empath',
-  'evil',
-  'eviltwin',
-  'exorcist',
-  'fanggu',
-  'flowergirl',
-  'fool',
-  'fortuneteller' 80%,
-  'gambler',
-  'godfather',
-  'good',
-  'goon',
-  'gossip',
-  'grandmother' 90%,
-  'gunslinger',
-  'harlot',
-  'imp',
-  'innkeeper',
-  'investigator',
-  'judge',
-  'juggler',
-  'klutz',
-  'librarian',
-  'lunatic',
-  'mastermind',
-  'mathematician' 80%,
-  'matron',
-  'mayor',
-  'minstrel',
-  'monk',
-  'moonchild',
-  'mutant',
-  'nodashii',
-  'oracle',
-  'pacifist',
-  'philosopher',
-  'pithag',
-  'po',
-  'poisoner',
-  'professor',
-  'pukka',
-  'ravenkeeper' 80%,
-  'recluse',
-  'sage',
-  'sailor',
-  'saint',
-  'savant',
-  'scapegoat',
-  'scarletwoman' 75%,
-  'seamstress',
-  'shabaloth',
-  'slayer',
-  'snakecharmer' 75%,
-  'soldier',
-  'spy',
-  'sweetheart',
-  'tealady',
-  'thief',
-  'tinker',
-  'towncrier',
-  'undertaker' 85%,
-  'vigormortis',
-  'virgin',
-  'vortox',
-  'voudon',
-  'washerwoman' 75%,
-  'witch',
-  'zombuul',
-  'amnesiac',
-  'cannibal',
-  'fisherman',
-  'balloonist',
-  'goblin',
-  'widow',
-  'leviathan'
+  'luf' true
 ;