From 7f5ae5f8e5f91576b1536afbeb4e386bf858f4d5 Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Sat, 4 Apr 2020 16:14:25 +0200
Subject: [PATCH] moved some more assets, added reminder modal

---
 src/App.vue                                   |  23 ++-
 src/{img => assets}/background.jpg            | Bin
 src/{img => assets}/death.png                 | Bin
 src/{img => assets}/demon-head.png            | Bin
 src/{img => assets}/demon-head2.png           | Bin
 src/{ => assets}/fonts/papyrus.eot            | Bin
 src/{ => assets}/fonts/papyrus.svg            |   0
 src/{ => assets}/fonts/papyrus.ttf            | Bin
 src/{ => assets}/fonts/papyrus.woff           | Bin
 src/{ => assets}/fonts/papyrus.woff2          | Bin
 .../icon-baron.png => assets/icons/baron.png} | Bin
 .../icons/butler.png}                         | Bin
 .../icon-chef.png => assets/icons/chef.png}   | Bin
 .../icon-drunk.png => assets/icons/drunk.png} | Bin
 .../icons/empath.png}                         | Bin
 .../icons/fortuneteller.png}                  | Bin
 .../icon-imp.png => assets/icons/imp.png}     | Bin
 .../icons/investigator.png}                   | Bin
 .../icons/librarian.png}                      | Bin
 .../icon-mayor.png => assets/icons/mayor.png} | Bin
 .../icon-monk.png => assets/icons/monk.png}   | Bin
 .../icon-plus.png => assets/icons/plus.png}   | Bin
 .../icons/poisoner.png}                       | Bin
 .../icons/ravenkeeper.png}                    | Bin
 .../icons/recluse.png}                        | Bin
 .../icon-saint.png => assets/icons/saint.png} | Bin
 .../icons/scarletwoman.png}                   | Bin
 .../icons/slayer.png}                         | Bin
 .../icons/soldier.png}                        | Bin
 .../icon-spy.png => assets/icons/spy.png}     | Bin
 .../icons/undertaker.png}                     | Bin
 .../icons/virgin.png}                         | Bin
 .../icons/washerwoman.png}                    | Bin
 src/{img/icon-x.png => assets/icons/x.png}    | Bin
 src/{img => assets}/leaf-left.png             | Bin
 src/{img => assets}/leaf-orange.png           | Bin
 src/{img => assets}/leaf-right.png            | Bin
 src/{img => assets}/leaf-top1.png             | Bin
 src/{img => assets}/leaf-top2.png             | Bin
 src/{img => assets}/leaf-top3.png             | Bin
 src/{img => assets}/leaf-top4.png             | Bin
 src/{img => assets}/leaf-top5.png             | Bin
 src/{img => assets}/life.png                  | Bin
 src/{img => assets}/reminder.png              | Bin
 src/{img => assets}/shroud.png                | Bin
 src/{img => assets}/token.png                 | Bin
 src/{img => assets}/vote.png                  | Bin
 src/components/Modal.vue                      |  58 +++++++
 src/components/Player.vue                     |  43 +++---
 src/components/TownSquare.vue                 | 145 +++++++++++++++---
 src/roles.scss                                |   4 +-
 51 files changed, 218 insertions(+), 55 deletions(-)
 rename src/{img => assets}/background.jpg (100%)
 rename src/{img => assets}/death.png (100%)
 rename src/{img => assets}/demon-head.png (100%)
 rename src/{img => assets}/demon-head2.png (100%)
 rename src/{ => assets}/fonts/papyrus.eot (100%)
 rename src/{ => assets}/fonts/papyrus.svg (100%)
 rename src/{ => assets}/fonts/papyrus.ttf (100%)
 rename src/{ => assets}/fonts/papyrus.woff (100%)
 rename src/{ => assets}/fonts/papyrus.woff2 (100%)
 rename src/{img/icon-baron.png => assets/icons/baron.png} (100%)
 rename src/{img/icon-butler.png => assets/icons/butler.png} (100%)
 rename src/{img/icon-chef.png => assets/icons/chef.png} (100%)
 rename src/{img/icon-drunk.png => assets/icons/drunk.png} (100%)
 rename src/{img/icon-empath.png => assets/icons/empath.png} (100%)
 rename src/{img/icon-fortuneteller.png => assets/icons/fortuneteller.png} (100%)
 rename src/{img/icon-imp.png => assets/icons/imp.png} (100%)
 rename src/{img/icon-investigator.png => assets/icons/investigator.png} (100%)
 rename src/{img/icon-librarian.png => assets/icons/librarian.png} (100%)
 rename src/{img/icon-mayor.png => assets/icons/mayor.png} (100%)
 rename src/{img/icon-monk.png => assets/icons/monk.png} (100%)
 rename src/{img/icon-plus.png => assets/icons/plus.png} (100%)
 rename src/{img/icon-poisoner.png => assets/icons/poisoner.png} (100%)
 rename src/{img/icon-ravenkeeper.png => assets/icons/ravenkeeper.png} (100%)
 rename src/{img/icon-recluse.png => assets/icons/recluse.png} (100%)
 rename src/{img/icon-saint.png => assets/icons/saint.png} (100%)
 rename src/{img/icon-scarletwoman.png => assets/icons/scarletwoman.png} (100%)
 rename src/{img/icon-slayer.png => assets/icons/slayer.png} (100%)
 rename src/{img/icon-soldier.png => assets/icons/soldier.png} (100%)
 rename src/{img/icon-spy.png => assets/icons/spy.png} (100%)
 rename src/{img/icon-undertaker.png => assets/icons/undertaker.png} (100%)
 rename src/{img/icon-virgin.png => assets/icons/virgin.png} (100%)
 rename src/{img/icon-washerwoman.png => assets/icons/washerwoman.png} (100%)
 rename src/{img/icon-x.png => assets/icons/x.png} (100%)
 rename src/{img => assets}/leaf-left.png (100%)
 rename src/{img => assets}/leaf-orange.png (100%)
 rename src/{img => assets}/leaf-right.png (100%)
 rename src/{img => assets}/leaf-top1.png (100%)
 rename src/{img => assets}/leaf-top2.png (100%)
 rename src/{img => assets}/leaf-top3.png (100%)
 rename src/{img => assets}/leaf-top4.png (100%)
 rename src/{img => assets}/leaf-top5.png (100%)
 rename src/{img => assets}/life.png (100%)
 rename src/{img => assets}/reminder.png (100%)
 rename src/{img => assets}/shroud.png (100%)
 rename src/{img => assets}/token.png (100%)
 rename src/{img => assets}/vote.png (100%)
 create mode 100644 src/components/Modal.vue

diff --git a/src/App.vue b/src/App.vue
index 5755240..5f20a14 100644
--- a/src/App.vue
+++ b/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
diff --git a/src/img/background.jpg b/src/assets/background.jpg
similarity index 100%
rename from src/img/background.jpg
rename to src/assets/background.jpg
diff --git a/src/img/death.png b/src/assets/death.png
similarity index 100%
rename from src/img/death.png
rename to src/assets/death.png
diff --git a/src/img/demon-head.png b/src/assets/demon-head.png
similarity index 100%
rename from src/img/demon-head.png
rename to src/assets/demon-head.png
diff --git a/src/img/demon-head2.png b/src/assets/demon-head2.png
similarity index 100%
rename from src/img/demon-head2.png
rename to src/assets/demon-head2.png
diff --git a/src/fonts/papyrus.eot b/src/assets/fonts/papyrus.eot
similarity index 100%
rename from src/fonts/papyrus.eot
rename to src/assets/fonts/papyrus.eot
diff --git a/src/fonts/papyrus.svg b/src/assets/fonts/papyrus.svg
similarity index 100%
rename from src/fonts/papyrus.svg
rename to src/assets/fonts/papyrus.svg
diff --git a/src/fonts/papyrus.ttf b/src/assets/fonts/papyrus.ttf
similarity index 100%
rename from src/fonts/papyrus.ttf
rename to src/assets/fonts/papyrus.ttf
diff --git a/src/fonts/papyrus.woff b/src/assets/fonts/papyrus.woff
similarity index 100%
rename from src/fonts/papyrus.woff
rename to src/assets/fonts/papyrus.woff
diff --git a/src/fonts/papyrus.woff2 b/src/assets/fonts/papyrus.woff2
similarity index 100%
rename from src/fonts/papyrus.woff2
rename to src/assets/fonts/papyrus.woff2
diff --git a/src/img/icon-baron.png b/src/assets/icons/baron.png
similarity index 100%
rename from src/img/icon-baron.png
rename to src/assets/icons/baron.png
diff --git a/src/img/icon-butler.png b/src/assets/icons/butler.png
similarity index 100%
rename from src/img/icon-butler.png
rename to src/assets/icons/butler.png
diff --git a/src/img/icon-chef.png b/src/assets/icons/chef.png
similarity index 100%
rename from src/img/icon-chef.png
rename to src/assets/icons/chef.png
diff --git a/src/img/icon-drunk.png b/src/assets/icons/drunk.png
similarity index 100%
rename from src/img/icon-drunk.png
rename to src/assets/icons/drunk.png
diff --git a/src/img/icon-empath.png b/src/assets/icons/empath.png
similarity index 100%
rename from src/img/icon-empath.png
rename to src/assets/icons/empath.png
diff --git a/src/img/icon-fortuneteller.png b/src/assets/icons/fortuneteller.png
similarity index 100%
rename from src/img/icon-fortuneteller.png
rename to src/assets/icons/fortuneteller.png
diff --git a/src/img/icon-imp.png b/src/assets/icons/imp.png
similarity index 100%
rename from src/img/icon-imp.png
rename to src/assets/icons/imp.png
diff --git a/src/img/icon-investigator.png b/src/assets/icons/investigator.png
similarity index 100%
rename from src/img/icon-investigator.png
rename to src/assets/icons/investigator.png
diff --git a/src/img/icon-librarian.png b/src/assets/icons/librarian.png
similarity index 100%
rename from src/img/icon-librarian.png
rename to src/assets/icons/librarian.png
diff --git a/src/img/icon-mayor.png b/src/assets/icons/mayor.png
similarity index 100%
rename from src/img/icon-mayor.png
rename to src/assets/icons/mayor.png
diff --git a/src/img/icon-monk.png b/src/assets/icons/monk.png
similarity index 100%
rename from src/img/icon-monk.png
rename to src/assets/icons/monk.png
diff --git a/src/img/icon-plus.png b/src/assets/icons/plus.png
similarity index 100%
rename from src/img/icon-plus.png
rename to src/assets/icons/plus.png
diff --git a/src/img/icon-poisoner.png b/src/assets/icons/poisoner.png
similarity index 100%
rename from src/img/icon-poisoner.png
rename to src/assets/icons/poisoner.png
diff --git a/src/img/icon-ravenkeeper.png b/src/assets/icons/ravenkeeper.png
similarity index 100%
rename from src/img/icon-ravenkeeper.png
rename to src/assets/icons/ravenkeeper.png
diff --git a/src/img/icon-recluse.png b/src/assets/icons/recluse.png
similarity index 100%
rename from src/img/icon-recluse.png
rename to src/assets/icons/recluse.png
diff --git a/src/img/icon-saint.png b/src/assets/icons/saint.png
similarity index 100%
rename from src/img/icon-saint.png
rename to src/assets/icons/saint.png
diff --git a/src/img/icon-scarletwoman.png b/src/assets/icons/scarletwoman.png
similarity index 100%
rename from src/img/icon-scarletwoman.png
rename to src/assets/icons/scarletwoman.png
diff --git a/src/img/icon-slayer.png b/src/assets/icons/slayer.png
similarity index 100%
rename from src/img/icon-slayer.png
rename to src/assets/icons/slayer.png
diff --git a/src/img/icon-soldier.png b/src/assets/icons/soldier.png
similarity index 100%
rename from src/img/icon-soldier.png
rename to src/assets/icons/soldier.png
diff --git a/src/img/icon-spy.png b/src/assets/icons/spy.png
similarity index 100%
rename from src/img/icon-spy.png
rename to src/assets/icons/spy.png
diff --git a/src/img/icon-undertaker.png b/src/assets/icons/undertaker.png
similarity index 100%
rename from src/img/icon-undertaker.png
rename to src/assets/icons/undertaker.png
diff --git a/src/img/icon-virgin.png b/src/assets/icons/virgin.png
similarity index 100%
rename from src/img/icon-virgin.png
rename to src/assets/icons/virgin.png
diff --git a/src/img/icon-washerwoman.png b/src/assets/icons/washerwoman.png
similarity index 100%
rename from src/img/icon-washerwoman.png
rename to src/assets/icons/washerwoman.png
diff --git a/src/img/icon-x.png b/src/assets/icons/x.png
similarity index 100%
rename from src/img/icon-x.png
rename to src/assets/icons/x.png
diff --git a/src/img/leaf-left.png b/src/assets/leaf-left.png
similarity index 100%
rename from src/img/leaf-left.png
rename to src/assets/leaf-left.png
diff --git a/src/img/leaf-orange.png b/src/assets/leaf-orange.png
similarity index 100%
rename from src/img/leaf-orange.png
rename to src/assets/leaf-orange.png
diff --git a/src/img/leaf-right.png b/src/assets/leaf-right.png
similarity index 100%
rename from src/img/leaf-right.png
rename to src/assets/leaf-right.png
diff --git a/src/img/leaf-top1.png b/src/assets/leaf-top1.png
similarity index 100%
rename from src/img/leaf-top1.png
rename to src/assets/leaf-top1.png
diff --git a/src/img/leaf-top2.png b/src/assets/leaf-top2.png
similarity index 100%
rename from src/img/leaf-top2.png
rename to src/assets/leaf-top2.png
diff --git a/src/img/leaf-top3.png b/src/assets/leaf-top3.png
similarity index 100%
rename from src/img/leaf-top3.png
rename to src/assets/leaf-top3.png
diff --git a/src/img/leaf-top4.png b/src/assets/leaf-top4.png
similarity index 100%
rename from src/img/leaf-top4.png
rename to src/assets/leaf-top4.png
diff --git a/src/img/leaf-top5.png b/src/assets/leaf-top5.png
similarity index 100%
rename from src/img/leaf-top5.png
rename to src/assets/leaf-top5.png
diff --git a/src/img/life.png b/src/assets/life.png
similarity index 100%
rename from src/img/life.png
rename to src/assets/life.png
diff --git a/src/img/reminder.png b/src/assets/reminder.png
similarity index 100%
rename from src/img/reminder.png
rename to src/assets/reminder.png
diff --git a/src/img/shroud.png b/src/assets/shroud.png
similarity index 100%
rename from src/img/shroud.png
rename to src/assets/shroud.png
diff --git a/src/img/token.png b/src/assets/token.png
similarity index 100%
rename from src/img/token.png
rename to src/assets/token.png
diff --git a/src/img/vote.png b/src/assets/vote.png
similarity index 100%
rename from src/img/vote.png
rename to src/assets/vote.png
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..8bf1798
--- /dev/null
+++ b/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>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 55f552e..59b990a 100644
--- a/src/components/Player.vue
+++ b/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;
     }
 
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 7fa89a9..7f72643 100644
--- a/src/components/TownSquare.vue
+++ b/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>
diff --git a/src/roles.scss b/src/roles.scss
index 31197b7..c16ff29 100644
--- a/src/roles.scss
+++ b/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');
   }
 }