mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-31 19:20:25 +00:00
begin integrating spritesheet
This commit is contained in:
Tyler Renelle
parent
6738d0ae56
commit
76231aed12
3 changed files with 96 additions and 24 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
@import "nib/vendor";
|
@import "nib/vendor";
|
||||||
@import "../bootstrap-responsive";
|
@import "../bootstrap-responsive.styl";
|
||||||
|
@import "../sprites.styl";
|
||||||
|
|
||||||
html,body,p,h1,ul,li,table,tr,th,td
|
html,body,p,h1,ul,li,table,tr,th,td
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
@ -120,24 +121,6 @@ li:hover .task-meta-controls .hover-show
|
||||||
td
|
td
|
||||||
padding-right: 2em
|
padding-right: 2em
|
||||||
|
|
||||||
td.avatar
|
|
||||||
vertical-align: top
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
.avatar-sprites
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.weapon
|
|
||||||
position: absolute
|
|
||||||
z-index: 200
|
|
||||||
left: -13px
|
|
||||||
bottom: 7px
|
|
||||||
.weapon-0
|
|
||||||
left: -7px
|
|
||||||
.weapon-5
|
|
||||||
left: -16px
|
|
||||||
.weapon-6
|
|
||||||
left:-20px
|
|
||||||
td#bars
|
td#bars
|
||||||
padding-top: 10px
|
padding-top: 10px
|
||||||
|
|
||||||
|
|
|
||||||
83
styles/sprites.styl
Normal file
83
styles/sprites.styl
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
.avatar
|
||||||
|
position: relative;
|
||||||
|
margin-top: -12px;
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
|
||||||
|
.character-sprites
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
|
||||||
|
.lvl
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 10px;
|
||||||
|
|
||||||
|
.item-goldensword, .item-redsword, .item-bluesword, .item-morningstar, .item-axe, .item-sword2, .item-sword1, .f_shield_5, .f_shield_4, .f_shield_3, .f_shield_2, .f_shield_1, .m_shield_5, .m_shield_4, .m_shield_3, .m_shield_2, .m_shield_1, .m_head_5, .m_head_4, .m_head_3, .m_head_2, .m_head_1, .m_head_0, .f_head_5_v2, .f_head_5_v1, .f_head_4_v2, .f_head_4_v1, .f_head_3_v2, .f_head_3_v1, .f_head_2_v2, .f_head_2_v1, .f_head_1, .f_head_0, .f_hair_white, .f_hair_brown, .f_hair_black, .f_hair_blond, .m_hair_blond, .m_hair_black, .m_hair_brown, .m_hair_white, .f_armor_5, .f_armor_4, .f_armor_3, .f_armor_2, .f_armor_1, .f_armor_0_v2, .f_armor_0_v1, .m_armor_5, .m_armor_4, .m_armor_3, .m_armor_2, .m_armor_1, .m_armor_0, .f_skin_dead, .f_skin_orc, .f_skin_asian, .f_skin_black, .f_skin_white, .m_skin_dead, .m_skin_orc, .m_skin_asian, .m_skin_black, .m_skin_white {
|
||||||
|
background: url("img/BrowserQuest/habitrpg_mods/css_sprite.png") no-repeat;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.item-goldensword {background-position: 0 0; width: 90px; height: 90px}
|
||||||
|
.item-redsword {background-position: -90px 0; width: 90px; height: 90px}
|
||||||
|
.item-bluesword {background-position: -180px 0; width: 90px; height: 90px}
|
||||||
|
.item-morningstar {background-position: -270px 0; width: 90px; height: 90px}
|
||||||
|
.item-axe {background-position: -360px 0; width: 90px; height: 90px}
|
||||||
|
.item-sword2 {background-position: -450px 0; width: 90px; height: 90px}
|
||||||
|
.item-sword1 {background-position: -540px 0; width: 90px; height: 90px}
|
||||||
|
.f_shield_5 {background-position: -630px 0; width: 90px; height: 90px}
|
||||||
|
.f_shield_4 {background-position: -720px 0; width: 90px; height: 90px}
|
||||||
|
.f_shield_3 {background-position: -810px 0; width: 90px; height: 90px}
|
||||||
|
.f_shield_2 {background-position: -900px 0; width: 90px; height: 90px}
|
||||||
|
.f_shield_1 {background-position: -990px 0; width: 90px; height: 90px}
|
||||||
|
.m_shield_5 {background-position: -1080px 0; width: 90px; height: 90px}
|
||||||
|
.m_shield_4 {background-position: -1170px 0; width: 90px; height: 90px}
|
||||||
|
.m_shield_3 {background-position: -1260px 0; width: 90px; height: 90px}
|
||||||
|
.m_shield_2 {background-position: -1350px 0; width: 90px; height: 90px}
|
||||||
|
.m_shield_1 {background-position: -1440px 0; width: 90px; height: 90px}
|
||||||
|
.m_head_5 {background-position: -1530px 0; width: 90px; height: 90px}
|
||||||
|
.m_head_4 {background-position: -1620px 0; width: 90px; height: 90px}
|
||||||
|
.m_head_3 {background-position: -1710px 0; width: 90px; height: 90px}
|
||||||
|
.m_head_2 {background-position: -1800px 0; width: 90px; height: 90px}
|
||||||
|
.m_head_1 {background-position: -1890px 0; width: 90px; height: 90px}
|
||||||
|
.m_head_0 {background-position: -1980px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_5_v2 {background-position: -2070px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_5_v1 {background-position: -2160px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_4_v2 {background-position: -2250px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_4_v1 {background-position: -2340px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_3_v2 {background-position: -2430px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_3_v1 {background-position: -2520px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_2_v2 {background-position: -2610px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_2_v1 {background-position: -2700px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_1 {background-position: -2790px 0; width: 90px; height: 90px}
|
||||||
|
.f_head_0 {background-position: -2880px 0; width: 90px; height: 90px}
|
||||||
|
.f_hair_white {background-position: -2970px 0; width: 90px; height: 90px}
|
||||||
|
.f_hair_brown {background-position: -3060px 0; width: 90px; height: 90px}
|
||||||
|
.f_hair_black {background-position: -3150px 0; width: 90px; height: 90px}
|
||||||
|
.f_hair_blond {background-position: -3240px 0; width: 90px; height: 90px}
|
||||||
|
.m_hair_blond {background-position: -3330px 0; width: 90px; height: 90px}
|
||||||
|
.m_hair_black {background-position: -3420px 0; width: 90px; height: 90px}
|
||||||
|
.m_hair_brown {background-position: -3510px 0; width: 90px; height: 90px}
|
||||||
|
.m_hair_white {background-position: -3600px 0; width: 90px; height: 90px}
|
||||||
|
.f_armor_5 {background-position: -3690px 0; width: 90px; height: 90px}
|
||||||
|
.f_armor_4 {background-position: -3780px 0; width: 90px; height: 90px}
|
||||||
|
.f_armor_3 {background-position: -3870px 0; width: 90px; height: 90px}
|
||||||
|
.f_armor_2 {background-position: -3960px 0; width: 90px; height: 90px}
|
||||||
|
.f_armor_1 {background-position: -4050px 0; width: 90px; height: 90px}
|
||||||
|
.f_armor_0_v2 {background-position: -4140px 0; width: 90px; height: 90px}
|
||||||
|
.f_armor_0_v1 {background-position: -4230px 0; width: 90px; height: 90px}
|
||||||
|
.m_armor_5 {background-position: -4320px 0; width: 90px; height: 90px}
|
||||||
|
.m_armor_4 {background-position: -4410px 0; width: 90px; height: 90px}
|
||||||
|
.m_armor_3 {background-position: -4500px 0; width: 90px; height: 90px}
|
||||||
|
.m_armor_2 {background-position: -4590px 0; width: 90px; height: 90px}
|
||||||
|
.m_armor_1 {background-position: -4680px 0; width: 90px; height: 90px}
|
||||||
|
.m_armor_0 {background-position: -4770px 0; width: 90px; height: 90px}
|
||||||
|
.f_skin_dead {background-position: -4860px 0; width: 90px; height: 90px}
|
||||||
|
.f_skin_orc {background-position: -4950px 0; width: 90px; height: 90px}
|
||||||
|
.f_skin_asian {background-position: -5040px 0; width: 90px; height: 90px}
|
||||||
|
.f_skin_black {background-position: -5130px 0; width: 90px; height: 90px}
|
||||||
|
.f_skin_white {background-position: -5220px 0; width: 90px; height: 90px}
|
||||||
|
.m_skin_dead {background-position: -5310px 0; width: 90px; height: 90px}
|
||||||
|
.m_skin_orc {background-position: -5400px 0; width: 90px; height: 90px}
|
||||||
|
.m_skin_asian {background-position: -5490px 0; width: 90px; height: 90px}
|
||||||
|
.m_skin_black {background-position: -5580px 0; width: 90px; height: 90px}
|
||||||
|
.m_skin_white {background-position: -5670px 0; width: 90px; height: 90px}
|
||||||
|
|
@ -205,12 +205,18 @@
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<!-- Avatar -->
|
<!-- Avatar -->
|
||||||
<td class="avatar main-avatar">
|
<td>
|
||||||
<div class='avatar-sprites'>
|
<div class="avatar">
|
||||||
<img class='weapon weapon-{_user.items.weapon}' src="/img/BrowserQuest/habitrpg_mods/weapon{_user.items.weapon}.png" />
|
<div class='character-sprites'>
|
||||||
<img class='armor armor-{_user.items.armor}' src="/img/BrowserQuest/habitrpg_mods/{currentArmor(_user)}" />
|
<span class='m_skin_white'></span>
|
||||||
|
<span class='m_head_0'></span>
|
||||||
|
<span class='m_hair_blond'></span>
|
||||||
|
<span class='m_armor_0'></span>
|
||||||
|
<span class='m_shield_1'></span>
|
||||||
|
<span class='item-sword1'></span>
|
||||||
|
</div>
|
||||||
|
<div class="lvl"><span class="badge badge-info">Lvl {_user.stats.lvl}</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="lvl"><span class="badge badge-info">Lvl {_user.stats.lvl}</span></div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<!-- Progress Bars -->
|
<!-- Progress Bars -->
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue