fixed localstorage

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app" @keyup="keyup" tabindex="-1">
-    <TownInfo :players="players"></TownInfo>
+    <TownInfo :players="players" :set="set"></TownInfo>
     <TownSquare
       :is-public="isPublic"
       :players="players"
@@ -9,16 +9,19 @@
     <div class="controls">
       <font-awesome-icon icon="cogs" @click="isControlOpen = !isControlOpen" />
       <ul v-if="isControlOpen">
-        <li v-on:click="togglePublic">Toggle <em>G</em>rimoire</li>
-        <li v-on:click="addPlayer" v-if="players.length < 20">
+        <li @click="togglePublic">Toggle <em>G</em>rimoire</li>
+        <li @click="addPlayer" v-if="players.length < 20">
           <em>A</em>dd Player
         </li>
-        <li v-on:click="togglePublic" v-if="players.length > 4">
+        <li @click="togglePublic" v-if="players.length > 4">
           Select Roles
         </li>
-        <li v-on:click="randomizeSeatings" v-if="players.length > 2">
+        <li @click="randomizeSeatings" v-if="players.length > 2">
           <em>R</em>andomize Seatings
         </li>
+        <li @click="clearPlayers" v-if="players.length">
+          Clear Players
+        </li>
       </ul>
     </div>
   </div>
@@ -44,24 +47,9 @@ export default {
   data: () => ({
     isPublic: true,
     isControlOpen: false,
-    players: [
-      // {
-      //   name: "Steffen",
-      //   role: roles.get("baron"),
-      //   reminders: [{ role: "imp", name: "Die" }]
-      // },
-      // { name: "Tino", role: roles.get("beggar"), 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: [] }
-    ],
+    players: [],
     roles,
-    set: "TB"
+    set: "BMR"
   }),
   methods: {
     togglePublic() {
@@ -86,6 +74,9 @@ export default {
           .map(a => a[1]);
       }
     },
+    clearPlayers() {
+      this.players = [];
+    },
     keyup({ key }) {
       switch (key) {
         case "g":
@@ -102,16 +93,29 @@ export default {
   },
   mounted() {
     if (localStorage.players) {
-      this.players = JSON.parse(localStorage.players);
+      this.players = JSON.parse(localStorage.players).map(player => ({
+        ...player,
+        role: roles.get(player.role) || {}
+      }));
+    }
+    if (localStorage.set) {
+      this.set = localStorage.set;
     }
   },
   watch: {
     players: {
       handler(newPlayers) {
-        console.log("new player", newPlayers);
-        localStorage.players = JSON.stringify(newPlayers);
+        localStorage.players = JSON.stringify(
+          newPlayers.map(player => ({
+            ...player,
+            role: player.role.id || {}
+          }))
+        );
       },
       deep: true
+    },
+    set(newSet) {
+      localStorage.set = newSet;
     }
   }
 };

src/components/TownInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <ul class="info">
+    <li class="set" v-bind:class="['set-' + set]"></li>
     <li v-if="players.length < 5">Please add more players!</li>
     <li>
       {{ players.length }} <font-awesome-icon class="players" icon="users" />
@@ -43,6 +44,10 @@ export default {
     players: {
       type: Array,
       required: true
+    },
+    set: {
+      type: String,
+      required: true
     }
   },
   computed: {
@@ -79,7 +84,7 @@ export default {
   height: 20%;
   margin-left: -10%;
   margin-top: -5%;
-  padding: 0;
+  padding: 100px 0 0;
   align-items: center;
   align-content: center;
   justify-content: center;
@@ -125,5 +130,24 @@ export default {
       color: $traveller;
     }
   }
+
+  li.set {
+    width: 220px;
+    height: 200px;
+    background: 0 center no-repeat;
+    background-size: 100% auto;
+    position: absolute;
+    top: -50px;
+
+    &.set-TB {
+      background-image: url("../assets/set-tb.png");
+    }
+    &.set-BMR {
+      background-image: url("../assets/set-bmr.png");
+    }
+    &.set-SNV {
+      background-image: url("../assets/set-snv.png");
+    }
+  }
 }
 </style>