[WIP] new client - seasonal-shop (#9018)

* extract seasonal-shop config - use summer season items (to work on)

* add suggested border to shopItems

* refactor getOfficialPinnedItems (now includes the seasonal gear)

* refactor shops.getSeasonalShop - add featured items to result - add the set to special equipment items

* feat(content): Fall 2017 seasonal gear
Also adds set keys for all prior seasonal gear.

* show item limited time (buyModal & shopItem)

* select seasonal fall sets

* WIP(seasonal-shop): placeholder Fall 2017 items

* fix lint

* sprites

* styling + fix purchase of seasonal spells

* compile sprites

* fixes: check isPinned with officialItems

* enable purchase of seasonal items for testing

* fix shop apis

* add featuredItems to market

* quest shop: add featuredItems to api

* tiem travelers shop: add featuredItems to api

* fix gear types filter

* feat(content): Fall 2017 compleat

* chore(sprites): compile

* show opened shop state (npc+background)

* add opened seasonal npc

* current seasonal users class set = purchase by gold - lock other sets of the current season

* hide event badge in seasonal shop - dot only for suggested items - cursor: pointer on shopItems

* refresh rewards column list (seasonal gear won't refresh it on purchase)

* fix duplicate seasonal gear -> remove special items from the old reward gear (which is used to reset the pinned gears)

* every current season gear is purchased by gold - prevent buyModal on locked items

* use the current event date range

* list seasonal sets by event date

* use custom method instead of updateStore to list the pinnable gear

* change daterange to 10-31

* fix start quest modal from items - disable invite quest button if a quest is already active

* toggle pin in buy-dialogs

* check if the item is not undefined/null - renamed the watch function

website/assets/sprites/dist/spritesmith-main-9.css

@@ -1,492 +1,696 @@
+.weapon_special_2 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -637px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_3 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1027px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_bardInstrument {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -728px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_fencingFoil {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -910px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_lunarScythe {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1001px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_mammothRiderSpear {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1092px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_nomadsScimitar {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1274px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_pageBanner {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1365px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_roguishRainbowMessage {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1456px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_skeletonKey {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1547px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_tachi {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -481px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_taskwoodsLantern {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -572px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_tridentOfCrashingTides {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -663px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_0 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -754px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_1 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -845px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_2 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -936px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_3 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1118px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_4 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1300px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_5 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1391px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_6 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1482px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_0 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1573px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_1 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px 0px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_2 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -91px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_3 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -182px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_4 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -273px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_5 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -364px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_6 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -455px;
+  width: 90px;
+  height: 90px;
+}
 .Pet_Currency_Gem {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1163px -1477px;
+  background-position: -781px -1664px;
   width: 68px;
   height: 68px;
 }
 .Pet_Currency_Gem1x {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1908px -422px;
+  background-position: -1840px -73px;
   width: 15px;
   height: 13px;
 }
 .Pet_Currency_Gem2x {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1893px -1238px;
+  background-position: -1803px -1084px;
   width: 30px;
   height: 26px;
 }
 .PixelPaw-Gold {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1876px -1317px;
+  background-position: -1803px -170px;
   width: 51px;
   height: 51px;
 }
 .PixelPaw {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1878px -1397px;
+  background-position: -1803px -222px;
   width: 51px;
   height: 51px;
 }
 .PixelPaw002 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1876px -1265px;
+  background-position: -1803px -274px;
   width: 51px;
   height: 51px;
 }
+.avatar_floral_healer {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1374px -1299px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_rogue {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1174px -1299px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_warrior {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -381px -1480px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_wizard {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1274px -1299px;
+  width: 99px;
+  height: 99px;
+}
+.empty_bottles {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1402px -1664px;
+  width: 64px;
+  height: 54px;
+}
+.ghost {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1183px;
+  width: 90px;
+  height: 90px;
+}
 .inventory_present {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -514px -1546px;
+  background-position: -1803px -430px;
+  width: 48px;
+  height: 51px;
+}
+.inventory_present_01 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1803px -326px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_02 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -465px -1546px;
+  background-position: -1803px -378px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_03 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -612px -1546px;
+  background-position: -1803px -950px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_04 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1878px -1449px;
+  background-position: -1803px -898px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_05 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -759px -1546px;
+  background-position: -1803px -846px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_06 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -906px -1546px;
+  background-position: -1803px -794px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_07 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -955px -1546px;
+  background-position: -1803px -742px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_08 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -857px -1546px;
+  background-position: -1803px -690px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_09 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -808px -1546px;
+  background-position: -1803px -638px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_10 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -710px -1546px;
+  background-position: -1803px -586px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_11 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -661px -1546px;
+  background-position: -1803px -534px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_12 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -563px -1546px;
+  background-position: -1803px -482px;
   width: 48px;
   height: 51px;
 }
 .inventory_special_birthday {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -956px -1477px;
+  background-position: -367px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_congrats {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1232px -1477px;
+  background-position: -436px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_fortify {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1646px -1477px;
+  background-position: -505px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_getwell {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1577px -1477px;
+  background-position: -643px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_goodluck {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1508px -1477px;
+  background-position: -712px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_greeting {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1439px -1477px;
+  background-position: -91px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_nye {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1370px -1477px;
+  background-position: -850px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_opaquePotion {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1301px -1477px;
+  background-position: -160px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_seafoam {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1094px -1477px;
+  background-position: -1333px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_shinySeed {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1025px -1477px;
+  background-position: -1264px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_snowball {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -887px -1477px;
+  background-position: -1195px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_spookySparkles {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -818px -1477px;
+  background-position: -1126px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_thankyou {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -680px -1477px;
+  background-position: -1057px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_trinket {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -542px -1477px;
+  background-position: -988px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_valentine {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -473px -1477px;
+  background-position: -919px -1664px;
   width: 68px;
   height: 68px;
 }
 .knockout {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1112px -1326px;
+  background-position: -1537px -1397px;
   width: 120px;
   height: 47px;
 }
 .pet_key {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -404px -1477px;
+  background-position: -574px -1664px;
   width: 68px;
   height: 68px;
 }
 .rebirth_orb {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -611px -1477px;
+  background-position: -298px -1664px;
   width: 68px;
   height: 68px;
 }
 .seafoam_star {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1429px -1112px;
+  background-position: 0px -1664px;
   width: 90px;
   height: 90px;
 }
 .shop_armoire {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -749px -1477px;
+  background-position: -229px -1664px;
   width: 68px;
   height: 68px;
 }
 .snowman {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -930px -1326px;
+  background-position: -1209px -1480px;
   width: 90px;
   height: 90px;
 }
 .zzz {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1470px -1203px;
+  background-position: -1803px -1043px;
   width: 40px;
   height: 40px;
 }
 .zzz_light {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1429px -1203px;
+  background-position: -1803px -1002px;
   width: 40px;
   height: 40px;
 }
 .npc_alex {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1002px;
+  background-position: -1537px -724px;
   width: 162px;
   height: 138px;
 }
 .npc_aprilFool {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1397px;
+  background-position: -1379px -1112px;
   width: 120px;
   height: 120px;
 }
 .npc_bailey {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -404px -1546px;
+  background-position: -1803px 0px;
   width: 60px;
   height: 72px;
 }
 .npc_daniel {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1141px;
+  background-position: -1537px -1141px;
   width: 135px;
   height: 123px;
 }
 .npc_ian {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1353px -1112px;
+  background-position: -1013px -1299px;
   width: 75px;
   height: 135px;
 }
 .npc_justin {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1518px;
+  background-position: -1089px -1299px;
   width: 84px;
   height: 120px;
 }
 .npc_justin_head {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1893px -1141px;
+  background-position: -1803px -73px;
   width: 36px;
   height: 96px;
 }
 .npc_matt {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -251px -1326px;
+  background-position: -817px -1299px;
   width: 195px;
   height: 138px;
 }
 .npc_sabe {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -839px -1326px;
+  background-position: -1712px -546px;
   width: 90px;
   height: 90px;
 }
 .npc_timetravelers {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -447px -1326px;
+  background-position: -425px -1299px;
   width: 195px;
   height: 138px;
 }
 .npc_timetravelers_active {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -643px -1326px;
+  background-position: -621px -1299px;
   width: 195px;
   height: 138px;
 }
 .npc_tyler {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1021px -1326px;
+  background-position: -1712px -819px;
   width: 90px;
   height: 90px;
 }
 .npc_vicky {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1842px -1518px;
+  background-position: -1474px -1299px;
   width: 59px;
   height: 82px;
 }
 .seasonalshop_closed {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -724px;
+  background-position: -1537px -863px;
   width: 162px;
   height: 138px;
 }
 .seasonalshop_open {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -863px;
+  background-position: -1537px -1002px;
   width: 162px;
   height: 138px;
 }
 .quest_armadillo {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px -660px;
+  background-position: -440px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_atom1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -1326px;
+  background-position: -877px -1112px;
   width: 250px;
   height: 150px;
 }
 .quest_atom2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -1176px;
+  background-position: -217px -1299px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -817px;
+  background-position: 0px -1299px;
   width: 216px;
   height: 180px;
 }
 .quest_axolotl {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px -220px;
+  background-position: -660px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_basilist {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -214px -1477px;
+  background-position: -191px -1480px;
   width: 189px;
   height: 141px;
 }
 .quest_beetle {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -428px;
+  background-position: -1320px -862px;
   width: 204px;
   height: 201px;
 }
 .quest_bunny {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -630px;
+  background-position: -1102px -892px;
   width: 210px;
   height: 186px;
 }
 .quest_butterfly {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -440px -232px;
+  background-position: 0px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_cheetah {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -660px -220px;
+  background-position: -220px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_cow {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px 0px;
+  background-position: -1537px 0px;
   width: 174px;
   height: 213px;
 }
 .quest_dilatory {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -672px;
+  background-position: -660px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatoryDistress1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -217px;
+  background-position: -1320px -651px;
   width: 210px;
   height: 210px;
 }
 .quest_dilatoryDistress2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -422px;
+  background-position: -1537px -573px;
   width: 150px;
   height: 150px;
 }
 .quest_dilatoryDistress3 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -440px -892px;
+  background-position: 0px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatory_derby {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -220px -452px;
+  background-position: -440px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_dustbunnies {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px 0px;
+  background-position: -220px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_egg {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -214px;
+  background-position: -1537px -214px;
   width: 165px;
   height: 207px;
 }
 .quest_evilsanta {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1265px;
+  background-position: -1537px -1265px;
   width: 118px;
   height: 131px;
 }
 .quest_evilsanta2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px -892px;
+  background-position: 0px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_falcon {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -880px -892px;
+  background-position: -880px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_ferret {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -660px -892px;
+  background-position: -220px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_frog {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -1112px;
+  background-position: -880px -892px;
   width: 221px;
   height: 213px;
 }
 .quest_ghost_stag {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -220px -892px;
+  background-position: -1100px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -892px;
+  background-position: -1100px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1102px -1112px;
+  background-position: -1128px -1112px;
   width: 250px;
   height: 150px;
 }
@@ -498,55 +702,55 @@
 }
 .quest_gryphon {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -885px -1112px;
+  background-position: -660px -1112px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px -440px;
+  background-position: -220px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px -220px;
+  background-position: 0px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -442px -1112px;
+  background-position: 0px -1112px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px 0px;
+  background-position: -1100px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -880px -672px;
+  background-position: -1100px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -998px;
+  background-position: -443px -1112px;
   width: 216px;
   height: 177px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -573px;
+  background-position: -1537px -422px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -220px 0px;
+  background-position: -660px -672px;
   width: 219px;
   height: 219px;
 }
@@ -564,7 +768,7 @@
 }
 .quest_moon1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px -440px;
+  background-position: -1320px 0px;
   width: 216px;
   height: 216px;
 }
@@ -600,79 +804,37 @@
 }
 .quest_nudibranch {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px -657px;
+  background-position: -1320px -217px;
   width: 216px;
   height: 216px;
 }
 .quest_octopus {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -662px -1112px;
+  background-position: -220px -1112px;
   width: 222px;
   height: 177px;
 }
 .quest_owl {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -452px;
+  background-position: -660px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_peacock {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px -874px;
+  background-position: -1320px -434px;
   width: 216px;
   height: 216px;
 }
 .quest_penguin {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -1652px;
+  background-position: 0px -1480px;
   width: 190px;
   height: 183px;
 }
 .quest_rat {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -660px 0px;
+  background-position: -440px -892px;
   width: 219px;
   height: 219px;
 }
-.quest_rock {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px 0px;
-  width: 216px;
-  height: 216px;
-}
-.quest_rooster {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -1477px;
-  width: 213px;
-  height: 174px;
-}
-.quest_sabretooth {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -220px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_slime {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -440px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sloth {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -660px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_snail {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -222px -1112px;
-  width: 219px;
-  height: 213px;
-}

website/client/app.vue

@@ -10,7 +10,7 @@
         app-header
         buyModal(
           :item="selectedItemToBuy",
-          :withPin="false",
+          :withPin="true",
           @change="resetItemToBuy($event)",
           @buyPressed="customPurchase($event)",
           :genericPurchase="genericPurchase(selectedItemToBuy)",

website/client/assets/css/sprites/spritesmith-main-9.css

@@ -1,492 +1,696 @@
+.weapon_special_2 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -637px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_3 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1027px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_bardInstrument {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -728px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_fencingFoil {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -910px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_lunarScythe {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1001px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_mammothRiderSpear {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1092px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_nomadsScimitar {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1274px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_pageBanner {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1365px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_roguishRainbowMessage {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1456px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_skeletonKey {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1547px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_tachi {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -481px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_taskwoodsLantern {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -572px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_special_tridentOfCrashingTides {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -663px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_0 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -754px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_1 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -845px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_2 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -936px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_3 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1118px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_4 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1300px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_5 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1391px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_6 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1482px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_0 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1573px -1480px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_1 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px 0px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_2 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -91px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_3 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -182px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_4 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -273px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_5 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -364px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_6 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -455px;
+  width: 90px;
+  height: 90px;
+}
 .Pet_Currency_Gem {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1163px -1477px;
+  background-position: -781px -1664px;
   width: 68px;
   height: 68px;
 }
 .Pet_Currency_Gem1x {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1908px -422px;
+  background-position: -1840px -73px;
   width: 15px;
   height: 13px;
 }
 .Pet_Currency_Gem2x {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1893px -1238px;
+  background-position: -1803px -1084px;
   width: 30px;
   height: 26px;
 }
 .PixelPaw-Gold {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1876px -1317px;
+  background-position: -1803px -170px;
   width: 51px;
   height: 51px;
 }
 .PixelPaw {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1878px -1397px;
+  background-position: -1803px -222px;
   width: 51px;
   height: 51px;
 }
 .PixelPaw002 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1876px -1265px;
+  background-position: -1803px -274px;
   width: 51px;
   height: 51px;
 }
+.avatar_floral_healer {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1374px -1299px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_rogue {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1174px -1299px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_warrior {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -381px -1480px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_wizard {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1274px -1299px;
+  width: 99px;
+  height: 99px;
+}
+.empty_bottles {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1402px -1664px;
+  width: 64px;
+  height: 54px;
+}
+.ghost {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1712px -1183px;
+  width: 90px;
+  height: 90px;
+}
 .inventory_present {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -514px -1546px;
+  background-position: -1803px -430px;
+  width: 48px;
+  height: 51px;
+}
+.inventory_present_01 {
+  background-image: url(/static/sprites/spritesmith-main-9.png);
+  background-position: -1803px -326px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_02 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -465px -1546px;
+  background-position: -1803px -378px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_03 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -612px -1546px;
+  background-position: -1803px -950px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_04 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1878px -1449px;
+  background-position: -1803px -898px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_05 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -759px -1546px;
+  background-position: -1803px -846px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_06 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -906px -1546px;
+  background-position: -1803px -794px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_07 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -955px -1546px;
+  background-position: -1803px -742px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_08 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -857px -1546px;
+  background-position: -1803px -690px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_09 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -808px -1546px;
+  background-position: -1803px -638px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_10 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -710px -1546px;
+  background-position: -1803px -586px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_11 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -661px -1546px;
+  background-position: -1803px -534px;
   width: 48px;
   height: 51px;
 }
 .inventory_present_12 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -563px -1546px;
+  background-position: -1803px -482px;
   width: 48px;
   height: 51px;
 }
 .inventory_special_birthday {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -956px -1477px;
+  background-position: -367px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_congrats {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1232px -1477px;
+  background-position: -436px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_fortify {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1646px -1477px;
+  background-position: -505px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_getwell {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1577px -1477px;
+  background-position: -643px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_goodluck {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1508px -1477px;
+  background-position: -712px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_greeting {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1439px -1477px;
+  background-position: -91px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_nye {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1370px -1477px;
+  background-position: -850px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_opaquePotion {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1301px -1477px;
+  background-position: -160px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_seafoam {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1094px -1477px;
+  background-position: -1333px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_shinySeed {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1025px -1477px;
+  background-position: -1264px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_snowball {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -887px -1477px;
+  background-position: -1195px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_spookySparkles {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -818px -1477px;
+  background-position: -1126px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_thankyou {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -680px -1477px;
+  background-position: -1057px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_trinket {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -542px -1477px;
+  background-position: -988px -1664px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_valentine {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -473px -1477px;
+  background-position: -919px -1664px;
   width: 68px;
   height: 68px;
 }
 .knockout {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1112px -1326px;
+  background-position: -1537px -1397px;
   width: 120px;
   height: 47px;
 }
 .pet_key {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -404px -1477px;
+  background-position: -574px -1664px;
   width: 68px;
   height: 68px;
 }
 .rebirth_orb {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -611px -1477px;
+  background-position: -298px -1664px;
   width: 68px;
   height: 68px;
 }
 .seafoam_star {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1429px -1112px;
+  background-position: 0px -1664px;
   width: 90px;
   height: 90px;
 }
 .shop_armoire {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -749px -1477px;
+  background-position: -229px -1664px;
   width: 68px;
   height: 68px;
 }
 .snowman {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -930px -1326px;
+  background-position: -1209px -1480px;
   width: 90px;
   height: 90px;
 }
 .zzz {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1470px -1203px;
+  background-position: -1803px -1043px;
   width: 40px;
   height: 40px;
 }
 .zzz_light {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1429px -1203px;
+  background-position: -1803px -1002px;
   width: 40px;
   height: 40px;
 }
 .npc_alex {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1002px;
+  background-position: -1537px -724px;
   width: 162px;
   height: 138px;
 }
 .npc_aprilFool {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1397px;
+  background-position: -1379px -1112px;
   width: 120px;
   height: 120px;
 }
 .npc_bailey {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -404px -1546px;
+  background-position: -1803px 0px;
   width: 60px;
   height: 72px;
 }
 .npc_daniel {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1141px;
+  background-position: -1537px -1141px;
   width: 135px;
   height: 123px;
 }
 .npc_ian {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1353px -1112px;
+  background-position: -1013px -1299px;
   width: 75px;
   height: 135px;
 }
 .npc_justin {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1518px;
+  background-position: -1089px -1299px;
   width: 84px;
   height: 120px;
 }
 .npc_justin_head {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1893px -1141px;
+  background-position: -1803px -73px;
   width: 36px;
   height: 96px;
 }
 .npc_matt {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -251px -1326px;
+  background-position: -817px -1299px;
   width: 195px;
   height: 138px;
 }
 .npc_sabe {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -839px -1326px;
+  background-position: -1712px -546px;
   width: 90px;
   height: 90px;
 }
 .npc_timetravelers {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -447px -1326px;
+  background-position: -425px -1299px;
   width: 195px;
   height: 138px;
 }
 .npc_timetravelers_active {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -643px -1326px;
+  background-position: -621px -1299px;
   width: 195px;
   height: 138px;
 }
 .npc_tyler {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1021px -1326px;
+  background-position: -1712px -819px;
   width: 90px;
   height: 90px;
 }
 .npc_vicky {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1842px -1518px;
+  background-position: -1474px -1299px;
   width: 59px;
   height: 82px;
 }
 .seasonalshop_closed {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -724px;
+  background-position: -1537px -863px;
   width: 162px;
   height: 138px;
 }
 .seasonalshop_open {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -863px;
+  background-position: -1537px -1002px;
   width: 162px;
   height: 138px;
 }
 .quest_armadillo {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px -660px;
+  background-position: -440px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_atom1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -1326px;
+  background-position: -877px -1112px;
   width: 250px;
   height: 150px;
 }
 .quest_atom2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -1176px;
+  background-position: -217px -1299px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -817px;
+  background-position: 0px -1299px;
   width: 216px;
   height: 180px;
 }
 .quest_axolotl {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px -220px;
+  background-position: -660px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_basilist {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -214px -1477px;
+  background-position: -191px -1480px;
   width: 189px;
   height: 141px;
 }
 .quest_beetle {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -428px;
+  background-position: -1320px -862px;
   width: 204px;
   height: 201px;
 }
 .quest_bunny {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -630px;
+  background-position: -1102px -892px;
   width: 210px;
   height: 186px;
 }
 .quest_butterfly {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -440px -232px;
+  background-position: 0px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_cheetah {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -660px -220px;
+  background-position: -220px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_cow {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px 0px;
+  background-position: -1537px 0px;
   width: 174px;
   height: 213px;
 }
 .quest_dilatory {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -672px;
+  background-position: -660px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatoryDistress1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -217px;
+  background-position: -1320px -651px;
   width: 210px;
   height: 210px;
 }
 .quest_dilatoryDistress2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -422px;
+  background-position: -1537px -573px;
   width: 150px;
   height: 150px;
 }
 .quest_dilatoryDistress3 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -440px -892px;
+  background-position: 0px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatory_derby {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -220px -452px;
+  background-position: -440px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_dustbunnies {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px 0px;
+  background-position: -220px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_egg {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -214px;
+  background-position: -1537px -214px;
   width: 165px;
   height: 207px;
 }
 .quest_evilsanta {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -1265px;
+  background-position: -1537px -1265px;
   width: 118px;
   height: 131px;
 }
 .quest_evilsanta2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px -892px;
+  background-position: 0px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_falcon {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -880px -892px;
+  background-position: -880px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_ferret {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -660px -892px;
+  background-position: -220px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_frog {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -1112px;
+  background-position: -880px -892px;
   width: 221px;
   height: 213px;
 }
 .quest_ghost_stag {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -220px -892px;
+  background-position: -1100px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -892px;
+  background-position: -1100px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1102px -1112px;
+  background-position: -1128px -1112px;
   width: 250px;
   height: 150px;
 }
@@ -498,55 +702,55 @@
 }
 .quest_gryphon {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -885px -1112px;
+  background-position: -660px -1112px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px -440px;
+  background-position: -220px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px -220px;
+  background-position: 0px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -442px -1112px;
+  background-position: 0px -1112px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1100px 0px;
+  background-position: -1100px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -880px -672px;
+  background-position: -1100px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px -998px;
+  background-position: -443px -1112px;
   width: 216px;
   height: 177px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1757px -573px;
+  background-position: -1537px -422px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -220px 0px;
+  background-position: -660px -672px;
   width: 219px;
   height: 219px;
 }
@@ -564,7 +768,7 @@
 }
 .quest_moon1 {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px -440px;
+  background-position: -1320px 0px;
   width: 216px;
   height: 216px;
 }
@@ -600,79 +804,37 @@
 }
 .quest_nudibranch {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px -657px;
+  background-position: -1320px -217px;
   width: 216px;
   height: 216px;
 }
 .quest_octopus {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -662px -1112px;
+  background-position: -220px -1112px;
   width: 222px;
   height: 177px;
 }
 .quest_owl {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -452px;
+  background-position: -660px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_peacock {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1320px -874px;
+  background-position: -1320px -434px;
   width: 216px;
   height: 216px;
 }
 .quest_penguin {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -1652px;
+  background-position: 0px -1480px;
   width: 190px;
   height: 183px;
 }
 .quest_rat {
   background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -660px 0px;
+  background-position: -440px -892px;
   width: 219px;
   height: 219px;
 }
-.quest_rock {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -1540px 0px;
-  width: 216px;
-  height: 216px;
-}
-.quest_rooster {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -1477px;
-  width: 213px;
-  height: 174px;
-}
-.quest_sabretooth {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -220px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: 0px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_slime {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -440px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sloth {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -660px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_snail {
-  background-image: url(/static/sprites/spritesmith-main-9.png);
-  background-position: -222px -1112px;
-  width: 219px;
-  height: 213px;
-}

website/client/assets/scss/colors.scss

@@ -59,3 +59,5 @@ $green-10: #24CC8F;
 $green-50: #3FDAA2;
 $green-100: #5AEAB2;
 $green-500: #A6FFDF;
+
+$suggested-item-color: #D5C8FF;

website/client/assets/scss/item.scss

@@ -50,6 +50,15 @@
   &.highlight-border {
     border-color: $purple-500;
   }
+
+  &.suggested {
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+    border: solid 1px $suggested-item-color;
+  }
+
+  &.suggested:hover {
+    border: solid 1px $purple-500;
+  }
 }
 
 .flat .item {

website/client/components/groups/startQuestModal.vue

@@ -12,7 +12,7 @@
     div(v-if='questData')
       questDialogContent(:item="questData")
     div.text-center
-      button.btn.btn-primary(@click='questInit()') {{$t('inviteToPartyOrQuest')}}
+      button.btn.btn-primary(@click='questInit()', :disabled="Boolean(group.quest)") {{$t('inviteToPartyOrQuest')}}
     div.text-center
       p {{$t('inviteInformation')}}
     .side-panel(v-if='questData')

website/client/components/inventory/items/index.vue

@@ -147,7 +147,7 @@
   )
 
   startQuestModal(
-    group="user.party"
+    :group="user.party"
   )
 </template>
 

website/client/components/shops/buyModal.vue

@@ -6,7 +6,7 @@
     @change="onChange($event)"
   )
     span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': item.pinned}",
+      :class="{'item-selected-badge': isPinned}",
       v-if="withPin",
       @click.prevent.stop="togglePinned()"
     )
@@ -59,6 +59,10 @@
           :class="{'notEnough': !this.enoughCurrency(getPriceClass(), item.value)}"
         ) {{ $t('buyNow') }}
 
+    div.limitedTime(v-if="item.event")
+      span.svg-icon.inline.icon-16(v-html="icons.clock")
+      span.limitedString {{ limitedString }}
+
     div.clearfix(slot="modal-footer")
       span.balance.float-left {{ $t('yourBalance') }}
       balanceInfo(
@@ -176,6 +180,31 @@
       pointer-events: none;
       opacity: 0.55;
     }
+
+    .limitedTime {
+      height: 32px;
+      background-color: #6133b4;
+      width: calc(100% + 30px);
+      margin: 0 -15px; // the modal content has its own padding
+
+      font-size: 12px;
+      line-height: 1.33;
+      text-align: center;
+      color: $white;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .limitedString {
+        height: 16px;
+        margin-left: 8px;
+      }
+    }
+
+    .bordered {
+      margin-top: 8px;
+    }
   }
 </style>
 
@@ -188,6 +217,7 @@
   import svgGem from 'assets/svg/gem.svg';
   import svgHourglasses from 'assets/svg/hourglass.svg';
   import svgPin from 'assets/svg/pin.svg';
+  import svgClock from 'assets/svg/clock.svg';
 
   import BalanceInfo  from './balanceInfo.vue';
   import currencyMixin from './_currencyMixin';
@@ -200,6 +230,10 @@
   import Item from 'client/components/inventory/item';
   import Avatar from 'client/components/avatar';
 
+  import seasonalShopConfig from 'common/script/libs/shops-seasonal.config';
+
+  import moment from 'moment';
+
   export default {
     mixins: [currencyMixin, notifications],
     components: {
@@ -217,7 +251,10 @@
           gems: svgGem,
           hourglasses: svgHourglasses,
           pin: svgPin,
+          clock: svgClock,
         }),
+
+        isPinned: false,
       };
     },
     computed: {
@@ -244,6 +281,14 @@
           return this.item.notes;
         }
       },
+      limitedString () {
+        return this.$t('limitedOffer', {date: moment(seasonalShopConfig.dateRange.end).format('LL')});
+      },
+    },
+    watch: {
+      item: function itemChanged () {
+        this.isPinned = this.item && this.item.pinned;
+      },
     },
     methods: {
       onChange ($event) {
@@ -278,7 +323,9 @@
         this.$root.$emit('show::modal', 'buy-gems');
       },
       togglePinned () {
-        if (!this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path})) {
+        this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
+
+        if (!this.isPinned) {
           this.text(this.$t('unpinnedItem', {item: this.item.text}));
         }
       },

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

@@ -39,12 +39,12 @@
           div.content
             div.featured-label.with-border
               span.rectangle
-              span.text(v-once) {{ $t('featuredItems') }}
+              span.text {{ market.featured.text }}
               span.rectangle
 
             div.items.margin-center
               shopItem(
-                v-for="item in featuredItems",
+                v-for="item in market.featured.items",
                 :key="item.key",
                 :item="item",
                 :price="item.value",
@@ -374,7 +374,6 @@
   import svgRogue from 'assets/svg/rogue.svg';
   import svgHealer from 'assets/svg/healer.svg';
 
-  import featuredItems from 'common/script/content/shop-featuredItems';
   import getItemInfo from 'common/script/libs/getItemInfo';
   import isPinned from 'common/script/libs/isPinned';
   import shops from 'common/script/libs/shops';
@@ -382,7 +381,6 @@
   import _filter from 'lodash/filter';
   import _sortBy from 'lodash/sortBy';
   import _map from 'lodash/map';
-  import _get from 'lodash/get';
   import _throttle from 'lodash/throttle';
 
   const sortGearTypes = ['sortByType', 'sortByPrice', 'sortByCon', 'sortByPer', 'sortByStr', 'sortByInt'];
@@ -469,13 +467,13 @@ export default {
       marketGearCategories () {
         return shops.getMarketGearCategories(this.user);
       },
-      marketCategories () {
-        return shops.getMarketCategories(this.user);
+      market () {
+        return shops.getMarketShop(this.user);
       },
       categories () {
-        if (this.marketCategories) {
+        if (this.market) {
           let categories = [
-            ...this.marketCategories,
+            ...this.market.categories,
           ];
 
           categories.push({
@@ -563,15 +561,6 @@ export default {
           },
         ];
       },
-
-      featuredItems () {
-        return featuredItems.market.map(i => {
-          let newItem = getItemInfo(this.user, i.type, _get(this.content, i.path));
-          newItem.pinned = isPinned(this.user, newItem);
-
-          return newItem;
-        });
-      },
     },
     methods: {
       getClassName (classType) {

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

@@ -6,7 +6,7 @@
     @change="onChange($event)"
   )
     span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': item.pinned}",
+      :class="{'item-selected-badge': isPinned}",
       v-if="withPin",
       @click.prevent.stop="togglePinned()"
     )
@@ -212,8 +212,15 @@
           pin: svgPin,
           experience: svgExperience,
         }),
+
+        isPinned: false,
       };
     },
+    watch: {
+      item: function itemChanged () {
+        this.isPinned = this.item && this.item.pinned;
+      },
+    },
     computed: {
       ...mapState({
         content: 'content',
@@ -250,7 +257,11 @@
         this.hideDialog();
       },
       togglePinned () {
-        this.$emit('togglePinned', this.item);
+        this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
+
+        if (!this.isPinned) {
+          this.text(this.$t('unpinnedItem', {item: this.item.text}));
+        }
       },
       hideDialog () {
         this.$root.$emit('hide::modal', 'buy-quest-modal');

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

@@ -39,12 +39,12 @@
           div.content
             div.featured-label.with-border
               span.rectangle
-              span.text(v-once) {{ $t('featuredQuests') }}
+              span.text {{ shop.featured.text }}
               span.rectangle
 
             div.items.margin-center
               shopItem(
-                v-for="item in featuredItems",
+                v-for="item in shop.featured.items",
                 :key="item.key",
                 :item="item",
                 :price="item.goldValue ? item.goldValue : item.value",
@@ -183,7 +183,6 @@
       :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
       :withPin="true",
       @change="resetItemToBuy($event)",
-      @togglePinned="togglePinned($event)"
     )
       template(slot="item", scope="ctx")
         item.flat(
@@ -337,8 +336,6 @@
 
   import svgPin from 'assets/svg/pin.svg';
 
-  import featuredItems from 'common/script/content/shop-featuredItems';
-  import getItemInfo from 'common/script/libs/getItemInfo';
   import shops from 'common/script/libs/shops';
 
   import isPinned from 'common/script/libs/isPinned';
@@ -348,7 +345,6 @@
   import _throttle from 'lodash/throttle';
   import _groupBy from 'lodash/groupBy';
   import _map from 'lodash/map';
-  import _get from 'lodash/get';
 
 export default {
     components: {
@@ -398,31 +394,22 @@ export default {
         userStats: 'user.data.stats',
         userItems: 'user.data.items',
       }),
-      questCategories () {
-        return shops.getQuestShopCategories(this.user);
+      shop () {
+        return shops.getQuestShop(this.user);
       },
       categories () {
-        if (this.questCategories) {
-          this.questCategories.map((category) => {
+        if (this.shop.categories) {
+          this.shop.categories.map((category) => {
             this.$set(this.viewOptions, category.identifier, {
               selected: true,
             });
           });
 
-          return this.questCategories;
+          return this.shop.categories;
         } else {
           return [];
         }
       },
-
-      featuredItems () {
-        return featuredItems.quests.map(i => {
-          let newItem = getItemInfo(this.user, i.type, _get(this.content, i.path));
-          newItem.pinned = isPinned(this.user, newItem);
-
-          return newItem;
-        });
-      },
     },
     methods: {
       questItems (category, sortBy, searchBy, hideLocked, hidePinned) {

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

@@ -24,7 +24,7 @@
           )
     .standard-page
       div.featuredItems
-        .background
+        .background(:class="{opened: seasonal.opened}")
           div.npc
             div.featured-label
               span.rectangle
@@ -35,26 +35,23 @@
               span.rectangle
               span.text(v-once, v-html="seasonal.notes")
               span.rectangle
-          div.content(v-else-if="featuredSet")
+          div.content(v-else-if="seasonal.featured.items.length !== 0")
             div.featured-label.with-border
               span.rectangle
-              span.text(v-once) {{ $t('featuredset', { name: featuredSet.text }) }}
+              span.text(v-once) {{ $t('featuredset', { name: seasonal.featured.text }) }}
               span.rectangle
 
             div.items.margin-center
               shopItem(
-                v-for="item in featuredSet.items",
+                v-for="item in seasonal.featured.items",
                 :key="item.key",
                 :item="item",
                 :price="item.value",
                 :emptyItem="false",
                 :popoverPosition="'top'",
-                @click="selectedItemToBuy = item"
+                :showEventBadge="false",
+                @click="itemSelected(item)"
               )
-                template(slot="popoverContent", scope="ctx")
-                  div
-                    h4.popover-content-title {{ item.text }}
-                    .popover-content-text {{ item.notes }}
 
       h1.mb-0.page-header(v-once) {{ $t('seasonalShop') }}
 
@@ -93,33 +90,15 @@
                 :price="item.value",
                 :emptyItem="false",
                 :popoverPosition="'top'",
-                @click="selectedItemToBuy = item"
+                :showEventBadge="false",
+                @click="itemSelected(item)"
               )
-                span(slot="popoverContent")
-                  div
-                    h4.popover-content-title {{ item.text }}
-                    .popover-content-text {{ item.notes }}
-
                 template(slot="itemBadge", scope="ctx")
                   span.badge.badge-pill.badge-item.badge-svg(
                     :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
                     @click.prevent.stop="togglePinned(ctx.item)"
                   )
                     span.svg-icon.inline.icon-12.color(v-html="icons.pin")
-
-    buyModal(
-      :item="selectedItemToBuy",
-      :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
-      :withPin="true",
-      @change="resetItemToBuy($event)",
-      @togglePinned="togglePinned($event)"
-    )
-      template(slot="item", scope="ctx")
-        item.flat(
-          :item="ctx.item",
-          :itemContentClass="ctx.item.class",
-          :showPopover="false"
-        )
 </template>
 
 <style lang="scss">
@@ -232,7 +211,7 @@
       height: 216px;
 
       .background {
-        background: url('~assets/images/shops/seasonal_shop_closed_banner_web_background.png');
+        background: url('~assets/images/shops/seasonal_shop_closed_background.png');
 
         background-repeat: repeat-x;
 
@@ -248,6 +227,11 @@
         justify-content: center;
         align-items: center;
       }
+      .background.opened {
+        background: url('~assets/images/shops/seasonal_shop_opened_background.png');
+
+        background-repeat: repeat-x;
+      }
 
       .content {
         display: flex;
@@ -260,7 +244,7 @@
         top: 0;
         width: 100%;
         height: 216px;
-        background: url('~assets/images/shops/seasonal_shop_closed_banner_web_leslienpc.png');
+        background: url('~assets/images/shops/seasonal_shop_closed_npc.png');
         background-repeat: no-repeat;
 
         .featured-label {
@@ -270,6 +254,11 @@
           left: 60px;
         }
       }
+
+      .opened .npc{
+        background: url('~assets/images/shops/seasonal_shop_opened_npc.png');
+        background-repeat: no-repeat;
+      }
     }
   }
 </style>
@@ -285,7 +274,6 @@
   import toggleSwitch from 'client/components/ui/toggleSwitch';
   import Avatar from 'client/components/avatar';
 
-  import BuyModal from '../buyModal.vue';
   import bPopover from 'bootstrap-vue/lib/components/popover';
   import bDropdown from 'bootstrap-vue/lib/components/dropdown';
   import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
@@ -296,17 +284,17 @@
   import svgRogue from 'assets/svg/rogue.svg';
   import svgHealer from 'assets/svg/healer.svg';
 
-  import featuredItems from 'common/script/content/shop-featuredItems';
-
   import _filter from 'lodash/filter';
   import _map from 'lodash/map';
-  import _mapKeys from 'lodash/mapKeys';
+  import _mapValues from 'lodash/mapValues';
   import _forEach from 'lodash/forEach';
   import _sortBy from 'lodash/sortBy';
   import _throttle from 'lodash/throttle';
   import _groupBy from 'lodash/groupBy';
+  import _reverse from 'lodash/reverse';
 
   import isPinned from 'common/script/libs/isPinned';
+  import getOfficialPinnedItems from 'common/script/libs/getOfficialPinnedItems';
 
   import i18n from 'common/script/i18n';
 
@@ -325,7 +313,6 @@
       bDropdownItem,
 
       Avatar,
-      BuyModal,
     },
     watch: {
       searchText: _throttle(function throttleSearch () {
@@ -335,7 +322,6 @@
     data () {
       return {
         viewOptions: {},
-
         searchText: null,
         searchTextThrottled: null,
 
@@ -358,11 +344,9 @@
           eyewear: i18n.t('eyewear'),
         }),
 
-        sortItemsBy: ['AZ', 'sortByNumber'],
+        sortItemsBy: ['AZ'],
         selectedSortItemsBy: 'AZ',
 
-        selectedItemToBuy: null,
-
         hidePinned: false,
       };
     },
@@ -372,32 +356,33 @@
         user: 'user.data',
         userStats: 'user.data.stats',
       }),
+
+      usersOfficalPinnedItems () {
+        return getOfficialPinnedItems(this.user);
+      },
+
       seasonal () {
-        return {
-          text: this.$t('seasonalShop'),
-          notes: this.$t('seasonalShopClosedText'),
-          opened: false, // TODO
-        };
+        return shops.getSeasonalShop(this.user);
       },
       seasonalCategories () {
-        return shops.getSeasonalShopCategories(this.user);
+        return this.seasonal.categories;
       },
       categories () {
         if (this.seasonalCategories) {
-          this.seasonalCategories.map((category) => {
-            this.$set(this.viewOptions, category.identifier, {
-              selected: true,
-            });
-          });
-
-          return this.seasonalCategories;
+          return _reverse(_sortBy(this.seasonalCategories, (c) => {
+            if (c.event) {
+              return c.event.start;
+            } else {
+              return -1;
+            }
+          }));
         } else {
           return [];
         }
       },
       filterCategories () {
         if (this.content) {
-          let equipmentList = _mapKeys(this.gearTypesToStrings, (value, key) => {
+          let equipmentList = _mapValues(this.gearTypesToStrings, (value, key) => {
             return {
               key,
               value,
@@ -415,14 +400,6 @@
           return [];
         }
       },
-
-      featuredSet () {
-        let result = _filter(this.categories, (c) => {
-          return c.identifier === featuredItems.seasonal;
-        })[0];
-
-        return result;
-      },
     },
     methods: {
       getClassName (classType) {
@@ -436,7 +413,7 @@
         let result = _map(category.items, (e) => {
           return {
             ...e,
-            pinned: isPinned(this.user, e),
+            pinned: isPinned(this.user, e, this.usersOfficalPinnedItems),
           };
         });
 
@@ -456,11 +433,6 @@
           case 'AZ': {
             result = _sortBy(result, ['text']);
 
-            break;
-          }
-          case 'sortByNumber': {
-            result = _sortBy(result, ['value']);
-
             break;
           }
         }
@@ -484,11 +456,6 @@
 
         return result;
       },
-      resetItemToBuy ($event) {
-        if (!$event) {
-          this.selectedItemToBuy = null;
-        }
-      },
       isGearLocked (gear) {
         if (gear.value > this.userStats.gp) {
           return true;
@@ -501,6 +468,11 @@
           this.$parent.showUnpinNotification(item);
         }
       },
+      itemSelected (item) {
+        if (!item.locked) {
+          this.$root.$emit('buyModal::showItem', item);
+        }
+      },
     },
   };
 </script>

website/client/components/shops/shopItem.vue

@@ -1,12 +1,18 @@
 <template lang="pug">
 div
   .item-wrapper(@click="click()", :id="itemId")
-    .item(
-      :class="{'item-empty': emptyItem, 'highlight-border': highlightBorder}",
-    )
+    .item(:class="getItemClasses()")
       slot(name="itemBadge", :item="item", :emptyItem="emptyItem")
+
+
+      span.badge.badge-pill.badge-item.badge-clock(
+        v-if="item.event && showEventBadge",
+      )
+        span.svg-icon.inline.clock(v-html="icons.clock")
+
       div.shop-content
         span.svg-icon.inline.lock(v-if="item.locked" v-html="icons.lock")
+        span.suggestedDot(v-if="item.isSuggested")
 
         div.image
           div(:class="item.class", v-once)
@@ -31,6 +37,8 @@ div
         h4.popover-content-title(v-once) {{ item.text }}
         .popover-content-text(v-if="showNotes", v-once) {{ item.notes }}
 
+      div(v-if="item.event") {{ limitedString }}
+
 </template>
 
 <style lang="scss" scoped>
@@ -44,6 +52,10 @@ div
     min-height: 106px;
   }
 
+  .item:not(.locked) {
+    cursor: pointer;
+  }
+
   .item.item-empty {
     border-radius: 2px;
     background-color: #f9f9f9;
@@ -102,6 +114,34 @@ div
     top: 8px;
     margin-top: 0;
   }
+
+  span.badge.badge-pill.badge-item.badge-clock {
+    height: 24px;
+    width: 24px;
+    background-color: $purple-300;
+    position: absolute;
+    left: -8px;
+    top: -12px;
+    margin-top: 0;
+    padding: 4px;
+  }
+
+  span.svg-icon.inline.clock {
+    height: 16px;
+    width: 16px;
+  }
+
+  .suggestedDot {
+    width: 6px;
+    height: 6px;
+    background-color: $suggested-item-color;
+    border-radius: 4px;
+
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    margin-top: 0;
+  }
 </style>
 
 <script>
@@ -112,9 +152,14 @@ div
   import svgGold from 'assets/svg/gold.svg';
   import svgHourglasses from 'assets/svg/hourglass.svg';
   import svgLock from 'assets/svg/lock.svg';
+  import svgClock from 'assets/svg/clock.svg';
 
   import EquipmentAttributesPopover from 'client/components/inventory/equipment/attributesPopover';
 
+  import moment from 'moment';
+
+  import seasonalShopConfig from 'common/script/libs/shops-seasonal.config';
+
   export default {
     components: {
       bPopover,
@@ -128,6 +173,7 @@ div
           gold: svgGold,
           lock: svgLock,
           hourglasses: svgHourglasses,
+          clock: svgClock,
         },
       });
     },
@@ -155,6 +201,10 @@ div
         type: Boolean,
         default: true,
       },
+      showEventBadge: {
+        type: Boolean,
+        default: true,
+      },
     },
     computed: {
       showNotes () {
@@ -167,6 +217,9 @@ div
           return 'gold';
         }
       },
+      limitedString () {
+        return this.$t('limitedOffer', {date: moment(seasonalShopConfig.dateRange.end).format('LL')});
+      },
     },
     methods: {
       click () {
@@ -179,6 +232,14 @@ div
           return this.price;
         }
       },
+      getItemClasses () {
+        return {
+          'item-empty': this.emptyItem,
+          'highlight-border': this.highlightBorder,
+          suggested: this.item.isSuggested,
+          locked: this.item.locked,
+        };
+      },
     },
   };
 </script>

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

@@ -35,28 +35,6 @@
               span.rectangle
               span.text(v-once) {{ $t('timeTravelersPopoverNoSubMobile') }}
               span.rectangle
-          div.content(v-if="false")
-            div.featured-label.with-border
-              span.rectangle
-              span.text(v-once) {{ $t('featuredQuests') }}
-              span.rectangle
-
-            div.items.margin-center
-              shopItem(
-                v-for="item in featuredItems",
-                :key="item.key",
-                :item="item",
-                :price="item.goldValue ? item.goldValue : item.value",
-                :priceType="item.goldValue ? 'gold' : 'gem'",
-                :itemContentClass="'inventory_quest_scroll_'+item.key",
-                :emptyItem="false",
-                :popoverPosition="'top'",
-                @click="selectedItemToBuy = item"
-              )
-                template(slot="popoverContent", scope="ctx")
-                  div
-                    h4.popover-content-title {{ item.text() }}
-                    .popover-content-text {{ item.notes() }}
 
       h1.mb-0.page-header(v-once) {{ $t('timeTravelers') }}
 
@@ -262,8 +240,6 @@
   import svgPin from 'assets/svg/pin.svg';
   import svgHourglass from 'assets/svg/hourglass.svg';
 
-  import featuredItems from 'common/script/content/shop-featuredItems';
-
   import _filter from 'lodash/filter';
   import _sortBy from 'lodash/sortBy';
   import _throttle from 'lodash/throttle';
@@ -327,8 +303,12 @@
         return this.user.purchased.plan.consecutive.trinkets === 0;
       },
 
+      shop () {
+        return shops.getTimeTravelersShop(this.user);
+      },
+
       categories () {
-        let apiCategories = shops.getTimeTravelersCategories(this.user);
+        let apiCategories = this.shop.categories;
 
         // FIX ME Refactor the apiCategories Hack to force update for now until we restructure the data
         let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
@@ -375,12 +355,6 @@
 
         return normalGroups;
       },
-
-      featuredItems () {
-        return featuredItems.quests.map(i => {
-          return this.content.quests[i];
-        });
-      },
     },
     methods: {
       travelersItems (category, sortBy, searchBy, hidePinned) {

website/client/components/tasks/column.vue

@@ -231,6 +231,8 @@ export default {
       activeFilter: types[this.type].filters.find(f => f.default === true),
       icons,
       openedCompletedTodos: false,
+
+      forceRefresh: new Date(),
     };
   },
   computed: {
@@ -245,6 +247,8 @@ export default {
       return this.tasks[`${this.type}s`];
     },
     inAppRewards () {
+      let watchRefresh = this.forceRefresh; // eslint-disable-line
+
       return inAppRewards(this.user);
     },
     hasRewardsList () {
@@ -269,6 +273,10 @@ export default {
   },
   mounted () {
     this.setColumnBackgroundVisibility();
+
+    this.$root.$on('buyModal::boughtItem', () => {
+      this.forceRefresh = new Date();
+    });
   },
   methods: {
     ...mapActions({loadCompletedTodos: 'tasks:fetchCompletedTodos'}),

website/common/locales/en/gear.json

@@ -255,6 +255,15 @@
   "weaponSpecialSummer2017HealerText": "Pearl Wand",
   "weaponSpecialSummer2017HealerNotes": "A single touch from this pearl-tipped wand soothes away all wounds. Increases Intelligence by <%= int %>. Limited Edition 2017 Summer Gear.",
 
+  "weaponSpecialFall2017RogueText": "Candied Apple Mace",
+  "weaponSpecialFall2017RogueNotes": "Defeat your foes with sweetness! Increases Strength by <%= str %>. Limited Edition 2017 Autumn Gear.",
+  "weaponSpecialFall2017WarriorText": "Candy Corn Lance",
+  "weaponSpecialFall2017WarriorNotes": "All your foes will cower before this tasty-looking lance, regardless of whether they're ghosts, monsters, or red To-Dos. Increases Strength by <%= str %>. Limited Edition 2017 Autumn Gear.",
+  "weaponSpecialFall2017MageText": "Spooky Staff",
+  "weaponSpecialFall2017MageNotes": "The eyes of the glowing skull on this staff radiate magic and mystery. Increases Intelligence by <%= int %> and Perception by <%= per %>. Limited Edition 2017 Autumn Gear.",
+  "weaponSpecialFall2017HealerText": "Creepy Candelabra",
+  "weaponSpecialFall2017HealerNotes": "This light dispels fear and lets others know you're here to help. Increases Intelligence by <%= int %>. Limited Edition 2017 Autumn Gear.",
+
   "weaponMystery201411Text": "Pitchfork of Feasting",
   "weaponMystery201411Notes": "Stab your enemies or dig in to your favorite foods - this versatile pitchfork does it all! Confers no benefit. November 2014 Subscriber Item.",
   "weaponMystery201502Text": "Shimmery Winged Staff of Love and Also Truth",
@@ -552,6 +561,15 @@
   "armorSpecialSummer2017HealerText": "Silversea Tail",
   "armorSpecialSummer2017HealerNotes": "This garment of silvery scales transforms its wearer into a real Seahealer! Increases Constitution by <%= con %>. Limited Edition 2017 Summer Gear.",
 
+  "armorSpecialFall2017RogueText": "Pumpkin Patch Robes",
+  "armorSpecialFall2017RogueNotes": "Need to hide out? Crouch among the Jack o' Lanterns and these robes will conceal you! Increases Perception by <%= per %>. Limited Edition 2017 Autumn Gear.",
+  "armorSpecialFall2017WarriorText": "Strong and Sweet Armor",
+  "armorSpecialFall2017WarriorNotes": "This armor will protect you like a delicious candy shell. Increases Constitution by <%= con %>. Limited Edition 2017 Autumn Gear.",
+  "armorSpecialFall2017MageText": "Masquerade Robes",
+  "armorSpecialFall2017MageNotes": "What masquerade ensemble would be complete without dramatic and sweeping robes? Increases Intelligence by <%= int %>. Limited Edition 2017 Autumn Gear.",
+  "armorSpecialFall2017HealerText": "Haunted House Armor",
+  "armorSpecialFall2017HealerNotes": "Your heart is an open door. And your shoulders are roofing tiles! Increases Constitution by <%= con %>. Limited Edition 2017 Autumn Gear.",
+
   "armorMystery201402Text": "Messenger Robes",
   "armorMystery201402Notes": "Shimmering and strong, these robes have many pockets to carry letters. Confers no benefit. February 2014 Subscriber Item.",
   "armorMystery201403Text": "Forest Walker Armor",
@@ -910,6 +928,15 @@
   "headSpecialSummer2017HealerText": "Crown of Sea Creatures",
   "headSpecialSummer2017HealerNotes": "This helm is made up of friendly sea creatures who are temporarily resting on your head, giving you sage advice. Increases Intelligence by <%= int %>. Limited Edition 2017 Summer Gear.",
 
+  "headSpecialFall2017RogueText": "Jack-o-Lantern Helm",
+  "headSpecialFall2017RogueNotes": "Ready for treats? Time to don this festive, glowing helm! Increases Perception by <%= per %>. Limited Edition 2017 Autumn Gear.",
+  "headSpecialFall2017WarriorText": "Candy Corn Helm",
+  "headSpecialFall2017WarriorNotes": "This helm might look like a treat, but wayward tasks won't find it so sweet! Increases Strength by <%= str %>. Limited Edition 2017 Autumn Gear.",
+  "headSpecialFall2017MageText": "Masquerade Helm",
+  "headSpecialFall2017MageNotes": "When you appear in this feathery hat, everyone will be left guessing the identity of the magical stranger in the room! Increases Perception by <%= per %>. Limited Edition 2017 Autumn Gear.",
+  "headSpecialFall2017HealerText": "Haunted House Helm",
+  "headSpecialFall2017HealerNotes": "Invite spooky spirits and friendly creatures to seek your healing powers in this helm! Increases Intelligence by <%= int %>. Limited Edition 2017 Autumn Gear.",
+
   "headSpecialGaymerxText": "Rainbow Warrior Helm",
   "headSpecialGaymerxNotes": "In celebration of the GaymerX Conference, this special helmet is decorated with a radiant, colorful rainbow pattern! GaymerX is a game convention celebrating LGTBQ and gaming and is open to everyone.",
 
@@ -1209,6 +1236,13 @@
   "shieldSpecialSummer2017HealerText": "Oyster Shield",
   "shieldSpecialSummer2017HealerNotes": "This magical oyster constantly generates pearls as well as protection. Increases Constitution by <%= con %>. Limited Edition 2017 Summer Gear.",
 
+  "shieldSpecialFall2017RogueText": "Candied Apple Mace",
+  "shieldSpecialFall2017RogueNotes": "Defeat your foes with sweetness! Increases Strength by <%= str %>. Limited Edition 2017 Autumn Gear.",
+  "shieldSpecialFall2017WarriorText": "Candy Corn Shield",
+  "shieldSpecialFall2017WarriorNotes": "This candy shield has mighty protective powers, so try not to nibble on it! Increases Constitution by <%= con %>. Limited Edition 2017 Autumn Gear.",
+  "shieldSpecialFall2017HealerText": "Haunted Orb",
+  "shieldSpecialFall2017HealerNotes": "This orb occasionally screeches. We're sorry, we're not sure why. But it sure looks nifty! Increases Constitution by <%= con %>. Limited Edition 2017 Autumn Gear.",
+
   "shieldMystery201601Text": "Resolution Slayer",
   "shieldMystery201601Notes": "This blade can be used to parry away all distractions. Confers no benefit. January 2016 Subscriber Item.",
   "shieldMystery201701Text": "Time-Freezer Shield",
@@ -1454,4 +1488,3 @@
   "eyewearArmoirePlagueDoctorMaskText": "Plague Doctor Mask",
   "eyewearArmoirePlagueDoctorMaskNotes": "An authentic mask worn by the doctors who battle the Plague of Procrastination. Confers no benefit. Enchanted Armoire: Plague Doctor Set (Item 2 of 3)."
 }
-

website/common/locales/en/limited.json

@@ -108,6 +108,10 @@
     "summer2017WhirlpoolMageSet": "Whirlpool Mage (Mage)",
     "summer2017SeashellSeahealerSet": "Seashell Seahealer (Healer)",
     "summer2017SeaDragonSet": "Sea Dragon (Rogue)",
+    "fall2017HabitoweenSet": "Habitoween Warrior (Warrior)",
+    "fall2017MasqueradeSet": "Masquerade Mage (Mage)",
+    "fall2017HauntedHouseSet": "Haunted House Healer (Healer)",
+    "fall2017TrickOrTreatSet": "Trick or Treat Rogue (Rogue)",
     "eventAvailability": "Available for purchase until <%= date(locale) %>.",
     "dateEndApril": "April 19",
     "dateEndMay": "May 17",

website/common/locales/en/npc.json

@@ -174,5 +174,7 @@
   "welcome3notes": "As you improve your life, your avatar will level up and unlock pets, quests, equipment, and more!",
   "welcome4": "Avoid bad habits that drain Health (HP), or your avatar will die!",
   "welcome5": "Now you'll customize your avatar and set up your tasks...",
-  "imReady": "Enter Habitica"
+  "imReady": "Enter Habitica",
+
+  "limitedOffer": "Available until <%= date %>"
 }

website/common/script/content/constants.js

@@ -29,6 +29,35 @@ export const EVENTS = {
   winter2017: { start: '2016-12-16', end: '2017-02-02' },
   spring2017: { start: '2017-03-21', end: '2017-05-02' },
   summer2017: { start: '2017-06-20', end: '2017-08-02' },
+  fall2017:   { start: '2017-08-21', end: '2017-11-02' },
+};
+
+export const SEASONAL_SETS = {
+  fall: [
+    // fall 2014
+    'vampireSmiterSet',
+    'monsterOfScienceSet',
+    'witchyWizardSet',
+    'mummyMedicSet',
+
+    // fall 2015
+    'battleRogueSet',
+    'scarecrowWarriorSet',
+    'stitchWitchSet',
+    'potionerSet',
+
+    // fall 2016
+    'fall2016BlackWidowSet',
+    'fall2016SwampThingSet',
+    'fall2016WickedSorcererSet',
+    'fall2016GorgonHealerSet',
+
+    // fall 2017
+    'fall2017TrickOrTreatSet',
+    'fall2017HabitoweenSet',
+    'fall2017MasqueradeSet',
+    'fall2017HauntedHouseSet',
+  ],
 };
 
 export const GEAR_TYPES = [

website/common/script/content/officialPinnedItems.js

@@ -1 +1,4 @@
-export default [];
+
+// { path: '', type: '', canShow?: (user) => boolean }
+
+export default [];

website/common/script/libs/getItemInfo.js

@@ -4,6 +4,7 @@ import { BadRequest } from './errors';
 import count from '../count';
 
 import isPinned from './isPinned';
+import getOfficialPinnedItems from './getOfficialPinnedItems';
 
 import _mapValues from 'lodash/mapValues';
 
@@ -16,9 +17,7 @@ function lockQuest (quest, user) {
   return quest.previous;
 }
 
-const officialPinnedItems = content.officialPinnedItems;
-
-function isItemSuggested (itemInfo) {
+function isItemSuggested (officialPinnedItems, itemInfo) {
   return officialPinnedItems.findIndex(officialItem => {
     return officialItem.type === itemInfo.pinType && officialItem.path === itemInfo.path;
   }) > -1;
@@ -40,10 +39,16 @@ function getDefaultGearProps (item, language) {
     per: item.per,
     con: item.con,
     klass: item.klass,
+    event: item.event,
+    set: item.set,
   };
 }
 
-module.exports = function getItemInfo (user, type, item, language = 'en') {
+module.exports = function getItemInfo (user, type, item, officialPinnedItems, language = 'en') {
+  if (officialPinnedItems === undefined) {
+    officialPinnedItems = getOfficialPinnedItems(user);
+  }
+
   let itemInfo;
 
   switch (type) {
@@ -150,7 +155,7 @@ module.exports = function getItemInfo (user, type, item, language = 'en') {
       break;
     case 'seasonalSpell':
       itemInfo = {
-        key: item.keyspellKey,
+        key: item.key,
         text: item.text(language),
         notes: item.notes(language),
         value: item.value,
@@ -267,7 +272,7 @@ module.exports = function getItemInfo (user, type, item, language = 'en') {
   }
 
   if (itemInfo) {
-    itemInfo.isSuggested = isItemSuggested(itemInfo);
+    itemInfo.isSuggested = isItemSuggested(officialPinnedItems, itemInfo);
     itemInfo.pinned = isPinned(user, itemInfo);
   } else {
     throw new BadRequest(i18n.t('wrongItemType', {type}, language));