remove screenshot feature as it is no longer needed

public/index.html

@@ -25,7 +25,7 @@
   <meta name="theme-color" content="#ff0000">
   <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
   <meta name="description" content="A free, virtual Blood on the Clocktower Town Square and Grimoire to help you run (online) games both as a storyteller and player. Batteries included!">
-  <meta name="keywords" content="botc, blood, clocktower, storyteller, townsquare, grimoire, screenshot,town square, english, blood on the clocktower, character, tokens, reminder, free">
+  <meta name="keywords" content="botc, blood, clocktower, storyteller, townsquare, grimoire, voting,town square, english, blood on the clocktower, character, tokens, reminder, free">
   <meta name="robots" content="index, follow">
   <meta name="language" content="English">
   <meta name="author" content="Steffen Baumgart">

src/App.vue

@@ -3,10 +3,7 @@
     id="app"
     @keyup="keyup"
     tabindex="-1"
-    :class="{
-      screenshot: grimoire.isScreenshot,
-      night: grimoire.isNight
-    }"
+    :class="{ night: grimoire.isNight }"
     :style="{
       backgroundImage: grimoire.background
         ? `url('${grimoire.background}')`
@@ -19,7 +16,7 @@
       <TownInfo v-if="players.length && !session.nomination"></TownInfo>
       <Vote v-if="session.nomination"></Vote>
     </transition>
-    <TownSquare @screenshot="takeScreenshot"></TownSquare>
+    <TownSquare></TownSquare>
     <Menu ref="menu"></Menu>
     <EditionModal />
     <FabledModal />
@@ -76,9 +73,6 @@ export default {
     };
   },
   methods: {
-    takeScreenshot(dimensions) {
-      this.$refs.menu.takeScreenshot(dimensions);
-    },
     keyup({ key, ctrlKey, metaKey }) {
       if (ctrlKey || metaKey) return;
       switch (key.toLocaleLowerCase()) {
@@ -220,15 +214,6 @@ body {
   }
 }
 
-// Firefox doesn't support screenshot mode yet
-@-moz-document url-prefix() {
-  #controls > span.camera,
-  .player > .menu .screenshot,
-  .bluffs > svg.fa-camera {
-    display: none;
-  }
-}
-
 * {
   box-sizing: border-box;
   position: relative;

src/components/Menu.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="controls">
-    <Screenshot ref="screenshot"></Screenshot>
     <span
       class="session"
       :class="{
@@ -18,14 +17,6 @@
       <font-awesome-icon icon="broadcast-tower" />
       {{ session.playerCount }}
     </span>
-    <span class="camera">
-      <font-awesome-icon
-        icon="camera"
-        @click="takeScreenshot()"
-        title="Take a screenshot"
-        :class="{ success: grimoire.isScreenshotSuccess }"
-      />
-    </span>
     <div class="menu" :class="{ open: grimoire.isMenuOpen }">
       <font-awesome-icon icon="cog" @click="toggleMenu" />
       <ul>
@@ -206,12 +197,8 @@
 
 <script>
 import { mapMutations, mapState } from "vuex";
-import Screenshot from "./Screenshot";
 
 export default {
-  components: {
-    Screenshot
-  },
   computed: {
     ...mapState(["grimoire", "session"]),
     ...mapState("players", ["players"])
@@ -222,10 +209,6 @@ export default {
     };
   },
   methods: {
-    takeScreenshot(dimensions = {}) {
-      this.$store.commit("updateScreenshot");
-      this.$refs.screenshot.capture(dimensions);
-    },
     setBackground() {
       const background = prompt("Enter custom background URL");
       if (background || background === "") {
@@ -319,7 +302,6 @@ export default {
       "toggleMenu",
       "toggleNight",
       "toggleNightOrder",
-      "updateScreenshot",
       "setZoom",
       "toggleModal"
     ])
@@ -349,10 +331,6 @@ export default {
   padding-right: 50px;
   z-index: 200;
 
-  #app.screenshot & {
-    display: none;
-  }
-
   svg {
     filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
     &.success {

src/components/Player.vue

@@ -124,10 +124,6 @@
               <font-awesome-icon icon="exchange-alt" />
               Swap seats
             </li>
-            <li class="screenshot" @click="takeScreenshot">
-              <font-awesome-icon icon="camera" />
-              Screenshot
-            </li>
             <li @click="removePlayer">
               <font-awesome-icon icon="times-circle" />
               Remove
@@ -234,11 +230,6 @@ export default {
     handleEmojis: text => text.replace(/:([^: ]+?):/g, "").replace(/ •/g, "\n•")
   },
   methods: {
-    takeScreenshot() {
-      const { width, height, x, y } = this.$refs.player.getBoundingClientRect();
-      this.$emit("screenshot", { width, height, x, y });
-      this.isMenuOpen = false;
-    },
     toggleStatus() {
       if (this.grimoire.isPublic) {
         if (!this.player.isDead) {

src/components/Screenshot.vue

@@ -1,83 +0,0 @@
-<template>
-  <div id="screenshot">
-    <video ref="video" autoplay></video>
-    <canvas ref="canvas"></canvas>
-  </div>
-</template>
-
-<script>
-export default {
-  data: function() {
-    return {
-      stream: null
-    };
-  },
-  methods: {
-    async capture({ x = 0, y = 0, width = 0, height = 0 }) {
-      const canvas = this.$refs.canvas;
-      const video = this.$refs.video;
-      // start capturing
-      if (!this.stream || !this.stream.active) {
-        alert(
-          "Please select to stream the current browser tab to get the appropriate screenshots"
-        );
-        try {
-          this.stream = await navigator.mediaDevices.getDisplayMedia({
-            video: {
-              // frameRate: 5,
-              cursor: "never"
-            },
-            audio: false
-          });
-        } catch (err) {
-          this.$store.commit("updateScreenshot", false);
-        }
-      }
-      // get screenshot
-      if (this.stream && this.stream.active) {
-        video.srcObject = this.stream;
-        video.play();
-        setTimeout(() => {
-          const context = canvas.getContext("2d");
-          canvas.setAttribute("width", width || video.videoWidth);
-          canvas.setAttribute("height", height || video.videoHeight);
-          context.drawImage(
-            video,
-            x || 0,
-            y || 0,
-            width || video.videoWidth,
-            height || video.videoHeight,
-            0,
-            0,
-            width || video.videoWidth,
-            height || video.videoHeight
-          );
-          canvas.toBlob(blob => {
-            try {
-              // eslint-disable-next-line no-undef
-              const item = new ClipboardItem({ "image/png": blob });
-              navigator.clipboard.write([item]);
-              this.$store.commit("updateScreenshot", true);
-            } catch (err) {
-              this.$store.commit("updateScreenshot", false);
-            }
-          });
-        }, 100);
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-video {
-  width: 100%;
-  height: 100%;
-  display: none;
-}
-canvas {
-  width: 100%;
-  height: 100%;
-  display: none;
-}
-</style>

src/components/Token.vue

@@ -215,10 +215,6 @@ export default {
       margin-right: 2px;
       right: 100%;
     }
-
-    #app.screenshot & {
-      display: none;
-    }
   }
 
   &:hover .ability {

src/components/TownSquare.vue

@@ -13,7 +13,6 @@
         v-for="(player, index) in players"
         :key="index"
         :player="player"
-        @screenshot="$emit('screenshot', $event)"
         @trigger="handleTrigger(index, $event)"
         :class="{
           from: Math.max(swap, move, nominate) === index,
@@ -31,7 +30,6 @@
       :class="{ closed: !isBluffsOpen }"
     >
       <h3>
-        <font-awesome-icon icon="camera" @click.stop="takeScreenshot" />
         <span v-if="session.isSpectator">Other characters</span>
         <span v-else>Demon bluffs</span>
         <font-awesome-icon icon="times-circle" @click.stop="toggleBluffs" />
@@ -119,10 +117,6 @@ export default {
     };
   },
   methods: {
-    takeScreenshot() {
-      const { width, height, x, y } = this.$refs.bluffs.getBoundingClientRect();
-      this.$emit("screenshot", { width, height, x, y });
-    },
     toggleBluffs() {
       this.isBluffsOpen = !this.isBluffsOpen;
     },
@@ -371,9 +365,6 @@ export default {
     &:hover {
       color: red;
     }
-    #app.screenshot & {
-      display: none;
-    }
   }
   h3 {
     margin: 5px 1vh 0;
@@ -390,9 +381,6 @@ export default {
     svg {
       cursor: pointer;
       flex-grow: 0;
-      &.fa-camera {
-        margin-right: 1vh;
-      }
       &.fa-times-circle {
         margin-left: 1vh;
       }
@@ -420,9 +408,6 @@ export default {
     }
   }
   &.closed {
-    svg.fa-camera {
-      display: none;
-    }
     svg.fa-times-circle {
       display: none;
     }
@@ -576,10 +561,6 @@ export default {
     opacity: 1;
   }
 
-  #app.screenshot & {
-    display: none;
-  }
-
   // adjustment for fabled
   .fabled &.first {
     span {

src/main.js

@@ -10,7 +10,6 @@ const faIcons = [
   "AddressCard",
   "BookOpen",
   "BroadcastTower",
-  "Camera",
   "Chair",
   "CheckSquare",
   "CloudMoon",

src/store/index.js

@@ -53,8 +53,6 @@ export default new Vuex.Store({
       isNightOrder: true,
       isPublic: true,
       isMenuOpen: false,
-      isScreenshot: false,
-      isScreenshotSuccess: false,
       zoom: 0,
       background: ""
     },
@@ -144,15 +142,6 @@ export default new Vuex.Store({
         modals[modal] = false;
       }
     },
-    updateScreenshot({ grimoire }, status) {
-      if (status !== true && status !== false) {
-        grimoire.isScreenshotSuccess = false;
-        grimoire.isScreenshot = true;
-      } else {
-        grimoire.isScreenshotSuccess = status;
-        grimoire.isScreenshot = false;
-      }
-    },
     /**
      * Store custom roles
      * @param state