feat(content): enable Splashy Skins

website/client/assets/css/sprites/spritesmith-largeSprites-0.css

@@ -1,12 +1,12 @@
 .promo_aquatic_glass_potions {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -142px -370px;
+  background-position: -720px 0px;
   width: 141px;
   height: 441px;
 }
 .promo_armoire_backgrounds_201807 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -284px -370px;
+  background-position: -720px -442px;
   width: 141px;
   height: 441px;
 }
@@ -18,22 +18,34 @@
 }
 .promo_mystery_201806 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -568px -370px;
+  background-position: -862px -442px;
   width: 121px;
   height: 114px;
 }
 .promo_seafoam {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -426px -370px;
+  background-position: -862px 0px;
   width: 141px;
   height: 441px;
 }
 .promo_seasonal_shop_summer {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -142px -812px;
+  background-position: -518px -370px;
   width: 162px;
   height: 138px;
 }
+.promo_splashy_skins {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -142px -370px;
+  width: 375px;
+  height: 186px;
+}
+.customize-option.promo_splashy_skins {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -167px -385px;
+  width: 60px;
+  height: 60px;
+}
 .promo_summer_splash_2018 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px -370px;
@@ -42,7 +54,7 @@
 }
 .promo_take_this {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -568px -485px;
+  background-position: -862px -557px;
   width: 96px;
   height: 69px;
 }

website/common/script/content/appearance/sets.js

@@ -18,6 +18,6 @@ module.exports = prefill({
   pastelSkins: {setPrice: 5, availableFrom: '2018-04-05', availableUntil: '2018-05-02', text: t('pastelSkins')},
   spookySkins: {setPrice: 5, availableUntil: '2016-01-01', text: t('spookySkins')},
   supernaturalSkins: {setPrice: 5, availableFrom: '2017-10-01', availableUntil: '2017-11-02', text: t('supernaturalSkins')},
-  splashySkins: {setPrice: 5, availableUntil: '2017-08-02', text: t('splashySkins')},
+  splashySkins: {setPrice: 5, availableFrom: '2018-07-10', availableUntil: '2018-08-02', text: t('splashySkins')},
   winterySkins: {setPrice: 5, availableFrom: '2018-01-04', availableUntil: '2018-02-02', text: t('winterySkins')},
 });

website/server/controllers/api-v3/news.js

@@ -3,7 +3,7 @@ import { authWithHeaders } from '../../middlewares/auth';
 let api = {};
 
 // @TODO export this const, cannot export it from here because only routes are exported from controllers
-const LAST_ANNOUNCEMENT_TITLE = 'JULY BACKGROUNDS AND ARMOIRE ITEMS!';
+const LAST_ANNOUNCEMENT_TITLE = 'SPLASHY SKINS';
 const worldDmg = { // @TODO
   bailey: false,
 };
@@ -27,21 +27,17 @@ api.getNews = {
       html: `
       <div class="bailey">
         <div class="media align-items-center">
+          <div class="mr-3 ${baileyClass}"></div>
           <div class="media-body">
-            <div class="media">
+            <h1 class="align-self-center">${res.t('newStuff')}</h1>
-              <div class="align-self-center mr-3 ${baileyClass}"></div>
+            <h2>7/10/2018 - ${LAST_ANNOUNCEMENT_TITLE}</h2>
-              <div class="media-body">
-                <h1 class="align-self-center">${res.t('newStuff')}</h1>
-                <h2>7/3/2018 - ${LAST_ANNOUNCEMENT_TITLE}</h2>
-              </div>
-            </div>
-            <hr/>
-            <p>We’ve added three new backgrounds to the Background Shop! Now your avatar can observe the ocean life near a Tide Pool, meander through the undersea City of Dilatory, or swim in the Dark Deep among bioluminescent critters. Check them out under User Icon > Backgrounds!</p>
-            <p>Plus, there’s new gold-purchasable equipment in the Enchanted Armoire, including the Pirate Princess Set. Better work hard on your real-life tasks to earn all the pieces! Enjoy :)</p>
-            <div class="small mb-3">by AnnDeLune, gully, Great and Powerful, Irrevenant, GeraldThePixel, AwsamSwazzy, and RandomGryffindor</div>
           </div>
-          <div class="promo_armoire_backgrounds_201807 mb-3 ml-3"></div>
+          <div class="promo_splashy_skins"></div>
         </div>
+        <hr/>
+        <p>The Seasonal Edition Splashy Skins are available until July 31st! You can complete your summer avatar look with Clownfish, Deep Ocean, Tropical Water, Mergold, Mergreen, Merblue, Merruby, and Shark Skins.</p>
+        <p>This Seasonal Edition customization set will only be available to purchase until July 31st, after which they'll be gone until next year, so be sure to swoop them up now! You can find them in User > Edit Avatar!</p>
+        <div class="small mb-3">by Lemoness and UncommonCriminal</div>
       </div>
       `,
     });