custom reminder notes

src/components/Player.vue

@@ -659,6 +659,19 @@ li.move:not(.from) .player > svg.move {
     }
   }
 
+  &.custom {
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    font-size: 70%;
+    word-break: break-word;
+    .icon {
+      display: none;
+    }
+  }
+
   &:hover:before {
     opacity: 0;
   }

src/components/modals/ReminderModal.vue

@@ -9,13 +9,13 @@
       <li
         v-for="reminder in availableReminders"
         class="reminder"
-        v-bind:class="[reminder.role]"
+        :class="[reminder.role]"
-        v-bind:key="reminder.role + ' ' + reminder.name"
+        :key="reminder.role + ' ' + reminder.name"
         @click="addReminder(reminder)"
       >
         <span
           class="icon"
-          v-bind:style="{
+          :style="{
             backgroundImage: `url(${require('../../assets/icons/' +
               reminder.role +
               '.png')})`
@@ -48,6 +48,7 @@ export default {
       });
       reminders.push({ role: "good", name: "Good" });
       reminders.push({ role: "evil", name: "Evil" });
+      reminders.push({ role: "custom", name: "Custom note" });
       return reminders;
     },
     ...mapState(["modals"]),
@@ -56,7 +57,14 @@ export default {
   methods: {
     addReminder(reminder) {
       const player = this.$store.state.players.players[this.playerIndex];
-      const value = [...player.reminders, reminder];
+      let value;
+      if (reminder.role === "custom") {
+        const name = prompt("Add a custom reminder note");
+        if (!name) return;
+        value = [...player.reminders, { role: "custom", name }];
+      } else {
+        value = [...player.reminders, reminder];
+      }
       this.$store.commit("players/update", {
         player,
         property: "reminders",

src/store/index.js

@@ -90,7 +90,6 @@ export default new Vuex.Store({
       }
     },
     toggleModal({ modals }, name) {
-      console.log("toggle", name);
       modals[name] = !modals[name];
     },
     updateScreenshot({ grimoire }, status) {