krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 14:47:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(customize): new hairstyles

Browse Source
This commit is contained in:
Sabe Jones
2016-11-14 22:26:14 +00:00
parent 8c4f35daf4
commit 55a15f938c
10 changed files with 364 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
website/assets/sprites/dist/spritesmith-main-15.css vendored Normal file
View File

@@ -0,0 +1,336 @@
.Pet-Turtle-Red {
background-image: url(/spritesmith-main-15.png);
background-position: -82px 0px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Shade {
background-image: url(/spritesmith-main-15.png);
background-position: 0px -400px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-position: -164px 0px;
width: 81px;
height: 99px;
}
.Pet-Turtle-White {
background-image: url(/spritesmith-main-15.png);
background-position: 0px -100px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Zombie {
background-image: url(/spritesmith-main-15.png);
background-position: -82px -100px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Base {
background-image: url(/spritesmith-main-15.png);
background-position: -164px -100px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-position: -246px 0px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-position: -246px -100px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Desert {
background-image: url(/spritesmith-main-15.png);
background-position: 0px -200px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Golden {
background-image: url(/spritesmith-main-15.png);
background-position: -82px -200px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Red {
background-image: url(/spritesmith-main-15.png);
background-position: -164px -200px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Shade {
background-image: url(/spritesmith-main-15.png);
background-position: -246px -200px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-position: -328px 0px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-White {
background-image: url(/spritesmith-main-15.png);
background-position: -328px -100px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Zombie {
background-image: url(/spritesmith-main-15.png);
background-position: -328px -200px;
width: 81px;
height: 99px;
}
.Pet-Whale-Base {
background-image: url(/spritesmith-main-15.png);
background-position: 0px -300px;
width: 81px;
height: 99px;
}
.Pet-Whale-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-position: -82px -300px;
width: 81px;
height: 99px;
}
.Pet-Whale-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-position: -164px -300px;
width: 81px;
height: 99px;
}
.Pet-Whale-Desert {
background-image: url(/spritesmith-main-15.png);
background-position: -246px -300px;
width: 81px;
height: 99px;
}
.Pet-Whale-Golden {
background-image: url(/spritesmith-main-15.png);
background-position: -328px -300px;
width: 81px;
height: 99px;
}
.Pet-Whale-Red {
background-image: url(/spritesmith-main-15.png);
background-position: -410px 0px;
width: 81px;
height: 99px;
}
.Pet-Whale-Shade {
background-image: url(/spritesmith-main-15.png);
background-position: -410px -100px;
width: 81px;
height: 99px;
}
.Pet-Whale-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-position: -410px -200px;
width: 81px;
height: 99px;
}
.Pet-Whale-White {
background-image: url(/spritesmith-main-15.png);
background-position: -410px -300px;
width: 81px;
height: 99px;
}
.Pet-Whale-Zombie {
background-image: url(/spritesmith-main-15.png);
background-position: -492px 0px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Base {
background-image: url(/spritesmith-main-15.png);
background-position: -492px -100px;
width: 81px;
height: 99px;
}
.Pet-Wolf-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-position: -492px -200px;
width: 81px;
height: 99px;
}
.Pet-Wolf-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-position: -492px -300px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Desert {
background-image: url(/spritesmith-main-15.png);
background-position: 0px 0px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Floral {
background-image: url(/spritesmith-main-15.png);
background-position: -82px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Ghost {
background-image: url(/spritesmith-main-15.png);
background-position: -164px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Golden {
background-image: url(/spritesmith-main-15.png);
background-position: -246px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Peppermint {
background-image: url(/spritesmith-main-15.png);
background-position: -328px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Red {
background-image: url(/spritesmith-main-15.png);
background-position: -410px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Shade {
background-image: url(/spritesmith-main-15.png);
background-position: -492px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-position: -574px 0px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Spooky {
background-image: url(/spritesmith-main-15.png);
background-position: -574px -100px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Thunderstorm {
background-image: url(/spritesmith-main-15.png);
background-position: -574px -200px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Veteran {
background-image: url(/spritesmith-main-15.png);
background-position: -574px -300px;
width: 81px;
height: 99px;
}
.Pet-Wolf-White {
background-image: url(/spritesmith-main-15.png);
background-position: -574px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Zombie {
background-image: url(/spritesmith-main-15.png);
background-position: 0px -500px;
width: 81px;
height: 99px;
}
.Pet_HatchingPotion_Base {
background-image: url(/spritesmith-main-15.png);
background-position: -131px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-position: -425px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-position: -180px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Desert {
background-image: url(/spritesmith-main-15.png);
background-position: -229px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Floral {
background-image: url(/spritesmith-main-15.png);
background-position: -278px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Ghost {
background-image: url(/spritesmith-main-15.png);
background-position: -327px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Golden {
background-image: url(/spritesmith-main-15.png);
background-position: -376px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Peppermint {
background-image: url(/spritesmith-main-15.png);
background-position: -82px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Red {
background-image: url(/spritesmith-main-15.png);
background-position: -474px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Shade {
background-image: url(/spritesmith-main-15.png);
background-position: -523px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Skeleton {
background-image: url(/spritesmith-main-15.png);
background-position: -572px -500px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Spooky {
background-image: url(/spritesmith-main-15.png);
background-position: 0px -600px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Thunderstorm {
background-image: url(/spritesmith-main-15.png);
background-position: -49px -600px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_White {
background-image: url(/spritesmith-main-15.png);
background-position: -98px -600px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Zombie {
background-image: url(/spritesmith-main-15.png);
background-position: -147px -600px;
width: 48px;
height: 51px;
}

BIN
website/assets/sprites/dist/spritesmith-main-15.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

1
website/common/locales/en/character.json
View File

@@ -30,6 +30,7 @@
"hairBase": "Base", "hairBase": "Base",
"hairSet1": "Hairstyle Set 1", "hairSet1": "Hairstyle Set 1",
"hairSet2": "Hairstyle Set 2", "hairSet2": "Hairstyle Set 2",
"hairSet3": "Hairstyle Set 3",
"bodyFacialHair": "Facial Hair", "bodyFacialHair": "Facial Hair",
"beard": "Beard", "beard": "Beard",
"mustache": "Mustache", "mustache": "Mustache",

1
website/common/script/content/appearance/hair/bangs.js
View File

@@ -5,4 +5,5 @@ module.exports = prefill({
1: {}, 1: {},
2: {}, 2: {},
3: {}, 3: {},
4: {},
}); });

2
website/common/script/content/appearance/hair/index.js
View File

@@ -4,6 +4,7 @@ import beard from './beard.js';
import color from './color.js'; import color from './color.js';
import flower from './flower.js'; import flower from './flower.js';
import mustache from './mustache.js'; import mustache from './mustache.js';
import topHair from './top-hair.js';
module.exports = { module.exports = {
color, color,
@@ -12,4 +13,5 @@ module.exports = {
flower, flower,
beard, beard,
mustache, mustache,
topHair,
}; };

12
website/common/script/content/appearance/hair/top-hair.js Normal file
View File

@@ -0,0 +1,12 @@
import prefill from '../prefill.js';
import sets from '../sets.js';
module.exports = prefill({
0: {},
1: {price: 2, set: sets.topHair},
2: {price: 2, set: sets.topHair},
3: {price: 2, set: sets.topHair},
4: {price: 2, set: sets.topHair},
5: {price: 2, set: sets.topHair},
6: {price: 2, set: sets.topHair},
});

1
website/common/script/content/appearance/sets.js
View File

@@ -4,6 +4,7 @@ import prefill from './prefill.js';
module.exports = prefill({ module.exports = prefill({
baseHair1: {setPrice: 5, text: t('hairSet1')}, baseHair1: {setPrice: 5, text: t('hairSet1')},
baseHair2: {setPrice: 5, text: t('hairSet2')}, baseHair2: {setPrice: 5, text: t('hairSet2')},
topHair: {setPrice: 5, text: t('hairSet3')},
facialHair: {setPrice: 5, text: t('bodyFacialHair')}, facialHair: {setPrice: 5, text: t('bodyFacialHair')},
specialShirts: {setPrice: 5, text: t('specialShirts')}, specialShirts: {setPrice: 5, text: t('specialShirts')},
winterHairColors: {setPrice: 5, availableUntil: '2016-01-01'}, winterHairColors: {setPrice: 5, availableUntil: '2016-01-01'},

1
website/server/models/user/schema.js
View File

@@ -395,6 +395,7 @@ let schema = new Schema({
beard: {type: Number, default: 0}, beard: {type: Number, default: 0},
mustache: {type: Number, default: 0}, mustache: {type: Number, default: 0},
flower: {type: Number, default: 1}, flower: {type: Number, default: 1},
topHair: {type: Number, default: 0},
}, },
hideHeader: {type: Boolean, default: false}, hideHeader: {type: Boolean, default: false},
skin: {type: String, default: '915533'}, skin: {type: String, default: '915533'},

10
website/views/options/profile.jade
View File

@@ -109,7 +109,7 @@ mixin customizeProfile(mobile)
// Bangs // Bangs
menu(label=env.t('hairBangs')) menu(label=env.t('hairBangs'))
button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.bangs":0})', ng-class='{selectableInventory: user.preferences.hair.bangs == 0}') button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.bangs":0})', ng-class='{selectableInventory: user.preferences.hair.bangs == 0}')
each num in [1,2,3] each num in [1,2,3,4]
button(class='hair_bangs_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.bangs":#{num}})', ng-class='{selectableInventory: user.preferences.hair.bangs == "#{num}"}') button(class='hair_bangs_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.bangs":#{num}})', ng-class='{selectableInventory: user.preferences.hair.bangs == "#{num}"}')
// Base hairstyles (free) // Base hairstyles (free)
@@ -133,6 +133,14 @@ mixin customizeProfile(mobile)
button.btn.btn-xs(ng-click='#{unlockPath("hair.base", styles)}')!= env.t('unlockSet', {cost: 5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>' button.btn.btn-xs(ng-click='#{unlockPath("hair.base", styles)}')!= env.t('unlockSet', {cost: 5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
each num in styles each num in styles
button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.base["#{num}"], selectableInventory: user.preferences.hair.base == "#{num}"}', ng-click='unlock("hair.base.#{num}")') button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.base["#{num}"], selectableInventory: user.preferences.hair.base == "#{num}"}', ng-click='unlock("hair.base.#{num}")')
menu(label=env.t('hairSet3'))
- var styles = [1,2,3,4,5,6]
span(ng-hide='#{showPath("user.purchased.hair.topHair", styles, "&&")}')
+gemCost(2)
button.btn.btn-xs(ng-click='#{unlockPath("hair.topHair", styles)}')!= env.t('unlockSet', {cost: 5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.topHair":0})', ng-class='{selectableInventory: user.preferences.hair.topHair == 0}')
each num in styles
button(class='hair_topHair_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.topHair["#{num}"], selectableInventory: user.preferences.hair.topHair == "#{num}"}', ng-click='unlock("hair.topHair.#{num}")')
li.customize-menu li.customize-menu
menu(label=env.t('bodyFacialHair')) menu(label=env.t('bodyFacialHair'))

2
website/views/shared/avatar/generated_avatar.jade
View File

@@ -19,7 +19,7 @@ mixin generatedAvatar(options)
+costumeSetting('back', {suffix: " + '_collar'"}) +costumeSetting('back', {suffix: " + '_collar'"})
+costumeSetting('body') +costumeSetting('body')
span.head_0 span.head_0
- var hairTypes = ['base', 'bangs', 'mustache', 'beard'] - var hairTypes = ['base', 'bangs', 'topHair', 'mustache', 'beard']
each type in hairTypes each type in hairTypes
span(class='hair_#{type}_{{profile.preferences.hair.#{type}}}_{{profile.preferences.hair.color}}') span(class='hair_#{type}_{{profile.preferences.hair.#{type}}}_{{profile.preferences.hair.color}}')
+costumeSetting('eyewear') +costumeSetting('eyewear')