feat: Add wheelchair to avatar customization

common/dist/sprites/spritesmith-main-12.css

@@ -1,324 +1,354 @@
-.Pet-TRex-Desert {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -82px 0px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-TRex-Golden {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -492px -300px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-TRex-Red {
+.Pet-TRex-Base {
   background-image: url(spritesmith-main-12.png);
   background-position: -164px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-TRex-Shade {
+.Pet-TRex-CottonCandyBlue {
   background-image: url(spritesmith-main-12.png);
   background-position: 0px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-TRex-Skeleton {
+.Pet-TRex-CottonCandyPink {
   background-image: url(spritesmith-main-12.png);
   background-position: -82px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-TRex-White {
+.Pet-TRex-Desert {
   background-image: url(spritesmith-main-12.png);
   background-position: -164px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-TRex-Zombie {
+.Pet-TRex-Golden {
   background-image: url(spritesmith-main-12.png);
   background-position: -246px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Turkey-Base {
+.Pet-TRex-Red {
   background-image: url(spritesmith-main-12.png);
   background-position: -246px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Turkey-Gilded {
+.Pet-TRex-Shade {
   background-image: url(spritesmith-main-12.png);
   background-position: 0px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Unicorn-Base {
+.Pet-TRex-Skeleton {
   background-image: url(spritesmith-main-12.png);
   background-position: -82px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Unicorn-CottonCandyBlue {
+.Pet-TRex-White {
   background-image: url(spritesmith-main-12.png);
   background-position: -164px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Unicorn-CottonCandyPink {
+.Pet-TRex-Zombie {
   background-image: url(spritesmith-main-12.png);
   background-position: -246px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Unicorn-Desert {
+.Pet-TigerCub-White {
   background-image: url(spritesmith-main-12.png);
-  background-position: -328px 0px;
+  background-position: -82px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Unicorn-Golden {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -328px -100px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Unicorn-Red {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -328px -200px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Unicorn-Shade {
-  background-image: url(spritesmith-main-12.png);
-  background-position: 0px -300px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Unicorn-Skeleton {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -82px -300px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Unicorn-White {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -164px -300px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Unicorn-Zombie {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -246px -300px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-Base {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -328px -300px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-CottonCandyBlue {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -410px 0px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-CottonCandyPink {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -410px -100px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-Desert {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -410px -200px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-Golden {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -410px -300px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-Red {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -492px 0px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-Shade {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -492px -100px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-Skeleton {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -492px -200px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-White {
-  background-image: url(spritesmith-main-12.png);
-  background-position: 0px 0px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Whale-Zombie {
-  background-image: url(spritesmith-main-12.png);
-  background-position: 0px -400px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Wolf-Base {
+.Pet-TigerCub-Zombie {
   background-image: url(spritesmith-main-12.png);
   background-position: -82px -400px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-CottonCandyBlue {
+.Pet-Turkey-Base {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turkey-Gilded {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Base {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-CottonCandyBlue {
+  background-image: url(spritesmith-main-12.png);
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-CottonCandyPink {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Desert {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Golden {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Red {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Shade {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Skeleton {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-White {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Zombie {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Base {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyBlue {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyPink {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Desert {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Golden {
+  background-image: url(spritesmith-main-12.png);
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Red {
+  background-image: url(spritesmith-main-12.png);
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Shade {
   background-image: url(spritesmith-main-12.png);
   background-position: -164px -400px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-CottonCandyPink {
+.Pet-Whale-Skeleton {
   background-image: url(spritesmith-main-12.png);
   background-position: -246px -400px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Desert {
+.Pet-Whale-White {
   background-image: url(spritesmith-main-12.png);
   background-position: -328px -400px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Golden {
+.Pet-Whale-Zombie {
   background-image: url(spritesmith-main-12.png);
   background-position: -410px -400px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Peppermint {
+.Pet-Wolf-Base {
   background-image: url(spritesmith-main-12.png);
   background-position: -492px -400px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Red {
+.Pet-Wolf-CottonCandyBlue {
   background-image: url(spritesmith-main-12.png);
   background-position: -574px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Shade {
+.Pet-Wolf-CottonCandyPink {
   background-image: url(spritesmith-main-12.png);
   background-position: -574px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Skeleton {
+.Pet-Wolf-Desert {
   background-image: url(spritesmith-main-12.png);
   background-position: -574px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Spooky {
+.Pet-Wolf-Golden {
   background-image: url(spritesmith-main-12.png);
   background-position: -574px -300px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Veteran {
+.Pet-Wolf-Peppermint {
   background-image: url(spritesmith-main-12.png);
   background-position: -574px -400px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-White {
+.Pet-Wolf-Red {
   background-image: url(spritesmith-main-12.png);
   background-position: 0px -500px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Zombie {
+.Pet-Wolf-Shade {
   background-image: url(spritesmith-main-12.png);
   background-position: -82px -500px;
   width: 81px;
   height: 99px;
 }
-.Pet_HatchingPotion_Base {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -213px -500px;
-  width: 48px;
-  height: 51px;
-}
-.Pet_HatchingPotion_CottonCandyBlue {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -458px -500px;
-  width: 48px;
-  height: 51px;
-}
-.Pet_HatchingPotion_CottonCandyPink {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -262px -500px;
-  width: 48px;
-  height: 51px;
-}
-.Pet_HatchingPotion_Desert {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -311px -500px;
-  width: 48px;
-  height: 51px;
-}
-.Pet_HatchingPotion_Golden {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -360px -500px;
-  width: 48px;
-  height: 51px;
-}
-.Pet_HatchingPotion_Peppermint {
-  background-image: url(spritesmith-main-12.png);
-  background-position: -409px -500px;
-  width: 48px;
-  height: 51px;
-}
-.Pet_HatchingPotion_Red {
+.Pet-Wolf-Skeleton {
   background-image: url(spritesmith-main-12.png);
   background-position: -164px -500px;
-  width: 48px;
-  height: 51px;
+  width: 81px;
+  height: 99px;
 }
-.Pet_HatchingPotion_Shade {
+.Pet-Wolf-Spooky {
   background-image: url(spritesmith-main-12.png);
-  background-position: -507px -500px;
-  width: 48px;
-  height: 51px;
+  background-position: -246px -500px;
+  width: 81px;
+  height: 99px;
 }
-.Pet_HatchingPotion_Skeleton {
+.Pet-Wolf-Veteran {
   background-image: url(spritesmith-main-12.png);
-  background-position: -556px -500px;
-  width: 48px;
-  height: 51px;
+  background-position: -328px -500px;
+  width: 81px;
+  height: 99px;
 }
-.Pet_HatchingPotion_Spooky {
+.Pet-Wolf-White {
   background-image: url(spritesmith-main-12.png);
-  background-position: -605px -500px;
-  width: 48px;
-  height: 51px;
+  background-position: -410px -500px;
+  width: 81px;
+  height: 99px;
 }
-.Pet_HatchingPotion_White {
+.Pet-Wolf-Zombie {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -492px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Base {
   background-image: url(spritesmith-main-12.png);
   background-position: 0px -600px;
   width: 48px;
   height: 51px;
 }
-.Pet_HatchingPotion_Zombie {
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -245px -600px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
   background-image: url(spritesmith-main-12.png);
   background-position: -49px -600px;
   width: 48px;
   height: 51px;
 }
+.Pet_HatchingPotion_Desert {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -98px -600px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -147px -600px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -196px -600px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -574px -500px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -294px -600px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -343px -600px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -392px -600px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -441px -600px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url(spritesmith-main-12.png);
+  background-position: -490px -600px;
+  width: 48px;
+  height: 51px;
+}

common/locales/en/character.json

@@ -34,6 +34,7 @@
     "beard": "Beard",
     "mustache": "Mustache",
     "flower": "Flower",
+    "wheelChair": "Wheel Chair",
     "basicSkins": "Basic Skins",
     "rainbowSkins": "Rainbow Skins",
     "pastelSkins": "Pastel Skins",

common/script/content/appearance/chair.js

@@ -0,0 +1,6 @@
+import prefill from './prefill.js';
+
+export default prefill({
+  none: {},
+  black: {},
+});

common/script/content/appearance/index.js

@@ -3,6 +3,7 @@ import shirts from './shirt.js';
 import skins from './skin.js';
 import sizes from './size.js';
 import backgrounds from './backgrounds.js';
+import chairs from './chair.js';
 import {forOwn, clone} from 'lodash';
 
 let reorderedBgs = {};
@@ -25,6 +26,7 @@ let appearances = {
   shirt: shirts,
   size: sizes,
   skin: skins,
+  chair: chairs,
   background: reorderedBgs,
 };
 

website/src/controllers/api-v2/user.js

@@ -309,6 +309,7 @@ let requiresPurchase = {
   'preferences.shirt': 'shirt',
   'preferences.size': 'size',
   'preferences.skin': 'skin',
+  'preferences.chair': 'chair',
   'preferences.hair.bangs': 'hair.bangs',
   'preferences.hair.base': 'hair.base',
   'preferences.hair.beard': 'hair.beard',

website/src/models/user.js

@@ -346,6 +346,7 @@ var UserSchema = new Schema({
       mustache: {type: Number, 'default': 0},
       flower: {type: Number, 'default': 1}
     },
+    chair: {type: String, 'default': 'none'},
     hideHeader: {type:Boolean, 'default':false},
     skin: {type:String, 'default':'915533'},
     shirt: {type: String, 'default': 'blue'},

website/views/options/profile.jade

@@ -68,6 +68,13 @@ mixin customizeProfile(mobile)
             popover-placement='right', popover-append-to-body='true',
             ng-click='user.items.gear.owned[item.key] ? equip(item.key) : purchase(item.type,item)')
 
+        // Wheel Chair
+        li.customize-menu
+          menu(label=env.t('wheelChair'))
+            button.customize-option(ng-repeat='item in ::["black"]', class='chair_{{::item}}',
+                ng-class="{selectableInventory: user.preferences.chair == item}",
+                ng-click='user.preferences.chair != item ? set({"preferences.chair":item}) : set({"preferences.chair":"none"})')
+
     .col-md-4
         h3(class=mobile?'item item-divider':'')=env.t('bodyHead')
         menu(type='list')

website/views/shared/avatar/generated_avatar.jade

@@ -6,6 +6,7 @@ mixin costumeSetting(type, options)
 
 mixin generatedAvatar(options)
   - options = options || {}
+  span(class='chair_{{profile.preferences.chair}}')
   +costumeSetting('back')
   if options.sleep
     span(ng-class="'skin_' + profile.preferences.skin + '_sleep'")