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,29 +102,42 @@ export default {
   padding-top: $token + 6px;
 
   .shroud {
-    content: " ";
+    top: 0;
-    background: url("../assets/shroud.png") center -10px no-repeat;
+    left: 0;
-    background-size: auto 100%;
     position: absolute;
-    margin-left: -2/6 * $token;
+    width: 100%;
-    width: 2/3 * $token;
     height: 2/3 * $token;
-    left: 50%;
-    top: -30px;
     cursor: pointer;
-    opacity: 0;
+    transform: rotateX(0deg);
-    transform: perspective(400px) scale(1.5);
     transform-origin: top center;
-    transition: all 200ms ease-in-out;
+    transition: transform 200ms ease-in-out;
     z-index: 2;
-    &:hover {
+
+    &:before {
+      content: " ";
+      background: url("../assets/shroud.png") center -10px no-repeat;
+      background-size: auto 100%;
+      position: absolute;
+      margin-left: -2/6 * $token;
+      width: 2/3 * $token;
+      height: 2/3 * $token;
+      left: 50%;
+      top: -30px;
+      opacity: 0;
+      transform: perspective(400px) scale(1.5);
+      transform-origin: top center;
+      transition: all 200ms ease-in-out;
+      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,32 +148,23 @@ export default {
 }
 
 /****** Life token *******/
-.player .life {
+.player {
-  border-radius: 50%;
-  height: $token + 6px;
-  width: $token + 6px;
-  background: url("../assets/life.png") center center;
-  background-size: 100%;
-  border: 3px solid black;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  cursor: pointer;
-  transition: transform 200ms ease-in-out;
-  transform: perspective(400px) rotateY(180deg);
-  backface-visibility: hidden;
-  position: absolute;
-  left: 50%;
-  top: 0;
-  margin-left: ($token + 6) / -2;
-}
-
-#townsquare.public .player {
-  .shroud {
-    transform: perspective(400px) rotateX(90deg);
-    pointer-events: none;
-  }
-
   .life {
-    transform: perspective(400px) rotateY(0deg);
+    border-radius: 50%;
+    height: $token + 6px;
+    width: $token + 6px;
+    background: url("../assets/life.png") center center;
+    background-size: 100%;
+    border: 3px solid black;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    transition: transform 200ms ease-in-out;
+    transform: perspective(400px) rotateY(180deg);
+    backface-visibility: hidden;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    margin-left: ($token + 6) / -2;
   }
 
   &.dead {
@@ -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 {
+      .token,
-        transition-delay: $i * 50ms;
+      .shroud {
+        transition-delay: ($i - 1) * 50ms;
       }
     }
     $rot: $rot + $angle;