fixed animations

src/App.vue

@@ -49,7 +49,7 @@ export default {
     isControlOpen: false,
     players: [],
     roles,
-    set: "BMR"
+    set: "TB"
   }),
   methods: {
     togglePublic() {

src/components/Player.vue

@@ -102,6 +102,18 @@ export default {
   padding-top: $token + 6px;
 
   .shroud {
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: 2/3 * $token;
+    cursor: pointer;
+    transform: rotateX(0deg);
+    transform-origin: top center;
+    transition: transform 200ms ease-in-out;
+    z-index: 2;
+
+    &:before {
       content: " ";
       background: url("../assets/shroud.png") center -10px no-repeat;
       background-size: auto 100%;
@@ -111,20 +123,21 @@ export default {
       height: 2/3 * $token;
       left: 50%;
       top: -30px;
-    cursor: pointer;
       opacity: 0;
       transform: perspective(400px) scale(1.5);
       transform-origin: top center;
       transition: all 200ms ease-in-out;
-    z-index: 2;
-    &:hover {
+      pointer-events: none;
+    }
+
+    &:hover:before {
       opacity: 0.5;
       top: -10px;
       transform: scale(1);
     }
   }
 
-  &.dead .shroud {
+  &.dead .shroud:before {
     opacity: 1;
     top: 0;
     transform: perspective(400px) scale(1);
@@ -135,7 +148,8 @@ export default {
 }
 
 /****** Life token *******/
-.player .life {
+.player {
+  .life {
     border-radius: 50%;
     height: $token + 6px;
     width: $token + 6px;
@@ -153,16 +167,6 @@ export default {
     margin-left: ($token + 6) / -2;
   }
 
-#townsquare.public .player {
-  .shroud {
-    transform: perspective(400px) rotateX(90deg);
-    pointer-events: none;
-  }
-
-  .life {
-    transform: perspective(400px) rotateY(0deg);
-  }
-
   &.dead {
     &.traveller {
       filter: grayscale(100%);
@@ -190,6 +194,17 @@ export default {
   }
 }
 
+#townsquare.public .player {
+  .shroud {
+    transform: perspective(400px) rotateX(90deg);
+    pointer-events: none;
+  }
+
+  .life {
+    transform: perspective(400px) rotateY(0deg);
+  }
+}
+
 /***** Role token ******/
 .circle .token {
   border-radius: 50%;

src/components/TownInfo.vue

@@ -84,7 +84,7 @@ export default {
   height: 20%;
   margin-left: -10%;
   margin-top: -5%;
-  padding: 100px 0 0;
+  padding: 50px 0 0;
   align-items: center;
   align-content: center;
   justify-content: center;

src/components/TownSquare.vue

@@ -188,8 +188,9 @@ export default {
         transform: rotate($rot * -1deg);
       }
       .life,
-      .token {
-        transition-delay: $i * 50ms;
+      .token,
+      .shroud {
+        transition-delay: ($i - 1) * 50ms;
       }
     }
     $rot: $rot + $angle;