added custom image opt in

src/components/Menu.vue

@@ -73,7 +73,7 @@
             Background image
             <em><font-awesome-icon icon="image"/></em>
           </li>
-          <li @click="toggleMute">
+          <li @click="toggleMuted">
             Mute Sounds
             <em
               ><font-awesome-icon
@@ -89,17 +89,16 @@
           <li class="headline" v-else>
             Live Session
           </li>
-          <li @click="hostSession" v-if="!session.sessionId">
-            Host (Storyteller)<em>[H]</em>
-          </li>
-          <li @click="joinSession" v-if="!session.sessionId">
-            Join (Player)<em>[J]</em>
-          </li>
-          <li v-if="session.sessionId && session.ping">
+          <template v-if="!session.sessionId">
+            <li @click="hostSession">Host (Storyteller)<em>[H]</em></li>
+            <li @click="joinSession">Join (Player)<em>[J]</em></li>
+          </template>
+          <template v-else>
+            <li v-if="session.ping">
               Delay to {{ session.isSpectator ? "host" : "players" }}
               <em>{{ session.ping }}ms</em>
             </li>
-          <li v-if="session.sessionId" @click="copySessionUrl">
+            <li @click="copySessionUrl">
               Copy player link
               <em><font-awesome-icon icon="copy"/></em>
             </li>
@@ -107,17 +106,28 @@
               Send Characters
               <em><font-awesome-icon icon="theater-masks"/></em>
             </li>
+            <li v-if="session.isSpectator" @click="imageOptIn">
+              Show Custom Images
+              <em
+                ><font-awesome-icon
+                  :icon="[
+                    'fas',
+                    grimoire.isImageOptIn ? 'check-square' : 'square'
+                  ]"
+              /></em>
+            </li>
             <li
               v-if="session.voteHistory.length"
               @click="toggleModal('voteHistory')"
             >
               Nomination history<em>[V]</em>
             </li>
-          <li @click="leaveSession" v-if="session.sessionId">
+            <li @click="leaveSession">
               Leave Session
               <em>{{ session.sessionId }}</em>
             </li>
           </template>
+        </template>
 
         <template v-if="tab === 'players' && !session.isSpectator">
           <!-- Users -->
@@ -218,9 +228,6 @@ export default {
         this.$store.commit("setBackground", background);
       }
     },
-    toggleMute() {
-      this.$store.commit("setIsMuted", !this.grimoire.isMuted);
-    },
     hostSession() {
       if (this.session.sessionId) return;
       const sessionId = prompt(
@@ -253,6 +260,13 @@ export default {
         );
       }
     },
+    imageOptIn() {
+      const popup =
+        "Are you sure you want to allow custom images? A malicious storyteller might get access to your IP address this way.";
+      if (this.grimoire.isImageOptIn || confirm(popup)) {
+        this.toggleImageOptIn();
+      }
+    },
     joinSession() {
       if (this.session.sessionId) return this.leaveSession();
       const sessionId = prompt(
@@ -299,6 +313,8 @@ export default {
     ...mapMutations([
       "toggleGrimoire",
       "toggleMenu",
+      "toggleImageOptIn",
+      "toggleMuted",
       "toggleNight",
       "toggleNightOrder",
       "setZoom",

src/store/index.js

@@ -10,12 +10,14 @@ import fabledJSON from "../fabled.json";
 
 Vue.use(Vuex);
 
+// global data maps
 const editionJSONbyId = new Map(
   editionJSON.map(edition => [edition.id, edition])
 );
 const rolesJSONbyId = new Map(rolesJSON.map(role => [role.id, role]));
 const fabled = new Map(fabledJSON.map(role => [role.id, role]));
 
+// helper functions
 const getRolesByEdition = (edition = editionJSON[0]) => {
   return new Map(
     rolesJSON
@@ -38,6 +40,18 @@ const getTravelersNotInEdition = (edition = editionJSON[0]) => {
   );
 };
 
+const set = key => ({ grimoire }, val) => {
+  grimoire[key] = val;
+};
+
+const toggle = key => ({ grimoire }, val) => {
+  if (val === true || val === false) {
+    grimoire[key] = val;
+  } else {
+    grimoire[key] = !grimoire[key];
+  }
+};
+
 // base definition for custom roles
 const imageBase =
   "https://raw.githubusercontent.com/bra1n/townsquare/main/src/assets/icons/";
@@ -67,6 +81,7 @@ export default new Vuex.Store({
       isPublic: true,
       isMenuOpen: false,
       isMuted: false,
+      isImageOptIn: false,
       zoom: 0,
       background: ""
     },
@@ -119,38 +134,14 @@ export default new Vuex.Store({
     rolesJSONbyId: () => rolesJSONbyId
   },
   mutations: {
-    toggleMenu({ grimoire }) {
-      grimoire.isMenuOpen = !grimoire.isMenuOpen;
-    },
-    toggleGrimoire({ grimoire }, isPublic) {
-      if (isPublic === true || isPublic === false) {
-        grimoire.isPublic = isPublic;
-      } else {
-        grimoire.isPublic = !grimoire.isPublic;
-      }
-      document.title = `Blood on the Clocktower ${
-        grimoire.isPublic ? "Town Square" : "Grimoire"
-      }`;
-    },
-    toggleNight({ grimoire }, isNight) {
-      if (isNight === true || isNight === false) {
-        grimoire.isNight = isNight;
-      } else {
-        grimoire.isNight = !grimoire.isNight;
-      }
-    },
-    toggleNightOrder({ grimoire }) {
-      grimoire.isNightOrder = !grimoire.isNightOrder;
-    },
-    setZoom({ grimoire }, zoom) {
-      grimoire.zoom = zoom;
-    },
-    setBackground({ grimoire }, background) {
-      grimoire.background = background;
-    },
-    setIsMuted({ grimoire }, isMuted) {
-      grimoire.isMuted = isMuted;
-    },
+    setZoom: set("zoom"),
+    setBackground: set("background"),
+    toggleMuted: toggle("isMuted"),
+    toggleMenu: toggle("isMenuOpen"),
+    toggleNightOrder: toggle("isNightOrder"),
+    toggleNight: toggle("isNight"),
+    toggleGrimoire: toggle("isPublic"),
+    toggleImageOptIn: toggle("isImageOptIn"),
     toggleModal({ modals }, name) {
       if (name) {
         modals[name] = !modals[name];

src/store/modules/session.js

@@ -1,8 +1,3 @@
-// helper functions
-const set = key => (state, val) => {
-  state[key] = val;
-};
-
 /**
  * Handle a vote request.
  * If the vote is from a seat that is already locked, ignore it.
@@ -37,6 +32,11 @@ const getters = {};
 
 const actions = {};
 
+// mutations helper functions
+const set = key => (state, val) => {
+  state[key] = val;
+};
+
 const mutations = {
   setPlayerId: set("playerId"),
   setSpectator: set("isSpectator"),

src/store/persistence.js

@@ -1,16 +1,25 @@
 module.exports = store => {
+  const updatePagetitle = isPublic =>
+    (document.title = `Blood on the Clocktower ${
+      isPublic ? "Town Square" : "Grimoire"
+    }`);
+
   // initialize data
   if (localStorage.getItem("background")) {
     store.commit("setBackground", localStorage.background);
   }
   if (localStorage.getItem("muted")) {
-    store.commit("setIsMuted", true);
+    store.commit("toggleMuted", true);
+  }
+  if (localStorage.getItem("imageOptIn")) {
+    store.commit("toggleImageOptIn", true);
   }
   if (localStorage.getItem("zoom")) {
     store.commit("setZoom", parseFloat(localStorage.getItem("zoom")));
   }
-  if (localStorage.isPublic !== undefined) {
-    store.commit("toggleGrimoire", JSON.parse(localStorage.isPublic));
+  if (localStorage.getItem("isGrimoire")) {
+    store.commit("toggleGrimoire", false);
+    updatePagetitle(false);
   }
   if (localStorage.roles !== undefined) {
     store.commit("setCustomRoles", JSON.parse(localStorage.roles));
@@ -61,10 +70,12 @@ module.exports = store => {
   store.subscribe(({ type, payload }, state) => {
     switch (type) {
       case "toggleGrimoire":
-        localStorage.setItem(
-          "isPublic",
-          JSON.stringify(state.grimoire.isPublic)
-        );
+        if (!state.grimoire.isPublic) {
+          localStorage.setItem("isGrimoire", 1);
+        } else {
+          localStorage.removeItem("isGrimoire");
+        }
+        updatePagetitle(state.grimoire.isPublic);
         break;
       case "setBackground":
         if (payload) {
@@ -73,13 +84,20 @@ module.exports = store => {
           localStorage.removeItem("background");
         }
         break;
-      case "setIsMuted":
-        if (payload) {
+      case "toggleMuted":
+        if (state.grimoire.isMuted) {
           localStorage.setItem("muted", 1);
         } else {
           localStorage.removeItem("muted");
         }
         break;
+      case "toggleImageOptIn":
+        if (state.grimoire.isImageOptIn) {
+          localStorage.setItem("imageOptIn", 1);
+        } else {
+          localStorage.removeItem("imageOptIn");
+        }
+        break;
       case "setZoom":
         if (payload !== 0) {
           localStorage.setItem("zoom", payload);