moved some more assets, added reminder modal

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="townsquare" class="square"  v-bind:class="{ public: isPublic }">
+  <div id="app">
     <TownSquare :is-public="isPublic"></TownSquare>
     <div class="controls">
       <button v-on:click="togglePublic">Toggle</button>
@@ -27,18 +27,18 @@
 
 <style lang="scss">
   @font-face { font-family: "Papyrus";
-    src: url("fonts/papyrus.eot"); /* IE9*/
-    src: url("fonts/papyrus.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
-    url("fonts/papyrus.woff2") format("woff2"), /* chrome firefox */
-    url("fonts/papyrus.woff") format("woff"), /* chrome firefox */
-    url("fonts/papyrus.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
-    url("fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */
+    src: url("assets/fonts/papyrus.eot"); /* IE9*/
+    src: url("assets/fonts/papyrus.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+    url("assets/fonts/papyrus.woff2") format("woff2"), /* chrome firefox */
+    url("assets/fonts/papyrus.woff") format("woff"), /* chrome firefox */
+    url("assets/fonts/papyrus.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
+    url("assets/fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */
   }
 
   html, body {
     font-size: 1.2em;
     line-height: 1.4;
-    background: url('img/background.jpg') center center;
+    background: url('assets/background.jpg') center center;
     background-size: cover;
     color: white;
     height: 100%;
@@ -49,13 +49,8 @@
     margin: 0;
   }
 
-  #townsquare {
-    width: 100%;
+  #app {
     height: 100%;
-    position: relative;
-    border-radius: 50%;
-    box-sizing: border-box;
-    padding: 20px;
   }
 
   // Controls

src/components/Modal.vue

@@ -0,0 +1,58 @@
+<script>
+  export default {
+    methods: {
+      close() {
+        this.$emit('close');
+      },
+    },
+  };
+</script>
+<template>
+  <transition name="modal-fade">
+    <div class="modal-backdrop" @click="close">
+      <div class="modal"
+           role="dialog"
+           aria-labelledby="modalTitle"
+           aria-describedby="modalDescription"
+           @click.stop=""
+      >
+        <slot></slot>
+      </div>
+    </div>
+  </transition>
+</template>
+<style>
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+  }
+
+  .modal {
+    background: rgba(0,0,0,0.8);
+    padding: 10px 20px;
+    border-radius: 10px;
+    box-shadow: 2px 2px 20px 1px #000;
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+    max-width: 70%;
+  }
+
+  .modal-fade-enter,
+  .modal-fade-leave-active {
+    opacity: 0;
+  }
+
+  .modal-fade-enter-active,
+  .modal-fade-leave-active {
+    transition: opacity .2s ease
+  }
+</style>

src/components/Player.vue

@@ -13,7 +13,12 @@
       <div class="ability" v-if="role.ability">{{ role.ability }}</div>
       <div class="name">{{ player.name }}</div>
     </div>
-    <div class="reminder add"></div>
+    <div class="reminder"
+         v-if="player.reminders"
+         v-for="reminder in player.reminders"
+         v-bind:class="[reminder.role]"
+         @click="removeReminder(reminder)">{{ reminder.name }}</div>
+    <div class="reminder add" @click="$emit('add-reminder', player)"></div>
   </li>
 </template>
 
@@ -55,13 +60,15 @@
         } else {
           this.toggleStatus();
         }
+      },
+      removeReminder (reminder) {
+        this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
       }
     }
   }
 </script>
 
 <style lang="scss">
-  @import '../roles.scss';
 
   // token size
   $token: 150px;
@@ -72,7 +79,7 @@
 
     .shroud {
       content: " ";
-      background: url('../img/shroud.png') center -10px no-repeat;
+      background: url('../assets/shroud.png') center -10px no-repeat;
       background-size: auto 100%;
       position: absolute;
       margin-left: -2/6 * $token;
@@ -98,7 +105,7 @@
       left: 0;
       top: 0;
       width: 100%;
-      background: url('../img/vote.png') center center no-repeat;
+      background: url('../assets/vote.png') center center no-repeat;
       background-size: 40%;
       height: $token + 3px;
       pointer-events: none;
@@ -114,7 +121,7 @@
     border-radius: 50%;
     height: $token + 3px;
     width: $token + 3px;
-    background: url('../img/token.png') center center;
+    background: url('../assets/token.png') center center;
     background-size: 100%;
     text-align: center;
     position: relative;
@@ -152,25 +159,25 @@
       left: 0;
       top: 0;
       pointer-events: none;
-      &.leaf-left { background-image: url('../img/leaf-left.png'); }
-      &.leaf-orange { background-image: url('../img/leaf-orange.png'); }
-      &.leaf-right { background-image: url('../img/leaf-right.png'); }
-      &.leaf-top1 { background-image: url('../img/leaf-top1.png'); }
-      &.leaf-top2 { background-image: url('../img/leaf-top2.png'); }
-      &.leaf-top3 { background-image: url('../img/leaf-top3.png'); }
-      &.leaf-top4 { background-image: url('../img/leaf-top4.png'); }
-      &.leaf-top5 { background-image: url('../img/leaf-top5.png'); }
+      &.leaf-left { background-image: url('../assets/leaf-left.png'); }
+      &.leaf-orange { background-image: url('../assets/leaf-orange.png'); }
+      &.leaf-right { background-image: url('../assets/leaf-right.png'); }
+      &.leaf-top1 { background-image: url('../assets/leaf-top1.png'); }
+      &.leaf-top2 { background-image: url('../assets/leaf-top2.png'); }
+      &.leaf-top3 { background-image: url('../assets/leaf-top3.png'); }
+      &.leaf-top4 { background-image: url('../assets/leaf-top4.png'); }
+      &.leaf-top5 { background-image: url('../assets/leaf-top5.png'); }
     }
   }
 
   #townsquare.public .token {
-    background-image: url('../img/life.png');
+    background-image: url('../assets/life.png');
     div { display: none; }
     &:before, &:after, span { display: none; }
   }
 
   #townsquare.public .player.dead .token {
-    background-image: url('../img/death.png');
+    background-image: url('../assets/death.png');
   }
 
   #townsquare.public .player.traveller .token {
@@ -221,7 +228,7 @@
 
   /***** Reminder token *****/
   .circle .reminder {
-    background: url('../img/reminder.png') center center;
+    background: url('../assets/reminder.png') center center;
     background-size: 100%;
     width: $token / 2;
     height: $token / 2;
@@ -250,12 +257,12 @@
       background-size: 100%;
       background-position: center 0;
       background-repeat: no-repeat;
-      background-image: url('../img/icon-plus.png');
+      background-image: url('../assets/icons/plus.png');
       transition: opacity 200ms;
     }
 
     &:after {
-      background-image: url('../img/icon-x.png');
+      background-image: url('../assets/icons/x.png');
       opacity: 0;
     }
 

src/components/TownSquare.vue

@@ -1,45 +1,88 @@
 <template>
-  <ul class="circle" v-bind:class="['size-' + players.length]">
-    <Player
-        v-for="player in players"
-        :key="player.name"
-        :player="player"
-        :roles="roles"
-        :is-public="isPublic"
-    ></Player>
-  </ul>
+  <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"
+          :key="player.name"
+          :player="player"
+          :roles="roles"
+          :is-public="isPublic"
+          @add-reminder="openReminderModal"
+      ></Player>
+    </ul>
+    <Modal v-show="availableReminders.length" @close="closeModal">
+      <ul class="reminders">
+        <li v-for="reminder in availableReminders" class="reminder"
+            v-bind:class="[reminder.role]"
+            @click="addReminder(reminder)">
+          {{ reminder.name }}
+        </li>
+      </ul>
+    </Modal>
+  </div>
 </template>
 
 <script>
-  import Player from './Player.vue'
   import roles from '../roles.json'
+  import Player from './Player'
+  import Modal from "./Modal";
 
   export default {
     components: {
+      Modal,
       Player
     },
     props: ['isPublic'],
     data () {
       return {
         players: [
-          { name: "Steffen", role: "baron" },
+          { name: "Steffen", role: "baron", reminders: [{ role: 'imp', name: 'Die' }] },
           { name: "Tino", role: "imp" },
-          { name: "Basti", role: "chef" },
-          { name: "Bernd", role: "ravenkeeper" },
-          { name: "Tim", role: "drunk" },
-          { name: "Yann", role: "librarian" },
-          { name: "Marie", role: "empath" },
-          { name: "Bogdan", role: "scarletwoman" },
-          { name: "Sean", role: "recluse" },
-          { name: "Petra", role: "undertaker" },
+          { name: "Basti", role: "chef", reminders: [] },
+          { name: "Bernd", role: "ravenkeeper", reminders: [] },
+          { name: "Tim", role: "drunk", reminders: [] },
+          { name: "Yann", role: "librarian", reminders: [] },
+          { name: "Marie", role: "empath", reminders: [] },
+          { name: "Bogdan", role: "scarletwoman", reminders: [] },
+          { name: "Sean", role: "recluse", reminders: [] },
+          { name: "Petra", role: "undertaker", reminders: [] },
         ],
         roles: new Map(roles.map(role => [role.id, role])),
+        selectedPlayer: false,
+        availableReminders: [],
+        availableRoles: [],
+      }
+    },
+    methods: {
+      openReminderModal (player) {
+        this.selectedPlayer = player;
+        this.availableReminders = [];
+        this.roles.forEach(role => {
+          if (this.players.some(p => p.role === role.id)) {
+            this.availableReminders = [
+              ...this.availableReminders,
+              ...role.reminders.map(name => ({role: role.id, name}))
+            ];
+          }
+        });
+        console.log('open', player.reminders);
+      },
+      addReminder (reminder) {
+        this.selectedPlayer.reminders.push(reminder);
+        this.closeModal();
+      },
+      closeModal () {
+        this.selectedPlayer = false;
+        this.availableReminders = [];
+        this.availableRoles = [];
       }
     }
   }
 </script>
 
 <style lang="scss">
+  @import '../roles.scss';
+
   @mixin on-circle($item-count) {
     $angle: (360 / $item-count);
     $rot: 0;
@@ -104,13 +147,73 @@
     }
   }
 
+  #townsquare {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    border-radius: 50%;
+    box-sizing: border-box;
+    padding: 20px;
+  }
+
   // player circle
   .circle {
-    background: url('../img/demon-head2.png') center center no-repeat;
+    background: url('../assets/demon-head2.png') center center no-repeat;
     background-size: 10%;
   }
 
   #townsquare.public .circle {
-    background-image: url('../img/demon-head.png');
+    background-image: url('../assets/demon-head.png');
   }
+
+  /***** Reminder token modal ******/
+  ul.reminders {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
+    overflow: hidden;
+    justify-content: center;
+
+    .reminder {
+      background: url('../assets/reminder.png') center center;
+      background-size: 100%;
+      width: 100px;
+      height: 100px;
+      color: black;
+      font-size: 65%;
+      font-weight: bold;
+      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;
+
+      &:before {
+        content: " ";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-size: 100%;
+        background-position: center 0;
+        background-repeat: no-repeat;
+      }
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+  }
+
 </style>

src/roles.scss

@@ -25,12 +25,12 @@ $roles:
 @each $img, $fontsize in $roles {
   .token.#{$img} {
     &:before {
-      background-image: url('../img/icon-#{$img}.png');
+      background-image: url('../assets/icons/#{$img}.png');
     }
     font-size: $fontsize;
   }
 
   .reminder.#{$img}:before {
-    background-image: url('../img/icon-#{$img}.png');
+    background-image: url('../assets/icons/#{$img}.png');
   }
 }