screenshot fixes

src/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <div id="app" @keyup="keyup" tabindex="-1">
+  <div
+    id="app"
+    @keyup="keyup"
+    tabindex="-1"
+    v-bind:class="{ screenshot: isScreenshot }"
+  >
     <TownInfo :players="players" :edition="edition"></TownInfo>
     <TownSquare
       :is-public="isPublic"
@@ -37,7 +42,8 @@
 
     <Screenshot
       ref="screenshot"
-      @success="isScreenshotSuccess = true"
+      @success="onScreenshot(true)"
+      @error="onScreenshot(false)"
     ></Screenshot>
 
     <div class="controls">
@@ -103,6 +109,7 @@ export default {
       isEditionModalOpen: false,
       isRoleModalOpen: false,
       isScreenshotSuccess: false,
+      isScreenshot: false,
       players: [],
       roles: this.getRolesByEdition(),
       edition: "tb",
@@ -113,8 +120,13 @@ export default {
     takeScreenshot(dimensions = {}) {
       this.isControlOpen = false;
       this.isScreenshotSuccess = false;
+      this.isScreenshot = true;
       this.$refs.screenshot.capture(dimensions);
     },
+    onScreenshot(success = false) {
+      this.isScreenshotSuccess = success;
+      this.isScreenshot = false;
+    },
     togglePublic() {
       this.isPublic = !this.isPublic;
       this.isControlOpen = false;

src/components/Player.vue

@@ -59,6 +59,10 @@ export default {
     isPublic: {
       type: Boolean,
       required: true
+    },
+    zoom: {
+      type: Number,
+      required: true
     }
   },
   data() {
@@ -67,7 +71,12 @@ export default {
   methods: {
     takeScreenshot() {
       const { width, height, x, y } = this.$refs.player.getBoundingClientRect();
-      this.$emit("screenshot", { width, height, x, y });
+      this.$emit("screenshot", {
+        width: width * this.zoom,
+        height: height * this.zoom,
+        x: x * this.zoom,
+        y: y * this.zoom
+      });
     },
     toggleStatus() {
       if (this.isPublic) {
@@ -147,9 +156,6 @@ export default {
     top: 0;
     transform: perspective(400px) scale(1);
   }
-  &.dead > .name {
-    opacity: 0.5;
-  }
 }
 
 /****** Life token *******/
@@ -213,9 +219,8 @@ export default {
 /***** Role token ******/
 .player .token {
   position: absolute;
-  left: 50%;
+  left: 0;
   top: 0;
-  margin-left: ($token + 6) / -2;
   height: $token + 6px;
   width: $token + 6px;
   transition: transform 200ms ease-in-out;
@@ -235,15 +240,29 @@ export default {
     drop-shadow(0 0 1px rgba(0, 0, 0, 1)) drop-shadow(0 0 1px rgba(0, 0, 0, 1));
   cursor: pointer;
   white-space: nowrap;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
   span.screenshot,
   span.remove {
     display: none;
-    margin: 0 10px;
+    margin: 0 5px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    #app.screenshot & {
+      display: none;
+    }
+  }
+  span.name {
+    flex-shrink: 1;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
   &:hover {
     color: red;
     span {
-      display: inline-block;
+      display: block;
       color: white;
       &:hover {
         color: red;
@@ -252,6 +271,10 @@ export default {
   }
 }
 
+.player.dead > .name {
+  opacity: 0.5;
+}
+
 /***** Ability text *****/
 #townsquare.public .ability {
   display: none;

src/components/Token.vue

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

src/components/TownSquare.vue

@@ -12,6 +12,7 @@
         :player="player"
         :roles="roles"
         :is-public="isPublic"
+        :zoom="zoom"
         @add-reminder="openReminderModal"
         @set-role="openRoleModal"
         @remove-player="removePlayer"
@@ -231,6 +232,19 @@ export default {
       .shroud {
         transition-delay: ($i - 1) * 50ms;
       }
+
+      // move reminders closer to the sides of the circle
+      $q: $item-count / 4;
+      $x: $i - 1;
+      @if $x < $q or ($x >= $item-count / 2 and $x < $q * 3) {
+        .player {
+          margin-bottom: -10px + 20px * (1 - ($x % $q / $q));
+        }
+      } @else {
+        .player {
+          margin-bottom: -10px + 20px * ($x % $q / $q);
+        }
+      }
     }
     $rot: $rot + $angle;
   }
@@ -262,6 +276,11 @@ export default {
   transform: scale(1);
   opacity: 1;
   transition: all 200ms ease-in-out;
+
+  #townsquare.public & {
+    opacity: 0;
+    transform: scale(0.1);
+  }
   > svg {
     position: absolute;
     top: 10px;
@@ -270,6 +289,9 @@ export default {
     &:hover {
       color: red;
     }
+    #app.screenshot & {
+      display: none;
+    }
   }
   h3 {
     margin-top: 5px;
@@ -282,12 +304,6 @@ export default {
     font-size: 18px;
   }
 }
-
-#townsquare.public .bluffs {
-  opacity: 0;
-  transform: scale(0.1);
-}
-
 /***** Role token modal ******/
 ul.tokens li {
   border-radius: 50%;

src/vars.scss

@@ -110,4 +110,3 @@ $roles:
   'widow',
   'leviathan'
 ;
-