streamer mode

src/App.vue

@@ -8,15 +8,14 @@
       static: grimoire.isStatic
     }"
     :style="{
-      backgroundImage: grimoire.background
+      backgroundImage: `url('${background}')`,
-        ? `url('${grimoire.background}')`
+      backgroundColor: `${backgroundColor}`
-        : ''
     }"
   >
     <video
       id="background"
-      v-if="grimoire.background && grimoire.background.match(/\.(mp4|webm)$/i)"
+      v-if="background && background.match(/\.(mp4|webm)$/i)"
-      :src="grimoire.background"
+      :src="background"
       autoplay
       loop
     ></video>
@@ -74,8 +73,19 @@ export default {
     Gradients
   },
   computed: {
-    ...mapState(["grimoire", "session"]),
+    ...mapState(["grimoire", "session", "edition"]),
-    ...mapState("players", ["players"])
+    ...mapState("players", ["players"]),
+    background: function() {
+      if (this.grimoire.isStreamerMode) {
+        return "none";
+      }
+      return this.grimoire.background || this.edition.background || "none";
+    },
+    backgroundColor: function() {
+      return this.grimoire.isStreamerMode
+        ? "#00FF00"
+        : "transparent"
+    }
   },
   data() {
     return {

src/assets/scripts/reykjaviks_scheme.json

@@ -2,7 +2,8 @@
   {
     "id": "_meta",
     "name": "Reykjavik's Scheme",
-    "author": "Gordon Fitzgerald"
+    "author": "Gordon Fitzgerald",
+    "background": "https://raw.githubusercontent.com/Pingumask/townsquare/develop/src/assets/scripts/reykjaviks_scheme.bg.png"
   },
   {
     "id": "slayer"

src/assets/scripts/storytellers_vengeance.json

@@ -0,0 +1,81 @@
+[
+    {
+        "id": "_meta",
+        "name": "Storyteller's Vengeance"
+    },
+    {
+        "id": "investigator"
+    },
+    {
+        "id": "chambermaid"
+    },
+    {
+        "id": "empath"
+    },
+    {
+        "id": "fortune_teller"
+    },
+    {
+        "id": "innkeeper"
+    },
+    {
+        "id": "town_crier"
+    },
+    {
+        "id": "undertaker"
+    },
+    {
+        "id": "artist"
+    },
+    {
+        "id": "seamstress"
+    },
+    {
+        "id": "slayer"
+    },
+    {
+        "id": "virgin"
+    },
+    {
+        "id": "mayor"
+    },
+    {
+        "id": "atheist"
+    },
+    {
+        "id": "drunk"
+    },
+    {
+        "id": "lunatic"
+    },
+    {
+        "id": "puzzlemaster"
+    },
+    {
+        "id": "klutz"
+    },
+    {
+        "id": "evil_twin"
+    },
+    {
+        "id": "marionette"
+    },
+    {
+        "id": "witch"
+    },
+    {
+        "id": "scarlet_woman"
+    },
+    {
+        "id": "fang_gu"
+    },
+    {
+        "id": "imp"
+    },
+    {
+        "id": "no_dashii"
+    },
+    {
+        "id": "vigormortis"
+    }
+]

src/assets/scripts/trouble_brewing_advanced.json

@@ -0,0 +1,78 @@
+[
+    {
+        "id": "_meta",
+        "name": "Trouble brewing Advanced"
+    },
+    {
+        "id": "noble"
+    },
+    {
+        "id": "chef"
+    },
+    {
+        "id": "washerwoman"
+    },
+    {
+        "id": "librarian"
+    },
+    {
+        "id": "empath"
+    },
+    {
+        "id": "fortune_teller"
+    },
+    {
+        "id": "undertaker"
+    },
+    {
+        "id": "monk"
+    },
+    {
+        "id": "slayer"
+    },
+    {
+        "id": "soldier"
+    },
+    {
+        "id": "ravenkeeper"
+    },
+    {
+        "id": "virgin"
+    },
+    {
+        "id": "mayor"
+    },
+    {
+        "id": "goon"
+    },
+    {
+        "id": "saint"
+    },
+    {
+        "id": "recluse"
+    },
+    {
+        "id": "lunatic"
+    },
+    {
+        "id": "poisoner"
+    },
+    {
+        "id": "spy"
+    },
+    {
+        "id": "baron"
+    },
+    {
+        "id": "scarlet_woman"
+    },
+    {
+        "id": "marionette"
+    },
+    {
+        "id": "imp"
+    },
+    {
+        "id": "fang_gu"
+    }
+]

src/assets/scripts/trouble_with_violets.json

@@ -2,7 +2,8 @@
   {
     "id": "_meta",
     "name": "Trouble with Violets",
-    "author": "The Pandemonium Institute"
+    "author": "The Pandemonium Institute",
+    "background": "https://raw.githubusercontent.com/Pingumask/townsquare/develop/src/assets/scripts/trouble_with_violets.bg.png"
   },
   {
     "id": "washerwoman"

src/components/Menu.vue

@@ -101,6 +101,16 @@
                 ]"
             /></em>
           </li>
+          <li @click="streamerMode">
+            <small>{{ locale.menu.grimoire.streamerMode }}</small>
+            <em
+              ><font-awesome-icon
+                :icon="[
+                  'fas',
+                  grimoire.isStreamerMode ? 'check-square' : 'square'
+                ]"
+            /></em>
+          </li>
           <li @click="toggleStatic">
             {{ locale.menu.grimoire.animations }}
             <em
@@ -292,6 +302,9 @@ export default {
         this.toggleImageOptIn();
       }
     },
+    streamerMode() {
+      this.toggleStreamerMode();
+    },
     joinSession() {
       if (this.session.sessionId) return this.leaveSession();
       let sessionId = prompt(
@@ -356,6 +369,7 @@ export default {
       "toggleGrimoire",
       "toggleMenu",
       "toggleImageOptIn",
+      "toggleStreamerMode",
       "toggleMuted",
       "toggleNightOrder",
       "toggleStatic",

src/components/modals/EditionModal.vue

@@ -158,6 +158,14 @@ export default {
         [
           "Simpletown Village",
           "https://raw.githubusercontent.com/Pingumask/townsquare/develop/src/assets/scripts/pont_saint_esprit.json"
+        ],
+        [
+          "Trouble Brewing Advanced",
+          "https://raw.githubusercontent.com/Pingumask/townsquare/develop/src/assets/scripts/trouble_brewing_advanced.json"
+        ],
+        [
+          "Storyteller's Vengeance",
+          "https://raw.githubusercontent.com/Pingumask/townsquare/develop/src/assets/scripts/storytellers_vengeance.json"
         ]
       ]
     };
@@ -241,22 +249,24 @@ export default {
 </script>
 
 <style scoped lang="scss">
-ul.editions .edition {
+ul.editions {
-  font-family: PiratesBay, sans-serif;
+  .edition {
-  letter-spacing: 1px;
+    font-family: PiratesBay, sans-serif;
-  text-align: center;
+    letter-spacing: 1px;
-  padding-top: 15%;
+    text-align: center;
-  background-position: center center;
+    padding-top: 15%;
-  background-size: 100% auto;
+    background-position: center center;
-  background-repeat: no-repeat;
+    background-size: 100% auto;
-  width: 30%;
+    background-repeat: no-repeat;
-  margin: 5px;
+    width: 30%;
-  font-size: 120%;
+    margin: 5px;
-  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
+    font-size: 120%;
-    1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.75);
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
-  cursor: pointer;
+      1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.75);
-  &:hover {
+    cursor: pointer;
-    color: red;
+    &:hover {
+      color: red;
+    }
   }
 }
 

src/components/modals/Modal.vue

@@ -65,9 +65,10 @@ export default {
   box-shadow: 2px 2px 20px 1px #000;
   display: flex;
   flex-direction: column;
-  max-height: 80%;
+  max-height: 80vh;
-  max-width: 80%;
+  max-width: 80vw;
 
+  .editions &,
   .vote-history &,
   .night-reference &,
   .characters & {
@@ -76,8 +77,8 @@ export default {
 
   .roles &,
   .characters & {
-    max-height: 100%;
+    max-height: 100vh;
-    max-width: 60%;
+    max-width: 60vw;
   }
 
   ul {

src/store/index.js

@@ -110,6 +110,7 @@ export default new Vuex.Store({
       isStatic: false,
       isMuted: false,
       isImageOptIn: false,
+      isStreamerMode: false,
       zoom: 0,
       background: "",
       timer: {
@@ -183,6 +184,7 @@ export default new Vuex.Store({
     toggleRinging: toggle("isRinging"),
     toggleGrimoire: toggle("isPublic"),
     toggleImageOptIn: toggle("isImageOptIn"),
+    toggleStreamerMode: toggle("isStreamerMode"),
     setTimer(state, timer) {
       state.grimoire.timer = timer;
     },

src/store/locale/en/ui.json

@@ -10,6 +10,7 @@
       "zoom": "Zoom",
       "background": "Background image",
       "customImages": "Show Custom Images",
+      "streamerMode": "Streamer Mode",
       "animations": "Disable Animations",
       "mute": "Mute Sounds",
       "ringBell": "Ring Bell"

src/store/locale/fr/ui.json

@@ -10,6 +10,7 @@
       "zoom": "Zoom",
       "background": "Image de fond",
       "customImages": "Images Importées",
+      "streamerMode": "Mode Streamer",
       "animations": "Effets réduits",
       "mute": "Silencieux",
       "ringBell": "Sonner Clocher"

src/store/persistence.js

@@ -17,6 +17,9 @@ module.exports = store => {
   if (localStorage.getItem("imageOptIn")) {
     store.commit("toggleImageOptIn", true);
   }
+  if (localStorage.getItem("streamerMode")) {
+    store.commit("toggleStreamerMode", true);
+  }
   if (localStorage.getItem("zoom")) {
     store.commit("setZoom", parseFloat(localStorage.getItem("zoom")));
   }
@@ -108,6 +111,13 @@ module.exports = store => {
           localStorage.removeItem("imageOptIn");
         }
         break;
+      case "toggleStreamerMode":
+        if (state.grimoire.isStreamerMode) {
+          localStorage.setItem("streamerMode", 1);
+        } else {
+          localStorage.removeItem("streamerMode");
+        }
+        break;
       case "setZoom":
         if (payload !== 0) {
           localStorage.setItem("zoom", payload);