first draft of gamestate modal

improved general modal performance

src/App.vue

@@ -27,6 +27,7 @@
     <ReferenceModal />
     <NightOrderModal />
     <VoteHistoryModal />
+    <GameStateModal />
     <Gradients />
     <span id="version">v{{ version }}</span>
   </div>
@@ -47,9 +48,11 @@ import Gradients from "./components/Gradients";
 import NightOrderModal from "./components/modals/NightOrderModal";
 import FabledModal from "@/components/modals/FabledModal";
 import VoteHistoryModal from "@/components/modals/VoteHistoryModal";
+import GameStateModal from "@/components/modals/GameStateModal";
 
 export default {
   components: {
+    GameStateModal,
     VoteHistoryModal,
     FabledModal,
     NightOrderModal,

src/components/Menu.vue

@@ -170,6 +170,10 @@
             Night Order Sheet
             <em>[N]</em>
           </li>
+          <li @click="toggleModal('gameState')">
+            Game State JSON
+            <em>G</em>
+          </li>
           <li>
             <a href="https://discord.gg/Gd7ybwWbFk" target="_blank">
               Join Discord

src/components/modals/EditionModal.vue

@@ -1,9 +1,5 @@
 <template>
-  <Modal
+  <Modal class="editions" v-if="modals.edition" @close="toggleModal('edition')">
-    class="editions"
-    v-show="modals.edition"
-    @close="toggleModal('edition')"
-  >
     <div v-if="!isCustom">
       <h3>Select an edition:</h3>
       <ul class="editions">

src/components/modals/FabledModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal v-show="modals.fabled && fabled.length" @close="toggleModal('fabled')">
+  <Modal v-if="modals.fabled && fabled.length" @close="toggleModal('fabled')">
     <h3>
       Choose a fabled character to add to the game
     </h3>

src/components/modals/GameStateModal.vue

@@ -0,0 +1,47 @@
+<template>
+  <Modal
+    class="game-state"
+    v-if="modals.gameState"
+    @close="toggleModal('gameState')"
+  >
+    <h3>Current Game State</h3>
+    <textarea v-model="gamestate"></textarea>
+  </Modal>
+</template>
+
+<script>
+import Modal from "./Modal";
+import { mapMutations, mapState } from "vuex";
+
+export default {
+  components: {
+    Modal
+  },
+  computed: {
+    gamestate: function() {
+      return JSON.stringify({
+        bluffs: "",
+        edition: "",
+        roles: "",
+        fabled: "",
+        players: ""
+      });
+    },
+    ...mapState(["modals"])
+  },
+  methods: {
+    ...mapMutations(["toggleModal"])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../vars.scss";
+
+h3 {
+  margin: 0 40px;
+  svg {
+    vertical-align: middle;
+  }
+}
+</style>

src/components/modals/Modal.vue

@@ -48,12 +48,9 @@ export default {
   flex-direction: column;
   max-width: 60%;
 
-  .characters & {
+  .characters &,
-    max-height: 80%;
+  .vote-history &,
-    max-width: 80%;
+  .night-reference & {
-    overflow-y: auto;
-  }
-  .vote-history & {
     max-height: 80%;
     max-width: 80%;
     overflow-y: auto;

src/components/modals/NightOrderModal.vue

@@ -1,9 +1,8 @@
 <template>
   <Modal
-    class="characters"
+    class="night-reference"
-    v-show="modals.nightOrder"
     @close="toggleModal('nightOrder')"
-    v-if="roles.size"
+    v-if="modals.nightOrder && roles.size"
   >
     <font-awesome-icon
       @click="toggleModal('reference')"

src/components/modals/ReferenceModal.vue

@@ -1,9 +1,8 @@
 <template>
   <Modal
     class="characters"
-    v-show="modals.reference"
     @close="toggleModal('reference')"
-    v-if="roles.size"
+    v-if="modals.reference && roles.size"
   >
     <font-awesome-icon
       @click="toggleModal('nightOrder')"

src/components/modals/ReminderModal.vue

@@ -1,7 +1,6 @@
 <template>
   <Modal
-    v-show="modals.reminder && availableReminders.length"
+    v-if="modals.reminder && availableReminders.length && players[playerIndex]"
-    v-if="players[playerIndex]"
     @close="toggleModal('reminder')"
   >
     <h3>Choose a reminder token:</h3>

src/components/modals/RoleModal.vue

@@ -1,6 +1,6 @@
 <template>
   <Modal
-    v-show="modals.role && availableRoles.length"
+    v-if="modals.role && availableRoles.length"
     @close="toggleModal('role')"
   >
     <h3>

src/components/modals/RolesModal.vue

@@ -1,9 +1,8 @@
 <template>
   <Modal
     class="roles"
-    v-show="modals.roles"
+    v-if="modals.roles && nonTravelers >= 5"
     @close="toggleModal('roles')"
-    v-if="nonTravelers >= 5"
   >
     <h3>Select the characters for {{ nonTravelers }} players:</h3>
     <ul

src/components/modals/VoteHistoryModal.vue

@@ -1,9 +1,8 @@
 <template>
   <Modal
     class="vote-history"
-    v-show="modals.voteHistory"
+    v-show="modals.voteHistory && session.voteHistory"
     @close="toggleModal('voteHistory')"
-    v-if="session.voteHistory"
   >
     <font-awesome-icon
       @click="clearHistory"

src/store/index.js

@@ -62,6 +62,7 @@ export default new Vuex.Store({
     modals: {
       edition: false,
       fabled: false,
+      gameState: false,
       nightOrder: false,
       reference: false,
       reminder: false,