NPC Flavors (#9066)

* use scss variables to chose the seasonal images instead of replacing them + added fall festival npc images

* hide spooky sparkles until needed

website/client/assets/scss/variables.scss

@@ -0,0 +1,9 @@
+// this variables are used to determine which shop npc/backgrounds should be loaded
+// possible values are: normal, fall
+// more to be added on future seasons
+
+$npc_market_flavor: "fall";
+$npc_quests_flavor: "fall";
+$npc_seasonal_flavor: "fall";
+$npc_timetravelers_flavor: "fall";
+$npc_tavern_flavor: "fall";

website/client/components/groups/tavern.vue

@@ -138,6 +138,7 @@
 
 <style lang='scss' scoped>
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/variables.scss';
 
   .chat-row {
     position: relative;
@@ -227,14 +228,14 @@
   }
 
   .grassy-meadow-backdrop {
-    background-image: url('~assets/images/tavern_backdrop_web_backgroundtile.png');
+    background-image: url('~assets/images/npc/#{$npc_tavern_flavor}/tavern_background.png');
     background-repeat: repeat-x;
     width: 100%;
     height: 246px;
   }
 
   .daniel_front {
-    background-image: url('~assets/images/tavern_backdrop_web_daniel_and_props.png');
+    background-image: url('~assets/images/npc/#{$npc_tavern_flavor}/tavern_npc.png');
     height: 246px;
     width: 471px;
     background-repeat: no-repeat;

website/client/components/shops/market/index.vue

@@ -229,6 +229,7 @@
 
 <style lang="scss">
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/variables.scss';
 
   .fill-height {
     height: 38px; // button + margin + padding
@@ -300,7 +301,7 @@
       height: 216px;
 
       .background {
-        background: url('~assets/images/shops/shop_background.png');
+        background: url('~assets/images/npc/#{$npc_market_flavor}/market_background.png');
 
         background-repeat: repeat-x;
 
@@ -328,7 +329,7 @@
         top: 0;
         width: 100%;
         height: 216px;
-        background: url('~assets/images/shops/market_banner_web_alexnpc.png');
+        background: url('~assets/images/npc/#{$npc_market_flavor}/market_banner_npc.png');
         background-repeat: no-repeat;
 
         .featured-label {

website/client/components/shops/quests/index.vue

@@ -194,6 +194,7 @@
 
 <style lang="scss">
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/variables.scss';
 
   .badge-svg {
     left: calc((100% - 18px) / 2);
@@ -274,7 +275,7 @@
       height: 216px;
 
       .background {
-        background: url('~assets/images/shops/quest_shop_banner_background.png');
+        background: url('~assets/images/npc/#{$npc_quests_flavor}/quest_shop_background.png');
 
         background-repeat: repeat-x;
 
@@ -302,7 +303,7 @@
         left: 0;
         top: 0;
         height: 100%;
-        background: url('~assets/images/shops/quest_shop__banner_web_iannpc.png');
+        background: url('~assets/images/npc/#{$npc_quests_flavor}/quest_shop_npc.png');
         background-repeat: no-repeat;
 
 

website/client/components/shops/seasonal/index.vue

@@ -103,6 +103,7 @@
 
 <style lang="scss">
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/variables.scss';
 
   .badge-svg {
     left: calc((100% - 18px) / 2);
@@ -211,7 +212,7 @@
       height: 216px;
 
       .background {
-        background: url('~assets/images/shops/seasonal_shop_closed_background.png');
+        background: url('~assets/images/npc/normal/seasonal_shop_closed_background.png');
 
         background-repeat: repeat-x;
 
@@ -228,7 +229,7 @@
         align-items: center;
       }
       .background.opened {
-        background: url('~assets/images/shops/seasonal_shop_opened_background.png');
+        background: url('~assets/images/npc/#{$npc_seasonal_flavor}/seasonal_shop_opened_background.png');
 
         background-repeat: repeat-x;
       }
@@ -244,7 +245,7 @@
         top: 0;
         width: 100%;
         height: 216px;
-        background: url('~assets/images/shops/seasonal_shop_closed_npc.png');
+        background: url('~assets/images/npc/normal/seasonal_shop_closed_npc.png');
         background-repeat: no-repeat;
 
         .featured-label {
@@ -256,7 +257,7 @@
       }
 
       .opened .npc{
-        background: url('~assets/images/shops/seasonal_shop_opened_npc.png');
+        background: url('~assets/images/npc/#{$npc_seasonal_flavor}/seasonal_shop_opened_npc.png');
         background-repeat: no-repeat;
       }
     }

website/client/components/shops/timeTravelers/index.vue

@@ -88,6 +88,7 @@
 
 <style lang="scss">
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/variables.scss';
 
   .badge-svg {
     left: calc((100% - 18px) / 2);
@@ -173,7 +174,7 @@
       height: 216px;
 
       .background {
-        background: url('~assets/images/shops/shop_background.png');
+        background: url('~assets/images/npc/#{$npc_timetravelers_flavor}/time_travelers_background.png');
 
         background-repeat: repeat-x;
 
@@ -201,11 +202,11 @@
         top: 0;
         width: 100%;
         height: 216px;
-        background: url('~assets/images/shops/time_travelers_open_banner.png');
+        background: url('~assets/images/npc/#{$npc_timetravelers_flavor}/time_travelers_open_banner.png');
         background-repeat: no-repeat;
 
         &.closed {
-          background: url('~assets/images/shops/time_travelers_closed_banner.png');
+          background: url('~assets/images/npc/normal/time_travelers_closed_banner.png');
           background-repeat: no-repeat;
         }
 

website/common/script/libs/shops-seasonal.config.js

@@ -22,7 +22,7 @@ module.exports = {
   },
 
   availableSpells: [
-    'spookySparkles',
+    // 'spookySparkles',
   ],
 
   availableQuests: [