menu stuff

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":
+        case "escape":
-          this.$store.commit("toggleMenu");
+          this.$store.commit("toggleModal");
       }
     }
   }

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;
+  width: 220px;
-  transform-origin: 190px 22px;
+  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);

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",

src/store/index.js

@@ -95,12 +95,12 @@ export default new Vuex.Store({
       }
     },
     toggleModal({ modals }, name) {
-      modals[name] = !modals[name];
+      if (name) {
-      if (modals[name]) {
+        modals[name] = !modals[name];
-        for (let modal in modals) {
+      }
-          if (modal === name) continue;
+      for (let modal in modals) {
-          modals[modal] = false;
+        if (modal === name) continue;
-        }
+        modals[modal] = false;
       }
     },
     updateScreenshot({ grimoire }, status) {