From 4a69cd50f980ac2a9cc417aba04befc736f0534b Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Thu, 4 Jun 2020 21:56:07 +0200
Subject: [PATCH] menu stuff

---
 src/App.vue             | 10 ++++++++--
 src/components/Menu.vue | 14 +++++++++-----
 src/main.js             |  3 +++
 src/store/index.js      | 12 ++++++------
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c16020f..a1f4def 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,6 +56,12 @@ export default {
         case "a":
           this.$refs.menu.addPlayer();
           break;
+        case "h":
+          this.$refs.menu.hostSession();
+          break;
+        case "j":
+          this.$refs.menu.joinSession();
+          break;
         case "r":
           this.$store.commit("toggleModal", "reference");
           break;
@@ -67,8 +73,8 @@ export default {
           if (this.session.isSpectator) return;
           this.$store.commit("toggleModal", "roles");
           break;
-        case "Escape":
-          this.$store.commit("toggleMenu");
+        case "escape":
+          this.$store.commit("toggleModal");
       }
     }
   }
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 4a90973..09485d7 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -70,6 +70,7 @@
             Zoom
           </li>
           <li @click="setBackground">
+            <em><font-awesome-icon icon="image"/></em>
             Background image
           </li>
         </template>
@@ -82,10 +83,10 @@
             Live Session
           </li>
           <li @click="hostSession" v-if="!session.sessionId">
-            Host a session
+            <em>[H]</em> Host (Storyteller)
           </li>
           <li @click="joinSession" v-if="!session.sessionId">
-            Join a session
+            <em>[J]</em> Join (Player)
           </li>
           <li v-if="session.sessionId" @click="copySessionUrl">
             <em><font-awesome-icon icon="copy"/></em>
@@ -104,9 +105,11 @@
             <em>[A]</em> Add
           </li>
           <li @click="randomizeSeatings" v-if="players.length > 2">
+            <em><font-awesome-icon icon="dice"/></em>
             Randomize
           </li>
           <li @click="clearPlayers" v-if="players.length">
+            <em><font-awesome-icon icon="trash-alt"/></em>
             Remove all
           </li>
         </template>
@@ -123,6 +126,7 @@
             Choose & Assign
           </li>
           <li @click="clearRoles" v-if="players.length">
+            <em><font-awesome-icon icon="trash-alt"/></em>
             Remove all
           </li>
         </template>
@@ -313,8 +317,8 @@ export default {
 }
 
 .menu {
-  width: 210px;
-  transform-origin: 190px 22px;
+  width: 220px;
+  transform-origin: 200px 22px;
   transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
   transform: rotate(-90deg);
   position: absolute;
@@ -357,7 +361,7 @@ export default {
     border-radius: 10px 0 10px 10px;
 
     li {
-      padding: 2px 10px;
+      padding: 2px 5px;
       color: white;
       text-align: left;
       background: rgba(0, 0, 0, 0.7);
diff --git a/src/main.js b/src/main.js
index 0e86cdb..121567f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,10 +13,12 @@ const faIcons = [
   "CheckSquare",
   "Cog",
   "Copy",
+  "Dice",
   "ExchangeAlt",
   "FileUpload",
   "HandPointRight",
   "Heartbeat",
+  "Image",
   "Link",
   "PeopleArrows",
   "Question",
@@ -27,6 +29,7 @@ const faIcons = [
   "Square",
   "TheaterMasks",
   "TimesCircle",
+  "TrashAlt",
   "Undo",
   "User",
   "UserEdit",
diff --git a/src/store/index.js b/src/store/index.js
index 2f98801..8cbb976 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -95,12 +95,12 @@ export default new Vuex.Store({
       }
     },
     toggleModal({ modals }, name) {
-      modals[name] = !modals[name];
-      if (modals[name]) {
-        for (let modal in modals) {
-          if (modal === name) continue;
-          modals[modal] = false;
-        }
+      if (name) {
+        modals[name] = !modals[name];
+      }
+      for (let modal in modals) {
+        if (modal === name) continue;
+        modals[modal] = false;
       }
     },
     updateScreenshot({ grimoire }, status) {