western-world 3.0.554 → 3.0.556

package/package.json

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

package/src/defs/buble/buble.scss

@@ -1,5 +1,5 @@
 .animated {
-  .buble {
+  .use-buble {
     animation-name: buble_animation;
     animation-timing-function: linear;
     animation-iteration-count: infinite;

package/src/defs/{buy.js → buy/buy.js}

@@ -1,3 +1,5 @@
+const style = require('!!css-loader!sass-loader!./buy.scss').default;
+
 export const buy = `
 <symbol id="buy" viewBox="0 0 8192 8192">
 <style type="text/css">
@@ -8,6 +10,8 @@ export const buy = `
 	.buy_st4{fill:#07FF00;}
 	.buy_st5{fill:#FFB512;}
 	.buy_st6{fill:#FFFFFF;}
+	#buy-main-container {scale: var(--scale, 1);translate: var(--translate, 0 0)}
+	${style}
 </style>
 <g id="buy-main-container">
 	<g id="buy_hand_1">

package/src/defs/buy/buy.scss

@@ -0,0 +1,226 @@
+@import '../../scss/cells/mixins/black-background';
+
+.animated.buy {
+  @include blackBackgroundMixin;
+
+  #buy-main-container {
+    animation-name: buy_appearing_animation;
+    animation-timing-function: linear;
+    animation-delay: var(--animation-delay, 0);
+    animation-duration: var(--animation-duration, 5s);
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+  }
+
+  #buy_hand_and_hand {
+    animation-name: hand_and_hand_animation;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+    animation-delay: var(--animation-delay, 0);
+    animation-duration: 1s;
+    animation-direction: alternate;
+  }
+
+  #buy_hand_1 {
+    animation-name: hand_1_animation;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+    animation-delay: var(--animation-delay, 0);
+    animation-duration: 1s;
+    animation-direction: alternate;
+    transform-origin: -2829px 5983px;
+  }
+
+  #buy_hand_2 {
+    animation-name: hand_2_animation;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+    animation-delay: var(--animation-delay, 0);
+    animation-duration: 1s;
+    animation-direction: alternate;
+    transform-origin: 11067px 5241px;
+  }
+
+  #buy_message_1 {
+    animation-name: message_1_animation;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: 1;
+    animation-delay: var(--animation-delay, 0);
+    animation-duration: var(--animation-duration, 5s);
+    animation-direction: alternate;
+    animation-fill-mode: forwards;
+  }
+
+  #buy_message_2 {
+    animation-name: message_2_animation;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: 1;
+    animation-delay: var(--animation-delay, 0);
+    animation-duration: var(--animation-duration, 5s);
+    animation-direction: alternate;
+    animation-fill-mode: forwards;
+  }
+
+  use.use-buy.d-none {
+    display: block;
+  }
+}
+
+@keyframes buy_appearing_animation {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes hand_and_hand_animation {
+  100% {
+    translate: 0 600px;
+  }
+}
+
+@keyframes hand_1_animation {
+  100% {
+    rotate: 6deg;
+  }
+}
+
+@keyframes hand_2_animation {
+  100% {
+    rotate: -6deg;
+  }
+}
+
+@keyframes message_1_animation {
+  0% {
+    translate: -10000px 0px;
+  }
+  5% {
+    translate: 0px 50px;
+  }
+  10% {
+    translate: 0px -50px;
+  }
+  15% {
+    translate: 0px 50px;
+  }
+  20% {
+    translate: 0px -50px;
+  }
+  25% {
+    translate: 0px 50px;
+  }
+  30% {
+    translate: 0px -50px;
+  }
+  35% {
+    translate: 0px 50px;
+  }
+  40% {
+    translate: 0px -50px;
+  }
+  45% {
+    translate: 0px 50px;
+  }
+  50% {
+    translate: 0px -50px;
+  }
+  55% {
+    translate: 0px 50px;
+  }
+  60% {
+    translate: 0px -50px;
+  }
+  65% {
+    translate: 0px 50px;
+  }
+  70% {
+    translate: 0px -50px;
+  }
+  75% {
+    translate: 0px 50px;
+  }
+  80% {
+    translate: 0px -50px;
+  }
+  85% {
+    translate: 0px 50px;
+  }
+  95% {
+    translate: 10000px 0px;
+  }
+  100% {
+    translate: 10000px 0px;
+  }
+}
+
+@keyframes message_2_animation {
+  0% {
+    translate: 20000px 0px;
+  }
+  5% {
+    translate: 0px -50px;
+  }
+  10% {
+    translate: 0px 50px;
+  }
+  15% {
+    translate: 0px -50px;
+  }
+  20% {
+    translate: 0px 50px;
+  }
+  25% {
+    translate: 0px -50px;
+  }
+  30% {
+    translate: 0px 50px;
+  }
+  35% {
+    translate: 0px -50px;
+  }
+  40% {
+    translate: 0px 50px;
+  }
+  45% {
+    translate: 0px -50px;
+  }
+  50% {
+    translate: 0px 50px;
+  }
+  55% {
+    translate: 0px -50px;
+  }
+  60% {
+    translate: 0px 50px;
+  }
+  65% {
+    translate: 0px -50px;
+  }
+  70% {
+    translate: 0px 50px;
+  }
+  75% {
+    translate: 0px -50px;
+  }
+  80% {
+    translate: 0px 50px;
+  }
+  85% {
+    translate: 0px -50px;
+  }
+  95% {
+    translate: -10000px 0px;
+  }
+  100% {
+    translate: -10000px 0px;
+  }
+}

package/src/defs/clouds_63/clouds_63.js

@@ -4,6 +4,7 @@ export const clouds_63 = `
 <symbol id="clouds_63" viewBox="0 0 8192 8192">
 <style>
 	.clouds-white{fill:white;}
+	.sun{fill:#FCBC52}
 	${style}
 </style>
 <g id="clouds_layer_1">
@@ -32,7 +33,7 @@ export const clouds_63 = `
 		s-68.3,227.6-68.3,227.6s-68.3,28.4-165,28.4s-625.9,0-625.9,0s-136.6-22.8-136.6-147.9s102.4-170.7,102.4-170.7
 		S2614.6,1032.4,2688.6,1060.9z"/>
 </g>
-<circle class="st27" cx="6775.6" cy="1379.5" r="604.6"/>
+<circle class="sun" cx="6775.6" cy="1379.5" r="604.6"/>
 <g id="clouds_layer_3">
 	<path class="clouds-white" d="M7102.4,2350.9c0,0,30.2-311.4,332-311.4c301.8,0,332,255.5,332,255.5s256.5-55.9,324.4,143.7
 		c67.9,199.6-90.5,319.4-90.5,319.4s-90.5,39.9-218.8,39.9c-128.3,0-829.9,0-829.9,0s-181.1-31.9-181.1-207.6

package/src/defs/{mouse.js → mouse/mouse.js}

@@ -1,7 +1,10 @@
+const style = require('!!css-loader!sass-loader!./mouse.scss').default;
+
 export const mouse = `
 <symbol id="mouse" viewBox="0 0 8192 8192">
 	<style type="text/css">
 		.mouse_st0{fill:#FFFFFF;}
+		${style}
 	</style>
 	<g class="mouse">
 		<path id="mouse_body" d="M3873.7,3761.9c0,0-502.1,417.5-663.6,803.5c-194,463.7-388,960.9-406.2,1367.1 c-18.2,406.2,42.4,951.9,42.4,951.9s-257.9,57.1-533.6-291c-460.8-582.1-105.1-1783.9-970.1-2110 c-394.1-148.5-521.4,112.2-506.3,151.6s100,33.3,251.6,15.2s321.3,3,488.1,245.6s256.5,603.2,281.9,1012.5 c21.2,341.1,357.7,1359.7,1067.1,1359.7s3352.9,0,3480.3,0c127.3,0,182.7-90.9,162.2-209.2c-20.5-118.2-286.5-313.8-286.5-313.8 v-432c0,0,184.2,25,238.7-113.7s-34.1-304.7-131.9-443.4c-97.8-138.7-200.5-460-176.2-1242.2s66.7-1055-151.6-1212.6 C5841.9,3143.4,4732.1,3176.9,3873.7,3761.9z"/>

package/src/defs/mouse/mouse.scss

@@ -0,0 +1,88 @@
+.animated {
+  .mouse {
+    #mouse_head {
+      animation-name: mouse_head_animation;
+      animation-duration: 10s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+      transform-origin: 5277px 3349px;
+    }
+
+    #mouse_eyes {
+      animation-name: eyes_animation;
+      animation-duration: 2s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      transform-origin: 4416px 2951px;
+    }
+
+    #mouse_pupil_1,
+    #mouse_pupil_2 {
+      animation-name: pupil_animation;
+      animation-duration: 10s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+    }
+  }
+}
+
+@keyframes mouse_head_animation {
+  0% {
+    rotate: 0deg;
+  }
+  58% {
+    rotate: 0deg;
+  }
+  60% {
+    rotate: 30deg;
+  }
+  80% {
+    rotate: 30deg;
+  }
+  82% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 0deg;
+  }
+}
+
+@keyframes eyes_animation {
+  0% {
+    scale: 1 1;
+  }
+  10% {
+    scale: 1 1;
+  }
+  15% {
+    scale: 1 0;
+  }
+  20% {
+    scale: 1 1;
+  }
+
+  100% {
+    scale: 1 1;
+  }
+}
+
+@keyframes pupil_animation {
+  0% {
+    translate: 0px 0;
+  }
+  28% {
+    translate: 0px 0;
+  }
+  30% {
+    translate: 200px 0;
+  }
+  40% {
+    translate: 200px 0;
+  }
+  42% {
+    translate: 0px 0;
+  }
+  100% {
+    translate: 0px 0;
+  }
+}

package/src/scss/cells/abcde.scss

@@ -1,6 +1,5 @@
 @import './mixins/nth-child-variable';
 @import './mixins/letter-scale-animation';
-@import './mixins/buy';
 
 .animated {
   .abcde {
@@ -45,11 +44,6 @@
     #screen {
       filter: url(#tv_noise);
     }
-
-    #buy-main-container {
-      translate: 1300px 1250px;
-      scale: 0.7;
-    }
   }
 }
 
@@ -63,4 +57,3 @@
 }
 
 @include letterScaleAnimation;
-@include buyMixin;

package/src/scss/cells/ads.scss

@@ -1,5 +1,3 @@
-@import './mixins/buy';
-
 .animated {
   .ads {
     #rotating-background {
@@ -45,11 +43,6 @@
       animation-direction: alternate;
       animation-iteration-count: infinite;
     }
-
-    #buy-main-container {
-      translate: 1900px 3000px;
-      scale: 0.6;
-    }
   }
 }
 
@@ -81,5 +74,3 @@
     translate: -250px 0;
   }
 }
-
-@include buyMixin;

package/src/scss/cells/auction_started.scss

@@ -1,5 +1,3 @@
-@import './mixins/buy';
-
 .animated {
   .auction_started {
     #lower_x5F_jaw {
@@ -104,5 +102,3 @@
     transform: translateX(450px);
   }
 }
-
-@include buyMixin;

package/src/scss/cells/bamper.scss

@@ -1,6 +1,5 @@
 @import './mixins/nth-child-variable';
 @import './mixins/letter-scale-animation';
-@import './mixins/buy';
 
 .animated {
   .bamper {
@@ -22,13 +21,7 @@
         @include nth_child_variable(27);
       }
     }
-
-    #buy-main-container {
-      translate: 200px 1000px;
-      scale: 0.9;
-    }
   }
 }
 
 @include letterScaleAnimation;
-@include buyMixin;

package/src/scss/cells/banana_plantation.scss

@@ -1,12 +1,4 @@
-@import './mixins/buy';
-
 .animated {
   .banana_plantation {
-    #buy-main-container {
-      translate: 300px 1000px;
-      scale: 0.9;
-    }
   }
 }
-
-@include buyMixin;

package/src/scss/cells/bread_plantation.scss

@@ -1,6 +1,5 @@
 @import './mixins/nth-child-variable';
 @import './mixins/letter-scale-animation';
-@import './mixins/buy';
 
 .animated {
   .bread_plantation {
@@ -52,11 +51,6 @@
         @include nth_child_variable(17);
       }
     }
-
-    #buy-main-container {
-      translate: 400px 1000px;
-      scale: 0.9;
-    }
   }
 }
 
@@ -100,4 +94,3 @@
 }
 
 @include letterScaleAnimation;
-@include buyMixin;

package/src/scss/cells/broiler_digest.scss

@@ -1,5 +1,3 @@
-@import './mixins/buy';
-
 .animated {
   .broiler_digest {
     #faces,
@@ -39,11 +37,6 @@
         animation-delay: -0.3s;
       }
     }
-
-    #buy-main-container {
-      translate: 100px 1300px;
-      scale: 0.6;
-    }
   }
 }
 
@@ -58,5 +51,3 @@
     scale: 1.2;
   }
 }
-
-@include buyMixin;

package/src/scss/cells/cafe_bogema.scss

@@ -1,6 +1,5 @@
 @import './mixins/nth-child-variable';
 @import './mixins/letter-scale-animation';
-@import './mixins/buy';
 
 .animated {
   .cafe_bogema {
@@ -11,11 +10,6 @@
       animation-iteration-count: infinite;
       transform-origin: 0 4908px;
     }
-
-    #buy-main-container {
-      translate: 1700px 2500px;
-      scale: 0.6;
-    }
   }
 }
 
@@ -27,5 +21,3 @@
     transform: rotateX(25deg);
   }
 }
-
-@include buyMixin;

package/src/scss/cells/coffee.scss

@@ -1,5 +1,3 @@
-@import './mixins/buy';
-
 .animated {
   .coffee {
     #title {
@@ -14,11 +12,6 @@
       animation-direction: alternate-reverse;
       transform-origin: 4500px 5100px;
     }
-
-    #buy-main-container {
-      translate: 0px 800px;
-      scale: 0.9;
-    }
   }
 }
 
@@ -45,5 +38,3 @@
     scale: 1;
   }
 }
-
-@include buyMixin;

package/src/scss/cells/drugs_plantation.scss

@@ -1,12 +1,4 @@
-@import './mixins/buy';
-
 .animated {
   .drugs_plantation {
-    #buy-main-container {
-      translate: 300px 800px;
-      scale: 0.9;
-    }
   }
 }
-
-@include buyMixin;

package/src/scss/cells/ema.scss

@@ -1,5 +1,3 @@
-@import './mixins/buy';
-
 .animated {
   .ema {
     #car_with_person,
@@ -17,11 +15,6 @@
       animation-iteration-count: infinite;
       transform-origin: 4718px 4181px;
     }
-
-    #buy-main-container {
-      translate: 1500px 3000px;
-      scale: 0.6;
-    }
   }
 }
 
@@ -51,5 +44,3 @@
     scale: 1 1;
   }
 }
-
-@include buyMixin;

package/src/scss/cells/farm.scss

@@ -1,6 +1,5 @@
 @import './mixins/nth-child-variable';
 @import './mixins/letter-scale-animation';
-@import './mixins/buy';
 
 .animated {
   .farm {
@@ -31,5 +30,3 @@
     transform: rotate(-2deg);
   }
 }
-
-@include buyMixin;

package/src/scss/cells/hmm.scss

@@ -1,5 +1,3 @@
-@import './mixins/buy';
-
 $animation-time: 3s;
 
 .animated {
@@ -34,11 +32,6 @@ $animation-time: 3s;
       animation-timing-function: ease-in-out;
       animation-iteration-count: infinite;
     }
-
-    #buy-main-container {
-      translate: 1600px 2400px;
-      scale: 0.6;
-    }
   }
 }
 
@@ -122,5 +115,3 @@ $animation-time: 3s;
     transform: translateY(0px);
   }
 }
-
-@include buyMixin;

package/src/scss/cells/investment_objective.scss

@@ -1,5 +1,3 @@
-@import './mixins/buy';
-
 .animated {
   .investment_objective {
     #logo {
@@ -18,11 +16,6 @@
       animation-direction: alternate;
       transform-origin: center center;
     }
-
-    #buy-main-container {
-      translate: -200px 500px;
-      scale: 1;
-    }
   }
 }
 
@@ -60,5 +53,3 @@
     scale: 1.2;
   }
 }
-
-@include buyMixin;

package/src/scss/cells/mmm.scss

@@ -1,5 +1,3 @@
-@import './mixins/buy';
-
 .animated {
   .mmm {
     #movable-neck {
@@ -28,11 +26,6 @@
       animation-iteration-count: infinite;
       transform-origin: 5074px 3941px;
     }
-
-    #buy-main-container {
-      translate: 1600px 1300px;
-      scale: 0.6;
-    }
   }
 }
 
@@ -56,5 +49,3 @@
     rotate: 5deg;
   }
 }
-
-@include buyMixin;

package/src/scss/cells/official_triumph.scss

@@ -1,6 +1,5 @@
 @import './mixins/nth-child-variable';
 @import './mixins/letter-scale-animation';
-@import './mixins/buy';
 
 .animated {
   .official_triumph {
@@ -11,11 +10,6 @@
       animation-iteration-count: infinite;
       transform-origin: 0 10000px;
     }
-
-    #buy-main-container {
-      translate: 900px 1500px;
-      scale: 0.7;
-    }
   }
 }
 
@@ -36,5 +30,3 @@
     transform: rotate(-1deg);
   }
 }
-
-@include buyMixin;