From 398fe89bb787cce7db0c8aac0e1e2b5416372f37 Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Sat, 19 Dec 2020 22:15:42 +0100
Subject: [PATCH] refactored edition handling to support custom script metadata

---
 src/components/TownInfo.vue               | 30 +++++------------
 src/components/modals/EditionModal.vue    | 40 ++++++++---------------
 src/components/modals/GameStateModal.vue  |  2 +-
 src/components/modals/NightOrderModal.vue |  7 +---
 src/components/modals/ReferenceModal.vue  |  7 +---
 src/editions.json                         | 12 ++++---
 src/store/index.js                        | 23 ++++++-------
 src/store/persistence.js                  | 16 ++++-----
 src/store/socket.js                       |  2 +-
 src/vars.scss                             |  8 -----
 10 files changed, 53 insertions(+), 94 deletions(-)

diff --git a/src/components/TownInfo.vue b/src/components/TownInfo.vue
index 2582209..751dd2d 100644
--- a/src/components/TownInfo.vue
+++ b/src/components/TownInfo.vue
@@ -1,6 +1,13 @@
 <template>
   <ul class="info">
-    <li class="edition" :class="['edition-' + edition]"></li>
+    <li
+      class="edition"
+      :class="['edition-' + edition]"
+      :style="{
+        backgroundImage: `url(${edition.logo ||
+          require('../assets/editions/' + edition.id + '.png')})`
+      }"
+    ></li>
     <li v-if="players.length - teams.traveler < 5">
       Please add more players!
     </li>
@@ -73,27 +80,6 @@ export default {
 <style lang="scss" scoped>
 @import "../vars.scss";
 
-// Editions
-@each $img, $skipIcons in $editions {
-  .edition-#{$img} {
-    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");
-    }
-  }
-}
-
 .info {
   position: absolute;
   display: flex;
diff --git a/src/components/modals/EditionModal.vue b/src/components/modals/EditionModal.vue
index 8cfd920..c66c1a0 100644
--- a/src/components/modals/EditionModal.vue
+++ b/src/components/modals/EditionModal.vue
@@ -7,12 +7,23 @@
           v-for="edition in editions"
           class="edition"
           :class="['edition-' + edition.id]"
+          :style="{
+            backgroundImage: `url(${require('../../assets/editions/' +
+              edition.id +
+              '.png')})`
+          }"
           :key="edition.id"
-          @click="setEdition(edition.id)"
+          @click="setEdition(edition)"
         >
           {{ edition.name }}
         </li>
-        <li class="edition edition-custom" @click="isCustom = true">
+        <li
+          class="edition edition-custom"
+          @click="isCustom = true"
+          :style="{
+            backgroundImage: `url(${require('../../assets/editions/custom.png')})`
+          }"
+        >
           Custom Script / Characters
         </li>
       </ul>
@@ -152,7 +163,7 @@ export default {
         return role;
       });
       this.$store.commit("setCustomRoles", customRoles);
-      this.$store.commit("setEdition", "custom");
+      this.$store.commit("setEdition", { id: "custom" });
       // check for fabled and set those too, if present
       if (customRoles.some(({ id }) => this.$store.state.fabled.has(id))) {
         const fabled = [];
@@ -171,29 +182,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../vars";
-
-// Editions
-@each $img, $skipIcons in $editions {
-  .edition-#{$img} {
-    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");
-    }
-  }
-}
-
 ul.editions .edition {
   font-family: PiratesBay, sans-serif;
   letter-spacing: 1px;
diff --git a/src/components/modals/GameStateModal.vue b/src/components/modals/GameStateModal.vue
index 1a977a1..af25e0f 100644
--- a/src/components/modals/GameStateModal.vue
+++ b/src/components/modals/GameStateModal.vue
@@ -35,7 +35,7 @@ export default {
       return JSON.stringify({
         bluffs: this.players.bluffs.map(({ id }) => id),
         edition: this.edition,
-        roles: this.edition !== "custom" ? "" : this.$store.getters.customRoles,
+        roles: this.edition.isOfficial ? "" : this.$store.getters.customRoles,
         fabled: this.players.fabled.map(({ id }) => id),
         players: this.players.players.map(player => ({
           ...player,
diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index c76d1bd..aca6ea1 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/src/components/modals/NightOrderModal.vue
@@ -13,7 +13,7 @@
     <h3>
       Night Order
       <font-awesome-icon icon="cloud-moon" />
-      {{ editionName }}
+      {{ edition.name || "Custom Script" }}
     </h3>
     <div class="night">
       <ul class="first">
@@ -62,7 +62,6 @@
 
 <script>
 import Modal from "./Modal";
-import editionJSON from "./../../editions.json";
 import { mapMutations, mapState } from "vuex";
 
 export default {
@@ -75,10 +74,6 @@ export default {
     };
   },
   computed: {
-    editionName: function() {
-      const edition = editionJSON.find(({ id }) => id === this.edition);
-      return edition ? edition.name : "Custom Script";
-    },
     rolesFirstNight: function() {
       const rolesFirstNight = [];
       // add minion / demon infos to night order sheet
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 7ff292b..29163a6 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -13,7 +13,7 @@
     <h3>
       Character Reference
       <font-awesome-icon icon="address-card" />
-      {{ editionName }}
+      {{ edition.name || "Custom Script" }}
     </h3>
     <ul class="legend">
       <li>
@@ -50,7 +50,6 @@
 
 <script>
 import Modal from "./Modal";
-import editionJSON from "./../../editions.json";
 import { mapMutations, mapState } from "vuex";
 
 export default {
@@ -63,10 +62,6 @@ export default {
     };
   },
   computed: {
-    editionName: function() {
-      const edition = editionJSON.find(({ id }) => id === this.edition);
-      return edition ? edition.name : "Custom Script";
-    },
     rolesGrouped: function() {
       const rolesGrouped = {};
       this.roles.forEach(role => {
diff --git a/src/editions.json b/src/editions.json
index 72b366b..30a0a8e 100644
--- a/src/editions.json
+++ b/src/editions.json
@@ -5,7 +5,8 @@
     "hasTravelers": true,
     "description": "Clouds roll in over Ravenswood Bluff, engulfing this sleepy town and its superstitious inhabitants in foreboding shadow. Freshly-washed clothes dance eerily on lines strung between cottages. Chimneys cough plumes of smoke into the air. Exotic scents waft through cracks in windows and under doors, as hidden cauldrons lay bubbling. An unusually warm Autumn breeze wraps around vine-covered walls and whispers ominously to those brave enough to walk the cobbled streets.\n\nAnxious mothers call their children home from play, as thunder begins to clap on the horizon. If you listen more closely, however, noises stranger still can be heard echoing from the neighbouring forest. Under the watchful eye of a looming monastery, silhouetted figures skip from doorway to doorway. Those who can read the signs know there is... Trouble Brewing.",
     "level": "Beginner",
-    "roles": []
+    "roles": [],
+    "isOfficial": true
   },
   {
     "id": "bmr",
@@ -13,7 +14,8 @@
     "hasTravelers": true,
     "description": "The sun is swallowed by a jagged horizon as another winter's day surrenders to the night. Flecks of orange and red decay into deeper browns, the forest transforming in silent anticipation of the coming snow.\n\nRavenous wolves howl from the bowels of a rocky crevasse beyond the town borders, sending birds scattering from their cozy rooks. Travelers hurry into the inn, seeking shelter from the gathering chill. They warm themselves with hot tea, sweet strains of music and hearty ale, unaware that strange and nefarious eyes stalk them from the ruins of this once great city.\n\nTonight, even the livestock know there is a... Bad Moon Rising.",
     "level": "Intermediate",
-    "roles": []
+    "roles": [],
+    "isOfficial": true
   },
   {
     "id": "snv",
@@ -21,7 +23,8 @@
     "hasTravelers": true,
     "description": "Vibrant spring gives way to a warm and inviting summer. Flowers of every description blossom as far as the eye can see, tenderly nurtured in public gardens and window boxes overlooking the lavish promenade. Birds sing, artists paint and philosophers ponder life's greatest mysteries inside a bustling tavern as a circus pitches its endearingly ragged tent on the edge of town.\n\nAs the townsfolk bask in frivolity and mischief, indulging themselves in fine entertainment and even finer wine, dark and clandestine forces are assembling. Witches and cults lurk in majestic ruins on the fringes of the community, hosting secret meetings in underground caves and malevolently plotting the downfall of Ravenswood Bluff and its revelers.\n\nThe time is ripe for... Sects & Violets.",
     "level": "Intermediate",
-    "roles": []
+    "roles": [],
+    "isOfficial": true
   },
   {
     "id": "luf",
@@ -29,6 +32,7 @@
     "hasTravelers": false,
     "description": "",
     "level": "Veteran",
-    "roles": ["balloonist", "savant", "amnesiac", "fisherman", "artist", "cannibal", "mutant", "lunatic", "widow", "goblin", "leviathan"]
+    "roles": ["balloonist", "savant", "amnesiac", "fisherman", "artist", "cannibal", "mutant", "lunatic", "widow", "goblin", "leviathan"],
+    "isOfficial": true
   }
 ]
diff --git a/src/store/index.js b/src/store/index.js
index 053b227..bf53170 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -10,17 +10,16 @@ import fabledJSON from "../fabled.json";
 
 Vue.use(Vuex);
 
+const editionJSONbyId = new Map(
+  editionJSON.map(edition => [edition.id, edition])
+);
 const rolesJSONbyId = new Map(rolesJSON.map(role => [role.id, role]));
 const fabled = new Map(fabledJSON.map(role => [role.id, role]));
 
-const getRolesByEdition = (edition = "tb") => {
-  const selectedEdition =
-    editionJSON.find(({ id }) => id === edition) || editionJSON[0];
+const getRolesByEdition = (edition = editionJSON[0]) => {
   return new Map(
     rolesJSON
-      .filter(
-        r => r.edition === edition || selectedEdition.roles.includes(r.id)
-      )
+      .filter(r => r.edition === edition.id || edition.roles.includes(r.id))
       .sort((a, b) => b.team.localeCompare(a.team))
       .map(role => [role.id, role])
   );
@@ -70,7 +69,7 @@ export default new Vuex.Store({
       roles: false,
       voteHistory: false
     },
-    edition: "tb",
+    edition: editionJSONbyId.get("tb"),
     roles: getRolesByEdition(),
     fabled
   },
@@ -189,11 +188,13 @@ export default new Vuex.Store({
       );
     },
     setEdition(state, edition) {
-      state.edition = edition;
-      state.modals.edition = false;
-      if (edition !== "custom") {
-        state.roles = getRolesByEdition(edition);
+      if (editionJSONbyId.has(edition.id)) {
+        state.edition = editionJSONbyId.get(edition.id);
+        state.roles = getRolesByEdition(state.edition);
+      } else {
+        state.edition = edition;
       }
+      state.modals.edition = false;
     }
   },
   plugins: [persistence, socket]
diff --git a/src/store/persistence.js b/src/store/persistence.js
index fe2eb71..36ea006 100644
--- a/src/store/persistence.js
+++ b/src/store/persistence.js
@@ -9,13 +9,13 @@ module.exports = store => {
   if (localStorage.isPublic !== undefined) {
     store.commit("toggleGrimoire", JSON.parse(localStorage.isPublic));
   }
-  if (localStorage.edition !== undefined) {
-    // this will initialize state.roles!
-    store.commit("setEdition", localStorage.edition);
-  }
   if (localStorage.roles !== undefined) {
     store.commit("setCustomRoles", JSON.parse(localStorage.roles));
-    store.commit("setEdition", "custom");
+    store.commit("setEdition", { id: "custom" });
+  }
+  if (localStorage.edition !== undefined) {
+    // this will initialize state.roles for official editions
+    store.commit("setEdition", JSON.parse(localStorage.edition));
   }
   if (localStorage.bluffs !== undefined) {
     JSON.parse(localStorage.bluffs).forEach((role, index) => {
@@ -75,10 +75,8 @@ module.exports = store => {
         }
         break;
       case "setEdition":
-        if (payload === "custom") {
-          localStorage.removeItem("edition");
-        } else {
-          localStorage.setItem("edition", payload);
+        localStorage.setItem("edition", JSON.stringify(payload));
+        if (state.edition.isOfficial) {
           localStorage.removeItem("roles");
         }
         break;
diff --git a/src/store/socket.js b/src/store/socket.js
index 7fbc1d1..87d5098 100644
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -320,7 +320,7 @@ class LiveSession {
     if (this._isSpectator) return;
     const { edition } = this._store.state;
     let roles;
-    if (edition === "custom") {
+    if (!edition.isOfficial) {
       roles = Array.from(this._store.state.roles.keys());
     }
     this._send("edition", {
diff --git a/src/vars.scss b/src/vars.scss
index 80a4fe0..79161d5 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -4,11 +4,3 @@ $outsider: #46d5ff;
 $minion: #ff6900;
 $demon: #ce0100;
 $traveler: #cc04ff;
-
-$editions:
-  'tb',
-  'bmr',
-  'snv',
-  'luf' true,
-  'custom' true
-;