From e0958ac1294a8ac0b5a0b2bc12db69c8803ccbdc Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Sat, 12 Dec 2020 22:03:36 +0100
Subject: [PATCH] first draft of gamestate modal improved general modal
 performance

---
 src/App.vue                                |  3 ++
 src/components/Menu.vue                    |  4 ++
 src/components/modals/EditionModal.vue     |  6 +--
 src/components/modals/FabledModal.vue      |  2 +-
 src/components/modals/GameStateModal.vue   | 47 ++++++++++++++++++++++
 src/components/modals/Modal.vue            |  9 ++---
 src/components/modals/NightOrderModal.vue  |  5 +--
 src/components/modals/ReferenceModal.vue   |  3 +-
 src/components/modals/ReminderModal.vue    |  3 +-
 src/components/modals/RoleModal.vue        |  2 +-
 src/components/modals/RolesModal.vue       |  3 +-
 src/components/modals/VoteHistoryModal.vue |  3 +-
 src/store/index.js                         |  1 +
 13 files changed, 67 insertions(+), 24 deletions(-)
 create mode 100644 src/components/modals/GameStateModal.vue

diff --git a/src/App.vue b/src/App.vue
index 3f07790..fa31921 100644
--- a/src/App.vue
+++ b/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,
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 74b622a..a1eec66 100644
--- a/src/components/Menu.vue
+++ b/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
diff --git a/src/components/modals/EditionModal.vue b/src/components/modals/EditionModal.vue
index 3670a71..724f844 100644
--- a/src/components/modals/EditionModal.vue
+++ b/src/components/modals/EditionModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <Modal
-    class="editions"
-    v-show="modals.edition"
-    @close="toggleModal('edition')"
-  >
+  <Modal class="editions" v-if="modals.edition" @close="toggleModal('edition')">
     <div v-if="!isCustom">
       <h3>Select an edition:</h3>
       <ul class="editions">
diff --git a/src/components/modals/FabledModal.vue b/src/components/modals/FabledModal.vue
index 9bd3350..783b101 100644
--- a/src/components/modals/FabledModal.vue
+++ b/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>
diff --git a/src/components/modals/GameStateModal.vue b/src/components/modals/GameStateModal.vue
new file mode 100644
index 0000000..af36986
--- /dev/null
+++ b/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>
diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index c111185..f5f686f 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -48,12 +48,9 @@ export default {
   flex-direction: column;
   max-width: 60%;
 
-  .characters & {
-    max-height: 80%;
-    max-width: 80%;
-    overflow-y: auto;
-  }
-  .vote-history & {
+  .characters &,
+  .vote-history &,
+  .night-reference & {
     max-height: 80%;
     max-width: 80%;
     overflow-y: auto;
diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index ed2f3f3..053625a 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/src/components/modals/NightOrderModal.vue
@@ -1,9 +1,8 @@
 <template>
   <Modal
-    class="characters"
-    v-show="modals.nightOrder"
+    class="night-reference"
     @close="toggleModal('nightOrder')"
-    v-if="roles.size"
+    v-if="modals.nightOrder && roles.size"
   >
     <font-awesome-icon
       @click="toggleModal('reference')"
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 895e70c..db6a2cb 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/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')"
diff --git a/src/components/modals/ReminderModal.vue b/src/components/modals/ReminderModal.vue
index e395d29..c265a75 100644
--- a/src/components/modals/ReminderModal.vue
+++ b/src/components/modals/ReminderModal.vue
@@ -1,7 +1,6 @@
 <template>
   <Modal
-    v-show="modals.reminder && availableReminders.length"
-    v-if="players[playerIndex]"
+    v-if="modals.reminder && availableReminders.length && players[playerIndex]"
     @close="toggleModal('reminder')"
   >
     <h3>Choose a reminder token:</h3>
diff --git a/src/components/modals/RoleModal.vue b/src/components/modals/RoleModal.vue
index c093b06..050a1f5 100644
--- a/src/components/modals/RoleModal.vue
+++ b/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>
diff --git a/src/components/modals/RolesModal.vue b/src/components/modals/RolesModal.vue
index 793319d..e409ba4 100644
--- a/src/components/modals/RolesModal.vue
+++ b/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
diff --git a/src/components/modals/VoteHistoryModal.vue b/src/components/modals/VoteHistoryModal.vue
index c92ee60..3afe4e1 100644
--- a/src/components/modals/VoteHistoryModal.vue
+++ b/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"
diff --git a/src/store/index.js b/src/store/index.js
index 2986a3c..053b227 100644
--- a/src/store/index.js
+++ b/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,