From 2b9f4e336bb4dd2bbba24925216c9d8cf37769fb Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Fri, 3 May 2013 15:46:59 +0100
Subject: [PATCH] add achievemnts in as spritesheet

---
 public/img/sprites/achievements.png | Bin 0 -> 7291 bytes
 styles/app/achievements.styl        |  25 +++++++++++++++++++++++++
 styles/app/index.styl               |   2 +-
 views/app/avatar.html               |  22 ++++++++++++++++++++--
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 public/img/sprites/achievements.png
 create mode 100644 styles/app/achievements.styl

diff --git a/public/img/sprites/achievements.png b/public/img/sprites/achievements.png
new file mode 100644
index 0000000000000000000000000000000000000000..e703785cde8ffbb8e60ed8ae5f65c5f63a1c7a9e
GIT binary patch
literal 7291
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

literal 0
HcmV?d00001

diff --git a/styles/app/achievements.styl b/styles/app/achievements.styl
new file mode 100644
index 0000000000..31c9d40b2a
--- /dev/null
+++ b/styles/app/achievements.styl
@@ -0,0 +1,25 @@
+.achievement
+    background: url('/img/sprites/achievements.png') no-repeat
+    width: 24px
+    height: 26px
+
+.achievement-sword {background-position:0px 0px}
+.achievement-tree {background-position:-24px 0px}
+.achievement-rat {background-position:-48px 0px}
+.achievement-comment {background-position:-72px 0px}
+.achievement-armor {background-position:-96px 0px}
+.achievement-cave {background-position:-120px 0px}
+.achievement-sun {background-position:-144px 0px}
+.achievement-boot {background-position:-168px 0px}
+.achievement-coffin {background-position:-192px 0px}
+.achievement-alien {background-position:-216px 0px}
+.achievement-ninja {background-position:-240px 0px}
+.achievement-cactus {background-position:-264px 0px}
+.achievement-bow {background-position:-288px 0px}
+.achievement-heart {background-position:-312px 0px}
+.achievement-shield {background-position:-336px 0px}
+.achievement-thermometer {background-position:-360px 0px}
+.achievement-helm {background-position:-384px 0px}
+.achievement-firefox {background-position:0px -26px}
+.achievement-cake {background-position:-24px -26px}
+.achievement-karaoke {background-position:-48px -26px}
diff --git a/styles/app/index.styl b/styles/app/index.styl
index 04242ccb68..6f9ca51558 100644
--- a/styles/app/index.styl
+++ b/styles/app/index.styl
@@ -21,7 +21,7 @@
 @import "./responsive.styl";
 @import "./header.styl";
 @import "./scrollbars.styl";
-
+@import "./achievements.styl";
 @import "./game-pane.styl";
 
 // fix exploding to very wide for some reason
diff --git a/views/app/avatar.html b/views/app/avatar.html
index 3a48297cae..06967dfc04 100644
--- a/views/app/avatar.html
+++ b/views/app/avatar.html
@@ -164,9 +164,27 @@
     </div>
 
 <achievements:>
+    <!--<div class='achievement achievement-sword'></div>-->
+    <!--<div class='achievement achievement-tree'></div>-->
+    <!--<div class='achievement achievement-rat'></div>-->
+    <!--<div class='achievement achievement-comment'></div>-->
+    <!--<div class='achievement achievement-armor'></div>-->
+    <!--<div class='achievement achievement-cave'></div>-->
+    <!--<div class='achievement achievement-sun'></div>-->
+    <!--<div class='achievement achievement-boot'></div>-->
+    <!--<div class='achievement achievement-coffin'></div>-->
+    <!--<div class='achievement achievement-alien'></div>-->
+    <!--<div class='achievement achievement-ninja'></div>-->
+    <!--<div class='achievement achievement-cactus'></div>-->
+    <!--<div class='achievement achievement-bow'></div>-->
+    <!--<div class='achievement achievement-heart'></div>-->
+    <!--<div class='achievement achievement-shield'></div>-->
+    <!--<div class='achievement achievement-thermometer'></div>-->
+    <!--<div class='achievement achievement-helm'></div>-->
+    <!--<div class='achievement achievement-firefox'></div>-->
+    <!--<div class='achievement achievement-karaoke'></div>-->
     {#if @profile.achievements.originalUser}
-        <!--TODO replce this in the future with HTML from BrowserQuest's index.html, which properly handles the achievements sprite-sheets (see BQ's achievements.css, main.css) -->
-        <img src='/img/original_user.png' /> Original User!
+        <div class='achievement achievement-cake'></div>  Original User!
     {/}
 
 <inventory:>