krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-15 05:37:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(hair): exclusivity and canvas tweaks

Browse Source
This commit is contained in:
Sabe Jones
2016-11-15 21:24:46 +00:00
parent c977e5ebb5
commit 874887b790
7 changed files with 252 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gulp/gulp-sprites.js
View File

@@ -148,4 +148,6 @@ function cssVarMap (sprite) {
} }
if (~sprite.name.indexOf('shirt')) if (~sprite.name.indexOf('shirt'))
sprite.custom.px.offset_y = `-${ sprite.y + 30 }px`; // even more for shirts sprite.custom.px.offset_y = `-${ sprite.y + 30 }px`; // even more for shirts
if (~sprite.name.indexOf('topHair'))
sprite.custom.px.offset_y = `-${ sprite.y }px`; // don't crop updos
} }

BIN
website/assets/sprites/dist/spritesmith-main-1.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

336
website/assets/sprites/dist/spritesmith-main-3.css vendored
View File

File diff suppressed because it is too large Load Diff

132
website/assets/sprites/dist/spritesmith-main-4.css vendored
View File

@@ -6,7 +6,7 @@
} }
.customize-option.hair_topHair_5_TRUred { .customize-option.hair_topHair_5_TRUred {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -116px -379px; background-position: -116px -364px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -18,7 +18,7 @@
} }
.customize-option.hair_topHair_5_holly { .customize-option.hair_topHair_5_holly {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -116px -15px; background-position: -116px -0px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -30,7 +30,7 @@
} }
.customize-option.hair_topHair_5_hollygreen { .customize-option.hair_topHair_5_hollygreen {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -1208px -1198px; background-position: -1208px -1183px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -42,7 +42,7 @@
} }
.customize-option.hair_topHair_5_midnight { .customize-option.hair_topHair_5_midnight {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -25px -106px; background-position: -25px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -54,7 +54,7 @@
} }
.customize-option.hair_topHair_5_pblue { .customize-option.hair_topHair_5_pblue {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -116px -106px; background-position: -116px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -66,7 +66,7 @@
} }
.customize-option.hair_topHair_5_pblue2 { .customize-option.hair_topHair_5_pblue2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -207px -15px; background-position: -207px -0px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -78,7 +78,7 @@
} }
.customize-option.hair_topHair_5_peppermint { .customize-option.hair_topHair_5_peppermint {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -207px -106px; background-position: -207px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -90,7 +90,7 @@
} }
.customize-option.hair_topHair_5_pgreen { .customize-option.hair_topHair_5_pgreen {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -25px -197px; background-position: -25px -182px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -102,7 +102,7 @@
} }
.customize-option.hair_topHair_5_pgreen2 { .customize-option.hair_topHair_5_pgreen2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -116px -197px; background-position: -116px -182px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -114,7 +114,7 @@
} }
.customize-option.hair_topHair_5_porange { .customize-option.hair_topHair_5_porange {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -207px -197px; background-position: -207px -182px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -126,7 +126,7 @@
} }
.customize-option.hair_topHair_5_porange2 { .customize-option.hair_topHair_5_porange2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -298px -15px; background-position: -298px -0px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -138,7 +138,7 @@
} }
.customize-option.hair_topHair_5_ppink { .customize-option.hair_topHair_5_ppink {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -298px -106px; background-position: -298px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -150,7 +150,7 @@
} }
.customize-option.hair_topHair_5_ppink2 { .customize-option.hair_topHair_5_ppink2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -298px -197px; background-position: -298px -182px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -162,7 +162,7 @@
} }
.customize-option.hair_topHair_5_ppurple { .customize-option.hair_topHair_5_ppurple {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -25px -288px; background-position: -25px -273px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -174,7 +174,7 @@
} }
.customize-option.hair_topHair_5_ppurple2 { .customize-option.hair_topHair_5_ppurple2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -116px -288px; background-position: -116px -273px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -186,7 +186,7 @@
} }
.customize-option.hair_topHair_5_pumpkin { .customize-option.hair_topHair_5_pumpkin {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -207px -288px; background-position: -207px -273px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -198,7 +198,7 @@
} }
.customize-option.hair_topHair_5_purple { .customize-option.hair_topHair_5_purple {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -298px -288px; background-position: -298px -273px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -210,7 +210,7 @@
} }
.customize-option.hair_topHair_5_pyellow { .customize-option.hair_topHair_5_pyellow {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -389px -15px; background-position: -389px -0px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -222,7 +222,7 @@
} }
.customize-option.hair_topHair_5_pyellow2 { .customize-option.hair_topHair_5_pyellow2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -389px -106px; background-position: -389px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -234,7 +234,7 @@
} }
.customize-option.hair_topHair_5_rainbow { .customize-option.hair_topHair_5_rainbow {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -389px -197px; background-position: -389px -182px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -246,7 +246,7 @@
} }
.customize-option.hair_topHair_5_red { .customize-option.hair_topHair_5_red {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -389px -288px; background-position: -389px -273px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -258,7 +258,7 @@
} }
.customize-option.hair_topHair_5_snowy { .customize-option.hair_topHair_5_snowy {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -25px -379px; background-position: -25px -364px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -270,7 +270,7 @@
} }
.customize-option.hair_topHair_5_white { .customize-option.hair_topHair_5_white {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -207px -379px; background-position: -207px -364px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -282,7 +282,7 @@
} }
.customize-option.hair_topHair_5_winternight { .customize-option.hair_topHair_5_winternight {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -298px -379px; background-position: -298px -364px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -294,7 +294,7 @@
} }
.customize-option.hair_topHair_5_winterstar { .customize-option.hair_topHair_5_winterstar {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -389px -379px; background-position: -389px -364px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -306,7 +306,7 @@
} }
.customize-option.hair_topHair_5_yellow { .customize-option.hair_topHair_5_yellow {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -480px -15px; background-position: -480px -0px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -318,7 +318,7 @@
} }
.customize-option.hair_topHair_5_zombie { .customize-option.hair_topHair_5_zombie {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -480px -106px; background-position: -480px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -330,7 +330,7 @@
} }
.customize-option.hair_topHair_6_TRUred { .customize-option.hair_topHair_6_TRUred {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -389px -652px; background-position: -389px -637px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -342,7 +342,7 @@
} }
.customize-option.hair_topHair_6_aurora { .customize-option.hair_topHair_6_aurora {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -480px -197px; background-position: -480px -182px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -354,7 +354,7 @@
} }
.customize-option.hair_topHair_6_black { .customize-option.hair_topHair_6_black {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -480px -288px; background-position: -480px -273px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -366,7 +366,7 @@
} }
.customize-option.hair_topHair_6_blond { .customize-option.hair_topHair_6_blond {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -480px -379px; background-position: -480px -364px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -378,7 +378,7 @@
} }
.customize-option.hair_topHair_6_blue { .customize-option.hair_topHair_6_blue {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -25px -470px; background-position: -25px -455px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -390,7 +390,7 @@
} }
.customize-option.hair_topHair_6_brown { .customize-option.hair_topHair_6_brown {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -116px -470px; background-position: -116px -455px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -402,7 +402,7 @@
} }
.customize-option.hair_topHair_6_candycane { .customize-option.hair_topHair_6_candycane {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -207px -470px; background-position: -207px -455px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -414,7 +414,7 @@
} }
.customize-option.hair_topHair_6_candycorn { .customize-option.hair_topHair_6_candycorn {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -298px -470px; background-position: -298px -455px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -426,7 +426,7 @@
} }
.customize-option.hair_topHair_6_festive { .customize-option.hair_topHair_6_festive {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -389px -470px; background-position: -389px -455px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -438,7 +438,7 @@
} }
.customize-option.hair_topHair_6_frost { .customize-option.hair_topHair_6_frost {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -480px -470px; background-position: -480px -455px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -450,7 +450,7 @@
} }
.customize-option.hair_topHair_6_ghostwhite { .customize-option.hair_topHair_6_ghostwhite {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -571px -15px; background-position: -571px -0px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -462,7 +462,7 @@
} }
.customize-option.hair_topHair_6_green { .customize-option.hair_topHair_6_green {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -571px -106px; background-position: -571px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -474,7 +474,7 @@
} }
.customize-option.hair_topHair_6_halloween { .customize-option.hair_topHair_6_halloween {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -571px -197px; background-position: -571px -182px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -486,7 +486,7 @@
} }
.customize-option.hair_topHair_6_holly { .customize-option.hair_topHair_6_holly {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -571px -288px; background-position: -571px -273px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -498,7 +498,7 @@
} }
.customize-option.hair_topHair_6_hollygreen { .customize-option.hair_topHair_6_hollygreen {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -571px -379px; background-position: -571px -364px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -510,7 +510,7 @@
} }
.customize-option.hair_topHair_6_midnight { .customize-option.hair_topHair_6_midnight {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -571px -470px; background-position: -571px -455px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -522,7 +522,7 @@
} }
.customize-option.hair_topHair_6_pblue { .customize-option.hair_topHair_6_pblue {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -25px -561px; background-position: -25px -546px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -534,7 +534,7 @@
} }
.customize-option.hair_topHair_6_pblue2 { .customize-option.hair_topHair_6_pblue2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -116px -561px; background-position: -116px -546px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -546,7 +546,7 @@
} }
.customize-option.hair_topHair_6_peppermint { .customize-option.hair_topHair_6_peppermint {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -207px -561px; background-position: -207px -546px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -558,7 +558,7 @@
} }
.customize-option.hair_topHair_6_pgreen { .customize-option.hair_topHair_6_pgreen {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -298px -561px; background-position: -298px -546px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -570,7 +570,7 @@
} }
.customize-option.hair_topHair_6_pgreen2 { .customize-option.hair_topHair_6_pgreen2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -389px -561px; background-position: -389px -546px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -582,7 +582,7 @@
} }
.customize-option.hair_topHair_6_porange { .customize-option.hair_topHair_6_porange {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -480px -561px; background-position: -480px -546px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -594,7 +594,7 @@
} }
.customize-option.hair_topHair_6_porange2 { .customize-option.hair_topHair_6_porange2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -571px -561px; background-position: -571px -546px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -606,7 +606,7 @@
} }
.customize-option.hair_topHair_6_ppink { .customize-option.hair_topHair_6_ppink {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -662px -15px; background-position: -662px -0px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -618,7 +618,7 @@
} }
.customize-option.hair_topHair_6_ppink2 { .customize-option.hair_topHair_6_ppink2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -662px -106px; background-position: -662px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -630,7 +630,7 @@
} }
.customize-option.hair_topHair_6_ppurple { .customize-option.hair_topHair_6_ppurple {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -662px -197px; background-position: -662px -182px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -642,7 +642,7 @@
} }
.customize-option.hair_topHair_6_ppurple2 { .customize-option.hair_topHair_6_ppurple2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -662px -288px; background-position: -662px -273px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -654,7 +654,7 @@
} }
.customize-option.hair_topHair_6_pumpkin { .customize-option.hair_topHair_6_pumpkin {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -662px -379px; background-position: -662px -364px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -666,7 +666,7 @@
} }
.customize-option.hair_topHair_6_purple { .customize-option.hair_topHair_6_purple {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -662px -470px; background-position: -662px -455px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -678,7 +678,7 @@
} }
.customize-option.hair_topHair_6_pyellow { .customize-option.hair_topHair_6_pyellow {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -662px -561px; background-position: -662px -546px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -690,7 +690,7 @@
} }
.customize-option.hair_topHair_6_pyellow2 { .customize-option.hair_topHair_6_pyellow2 {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -25px -652px; background-position: -25px -637px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -702,7 +702,7 @@
} }
.customize-option.hair_topHair_6_rainbow { .customize-option.hair_topHair_6_rainbow {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -116px -652px; background-position: -116px -637px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -714,7 +714,7 @@
} }
.customize-option.hair_topHair_6_red { .customize-option.hair_topHair_6_red {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -207px -652px; background-position: -207px -637px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -726,7 +726,7 @@
} }
.customize-option.hair_topHair_6_snowy { .customize-option.hair_topHair_6_snowy {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -298px -652px; background-position: -298px -637px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -738,7 +738,7 @@
} }
.customize-option.hair_topHair_6_white { .customize-option.hair_topHair_6_white {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -480px -652px; background-position: -480px -637px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -750,7 +750,7 @@
} }
.customize-option.hair_topHair_6_winternight { .customize-option.hair_topHair_6_winternight {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -571px -652px; background-position: -571px -637px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -762,7 +762,7 @@
} }
.customize-option.hair_topHair_6_winterstar { .customize-option.hair_topHair_6_winterstar {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -662px -652px; background-position: -662px -637px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -774,7 +774,7 @@
} }
.customize-option.hair_topHair_6_yellow { .customize-option.hair_topHair_6_yellow {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -753px -15px; background-position: -753px -0px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
@@ -786,7 +786,7 @@
} }
.customize-option.hair_topHair_6_zombie { .customize-option.hair_topHair_6_zombie {
background-image: url(/spritesmith-main-4.png); background-image: url(/spritesmith-main-4.png);
background-position: -753px -106px; background-position: -753px -91px;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }

6
website/client-old/js/controllers/userCtrl.js
View File

@@ -66,8 +66,10 @@ habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$
if (confirm(window.env.t('purchaseFor',{cost:cost*4})) !== true) return; if (confirm(window.env.t('purchaseFor',{cost:cost*4})) !== true) return;
if (User.user.balance < cost) return $rootScope.openModal('buyGems'); if (User.user.balance < cost) return $rootScope.openModal('buyGems');
} else if (!_.get(User.user, 'purchased.' + path)) { } else if (!_.get(User.user, 'purchased.' + path)) {
if (confirm(window.env.t('purchaseFor',{cost:cost*4})) !== true) return; if (path.indexOf('hair.base') === -1 || !_.includes(['0', '1', '3'], path.split('.').pop())) {
if (User.user.balance < cost) return $rootScope.openModal('buyGems'); if (confirm(window.env.t('purchaseFor',{cost:cost*4})) !== true) return;
if (User.user.balance < cost) return $rootScope.openModal('buyGems');
}
} }
User.unlock({query:{path:path}}) User.unlock({query:{path:path}})
} }

10
website/common/script/ops/unlock.js
View File

@@ -52,6 +52,10 @@ module.exports = function unlock (user, req = {}, analytics) {
} */ } */
} else { } else {
alreadyOwns = _.get(user, `purchased.${path}`) === true; alreadyOwns = _.get(user, `purchased.${path}`) === true;
if (!alreadyOwns && path.indexOf('hair.base') !== -1) {
alreadyOwns = _.includes(['0', '1', '3'], path.split('.').pop());
}
} }
if ((!user.balance || user.balance < cost) && !alreadyOwns) { if ((!user.balance || user.balance < cost) && !alreadyOwns) {
@@ -79,6 +83,12 @@ module.exports = function unlock (user, req = {}, analytics) {
// Using Object so path[1] won't create an array but an object {path: {1: value}} // Using Object so path[1] won't create an array but an object {path: {1: value}}
setWith(user, `preferences.${key}`, value, Object); setWith(user, `preferences.${key}`, value, Object);
if (path.indexOf('hair.base') !== -1) {
_.set(user, 'preferences.hair.topHair', 0);
}
if (path.indexOf('hair.topHair') !== -1) {
_.set(user, 'preferences.hair.base', 0);
}
} else { } else {
// Using Object so path[1] won't create an array but an object {path: {1: value}} // Using Object so path[1] won't create an array but an object {path: {1: value}}
setWith(user, `purchased.${path}`, true, Object); setWith(user, `purchased.${path}`, true, Object);

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

@@ -114,9 +114,9 @@ mixin customizeProfile(mobile)
// Base hairstyles (free) // Base hairstyles (free)
menu(label=env.t('hairBase')) menu(label=env.t('hairBase'))
button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.base":0})', ng-class='{selectableInventory: user.preferences.hair.base == 0}') button(class='head_0 customize-option', type='button', ng-click='unlock("hair.base.0")', ng-class='{selectableInventory: user.preferences.hair.base === 0 && user.preferences.hair.topHair === 0}')
each num in [1,3] each num in [1,3]
button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.base":#{num}})', ng-class='{selectableInventory: user.preferences.hair.base == "#{num}"}') button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='unlock("hair.base.#{num}")', ng-class='{selectableInventory: user.preferences.hair.base == "#{num}"}')
// Purchasable hairstyles // Purchasable hairstyles
menu(label=env.t('hairSet1')) menu(label=env.t('hairSet1'))
@@ -138,7 +138,6 @@ mixin customizeProfile(mobile)
span(ng-hide='#{showPath("user.purchased.hair.topHair", styles, "&&")}') span(ng-hide='#{showPath("user.purchased.hair.topHair", styles, "&&")}')
+gemCost(2) +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.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 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}")') 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}")')