western-world 3.0.299 → 3.0.301

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "western-world",
-  "version": "3.0.299",
+  "version": "3.0.301",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/defs/army.js

@@ -1,3 +1,5 @@
+import { boom, boomAnimation } from './boom';
+
 export const army = `
 <style>
     .st18{fill:#555}
@@ -8,10 +10,13 @@ export const army = `
     .st23{opacity:0.3;}
     .st24{fill:#1D1D1B;}
     .st25{fill:none;stroke:#020202;stroke-width:20;stroke-miterlimit:10;}
+    .army-background {display: none;}
     #army-container {display: none;}
-    #army-background-with-stroke {stroke-width:500;stroke:white;stroke-miterlimit:10;}
+    #army-background-with-stroke {stroke-width:500;stroke:white;stroke-miterlimit:10}
+    ${boomAnimation}
 </style>
 <symbol id="army" viewBox="0 0 8192 8192">
+    <rect class="army-background" x="-100" y="-100" width="8292" height="8292"></rect>
     <g id="army-container">
         <path id="army-background-with-stroke" class="st18" d="M5125,4945.6c0.4,2.2,0.7,4.3,1,6.5c0,0,140.9-153.5,142.8-256.7c0,0-2.3-3.2-6.6-8.7
             c1.1-8.7,2-17.6,2.5-26.7c9.5-162.1-7-205.3-138.8-283.9c0-0.1,0-0.2,0-0.2c43.2,25.9,97.3,61.6,112.4,86.4
@@ -30,24 +35,7 @@ export const army = `
             c-51.2-340.6-325.3-334-325.3-334c-25-80.7,32.3-111.7,32.3-111.7c374,42.1,391.4,388,391.4,388
             C4064.1,3351.1,3994.6,3345.8,3994.6,3345.8z M5064.7,4807.7c0,0-208-541.1-893.6-541.1c-586.6,0-782.1,354.7-782.1,354.7
             s141-442.3,768.5-451.4S5026.8,4589.5,5064.7,4807.7z"/>
-        <path id="army-background" class="st18" d="M5125,4945.6c0.4,2.2,0.7,4.3,1,6.5c0,0,140.9-153.5,142.8-256.7c0,0-2.3-3.2-6.6-8.7
-            c1.1-8.7,2-17.6,2.5-26.7c9.5-162.1-7-205.3-138.8-283.9c0-0.1,0-0.2,0-0.2c43.2,25.9,97.3,61.6,112.4,86.4
-            c-0.6-3.1-84.2-403.3-468.5-653.4c-298.2-194-434.5-182.3-509.9-154.8c10.7-13.5,9.6-42.6-26.8-94.6
-            c-74.5-106.3,156.3-693.4-273.5-931.8c-429.8-238.3-1058.7-39.4-1058.7-39.4l479,346.8c45.5-27.9,103-28.9,103-28.9l36.2,109.9
-            c-145.7,6.1-259.7,152.6-259.7,152.6c-22.7-42.1-20.5-103.7-20.5-103.7c-34.1,48.9-90.9,171.7-169.1,399.5
-            c-77.2,225.1-116.4,550.1-117.4,557.6c9.4-61.6,109.2-172.2,157-373.5l46.6,13.9c-83.6,217.7-88.1,446-88.1,446
-            c81.6-0.1,163-21.8,238.9-54.1l1.4,4.9c0,0-5.5,35.2-6.3,81c-69,86.8-106.3,208.9-1.7,360.5c0,0-137.5,182.9-33.5,346.1h-259.9
-            c-9.9-5.8-16.6-7.9-16.6-7.9h-95.7c-14.9-16.9-55.1-52.8-107.4-20.7c0,0-30.1-16.6-77.8-24.6l2.8-29.2l178.1-30.3
-            c0,0,46.2,44,68.2-9.1c22-53.1-56.8-60.6-70.5-26.5l-146.3,0.8l25.8-94l-5.6-8.7l35.9-2180.9l-130.2-233.4l-129,236.5l16.6,2191.1
-            l0.1,16.5l3.6-4l23.6,78.5l-150.8-0.8c0,0-27.1-44.2-61.4-2.3c-27.3,33.4,28.8,89.4,62.9,43.2l173.6,22.7l1.3,30.3
-            c-26.3,4.6-54.3,13.1-83.1,27.3c-86.4,42.4-45.5,118.2-44,134.9c1.5,16.7-33.4,42.5-25.8,83.4c7.6,40.9,45.5,39.4,36.4,68.2
-            c-9.1,28.8-9.1,89.4,28.8,128.8c33.8,35.2,51.9,46.2,108.1,48.2l4.6,109.5c-51.2,23.8-43.7,118.2,25.9,118.2
-            c76.9,0,78.1-109.3,13.1-122.3l9.6-104.6c49,1.1,82.6,2.5,105.9-22.1h189.1c0,0,5.3-2.4,13.7-7.8l240.8,5.8
-            c40.2,460.5,362.6,895.8,963.3,895.8c706.5,0,1030.6-652.8,923.7-1205.1C5120.4,4950.1,5122.7,4947.9,5125,4945.6z M3994.6,3345.8
-            c-51.2-340.6-325.3-334-325.3-334c-25-80.7,32.3-111.7,32.3-111.7c374,42.1,391.4,388,391.4,388
-            C4064.1,3351.1,3994.6,3345.8,3994.6,3345.8z M5064.7,4807.7c0,0-208-541.1-893.6-541.1c-586.6,0-782.1,354.7-782.1,354.7
-            s141-442.3,768.5-451.4S5026.8,4589.5,5064.7,4807.7z"/>
-        <g id="army-real">
+        <g id="army">
             <path d="M3067.6,3636l131.9,39.4l335,1182.3l-829.9-13.6l7.6-79.6l178.1-30.3c0,0,46.2,44,68.2-9.1c22-53.1-56.8-60.6-70.5-26.5
                 l-146.3,0.8l25.8-94l-102.3-159.8l-110,164.4l27.4,91l-150.8-0.8c0,0-27.1-44.2-61.4-2.3c-27.3,33.3,28.8,89.4,62.9,43.2
                 l173.6,22.7l28.4,681.7h31.8l21.6-236.1l2294.9-113.7c0,0,454.6-798.9-201.1-1229.5c-565.1-371.1-799.3-74.1-799.3-74.1
@@ -123,6 +111,7 @@ export const army = `
             </g>
         </g>
     </g>
+    ${boom}
 </symbol>
 
 `;

package/src/defs/boom.js

@@ -0,0 +1,12 @@
+export const boom = `
+    <g class="boom" stroke-width="2" stroke-linecap="round">
+      <line x1="37" y1="37" y2="0" x2="37" fill="none" stroke-miterlimit="10" />
+      <line x1="37" y1="37" x2="63.16" y2="10.84" fill="none" stroke-miterlimit="10" />
+      <line x1="37" y1="37" x2="74" y2="37" fill="none" stroke-miterlimit="10" />
+      <line x1="37" y1="37" x2="63.16" y2="63.16" fill="none" stroke-miterlimit="10" />
+      <line x1="37" y1="37" x2="37" y2="74" fill="none" stroke-miterlimit="10" />
+      <line x1="37" y1="37" x2="10.84" y2="63.16" fill="none" stroke-miterlimit="10" />
+      <line x1="37" x2="0" y1="37" y2="37" fill="none" stroke-miterlimit="10" />
+      <line x1="37" y1="37" x2="10.84" y2="10.84" fill="none" stroke-miterlimit="10" />
+    </g>
+`;

package/src/scss/cells/mixins/army.scss

@@ -1,21 +1,37 @@
-@import './earthquake';
+@import './boom';
+
+$animation-army-background-delay: 3s;
+$army-appearing-delay-after-background: 0.5s;
+$army-appearing-duration: 3s;
 
 @mixin armyMixin {
   .animated.army {
     #main-container {
       animation-name: main_earthquake;
-      animation-delay: 3.2s;
+      animation-delay: $animation-army-background-delay + $army-appearing-delay-after-background +
+        $army-appearing-duration / 20;
       animation-duration: 0.2s;
       animation-timing-function: linear;
       animation-iteration-count: 1;
       transform-origin: center center;
     }
 
+    .army-background {
+      display: block;
+      fill: black;
+      opacity: 0;
+      animation-name: army_bckground_animation;
+      animation-delay: $animation-army-background-delay;
+      animation-duration: $army-appearing-duration + 1.5s;
+      animation-timing-function: linear;
+      animation-iteration-count: 1;
+    }
+
     #army-container {
       display: block;
       animation-name: army_animation;
-      animation-delay: 3s;
-      animation-duration: 3s;
+      animation-delay: $animation-army-background-delay + $army-appearing-delay-after-background;
+      animation-duration: $army-appearing-duration;
       animation-timing-function: linear;
       animation-iteration-count: 1;
       animation-fill-mode: forwards;
@@ -24,58 +40,75 @@
       transform-origin: center center;
     }
 
-    #army-real {
-      animation-name: army_real_animation;
-      animation-delay: 6s;
-      animation-duration: 1s;
-      animation-timing-function: linear;
-      animation-iteration-count: 1;
-      animation-fill-mode: forwards;
+    @include boomMixin;
+
+    .boom line {
+      translate: 25px 30px;
+      animation-delay: $animation-army-background-delay + $army-appearing-delay-after-background +
+        $army-appearing-duration;
     }
   }
 
-  @keyframes army_animation {
+  @include boomAnimationMixin;
+
+  @keyframes main_earthquake {
+    0% {
+      transform: scale(0.9);
+    }
+    40% {
+      transform: scale(1.1);
+    }
+    65% {
+      transform: scale(0.95);
+    }
+    80% {
+      transform: scale(1.05);
+    }
+    90% {
+      transform: scale(0.98);
+    }
+    96% {
+      transform: scale(1.02);
+    }
+    99% {
+      transform: scale(0.99);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes army_bckground_animation {
     0% {
-      scale: 10;
       opacity: 0;
-      translate: 0px 0px;
     }
     5% {
-      scale: 1;
-      opacity: 1;
-      translate: 0px 0px;
+      opacity: 0.5;
     }
-    50% {
-      scale: 1;
-      opacity: 1;
-      translate: 0px 0px;
-    }
-    70% {
-      scale: 0.3;
-      opacity: 1;
-      translate: -1500px -2700px;
+    95% {
+      opacity: 0.5;
     }
     100% {
-      scale: 0.3;
-      opacity: 1;
-      translate: -1500px -2700px;
+      opacity: 0;
     }
   }
 
-  @keyframes army_real_animation {
+  @keyframes army_animation {
     0% {
+      scale: 10;
+      opacity: 0;
+    }
+    5% {
+      scale: 1;
       opacity: 1;
-      filter: brightness(1);
     }
-    50% {
+    95% {
+      scale: 1;
       opacity: 1;
-      filter: brightness(3);
     }
     100% {
+      scale: 1.1;
       opacity: 0;
-      filter: brightness(3);
     }
   }
 }
-
-@include mainEarthquakeAnimationMixin;

package/src/scss/cells/mixins/boom.scss

@@ -0,0 +1,37 @@
+@mixin boomMixin {
+  .boom {
+    scale: 60;
+
+    line {
+      stroke: white;
+      opacity: 0;
+      animation-name: linesAnimation;
+      animation-duration: 1s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinity;
+    }
+  }
+}
+
+@mixin boomAnimationMixin {
+  @keyframes linesAnimation {
+    0% {
+      opacity: 1;
+      stroke-dashoffset: -12;
+      stroke-dasharray: 1px 48px;
+    }
+    40% {
+      opacity: 1;
+      stroke-dashoffset: -27;
+      stroke-dasharray: 7px 48px;
+    }
+    99% {
+      opacity: 1;
+      stroke-dashoffset: -38;
+      stroke-dasharray: 0px 48px;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/src/scss/cells/mutiny_on_the_ship.scss

@@ -17,6 +17,10 @@
         @include nth_child_variable(14);
       }
     }
+
+    #army-container {
+      translate: 400px 0px;
+    }
   }
 }
 

package/src/svg/cells/mutiny_on_the_ship.svg

@@ -455,6 +455,6 @@
 			"/>
 		<path class="st17" d="M3029.2,4015.9c15,0,200.7,24,200.7,24l-139.4-100.7L3029.2,4015.9z"/>
 	</g>
-	<use xlink:href="#army"></use>
+	<use id="use-army" xlink:href="#army"></use>
 <g>
 </svg>