here comes Vuex

package-lock.json

@@ -8578,6 +8578,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vuex": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.3.0.tgz",
+      "integrity": "sha512-1MfcBt+YFd20DPwKe0ThhYm1UEXZya4gVKUvCy7AtS11YAOUR+9a6u4fsv1Rr6ePZCDNxW/M1zuIaswp6nNv8Q=="
+    },
     "watchpack": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",

package.json

@@ -17,7 +17,8 @@
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
     "vue": "^2.3.3",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "vuex": "^3.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-eslint": "^4.3.1",

src/App.vue

@@ -3,15 +3,19 @@
     id="app"
     @keyup="keyup"
     tabindex="-1"
-    v-bind:class="{ screenshot: isScreenshot }"
+    v-bind:class="{ screenshot: grimoire.isScreenshot }"
-    v-bind:style="{ backgroundImage: background ? `url('${background}')` : '' }"
+    v-bind:style="{
+      backgroundImage: grimoire.background
+        ? `url('${grimoire.background}')`
+        : ''
+    }"
   >
     <div class="intro" v-if="!players.length">
       <img src="static/apple-icon.png" alt="" />
       Welcome to the (unofficial)
       <b> Virtual Blood on the Clocktower Town Square</b>!<br />
       Please add more players through the
-      <span class="button" @click="isControlOpen = !isControlOpen">
+      <span class="button">
         <font-awesome-icon icon="cog" /> Menu
       </span>
       on the top right or by pressing <b>[A]</b>.<br />
@@ -24,252 +28,62 @@
       v-if="players.length"
     ></TownInfo>
     <TownSquare
-      :is-public="isPublic"
+      :is-public="grimoire.isPublic"
-      :is-night-order="isNightOrder"
+      :is-night-order="grimoire.isNightOrder"
       :players="players"
       :roles="roles"
-      :zoom="zoom"
+      :zoom="grimoire.zoom"
       @screenshot="takeScreenshot"
     ></TownSquare>
 
-    <Modal
+    <Menu ref="menu" :players="players"></Menu>
-      class="editions"
+    <EditionSelectionModal :players="players"></EditionSelectionModal>
-      v-show="isEditionModalOpen"
+    <RoleSelectionModal :players="players"></RoleSelectionModal>
-      @close="isEditionModalOpen = false"
-    >
-      <h3>Select an edition:</h3>
-      <ul class="editions">
-        <li
-          v-for="edition in editions"
-          class="edition"
-          v-bind:class="['edition-' + edition.id]"
-          v-bind:key="edition.id"
-          @click="setEdition(edition.id)"
-        >
-          {{ edition.name }}
-        </li>
-      </ul>
-    </Modal>
-
-    <RoleSelectionModal
-      :players="players"
-      :roles="roles"
-      :is-open="isRoleModalOpen"
-      @close="isRoleModalOpen = false"
-    ></RoleSelectionModal>
-
-    <Screenshot
-      ref="screenshot"
-      @success="onScreenshot(true)"
-      @error="onScreenshot(false)"
-    ></Screenshot>
-
-    <div class="controls">
-      <font-awesome-icon
-        icon="camera"
-        @click="takeScreenshot()"
-        v-bind:class="{ success: isScreenshotSuccess }"
-      />
-      <div class="menu" v-bind:class="{ open: isControlOpen }">
-        <font-awesome-icon icon="cog" @click="isControlOpen = !isControlOpen" />
-        <ul>
-          <!-- Grimoire -->
-          <li class="headline">
-            <font-awesome-icon icon="book-open" />
-            Grimoire
-          </li>
-          <li @click="togglePublic" v-if="players.length">
-            <em>[G]</em>
-            <template v-if="!isPublic">Hide</template>
-            <template v-if="isPublic">Show</template>
-          </li>
-          <li @click="toggleNightOrder" v-if="players.length">
-            <em
-              ><font-awesome-icon
-                :icon="['fas', isNightOrder ? 'check-square' : 'square']"
-            /></em>
-            Night order
-          </li>
-          <li v-if="players.length">
-            <em>
-              <font-awesome-icon @click="zoom -= 0.1" icon="search-minus" />
-              {{ Math.round(zoom * 100) }}%
-              <font-awesome-icon @click="zoom += 0.1" icon="search-plus" />
-            </em>
-            Zoom
-          </li>
-          <li @click="setBackground">
-            Background image
-          </li>
-
-          <!-- Users -->
-          <li class="headline">
-            <font-awesome-icon icon="users" />
-            Players
-          </li>
-          <li @click="addPlayer" v-if="players.length < 20">
-            <em>[A]</em> Add
-          </li>
-          <li @click="randomizeSeatings" v-if="players.length > 2">
-            <em>[R]</em> Randomize
-          </li>
-          <li @click="clearPlayers" v-if="players.length">
-            Remove all
-          </li>
-
-          <!-- Characters -->
-          <li class="headline">
-            <font-awesome-icon icon="theater-masks" />
-            Characters
-          </li>
-          <li @click="showEditionModal">
-            <em>[E]</em>
-            Select Edition
-          </li>
-          <li @click="showRoleModal" v-if="players.length > 4">
-            <em>[C]</em>
-            Choose & Assign
-          </li>
-          <li @click="clearRoles" v-if="players.length">
-            Remove all
-          </li>
-        </ul>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 import TownSquare from "./components/TownSquare";
 import TownInfo from "./components/TownInfo";
-import Modal from "./components/Modal";
+import Menu from "./components/Menu";
 import RoleSelectionModal from "./components/RoleSelectionModal";
-import rolesJSON from "./roles";
+import EditionSelectionModal from "./components/EditionSelectionModal";
-import editionJSON from "./editions";
-import Screenshot from "./components/Screenshot";
 
 export default {
   components: {
-    Screenshot,
+    EditionSelectionModal,
+    Menu,
     TownSquare,
     TownInfo,
-    Modal,
     RoleSelectionModal
   },
+  computed: mapState(["grimoire", "edition", "roles"]),
   data: function() {
     return {
-      background: "",
+      players: []
-      editions: editionJSON,
-      isNightOrder: true,
-      isPublic: true,
-      isControlOpen: false,
-      isEditionModalOpen: false,
-      isRoleModalOpen: false,
-      isScreenshotSuccess: false,
-      isScreenshot: false,
-      players: [],
-      roles: this.getRolesByEdition(),
-      edition: "tb",
-      zoom: 1
     };
   },
   methods: {
-    takeScreenshot(dimensions = {}) {
+    takeScreenshot(dimensions) {
-      this.isScreenshotSuccess = false;
+      this.$refs.menu.takeScreenshot(dimensions);
-      this.isScreenshot = true;
-      this.$refs.screenshot.capture(dimensions, this.zoom);
-    },
-    onScreenshot(success = false) {
-      this.isScreenshotSuccess = success;
-      this.isScreenshot = false;
-    },
-    togglePublic() {
-      this.isPublic = !this.isPublic;
-      this.isControlOpen = !this.isPublic;
-    },
-    toggleNightOrder() {
-      this.isNightOrder = !this.isNightOrder;
-    },
-    setBackground() {
-      this.background = prompt("Enter custom background URL");
-    },
-    addPlayer() {
-      const name = prompt("Player name");
-      if (name) {
-        this.players.push({
-          name,
-          role: {},
-          reminders: []
-        });
-      }
-    },
-    randomizeSeatings() {
-      this.isPublic = false;
-      this.isControlOpen = false;
-      if (confirm("Are you sure you want to randomize seatings?")) {
-        this.players = this.players
-          .map(a => [Math.random(), a])
-          .sort((a, b) => a[0] - b[0])
-          .map(a => a[1]);
-      }
-    },
-    clearPlayers() {
-      this.isControlOpen = false;
-      if (confirm("Are you sure you want to remove all players?")) {
-        this.players = [];
-      }
-    },
-    clearRoles() {
-      this.isControlOpen = false;
-      if (confirm("Are you sure you want to remove all player roles?")) {
-        this.players.forEach(player => {
-          player.role = {};
-          player.hasDied = false;
-          player.reminders = [];
-        });
-      }
-    },
-    getRolesByEdition(edition = "tb") {
-      const selectedEdition = editionJSON.find(({ id }) => id === edition);
-      return new Map(
-        rolesJSON
-          .filter(
-            r => r.edition === edition || selectedEdition.roles.includes(r.id)
-          )
-          .sort((a, b) => b.team.localeCompare(a.team))
-          .map(role => [role.id, role])
-      );
-    },
-    showEditionModal() {
-      this.isEditionModalOpen = true;
-      this.isPublic = false;
-      this.isControlOpen = false;
-    },
-    setEdition(edition) {
-      this.edition = edition;
-      this.isEditionModalOpen = false;
-    },
-    showRoleModal() {
-      this.isRoleModalOpen = true;
-      this.isPublic = false;
-      this.isControlOpen = false;
     },
     keyup({ key }) {
       switch (key) {
         case "g":
-          this.togglePublic();
+          this.$store.commit("toggleGrimoire");
           break;
         case "a":
-          this.addPlayer();
+          this.$refs.menu.addPlayer();
           break;
         case "r":
-          this.randomizeSeatings();
+          this.$refs.menu.randomizeSeatings();
           break;
         case "e":
-          this.showEditionModal();
+          this.$store.commit("toggleModal", "edition");
           break;
         case "c":
-          this.showRoleModal();
+          this.$store.commit("toggleModal", "roles");
           break;
       }
     }
@@ -282,8 +96,7 @@ export default {
       this.isPublic = JSON.parse(localStorage.isPublic);
     }
     if (localStorage.edition) {
-      this.edition = localStorage.edition;
+      this.$store.commit("setEdition", localStorage.edition);
-      this.roles = this.getRolesByEdition(this.edition);
     }
     if (localStorage.players) {
       this.players = JSON.parse(localStorage.players).map(player => ({
@@ -328,7 +141,6 @@ export default {
     },
     edition(newEdition) {
       localStorage.edition = newEdition;
-      this.roles = this.getRolesByEdition(newEdition);
     },
     isPublic(newIsPublic) {
       localStorage.isPublic = JSON.stringify(newIsPublic);
@@ -444,144 +256,6 @@ ul {
   }
 }
 
-// Controls
-.controls {
-  position: absolute;
-  right: 3px;
-  top: 3px;
-  text-align: right;
-
-  #app.screenshot & {
-    display: none;
-  }
-
-  svg {
-    cursor: pointer;
-    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
-    &.success {
-      animation: greenToWhite 1s normal forwards;
-      animation-iteration-count: 1;
-    }
-  }
-
-  .fa-camera {
-    position: absolute;
-    right: 50px;
-    top: 10px;
-    z-index: 5;
-  }
-
-  .menu {
-    width: 210px;
-    transform-origin: 190px 22px;
-    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    transform: rotate(-90deg);
-
-    &.open {
-      transform: rotate(0deg);
-    }
-
-    > svg {
-      background: rgba(0, 0, 0, 0.5);
-      border: 3px solid black;
-      width: 40px;
-      height: 50px;
-      margin-bottom: -8px;
-      border-bottom: 0;
-      border-radius: 10px 10px 0 0;
-      padding: 5px 5px 15px;
-    }
-
-    ul {
-      display: flex;
-      list-style-type: none;
-      padding: 0;
-      margin: 0;
-      flex-direction: column;
-      overflow: hidden;
-      box-shadow: 0 0 10px black;
-      border: 3px solid black;
-      border-radius: 10px 0 10px 10px;
-
-      li {
-        padding: 2px 10px;
-        color: white;
-        text-align: left;
-        background: rgba(0, 0, 0, 0.7);
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        &:not(.headline):hover {
-          cursor: pointer;
-          color: red;
-        }
-
-        em {
-          float: right;
-          font-style: normal;
-          margin-left: 10px;
-          font-size: 80%;
-          line-height: 31px;
-        }
-      }
-
-      .headline {
-        padding: 5px 10px;
-        text-align: center;
-        font-weight: bold;
-        background: linear-gradient(
-          to right,
-          $demon 0%,
-          rgba(0, 0, 0, 0.5) 20%,
-          rgba(0, 0, 0, 0.5) 80%,
-          $townsfolk 100%
-        );
-      }
-    }
-  }
-}
-
-// 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 {
-  text-align: center;
-  padding-top: 100px;
-  background-position: center center;
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-  width: 200px;
-  margin: 5px;
-  font-size: 120%;
-  font-weight: bold;
-  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
-    1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.75);
-  cursor: pointer;
-  &:hover {
-    color: red;
-  }
-}
-
 // Buttons
 .button-group {
   display: flex;

src/components/EditionSelectionModal.vue

@@ -0,0 +1,82 @@
+<template>
+  <Modal
+    class="editions"
+    v-show="modals.edition"
+    @close="toggleModal('edition')"
+  >
+    <h3>Select an edition:</h3>
+    <ul class="editions">
+      <li
+        v-for="edition in editions"
+        class="edition"
+        v-bind:class="['edition-' + edition.id]"
+        v-bind:key="edition.id"
+        @click="setEdition(edition.id)"
+      >
+        {{ edition.name }}
+      </li>
+    </ul>
+  </Modal>
+</template>
+
+<script>
+import editionJSON from "../editions";
+import { mapMutations, mapState } from "vuex";
+import Modal from "./Modal";
+
+export default {
+  components: {
+    Modal
+  },
+  data: function() {
+    return {
+      editions: editionJSON
+    };
+  },
+  computed: mapState(["modals"]),
+  methods: mapMutations(["toggleModal", "setEdition"])
+};
+</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 {
+  text-align: center;
+  padding-top: 100px;
+  background-position: center center;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  width: 200px;
+  margin: 5px;
+  font-size: 120%;
+  font-weight: bold;
+  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
+    1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.75);
+  cursor: pointer;
+  &:hover {
+    color: red;
+  }
+}
+</style>

src/components/Menu.vue

@@ -0,0 +1,246 @@
+<template>
+  <div id="controls">
+    <Screenshot ref="screenshot"></Screenshot>
+    <font-awesome-icon
+      icon="camera"
+      @click="takeScreenshot()"
+      v-bind:class="{ success: grimoire.isScreenshotSuccess }"
+    />
+    <div class="menu" v-bind:class="{ open: isMenuOpen }">
+      <font-awesome-icon icon="cog" @click="isMenuOpen = !isMenuOpen" />
+      <ul>
+        <!-- Grimoire -->
+        <li class="headline">
+          <font-awesome-icon icon="book-open" />
+          Grimoire
+        </li>
+        <li @click="toggleGrimoire" v-if="players.length">
+          <em>[G]</em>
+          <template v-if="!grimoire.isPublic">Hide</template>
+          <template v-if="grimoire.isPublic">Show</template>
+        </li>
+        <li @click="toggleNightOrder" v-if="players.length">
+          <em
+            ><font-awesome-icon
+              :icon="['fas', grimoire.isNightOrder ? 'check-square' : 'square']"
+          /></em>
+          Night order
+        </li>
+        <li v-if="players.length">
+          <em>
+            <font-awesome-icon @click="updateZoom(-0.1)" icon="search-minus" />
+            {{ Math.round(grimoire.zoom * 100) }}%
+            <font-awesome-icon @click="updateZoom(0.1)" icon="search-plus" />
+          </em>
+          Zoom
+        </li>
+        <li @click="setBackground">
+          Background image
+        </li>
+
+        <!-- Users -->
+        <li class="headline">
+          <font-awesome-icon icon="users" />
+          Players
+        </li>
+        <li @click="addPlayer" v-if="players.length < 20"><em>[A]</em> Add</li>
+        <li @click="randomizeSeatings" v-if="players.length > 2">
+          <em>[R]</em> Randomize
+        </li>
+        <li @click="clearPlayers" v-if="players.length">
+          Remove all
+        </li>
+
+        <!-- Characters -->
+        <li class="headline">
+          <font-awesome-icon icon="theater-masks" />
+          Characters
+        </li>
+        <li @click="toggleModal('edition')">
+          <em>[E]</em>
+          Select Edition
+        </li>
+        <li @click="toggleModal('roles')" v-if="players.length > 4">
+          <em>[C]</em>
+          Choose & Assign
+        </li>
+        <li @click="clearRoles" v-if="players.length">
+          Remove all
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from "vuex";
+import Screenshot from "./Screenshot";
+
+export default {
+  components: {
+    Screenshot
+  },
+  props: ["players"],
+  data: function() {
+    return {
+      isMenuOpen: false
+    };
+  },
+  computed: mapState(["grimoire"]),
+  methods: {
+    takeScreenshot(dimensions = {}) {
+      this.$store.commit("updateScreenshot");
+      this.$refs.screenshot.capture(dimensions);
+    },
+    setBackground() {
+      this.$store.commit(
+        "setBackground",
+        prompt("Enter custom background URL")
+      );
+    },
+    addPlayer() {
+      const name = prompt("Player name");
+      if (name) {
+        this.players.push({
+          name,
+          role: {},
+          reminders: []
+        });
+      }
+    },
+    randomizeSeatings() {
+      if (confirm("Are you sure you want to randomize seatings?")) {
+        this.players = this.players
+          .map(a => [Math.random(), a])
+          .sort((a, b) => a[0] - b[0])
+          .map(a => a[1]);
+      }
+    },
+    clearPlayers() {
+      if (confirm("Are you sure you want to remove all players?")) {
+        this.players = [];
+      }
+    },
+    clearRoles() {
+      this.$store.commit("showGrimoire");
+      if (confirm("Are you sure you want to remove all player roles?")) {
+        this.players.forEach(player => {
+          player.role = {};
+          player.hasDied = false;
+          player.reminders = [];
+        });
+      }
+    },
+    ...mapMutations([
+      "toggleGrimoire",
+      "toggleNightOrder",
+      "updateScreenshot",
+      "updateZoom",
+      "toggleModal"
+    ])
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../vars.scss";
+
+// Controls
+#controls {
+  position: absolute;
+  right: 3px;
+  top: 3px;
+  text-align: right;
+
+  #app.screenshot & {
+    display: none;
+  }
+
+  svg {
+    cursor: pointer;
+    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
+    &.success {
+      animation: greenToWhite 1s normal forwards;
+      animation-iteration-count: 1;
+    }
+  }
+
+  .fa-camera {
+    position: absolute;
+    right: 50px;
+    top: 10px;
+    z-index: 5;
+  }
+}
+
+.menu {
+  width: 210px;
+  transform-origin: 190px 22px;
+  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  transform: rotate(-90deg);
+
+  &.open {
+    transform: rotate(0deg);
+  }
+
+  > svg {
+    background: rgba(0, 0, 0, 0.5);
+    border: 3px solid black;
+    width: 40px;
+    height: 50px;
+    margin-bottom: -8px;
+    border-bottom: 0;
+    border-radius: 10px 10px 0 0;
+    padding: 5px 5px 15px;
+  }
+
+  ul {
+    display: flex;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 0 10px black;
+    border: 3px solid black;
+    border-radius: 10px 0 10px 10px;
+
+    li {
+      padding: 2px 10px;
+      color: white;
+      text-align: left;
+      background: rgba(0, 0, 0, 0.7);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:not(.headline):hover {
+        cursor: pointer;
+        color: red;
+      }
+
+      em {
+        float: right;
+        font-style: normal;
+        margin-left: 10px;
+        font-size: 80%;
+        line-height: 31px;
+      }
+    }
+
+    .headline {
+      padding: 5px 10px;
+      text-align: center;
+      font-weight: bold;
+      background: linear-gradient(
+        to right,
+        $demon 0%,
+        rgba(0, 0, 0, 0.5) 20%,
+        rgba(0, 0, 0, 0.5) 80%,
+        $townsfolk 100%
+      );
+    }
+  }
+}
+</style>

src/components/RoleSelectionModal.vue

@@ -1,8 +1,8 @@
 <template>
   <Modal
     class="roles"
-    v-show="isOpen"
+    v-show="modals.roles"
-    @close="close()"
+    @close="toggleModal('roles')"
     v-if="nontravelerPlayers >= 5"
   >
     <h3>Select the characters for {{ nontravelerPlayers }} players:</h3>
@@ -51,6 +51,7 @@
 import Modal from "./Modal";
 import gameJSON from "./../game";
 import Token from "./Token";
+import { mapMutations, mapState } from "vuex";
 
 const randomElement = arr => arr[Math.floor(Math.random() * arr.length)];
 
@@ -63,14 +64,6 @@ export default {
     players: {
       type: Array,
       required: true
-    },
-    roles: {
-      type: Map,
-      required: true
-    },
-    isOpen: {
-      type: Boolean,
-      required: true
     }
   },
   data: function() {
@@ -96,12 +89,10 @@ export default {
       return Object.values(this.roleSelection).some(roles =>
         roles.some(role => role.selected && role.setup)
       );
-    }
+    },
+    ...mapState(["roles", "modals"])
   },
   methods: {
-    close() {
-      this.$emit("close");
-    },
     selectRandomRoles() {
       this.roleSelection = {};
       this.roles.forEach(role => {
@@ -141,7 +132,8 @@ export default {
         });
         this.close();
       }
-    }
+    },
+    ...mapMutations(["toggleModal"])
   },
   mounted: function() {
     if (!Object.keys(this.roleSelection).length) {

src/components/Screenshot.vue

@@ -13,9 +13,10 @@ export default {
     };
   },
   methods: {
-    async capture({ x = 0, y = 0, width = 0, height = 0 }, zoom = 1) {
+    async capture({ x = 0, y = 0, width = 0, height = 0 }) {
       const canvas = this.$refs.canvas;
       const video = this.$refs.video;
+      const zoom = this.$store.state.grimoire.zoom;
       // start capturing
       if (!this.stream || !this.stream.active) {
         alert(
@@ -30,7 +31,7 @@ export default {
             audio: false
           });
         } catch (err) {
-          this.$emit("error", err);
+          this.$store.commit("updateScreenshot", false);
         }
       }
       // get screenshot
@@ -57,9 +58,9 @@ export default {
               // eslint-disable-next-line no-undef
               const item = new ClipboardItem({ "image/png": blob });
               navigator.clipboard.write([item]);
-              this.$emit("success");
+              this.$store.commit("updateScreenshot", true);
             } catch (err) {
-              this.$emit("error", err);
+              this.$store.commit("updateScreenshot", false);
             }
           });
         }, 100);

src/main.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import App from "./App";
+import store from "./store";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faBookOpen,
@@ -45,5 +46,6 @@ Vue.component("font-awesome-icon", FontAwesomeIcon);
 Vue.config.productionTip = false;
 
 new Vue({
-  render: h => h(App)
+  render: h => h(App),
+  store
 }).$mount("#app");

src/store/index.js

@@ -0,0 +1,73 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import editionJSON from "../editions.json";
+import rolesJSON from "../roles.json";
+
+Vue.use(Vuex);
+
+const getRolesByEdition = (edition = "tb") => {
+  const selectedEdition = editionJSON.find(({ id }) => id === edition);
+  return new Map(
+    rolesJSON
+      .filter(
+        r => r.edition === edition || selectedEdition.roles.includes(r.id)
+      )
+      .sort((a, b) => b.team.localeCompare(a.team))
+      .map(role => [role.id, role])
+  );
+};
+
+export default new Vuex.Store({
+  state: {
+    grimoire: {
+      isNightOrder: true,
+      isPublic: true,
+      isScreenshot: false,
+      isScreenshotSuccess: false,
+      zoom: 1,
+      background: ""
+    },
+    modals: {
+      edition: false,
+      roles: false
+    },
+    edition: "tb",
+    roles: getRolesByEdition(),
+    players: []
+  },
+  mutations: {
+    toggleGrimoire({ grimoire }) {
+      grimoire.isPublic = !grimoire.isPublic;
+      grimoire.isControlOpen = !grimoire.isPublic;
+    },
+    showGrimoire({ grimoire }) {
+      grimoire.isPublic = false;
+    },
+    toggleNightOrder({ grimoire }) {
+      grimoire.isNightOrder = !grimoire.isNightOrder;
+    },
+    updateZoom({ grimoire }, by = 0) {
+      grimoire.zoom += by;
+    },
+    setBackground({ grimoire }, background) {
+      grimoire.background = background;
+    },
+    toggleModal({ modals }, name) {
+      modals[name] = !modals[name];
+    },
+    updateScreenshot({ grimoire }, status) {
+      if (status !== true && status !== false) {
+        grimoire.isScreenshotSuccess = false;
+        grimoire.isScreenshot = true;
+      } else {
+        grimoire.isScreenshotSuccess = status;
+        grimoire.isScreenshot = false;
+      }
+    },
+    setEdition(state, edition) {
+      state.edition = edition;
+      state.modals.edition = false;
+      state.roles = getRolesByEdition(edition);
+    }
+  }
+});