add achievemnts in as spritesheet

This commit is contained in:
Tyler Renelle 2013-05-03 15:46:59 +01:00
parent 2e3a4853f8
commit 2b9f4e336b
4 changed files with 46 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

View file

@ -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}

View file

@ -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

View file

@ -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:>