mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-02 15:59:39 +00:00
Tyler Renelle
commit
835be62031
6 changed files with 312 additions and 115 deletions
|
|
@ -1,48 +1,23 @@
|
|||
#character
|
||||
float:none
|
||||
margin:0px auto
|
||||
|
||||
td#bars
|
||||
padding-top: 10px
|
||||
|
||||
#bars
|
||||
.progress
|
||||
position: relative
|
||||
height: 25px
|
||||
.bar
|
||||
height: 25px
|
||||
border: 1px solid black
|
||||
.progress-text
|
||||
position: absolute
|
||||
right: 5px
|
||||
top: 3px
|
||||
color: black
|
||||
|
||||
|
||||
// basic avatar sprite group
|
||||
.avatar
|
||||
cursor: pointer
|
||||
position: relative
|
||||
margin-top: -12px
|
||||
width: 90px
|
||||
height: 90px
|
||||
|
||||
.character-sprites
|
||||
position: absolute
|
||||
top: -15px
|
||||
|
||||
.lvl
|
||||
position: absolute
|
||||
bottom: 0px
|
||||
right: 10px
|
||||
|
||||
// main and party avatars
|
||||
.main-avatar, .party-avatar
|
||||
.character-sprites
|
||||
top: -15px
|
||||
|
||||
|
||||
.character-sprites span
|
||||
position: absolute
|
||||
|
||||
table.customize td div
|
||||
cursor: pointer
|
||||
-webkit-transition: 0.25s ease-out
|
||||
-moz-transition: 0.25s ease-out
|
||||
transition: 0.25s ease-out
|
||||
|
||||
table.customize td div:active
|
||||
background-color: rgb(255, 242, 204);
|
||||
position: absolute
|
||||
62
styles/app/customizer.styl
Normal file
62
styles/app/customizer.styl
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
// $customizations-modal layout
|
||||
|
||||
.avatar-window
|
||||
margin: 0
|
||||
border: 1px solid darkgrey;
|
||||
width: 107px;
|
||||
float: right;
|
||||
|
||||
.char-name
|
||||
margin-top: 6px;
|
||||
border-top: 1px solid darkgrey;
|
||||
text-align: center
|
||||
line-height: 2
|
||||
|
||||
|
||||
menu
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.customize-menu
|
||||
padding: 0;
|
||||
width: 70%;
|
||||
list-style: none;
|
||||
padding-bottom: 10px
|
||||
|
||||
menu:before
|
||||
content: attr(label);
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 2
|
||||
|
||||
.customize-option
|
||||
border: 1px solid grey;
|
||||
background-color: hsl(0, 0%, 93%);
|
||||
margin-bottom: 10px
|
||||
|
||||
cursor: pointer;
|
||||
-webkit-transition: background-color 0.5s ease-out
|
||||
-moz-transition: background-color 0.5s ease-out
|
||||
transition: background-color 0.5s ease-out
|
||||
|
||||
.customize-option:active
|
||||
background-color: rgb(255, 242, 204);
|
||||
-webkit-transition: none
|
||||
-moz-transition: none
|
||||
transition: none
|
||||
|
||||
.customize-option:not(:last-of-type)
|
||||
margin-right: 10px
|
||||
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.avatar-window {
|
||||
float: none;
|
||||
margin-bottom: 1em
|
||||
}
|
||||
|
||||
.customize-menu {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,3 +76,44 @@
|
|||
.f_skin_asian {background-position: -3150px 0; width: 90px; height: 90px}
|
||||
.f_skin_black {background-position: -3240px 0; width: 90px; height: 90px}
|
||||
.f_skin_white {background-position: -3330px 0; width: 90px; height: 90px}
|
||||
|
||||
|
||||
|
||||
// narrower spriting for customize modal
|
||||
.customize-menu
|
||||
// shared option-box styles
|
||||
[class^="f_hair"], [class^="f_skin"], [class^="f_armor"], .f_head_0
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
// head
|
||||
.f_head_0
|
||||
background-position: -1917px -9px;
|
||||
|
||||
// hair
|
||||
.f_hair_white
|
||||
background-position: -2009px -8px;
|
||||
.f_hair_brown
|
||||
background-position: -2099px -8px;
|
||||
.f_hair_black
|
||||
background-position: -2189px -8px;
|
||||
.f_hair_blond
|
||||
background-position: -2279px -8px;
|
||||
|
||||
// skin
|
||||
.f_skin_dead
|
||||
background-position: -2997px -20px;
|
||||
.f_skin_orc
|
||||
background-position: -3087px -20px;
|
||||
.f_skin_asian
|
||||
background-position: -3177px -20px;
|
||||
.f_skin_black
|
||||
background-position: -3267px -20px;
|
||||
.f_skin_white
|
||||
background-position: -3357px -20px;
|
||||
|
||||
// starting armor
|
||||
.f_armor_0_v2
|
||||
background-position: -2819px -38px;
|
||||
.f_armor_0_v1
|
||||
background-position: -2909px -38px;
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
@import "./shop_sprites.styl";
|
||||
@import "./tasks.styl";
|
||||
@import "./avatar.styl";
|
||||
@import "./customizer.styl";
|
||||
@import "./items.styl";
|
||||
|
||||
html,body,p,h1,ul,li,table,tr,th,td
|
||||
|
|
@ -28,15 +29,61 @@ html,body,p,h1,ul,li,table,tr,th,td
|
|||
white-space: nowrap
|
||||
position:fixed
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
z-index: 1000
|
||||
|
||||
#head .pull-right
|
||||
margin-right: 2%
|
||||
margin-right: 0
|
||||
margin-left: 1%
|
||||
|
||||
.modal
|
||||
whitespace:normal
|
||||
|
||||
.dropdown-menu
|
||||
right: 0
|
||||
left: auto
|
||||
|
||||
.char-status
|
||||
// border: 1px dotted grey
|
||||
|
||||
.main-avatar-wrap
|
||||
margin: 0 5px 0 0
|
||||
float: left
|
||||
|
||||
.party-avatar-wrap
|
||||
margin: 0
|
||||
float: right
|
||||
|
||||
.progress-bars
|
||||
padding-top: 15px
|
||||
|
||||
.progress
|
||||
position: relative
|
||||
height: 25px
|
||||
.bar
|
||||
height: 25px
|
||||
border: 1px solid black
|
||||
.progress-text
|
||||
position: absolute
|
||||
right: 5px
|
||||
top: 3px
|
||||
color: black
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.char-status {
|
||||
padding-top: 30px
|
||||
}
|
||||
.main-avatar-wrap {
|
||||
border-right: 1px solid grey;
|
||||
padding-right: 20px
|
||||
}
|
||||
.party-avatar-wrap {
|
||||
float: left;
|
||||
}
|
||||
.progress-bars {
|
||||
clear: both
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
|
|
@ -121,9 +168,15 @@ html,body,p,h1,ul,li,table,tr,th,td
|
|||
/* Misc
|
||||
-------------------------------------------------- */
|
||||
|
||||
#dead-modal img
|
||||
.notification-character
|
||||
float:left
|
||||
padding-right:10px
|
||||
|
||||
.notification-message
|
||||
display: inline-block;
|
||||
padding-right: 1em
|
||||
line-height: 3
|
||||
|
||||
.notification-action
|
||||
vertical-align: baseline
|
||||
#reset-modal
|
||||
z-index:1500
|
||||
|
|
@ -66,3 +66,38 @@
|
|||
.m_skin_asian {background-position: -2700px 0; width: 90px; height: 90px}
|
||||
.m_skin_black {background-position: -2790px 0; width: 90px; height: 90px}
|
||||
.m_skin_white {background-position: -2880px 0; width: 90px; height: 90px}
|
||||
|
||||
|
||||
|
||||
// narrower spriting for customize modal
|
||||
.customize-menu
|
||||
// shared option-box styles
|
||||
[class^="m_hair"], [class^="m_skin"], .m_head_0
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
// head
|
||||
.m_head_0
|
||||
background-position: -1557px -9px;
|
||||
|
||||
// hair
|
||||
.m_hair_blond
|
||||
background-position: -1647px -4px;
|
||||
.m_hair_black
|
||||
background-position: -1737px -4px;
|
||||
.m_hair_brown
|
||||
background-position: -1827px -4px;
|
||||
.m_hair_white
|
||||
background-position: -1917px -4px;
|
||||
|
||||
// skin
|
||||
.m_skin_dead
|
||||
background-position: -2547px -20px;
|
||||
.m_skin_orc
|
||||
background-position: -2637px -20px;
|
||||
.m_skin_asian
|
||||
background-position: -2727px -20px;
|
||||
.m_skin_black
|
||||
background-position: -2817px -20px;
|
||||
.m_skin_white
|
||||
background-position: -2907px -20px;
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
<!-- $table-of-contents
|
||||
===================================
|
||||
do a find for the string after "→"
|
||||
-----------------------------------
|
||||
→ $modal-template
|
||||
→ $customizations-modal
|
||||
→ $avatar-template
|
||||
=================================== -->
|
||||
|
||||
<Title:>
|
||||
HabitRPG | Gamify Your Life
|
||||
|
||||
|
|
@ -100,17 +109,11 @@
|
|||
<!-- Game Over Modal -->
|
||||
<div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}">
|
||||
<app:myModal noDismiss=true modalId='dead-modal'>
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="/img/BrowserQuest/habitrpg_mods/dead.png" /></td>
|
||||
<td>
|
||||
<h3>Game Over</h3>
|
||||
<p>
|
||||
<a x-bind=click:revive class="btn btn-danger btn-large">Continue</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<figure class="notification-character">
|
||||
<img src="/img/BrowserQuest/habitrpg_mods/dead.png">
|
||||
</figure>
|
||||
<h3 class="notification-message">You died! Game Over.</h3>
|
||||
<a x-bind=click:revive class="btn btn-danger btn-large notification-action">Continue</a>
|
||||
</app:myModal>
|
||||
</div>
|
||||
|
||||
|
|
@ -127,38 +130,62 @@
|
|||
</@footer>
|
||||
</app:myModal>
|
||||
|
||||
<!-- $customizations-modal -->
|
||||
<app:myModal modalId="customizations-modal" header="Customize">
|
||||
{#with _user.preferences}
|
||||
<table class='customize'><tr>
|
||||
<td><div class='m_head_0' x-bind='click:customizeGender' data-value='m'></div></td>
|
||||
<td><div class='f_head_0' x-bind='click:customizeGender' data-value='f'></div></td>
|
||||
</tr></table>
|
||||
{#with _user.preferences}
|
||||
|
||||
<!-- user avatar preview -->
|
||||
<figure class="avatar-window">
|
||||
<app:avatar profile={_user} />
|
||||
<figcaption class="char-name">{username(_user.auth)}</figcaption>
|
||||
</figure>
|
||||
|
||||
<table class='customize'><tr>
|
||||
<td><div class='{.gender}_hair_blond' x-bind="click:customizeHair" data-value='blond'></div></td>
|
||||
<td><div class='{.gender}_hair_black' x-bind="click:customizeHair" data-value='black'></div></td>
|
||||
<td><div class='{.gender}_hair_brown' x-bind="click:customizeHair" data-value='brown'></div></td>
|
||||
<td><div class='{.gender}_hair_white' x-bind="click:customizeHair" data-value='white'></div></td>
|
||||
</tr></table>
|
||||
<!-- customization options -->
|
||||
<menu type="list">
|
||||
<!-- gender -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Gender">
|
||||
<button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
|
||||
<button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
|
||||
</menu>
|
||||
</li>
|
||||
|
||||
<table class='customize'><tr>
|
||||
<td><div class='{.gender}_skin_dead' x-bind="click:customizeSkin" data-value='dead'></div></td>
|
||||
<td><div class='{.gender}_skin_orc' x-bind="click:customizeSkin" data-value='orc'></div></td>
|
||||
<td><div class='{.gender}_skin_asian' x-bind="click:customizeSkin" data-value='asian'></div></td>
|
||||
<td><div class='{.gender}_skin_black' x-bind="click:customizeSkin" data-value='black'></div></td>
|
||||
<td><div class='{.gender}_skin_white' x-bind="click:customizeSkin" data-value='white'></div></td>
|
||||
</tr></table>
|
||||
<!-- hair -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Hair">
|
||||
<button type="button" class="{.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
|
||||
</menu>
|
||||
</li>
|
||||
|
||||
<!-- skin -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Skin">
|
||||
<button type="button" class='{.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
|
||||
</menu>
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
{#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
|
||||
<table class='customize'><tr>
|
||||
<td><div class='f_armor_0_v1' x-bind="click:customizeArmorSet" data-value='v1'></div></td>
|
||||
<td><div class='f_armor_0_v2' x-bind="click:customizeArmorSet" data-value='v2'></div></td>
|
||||
</tr></table>
|
||||
<menu type="list">
|
||||
<li class="customize-menu">
|
||||
<menu label="Clothing">
|
||||
<button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
|
||||
<button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
|
||||
</menu>
|
||||
</li>
|
||||
</menu>
|
||||
{/}
|
||||
{/}
|
||||
<@footer>
|
||||
<button data-dismiss="modal" class="btn btn-success">Ok</button>
|
||||
</@footer>
|
||||
{/}
|
||||
<@footer>
|
||||
<button data-dismiss="modal" class="btn btn-success">Ok</button>
|
||||
</@footer>
|
||||
</app:myModal>
|
||||
|
||||
<alerts:>
|
||||
|
|
@ -194,8 +221,9 @@
|
|||
<Header:>
|
||||
<app:modalDialogs />
|
||||
<ui:connectionAlert>
|
||||
<div id="head">
|
||||
<div id="head" class="container-fluid">
|
||||
|
||||
<!-- options menu -->
|
||||
<div class='pull-right'>
|
||||
{#unless _loggedIn}
|
||||
<a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
|
||||
|
|
@ -221,52 +249,48 @@
|
|||
{/}
|
||||
</div>
|
||||
|
||||
<div class='container-fluid'>
|
||||
<!-- main header -->
|
||||
<div class="row-fluid">
|
||||
<div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
|
||||
|
||||
<!-- avatar -->
|
||||
<figure class="main-avatar-wrap">
|
||||
<app:avatar profile={_user} main="true" />
|
||||
</figure>
|
||||
|
||||
<div class='row-fluid'>
|
||||
<div id=character class='{#if gt(_partyMembers.length,1)}span8{else}span5{/}'>
|
||||
<table>
|
||||
<tr>
|
||||
<!-- party -->
|
||||
{#each _partyMembers as :member}
|
||||
{#unless equal(:member.id, _userId)}
|
||||
<figure class="party-avatar-wrap" rel="tooltip" title="{username(:member.auth)}" data-placement="bottom">
|
||||
<app:avatar profile={:member} party="true" />
|
||||
</figure>
|
||||
{/}
|
||||
{/}
|
||||
|
||||
<!-- Avatar -->
|
||||
<td>
|
||||
<app:avatar profile={_user} main="true" />
|
||||
</td>
|
||||
<!-- progress bars -->
|
||||
<div class="progress-bars">
|
||||
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
|
||||
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
|
||||
<span class="progress-text"><i class=icon-heart></i> {round(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bars -->
|
||||
<td id="bars" style="width:{#if gt(_partyMembers.length,1)}75%{else}90%{/};">
|
||||
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
|
||||
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
|
||||
<span class="progress-text"><i class=icon-heart></i> {round(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,_tnl)}%;"></div>
|
||||
<span class="progress-text">
|
||||
{#if _user.history.exp}
|
||||
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
{/}
|
||||
<i class=icon-star></i> {round(_user.stats.exp)} / {_tnl}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Party -->
|
||||
{#each _partyMembers as :member}
|
||||
{#unless equal(:member.id, _userId)}
|
||||
<td rel="tooltip" title="{username(:member.auth)}" data-placement="bottom" >
|
||||
<app:avatar profile={:member} />
|
||||
</td>
|
||||
{/}
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,_tnl)}%;"></div>
|
||||
<span class="progress-text">
|
||||
{#if _user.history.exp}
|
||||
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
{/}
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<i class=icon-star></i> {round(_user.stats.exp)} / {_tnl}
|
||||
</span>
|
||||
</div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
</div>
|
||||
<!-- end .char-status -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end .row-fluid -->
|
||||
</div>
|
||||
|
||||
<!-- end #head -->
|
||||
</div>
|
||||
|
||||
<Body:>
|
||||
|
|
@ -399,6 +423,8 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- $modal-template -->
|
||||
<myModal: nonvoid>
|
||||
{{#if @noDismiss}}<div data-action="backdrop" class="modal-backdrop"></div>{{/}}
|
||||
<div class="modal {{#unless @noDismiss}}hide{{/}}" id={{@modalId}} role="dialog">
|
||||
|
|
@ -564,8 +590,9 @@
|
|||
</li>
|
||||
{/}
|
||||
|
||||
<!-- $avatar-template -->
|
||||
<avatar:>
|
||||
<div class="avatar {{#if @main}}main-avatar{{/}}" data-toggle='{{#if @main}}modal{{/}}' data-target='{{#if @main}}#customizations-modal{{/}}'>
|
||||
<div class="avatar {{#if @main}}main-avatar{{/}} {{#if @party}}party-avatar{{/}}" data-toggle='{{#if @main}}modal{{/}}' data-target='{{#if @main}}#customizations-modal{{/}}'>
|
||||
<div class='character-sprites'>
|
||||
{#with @profile.preferences as :p}
|
||||
<span class='{:p.gender}_skin_{:p.skin}'></span>
|
||||
|
|
@ -576,7 +603,11 @@
|
|||
<span class='{:p.gender}_weapon_{@profile.items.weapon}'></span>
|
||||
{/}
|
||||
</div>
|
||||
<div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
|
||||
{{#if @main}}
|
||||
<div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
|
||||
{{else if @party}}
|
||||
<div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
|
||||
{{/}}
|
||||
</div>
|
||||
|
||||
<Scripts:>
|
||||
|
|
|
|||
Loading…
Reference in a new issue