Merge branch 'animations-test' into develop

client/assets/scss/anims.scss

@@ -1,59 +0,0 @@
-
-.anim-container {
-    position: absolute;
-    width: 100%;
-    min-height: 100%;
-    transform-style: preserve-3d;
-}
-
-.blast-cast {
-    position: absolute;
-    background: black;
-    opacity: .7;
-    border-radius: 50%;
-}
-
-@for $i from 1 through 100 {
-    @keyframes blast-cast-#{$i} {
-      100% {
-        transform: translate3d(-3em +random(200)/200, 0, 0);
-      }
-    }
-}
-
-@for $i from 1 through 100 {
-  .blast-cast:nth-child(#{$i}){
-     $size: random(30)+px;
-     height: $size;
-     width: $size;
-     transform: translate3d( (random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
-     background: #15f4ee;
-     animation: blast-cast-#{$i} 0.7s;
-  }
-}
-
-.blast-hit {
-    position: absolute;
-    background: black;
-    opacity: .7;
-    border-radius: 50%;
-}
-
-@for $i from 1 through 100 {
-    @keyframes blast-hit-#{$i} {
-      100% {
-            transform: translate3d((random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
-      }
-    }
-}
-
-@for $i from 1 through 100 {
-    .blast-hit:nth-child(#{$i}){
-        $size: random(30)+px;
-        height: $size;
-        width: $size;
-        transform: translate3d(-3em +random(200)/200, 0, 0);
-        animation: blast-hit-#{$i} 0.7s infinite;
-        background: #15f4ee;
-     }
-}

client/assets/styles/game.css

@@ -29,10 +29,13 @@
 }
 
 .opponent .combat-text {
-    left: 40%;
     top: 75%;
 }
 
+.opponent .combat-anim {
+    top: 25%;
+}
+
 .opponent .game-construct {
     align-items: flex-start;
     grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
@@ -89,11 +92,11 @@
         max-height: 10em;
     }
 }
-
+/*
 .resolving #targeting {
     opacity: 0;
 }
-
+*/
 .game-construct .name {
     width: 100%;
     margin-bottom: 0.25em;
@@ -200,12 +203,27 @@
 }
 
 .combat-text {
-    fill: whitesmoke;
     font-size: 2em;
     font-family: 'Jura';
     position: absolute;
-    top: 50%;
-    left: 50%;
+    object-fit: contain;
+    top: 15%;
+}
+
+.combat-text svg {
+    height: 7em;
+}
+
+.combat-anim {
+    font-size: 2em;
+    font-family: 'Jura';
+    position: absolute;
+    object-fit: contain;
+    top: 15%;
+}
+
+.combat-anim svg {
+    height: 7em;
 }
 
 .game-construct.active-skill {

client/assets/styles/styles.css

@@ -178,10 +178,14 @@ a {
 svg {
     fill: none;
     stroke: whitesmoke;
-    stroke-width: 0;
+    stroke-width: 5px;
     height: 2em;
 }
 
+.skill-animation {
+    height: 5em;
+}
+
 .team .avatar {
     object-fit: contain;
     max-width: 100%;