got most of the character customizations working

src/app/helpers.coffee

@@ -57,17 +57,21 @@ module.exports.viewHelpers = (view) ->
   view.fn "tokens", (gp) ->
     return gp/0.25
 
-  view.fn 'currentArmor', (user) ->
+  view.fn 'armor', (user) ->
     armor = user?.items?.armor || 0
     {gender, armorSet} = user?.preferences || {'m', 'v1'}
     if gender == 'f'
-      str = "armor#{armor}_f"
-      if parseInt(armor) > 1
-        armorSet = if armorSet then armorSet else 'v1'
-        str += '_' + armorSet
-      return "#{str}.png"
+      return if (parseInt(armor) == 0) then "f_armor_#{armor}_#{armorSet}" else "f_armor_#{armor}"
     else
-      return "armor#{armor}_m.png"
+      return "m_armor_#{armor}"
+
+  view.fn 'head', (user) ->
+    head = user?.items?.head || 0
+    {gender, armorSet} = user?.preferences || {'m', 'v1'}
+    if gender == 'f'
+      return if (parseInt(head) > 1) then "f_head_#{head}_#{armorSet}" else "f_head_#{head}"
+    else
+      return "m_head_#{head}"
 
   view.fn "username", (auth) ->
     if auth?.facebook?.displayName?

src/app/index.coffee

@@ -275,17 +275,19 @@ ready (model) ->
     batch.commit()
     browser.resetDom(model)
 
-  exports.closeKickstarterNofitication = (e, el) -> user.set('flags.kickstarter', 'hide')
+  exports.closeKickstarterNofitication = (e, el) ->
+    user.set('flags.kickstarter', 'hide')
+
+  exports.customizeGender = (e, el) ->
+    user.set 'preferences.gender', $(el).attr('data-value')
+
+  exports.customizeHair = (e, el) ->
+    user.set 'preferences.hair', $(el).attr('data-value')
+
+  exports.customizeSkin = (e, el) ->
+    user.set 'preferences.skin', $(el).attr('data-value')
+
+  exports.customizeArmorSet = (e, el) ->
+    user.set 'preferences.armorSet', $(el).attr('data-value')
 
-  exports.setMale = -> user.set('preferences.gender', 'm')
-  exports.setFemale = -> user.set('preferences.gender', 'f')
-  exports.setArmorsetV1 = -> user.set('preferences.armorSet', 'v1')
-  exports.setArmorsetV2 = -> user.set('preferences.armorSet', 'v2')
 
-  exports.customizationsPopover = ->
-    $('.main-avatar').popover
-        html:true
-        placement:'bottom'
-        content: $('#customizations-popover').html()
-        trigger:'manual'
-    $('.main-avatar').popover 'show'

styles/sprites.styl

@@ -13,6 +13,10 @@
         bottom: 0px;
         right: 10px;
 
+table.customize td div
+    position: relative
+    display: block
+
 .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;

views/app/index.html

@@ -16,30 +16,6 @@
           <h6>API Token</h6>
           <pre class=prettyprint>{_user.apiToken}</pre>
 
-          <hr/>
-          <h4>Gender</h4>
-          <label class="radio">
-              <input type="radio" name="genderRadios" value="m" x-bind="click:setMale" checked="{equal(_user.preferences.gender,'m')}">
-              Male
-          </label>
-          <label class="radio">
-              <input type="radio" name="genderRadios" value="f" x-bind="click:setFemale" checked="{equal(_user.preferences.gender,'f')}">
-              Female
-          </label>
-
-
-          {#if equal(_user.preferences.gender,'f')}
-              <h4>Armor Set</h4>
-              <label class="radio">
-                  <input type="radio" name="armorSet" value="v1" x-bind="click:setArmorsetV1" checked="{equal(_user.preferences.armorSet,'v1')}">
-                  v1
-              </label>
-              <label class="radio">
-                  <input type="radio" name="armorSet" value="v2" x-bind="click:setArmorsetV2" checked="{equal(_user.preferences.armorSet,'v2')}">
-                  v2
-              </label>
-          {/}
-
           <hr/>
           <a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal">Reset</a>
 
@@ -65,6 +41,40 @@
           </@footer>
       </app:myModal>
 
+      <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>
+
+              <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>
+
+              <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>
+
+              {#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>
+              {/}
+          {/}
+          <@footer>
+            <button data-dismiss="modal" class="btn btn-success">Ok</button>
+          </@footer>
+      </app:myModal>
+
   {else}
       <app:myModal modalId="login-modal" header="Login / Register">
           <a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt="Login / Register With Facebook"/></a>
@@ -206,23 +216,17 @@
 
               <!-- Avatar -->
               <td>
-                <div id='customizations-popover' style='display:none;'>
-                    <div style='height:500px;'>
-                        <table class='customize'><tr>
-                            <td><div class='m_head_0'></div></td>
-                            <td><div class='f_head_0'></div></td>
-                        </tr></table>
-                    </div>
 
-                </div>
-                <div class="avatar main-avatar" x-bind="click:customizationsPopover">
+                <div class="avatar main-avatar" data-toggle='modal' data-target='#customizations-modal'>
                     <div class='character-sprites'>
-                        <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>
+                        {#with _user.preferences as :p}
+                            <span class='{:p.gender}_skin_{:p.skin}'></span>
+                            <span class='{head(_user)}'></span>
+                            <span class='{:p.gender}_hair_{:p.hair}'></span>
+                            <span class="{armor(_user)}"></span>
+                            <span class='{:p.gender}_shield_1'></span>
+                            <span class='item-sword1'></span>
+                        {/}
                     </div>
                     <div class="lvl"><span class="badge badge-info">Lvl {_user.stats.lvl}</span></div>
                 </div>