menu added, session plugin created

src/components/Menu.vue

@@ -37,6 +37,16 @@
         <li @click="setBackground">
           Background image
         </li>
+        <li @click="hostSession" v-if="!grimoire.sessionId">
+          Host Live Session
+        </li>
+        <li @click="joinSession" v-if="!grimoire.sessionId">
+          Join Live Session
+        </li>
+        <li @click="leaveSession" v-if="grimoire.sessionId">
+          <em>{{ grimoire.sessionId.substr(2) }}</em>
+          Leave Session
+        </li>
 
         <!-- Users -->
         <li class="headline">
@@ -80,10 +90,10 @@ export default {
   components: {
     Screenshot
   },
-  computed: mapState({
+  computed: {
-    grimoire: state => state.grimoire,
+    ...mapState(["grimoire"]),
-    players: state => state.players.players
+    ...mapState("players", ["players"])
-  }),
+  },
   methods: {
     takeScreenshot(dimensions = {}) {
       this.$store.commit("updateScreenshot");
@@ -95,6 +105,28 @@ export default {
         prompt("Enter custom background URL")
       );
     },
+    hostSession() {
+      const sessionId = prompt(
+        "Enter a code for your session",
+        Math.random()
+          .toString(36)
+          .substring(2, 7)
+      );
+      if (sessionId) {
+        this.$store.commit("setSessionId", "h:" + sessionId.substr(0, 5));
+      }
+    },
+    joinSession() {
+      const sessionId = prompt(
+        "Enter the code of the session you want to join"
+      );
+      if (sessionId) {
+        this.$store.commit("setSessionId", "j:" + sessionId.substr(0, 5));
+      }
+    },
+    leaveSession() {
+      this.$store.commit("setSessionId", "");
+    },
     addPlayer() {
       const name = prompt("Player name");
       if (name) {

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import persistence from "./persistence";
+import session from "./session";
 import players from "./modules/players";
 import editionJSON from "../editions.json";
 import rolesJSON from "../roles.json";
@@ -33,7 +34,8 @@ export default new Vuex.Store({
       isScreenshotSuccess: false,
       zoom: 1,
       background: "",
-      bluffs: []
+      bluffs: [],
+      sessionId: ""
     },
     modals: {
       edition: false,
@@ -67,6 +69,9 @@ export default new Vuex.Store({
     setBackground({ grimoire }, background) {
       grimoire.background = background;
     },
+    setSessionId({ grimoire }, sessionId) {
+      grimoire.sessionId = sessionId;
+    },
     setBluff({ grimoire }, { index, role }) {
       grimoire.bluffs.splice(index, 1, role);
     },
@@ -88,5 +93,5 @@ export default new Vuex.Store({
       state.roles = getRolesByEdition(edition);
     }
   },
-  plugins: [persistence]
+  plugins: [persistence, session]
 });

src/store/session.js

@@ -0,0 +1,8 @@
+module.exports = store => {
+  // setup
+
+  // listen to mutations
+  store.subscribe(({ type, payload }, state) => {
+    console.log(type, payload, state);
+  });
+};