From 5160595354b8d6bbf8db70e53f3b6e5fed644fcd Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Fri, 8 Feb 2013 13:04:31 -0500
Subject: [PATCH] add @Pandoro's new sprites to /styl, clean up

---
 src/app/items.coffee           | 33 ++-----------
 styles/app/female_sprites.styl | 78 ++++++++++++++++++++++++++++++
 styles/app/index.styl          | 27 ++++++++++-
 styles/app/male_sprites.styl   | 68 ++++++++++++++++++++++++++
 styles/app/shop_sprites.styl   | 54 +++++++++++++++++++++
 styles/sprites.styl            | 88 ----------------------------------
 views/app/index.html           |  4 +-
 7 files changed, 232 insertions(+), 120 deletions(-)
 create mode 100644 styles/app/female_sprites.styl
 create mode 100644 styles/app/male_sprites.styl
 create mode 100644 styles/app/shop_sprites.styl
 delete mode 100644 styles/sprites.styl

diff --git a/src/app/items.coffee b/src/app/items.coffee
index 6660f43fa7..8a36c33b76 100644
--- a/src/app/items.coffee
+++ b/src/app/items.coffee
@@ -128,36 +128,11 @@ module.exports.app = (appExports, model) ->
 ###
 module.exports.updateStore = updateStore = (model) ->
   obj = model.get('_user')
-  [nextWeapon, nextArmor, nextHead, nextShield] = [null, null, null, null]
 
-  i = parseInt(obj.items.weapon) + 1
-  nextWeapon = if (i == _.size items.weapon) then {hide:true} else items.weapon[i]
-  model.set '_view.items.weapon',
-
-  i = parseInt(obj?.items?.armor || 0) + 1
-  if i == _.size items.armor
-    nextArmor = {hide:true}
-  else
-    nextArmor = items.armor[i]
-    nextArmor.classes = obj.preferences.gender + "_armor_#{i}"
-  model.set '_view.items.armor', nextArmor
-
-  i = parseInt(parseInt(obj?.items?.head || 0) + 1)
-  if i == _.size items.armor
-    nextHead = {hide:true}
-  else
-    nextHead = items.head[i]
-    nextHead.classes = obj.preferences.gender + "_head_#{i}"
-    nextHead.classes += "_#{obj.preferences.armorSet}" if obj.preferences.gender == 'f'
-  model.set '_view.items.head', nextHead
-
-  i = parseInt(obj?.items?.shield || 0) + 1
-  if i == _.size items.shield
-    nextShield = {hide:true}
-  else
-    nextShield = items.shield[i]
-    nextShield.classes = obj.preferences.gender + "_" + nextShield.classes
-  model.set '_vie.items.shield', nextShield
+  _.each ['weapon', 'armor', 'shield', 'head'], (type) ->
+    i = parseInt(obj?.items?[type] || 0) + 1
+    nextItem = if (i == _.size items[type]) then {hide:true} else items[type][i]
+    model.set "_view.items.#{type}", nextItem
 
   model.set '_view.items.potion', items.potion
   model.set '_view.items.reroll', items.reroll
diff --git a/styles/app/female_sprites.styl b/styles/app/female_sprites.styl
new file mode 100644
index 0000000000..9541f45ee1
--- /dev/null
+++ b/styles/app/female_sprites.styl
@@ -0,0 +1,78 @@
+.f_weapon_6,
+.f_weapon_5,
+.f_weapon_4,
+.f_weapon_3,
+.f_weapon_2,
+.f_weapon_1,
+.f_weapon_0,
+.f_shield_5,
+.f_shield_4,
+.f_shield_3,
+.f_shield_2,
+.f_shield_1,
+.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,
+.f_armor_5,
+.f_armor_4,
+.f_armor_3,
+.f_armor_2,
+.f_armor_1,
+.f_armor_0_v2,
+.f_armor_0_v1,
+.f_skin_dead,
+.f_skin_orc,
+.f_skin_asian,
+.f_skin_black,
+.f_skin_white
+    background: url("img/BrowserQuest/habitrpg_mods/female_sprites.png") no-repeat
+
+.f_weapon_6 {background-position: 0 0; width: 90px; height: 90px}
+.f_weapon_5 {background-position: -90px 0; width: 90px; height: 90px}
+.f_weapon_4 {background-position: -180px 0; width: 90px; height: 90px}
+.f_weapon_3 {background-position: -270px 0; width: 90px; height: 90px}
+.f_weapon_2 {background-position: -360px 0; width: 90px; height: 90px}
+.f_weapon_1 {background-position: -450px 0; width: 90px; height: 90px}
+.f_weapon_0 {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}
+.f_head_5_v2 {background-position: -1080px 0; width: 90px; height: 90px}
+.f_head_5_v1 {background-position: -1170px 0; width: 90px; height: 90px}
+.f_head_4_v2 {background-position: -1260px 0; width: 90px; height: 90px}
+.f_head_4_v1 {background-position: -1350px 0; width: 90px; height: 90px}
+.f_head_3_v2 {background-position: -1440px 0; width: 90px; height: 90px}
+.f_head_3_v1 {background-position: -1530px 0; width: 90px; height: 90px}
+.f_head_2_v2 {background-position: -1620px 0; width: 90px; height: 90px}
+.f_head_2_v1 {background-position: -1710px 0; width: 90px; height: 90px}
+.f_head_1 {background-position: -1800px 0; width: 90px; height: 90px}
+.f_head_0 {background-position: -1890px 0; width: 90px; height: 90px}
+.f_hair_white {background-position: -1980px 0; width: 90px; height: 90px}
+.f_hair_brown {background-position: -2070px 0; width: 90px; height: 90px}
+.f_hair_black {background-position: -2160px 0; width: 90px; height: 90px}
+.f_hair_blond {background-position: -2250px 0; width: 90px; height: 90px}
+.f_armor_5 {background-position: -2340px 0; width: 90px; height: 90px}
+.f_armor_4 {background-position: -2430px 0; width: 90px; height: 90px}
+.f_armor_3 {background-position: -2520px 0; width: 90px; height: 90px}
+.f_armor_2 {background-position: -2610px 0; width: 90px; height: 90px}
+.f_armor_1 {background-position: -2700px 0; width: 90px; height: 90px}
+.f_armor_0_v2 {background-position: -2790px 0; width: 90px; height: 90px}
+.f_armor_0_v1 {background-position: -2880px 0; width: 90px; height: 90px}
+.f_skin_dead {background-position: -2970px 0; width: 90px; height: 90px}
+.f_skin_orc {background-position: -3060px 0; width: 90px; height: 90px}
+.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}
diff --git a/styles/app/index.styl b/styles/app/index.styl
index 733c6dff47..682427df45 100644
--- a/styles/app/index.styl
+++ b/styles/app/index.styl
@@ -1,6 +1,8 @@
 @import "nib/vendor";
 @import "../bootstrap-responsive.styl";
-@import "../sprites.styl";
+@import "./female_sprites.styl";
+@import "./male_sprites.styl";
+@import "./shop_sprites.styl";
 
 html,body,p,h1,ul,li,table,tr,th,td
   margin: 0
@@ -232,3 +234,26 @@ li:hover .task-meta-controls .hover-show
   margin-right: -1px;
   top: 50%;
   margin-top: -6px;
+
+
+
+.avatar
+    position: relative
+    margin-top: -12px
+    width: 90px
+    height: 90px
+
+    .character-sprites
+        position: absolute
+        top: -15px
+
+    .lvl
+        position: absolute
+        bottom: 0px
+        right: 10px
+
+.character-sprites span
+    position: absolute
+
+.itemstore-icons
+    background-size: 50%
\ No newline at end of file
diff --git a/styles/app/male_sprites.styl b/styles/app/male_sprites.styl
new file mode 100644
index 0000000000..4171ce6c97
--- /dev/null
+++ b/styles/app/male_sprites.styl
@@ -0,0 +1,68 @@
+.m_weapon_6,
+.m_weapon_5,
+.m_weapon_4,
+.m_weapon_3,
+.m_weapon_2,
+.m_weapon_1,
+.m_weapon_0,
+.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,
+.m_hair_blond,
+.m_hair_black,
+.m_hair_brown,
+.m_hair_white,
+.m_armor_5,
+.m_armor_4,
+.m_armor_3,
+.m_armor_2,
+.m_armor_1,
+.m_armor_0,
+.m_skin_dead,
+.m_skin_orc,
+.m_skin_asian,
+.m_skin_black,
+.m_skin_white
+    background: url("img/BrowserQuest/habitrpg_mods/male_sprites.png") no-repeat
+
+.m_weapon_6 {background-position: 0 0; width: 90px; height: 90px}
+.m_weapon_5 {background-position: -90px 0; width: 90px; height: 90px}
+.m_weapon_4 {background-position: -180px 0; width: 90px; height: 90px}
+.m_weapon_3 {background-position: -270px 0; width: 90px; height: 90px}
+.m_weapon_2 {background-position: -360px 0; width: 90px; height: 90px}
+.m_weapon_1 {background-position: -450px 0; width: 90px; height: 90px}
+.m_weapon_0 {background-position: -540px 0; width: 90px; height: 90px}
+.m_shield_5 {background-position: -630px 0; width: 90px; height: 90px}
+.m_shield_4 {background-position: -720px 0; width: 90px; height: 90px}
+.m_shield_3 {background-position: -810px 0; width: 90px; height: 90px}
+.m_shield_2 {background-position: -900px 0; width: 90px; height: 90px}
+.m_shield_1 {background-position: -990px 0; width: 90px; height: 90px}
+.m_head_5 {background-position: -1080px 0; width: 90px; height: 90px}
+.m_head_4 {background-position: -1170px 0; width: 90px; height: 90px}
+.m_head_3 {background-position: -1260px 0; width: 90px; height: 90px}
+.m_head_2 {background-position: -1350px 0; width: 90px; height: 90px}
+.m_head_1 {background-position: -1440px 0; width: 90px; height: 90px}
+.m_head_0 {background-position: -1530px 0; width: 90px; height: 90px}
+.m_hair_blond {background-position: -1620px 0; width: 90px; height: 90px}
+.m_hair_black {background-position: -1710px 0; width: 90px; height: 90px}
+.m_hair_brown {background-position: -1800px 0; width: 90px; height: 90px}
+.m_hair_white {background-position: -1890px 0; width: 90px; height: 90px}
+.m_armor_5 {background-position: -1980px 0; width: 90px; height: 90px}
+.m_armor_4 {background-position: -2070px 0; width: 90px; height: 90px}
+.m_armor_3 {background-position: -2160px 0; width: 90px; height: 90px}
+.m_armor_2 {background-position: -2250px 0; width: 90px; height: 90px}
+.m_armor_1 {background-position: -2340px 0; width: 90px; height: 90px}
+.m_armor_0 {background-position: -2430px 0; width: 90px; height: 90px}
+.m_skin_dead {background-position: -2520px 0; width: 90px; height: 90px}
+.m_skin_orc {background-position: -2610px 0; width: 90px; height: 90px}
+.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}
diff --git a/styles/app/shop_sprites.styl b/styles/app/shop_sprites.styl
new file mode 100644
index 0000000000..b738ffdf13
--- /dev/null
+++ b/styles/app/shop_sprites.styl
@@ -0,0 +1,54 @@
+.shop_weapon_6,
+.shop_weapon_5,
+.shop_weapon_4,
+.shop_weapon_3,
+.shop_weapon_2,
+.shop_weapon_1,
+.shop_shield_5,
+.shop_shield_4,
+.shop_shield_3,
+.shop_shield_2,
+.shop_shield_1,
+.shop_head_5,
+.shop_head_4,
+.shop_head_3,
+.shop_head_2,
+.shop_head_1,
+.shop_armor_5,
+.shop_armor_4,
+.shop_armor_3,
+.shop_armor_2,
+.shop_armor_1,
+.shop_reroll,
+.shop_potion,
+.shop_copper,
+.shop_silver,
+.shop_gold
+    background: url("img/BrowserQuest/habitrpg_mods/shop_sprites.png") no-repeat
+
+.shop_weapon_6 {background-position: 0 0; width: 40px; height: 40px}
+.shop_weapon_5 {background-position: -40px 0; width: 40px; height: 40px}
+.shop_weapon_4 {background-position: -80px 0; width: 40px; height: 40px}
+.shop_weapon_3 {background-position: -120px 0; width: 40px; height: 40px}
+.shop_weapon_2 {background-position: -160px 0; width: 40px; height: 40px}
+.shop_weapon_1 {background-position: -200px 0; width: 40px; height: 40px}
+.shop_shield_5 {background-position: -240px 0; width: 40px; height: 40px}
+.shop_shield_4 {background-position: -280px 0; width: 40px; height: 40px}
+.shop_shield_3 {background-position: -320px 0; width: 40px; height: 40px}
+.shop_shield_2 {background-position: -360px 0; width: 40px; height: 40px}
+.shop_shield_1 {background-position: -400px 0; width: 40px; height: 40px}
+.shop_head_5 {background-position: -440px 0; width: 40px; height: 40px}
+.shop_head_4 {background-position: -480px 0; width: 40px; height: 40px}
+.shop_head_3 {background-position: -520px 0; width: 40px; height: 40px}
+.shop_head_2 {background-position: -560px 0; width: 40px; height: 40px}
+.shop_head_1 {background-position: -600px 0; width: 40px; height: 40px}
+.shop_armor_5 {background-position: -640px 0; width: 40px; height: 40px}
+.shop_armor_4 {background-position: -680px 0; width: 40px; height: 40px}
+.shop_armor_3 {background-position: -720px 0; width: 40px; height: 40px}
+.shop_armor_2 {background-position: -760px 0; width: 40px; height: 40px}
+.shop_armor_1 {background-position: -800px 0; width: 40px; height: 40px}
+.shop_reroll {background-position: -840px 0; width: 40px; height: 40px}
+.shop_potion {background-position: -880px 0; width: 40px; height: 40px}
+.shop_copper {background-position: -920px 0; width: 40px; height: 40px}
+.shop_silver {background-position: -960px 0; width: 40px; height: 40px}
+.shop_gold {background-position: -1000px 0; width: 40px; height: 40px}
diff --git a/styles/sprites.styl b/styles/sprites.styl
deleted file mode 100644
index f9ae5cfe66..0000000000
--- a/styles/sprites.styl
+++ /dev/null
@@ -1,88 +0,0 @@
-.avatar
-    position: relative
-    margin-top: -12px
-    width: 90px
-    height: 90px
-
-    .character-sprites
-        position: absolute
-        top: -15px
-
-    .lvl
-        position: absolute
-        bottom: 0px
-        right: 10px
-
-.character-sprites span
-    position: absolute
-
-.itemstore-icons
-    background-size: 50%
-
-.weapon_6, .weapon_5, .weapon_4, .weapon_3, .weapon_2, .weapon_1, .weapon_0, .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;
-}
-.weapon_6 {background-position: 0 0; width: 90px; height: 90px}
-.weapon_5 {background-position: -90px 0; width: 90px; height: 90px}
-.weapon_4 {background-position: -180px 0; width: 90px; height: 90px}
-.weapon_3 {background-position: -270px 0; width: 90px; height: 90px}
-.weapon_2 {background-position: -360px 0; width: 90px; height: 90px}
-.weapon_1 {background-position: -450px 0; width: 90px; height: 90px}
-.weapon_0 {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}
diff --git a/views/app/index.html b/views/app/index.html
index 91524463d0..5be9711b96 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -225,7 +225,7 @@
                             <span class="{equipped(_user, 'armor')}"></span>
                             <span class='{:p.gender}_shield_{_user.items.shield}'></span>
                             <span class="{equipped(_user, 'head')}"></span>
-                            <span class='weapon_{_user.items.weapon}'></span>
+                            <span class='{:p.gender}_weapon_{_user.items.weapon}'></span>
                         {/}
                     </div>
                     <div class="lvl"><span class="badge badge-info">Lvl {_user.stats.lvl}</span></div>
@@ -545,7 +545,7 @@
           {#if :item.icon}
             <img src="/img/BrowserQuest/habitrpg_mods/{:item.icon}" />
           {else}
-            <div class="{:item.classes} itemstore-icons"></div>
+            <div class="shop_{:item.classes}"></div>
           {/}
           {:item.text}
       </div>