feat(content): fall avatar customization

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

@@ -1,6 +1,6 @@
 .achievement-costumeContest6x {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1277px -148px;
+  background-position: -1277px -296px;
   width: 144px;
   height: 156px;
 }
@@ -22,6 +22,12 @@
   width: 423px;
   height: 147px;
 }
+.promo_fall_avatar_customizations {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -394px -723px;
+  width: 336px;
+  height: 207px;
+}
 .promo_fall_festival_2017 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: -481px -495px;
@@ -36,13 +42,13 @@
 }
 .promo_forest_friends_bundle {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -937px;
+  background-position: -1136px 0px;
   width: 423px;
   height: 147px;
 }
 .promo_ghost_potions {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -394px -723px;
+  background-position: -424px -937px;
   width: 423px;
   height: 147px;
 }
@@ -54,25 +60,25 @@
 }
 .promo_mystery_201809 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1136px 0px;
+  background-position: -1136px -148px;
   width: 306px;
   height: 147px;
 }
 .promo_seasonal_shop {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1136px -443px;
+  background-position: -1136px -591px;
   width: 162px;
   height: 138px;
 }
 .promo_spooky_sparkles {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1136px -148px;
+  background-position: -1136px -296px;
   width: 140px;
   height: 294px;
 }
 .promo_take_this {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1277px -305px;
+  background-position: -1443px -148px;
   width: 96px;
   height: 69px;
 }

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

@@ -11,13 +11,13 @@ module.exports = prefill({
   pastelHairColors: {setPrice: 5, availableUntil: '2016-01-01'},
   rainbowHairColors: {setPrice: 5, text: t('rainbowColors')},
   shimmerHairColors: {setPrice: 5, availableFrom: '2018-04-05', availableUntil: '2018-05-02', text: t('shimmerColors')},
-  hauntedHairColors: {setPrice: 5, availableFrom: '2017-10-01', availableUntil: '2017-11-02', text: t('hauntedColors')},
+  hauntedHairColors: {setPrice: 5, availableFrom: '2018-10-11', availableUntil: '2018-11-02', text: t('hauntedColors')},
   winteryHairColors: {setPrice: 5, availableFrom: '2018-01-04', availableUntil: '2018-02-02', text: t('winteryColors')},
   rainbowSkins: {setPrice: 5, text: t('rainbowSkins')},
   animalSkins: {setPrice: 5, text: t('animalSkins')},
   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')},
+  supernaturalSkins: {setPrice: 5, availableFrom: '2018-10-11', availableUntil: '2018-11-02', text: t('supernaturalSkins')},
   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 = 'ALLIGATOR PET QUEST AND SPOOKY SPARKLES!';
+const LAST_ANNOUNCEMENT_TITLE = 'FALL FESTIVAL AVATAR CUSTOMIZATIONS AND USERNAME FAQS';
 const worldDmg = { // @TODO
   bailey: false,
 };
@@ -30,25 +30,28 @@ api.getNews = {
           <div class="mr-3 ${baileyClass}"></div>
           <div class="media-body">
             <h1 class="align-self-center">${res.t('newStuff')}</h1>
-            <h2>10/09/2018 - ${LAST_ANNOUNCEMENT_TITLE}</h2>
+            <h2>10/11/2018 - ${LAST_ANNOUNCEMENT_TITLE}</h2>
           </div>
         </div>
         <hr/>
-        <h3>New Pet Quest: The Insta-Gator!</h3>
+        <div class="promo_fall_avatar_customizations center-block"></div>
-        <p>Drop what you're doing, right now, and head to the Quest Shop!<sup>*</sup> Get the latest pet quest, <a href='/shops/quests' target='_blank'>The Insta-Gator</a>, and earn some cunning alligator pets by completing your real-life tasks.</p>
+        <h3>Supernatural Skins & Haunted Hair Colors</h3>
-        <div class="small">Art by gully, mfonda, UncommonCriminal, tabbytoes, and Willow the Witty</div>
+        <p>The Seasonal Edition Haunted Hair Colors are now available for purchase! Now you can dye your avatar's hair Pumpkin, Midnight, Candy Corn, Ghost White, Zombie, or Halloween. They’ll vanish after October 31, so be sure to check them out!</p>
-        <div class="small">Writing by Mike.Antonacci</div>
+        <p>The Supernatural Skin Set is also available until October 31st! Now your avatar can become an Ogre, Skeleton, Pumpkin, Candy Corn, Reptile, or Dread Shade.</p>
-        <div class="small mb-3">*We're kidding! Feel free to tackle your important Dailies and To-Dos first. To do otherwise would be to play right into the Insta-Gator's jaws!</div>
+        <p>Seasonal Edition items recur unchanged every year, but they are only available to purchase during a short period of time. Find these exciting skins and hair colors in User>Edit Avatar. Get them now, or you'll have to wait until next year!</p>
-        <div class="promo_alligator center-block"></div>
+        <div class="small mb-3">by Lemoness, mariahm, and crystalphoenix</div>
-        <div class="media align-items-center">
+        <div class="scene_nametag center-block"></div>
-          <div class="media-body">
+        <h3>Unique Usernames Update and FAQ</h3>
-            <h3>Spooky Sparkles in the Seasonal Shop</h3>
+        <p>It’s been a week since we announced the switch to unique usernames. So far, around half of active Habiticans have confirmed their usernames and are ready to go. Be sure to go to <a href="/user/settings/site" target="_blank">Settings</a> and confirm yours!</p>
-            <p>There's a new Gold-purchasable item in the <a href='/shops/seasonal' target='_blank'>Seasonal Shop</a>: Spooky Sparkles! Buy some and then cast it on your friends. I wonder what it will do?</p>
+        <p>We’ve seen a few questions floating around the community and wanted to provide some clarification about the change:</p>
-            <p>If you have Spooky Sparkles cast on you, you will receive the "Alarming Friends" badge! Don't worry, any mysterious effects will wear off the next day.... or you can cancel them early by buying an Opaque Potion!</p>
+        <ul>
-            <p>While you're at it, be sure to check out all the other items in the Seasonal Shop! There are lots of equipment items from the previous Fall Festivals. The Seasonal Shop will only be open until October 31st, so stock up now.</p>
+          <li><strong>Usernames will appear beside your display name</strong> in chats and your profile</li>
-          </div>
+          <li><strong>Usernames must be unique</strong> to be sure you’re inviting or messaging the right person</li>
-          <div class="promo_spooky_sparkles ml-3"></div>
+          <li><strong>Display names aren’t unique</strong>, and two people can have the same one. Your display name can be the same as or different than your username.</li>
-        </div>
+          <li><strong>You can change your display name and username at any time</strong>, even after confirmation</li>
+          <li><strong>Changes to chat and invitations will roll out gradually</strong> after about a month</li>
+        </ul>
+        <p>If you want to read a more in-depth Q&A on this change and see an example to show how it will work, please <a href="https://habitica.wordpress.com/2018/10/11/coming-soon-unique-usernames/" target="_blank">visit our blog</a>!</p>
       </div>
       `,
     });