fix bug with zoom and roleselection

src/App.vue

@@ -121,7 +121,7 @@ export default {
       this.isControlOpen = false;
       this.isScreenshotSuccess = false;
       this.isScreenshot = true;
-      this.$refs.screenshot.capture(dimensions);
+      this.$refs.screenshot.capture(dimensions, this.zoom);
     },
     onScreenshot(success = false) {
       this.isScreenshotSuccess = success;

src/components/Player.vue

@@ -69,10 +69,6 @@ export default {
     isPublic: {
       type: Boolean,
       required: true
-    },
-    zoom: {
-      type: Number,
-      required: true
     }
   },
   data() {
@@ -81,12 +77,7 @@ export default {
   methods: {
     takeScreenshot() {
       const { width, height, x, y } = this.$refs.player.getBoundingClientRect();
-      this.$emit("screenshot", {
-        width: width * this.zoom,
-        height: height * this.zoom,
-        x: x * this.zoom,
-        y: y * this.zoom
-      });
+      this.$emit("screenshot", { width, height, x, y });
     },
     toggleStatus() {
       if (this.isPublic) {

src/components/RoleSelectionModal.vue

@@ -1,5 +1,10 @@
 <template>
-  <Modal class="roles" v-show="isOpen" @close="close()">
+  <Modal
+    class="roles"
+    v-show="isOpen"
+    @close="close()"
+    v-if="nontravelerPlayers >= 5"
+  >
     <h3>Select the roles for {{ nontravelerPlayers }} players:</h3>
     <ul
       class="tokens"

src/components/Screenshot.vue

@@ -13,7 +13,7 @@ export default {
     };
   },
   methods: {
-    async capture({ x, y, width, height }) {
+    async capture({ x = 0, y = 0, width = 0, height = 0 }, zoom = 1) {
       const canvas = this.$refs.canvas;
       const video = this.$refs.video;
       // start capturing
@@ -39,18 +39,18 @@ export default {
         video.play();
         setTimeout(() => {
           const context = canvas.getContext("2d");
-          canvas.setAttribute("width", width || video.videoWidth);
-          canvas.setAttribute("height", height || video.videoHeight);
+          canvas.setAttribute("width", width * zoom || video.videoWidth);
+          canvas.setAttribute("height", height * zoom || video.videoHeight);
           context.drawImage(
             video,
-            x || 0,
-            y || 0,
-            width || video.videoWidth,
-            height || video.videoHeight,
+            x * zoom || 0,
+            y * zoom || 0,
+            width * zoom || video.videoWidth,
+            height * zoom || video.videoHeight,
             0,
             0,
-            width || video.videoWidth,
-            height || video.videoHeight
+            width * zoom || video.videoWidth,
+            height * zoom || video.videoHeight
           );
           canvas.toBlob(blob => {
             try {

src/components/TownSquare.vue

@@ -12,7 +12,6 @@
         :player="player"
         :roles="roles"
         :is-public="isPublic"
-        :zoom="zoom"
         @add-reminder="openReminderModal"
         @set-role="openRoleModal"
         @remove-player="removePlayer"