added custom image opt in

2021-02-01 22:33:59 +01:00 · 2021-02-01 22:33:59 +01:00 · ec64584da5
parent 4d33e7dda9
commit ec64584da5
4 changed files with 103 additions and 78 deletions
--- a/src/components/Menu.vue
+++ b/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,34 +89,44 @@
          <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">
-            Delay to {{ session.isSpectator ? "host" : "players" }}
-            <em>{{ session.ping }}ms</em>
-          </li>
-          <li v-if="session.sessionId" @click="copySessionUrl">
-            Copy player link
-            <em><font-awesome-icon icon="copy"/></em>
-          </li>
-          <li v-if="!session.isSpectator" @click="distributeRoles">
-            Send Characters
-            <em><font-awesome-icon icon="theater-masks"/></em>
-          </li>
-          <li
-            v-if="session.voteHistory.length"
-            @click="toggleModal('voteHistory')"
-          >
-            Nomination history<em>[V]</em>
-          </li>
-          <li @click="leaveSession" v-if="session.sessionId">
-            Leave Session
-            <em>{{ session.sessionId }}</em>
-          </li>
+          <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 @click="copySessionUrl">
+              Copy player link
+              <em><font-awesome-icon icon="copy"/></em>
+            </li>
+            <li v-if="!session.isSpectator" @click="distributeRoles">
+              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">
+              Leave Session
+              <em>{{ session.sessionId }}</em>
+            </li>
+          </template>
        </template>

        <template v-if="tab === 'players' && !session.isSpectator">
@ -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",
--- a/src/store/index.js
+++ b/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];
--- a/src/store/modules/session.js
+++ b/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"),
--- a/src/store/persistence.js
+++ b/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);