From 915c86d8bac9d221887cd7e05e420033e2a52ec6 Mon Sep 17 00:00:00 2001
From: Zachary Kain <zakkain@gmail.com>
Date: Tue, 19 Mar 2013 00:04:24 -0400
Subject: [PATCH] implement avatar variable system with data attributes and
 css. LIKE A BOSS

---
 styles/app/avatar.styl | 37 ++++++++++++++++++++++++-------------
 views/app/avatar.html  |  3 ++-
 views/app/header.html  |  3 +++
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/styles/app/avatar.styl b/styles/app/avatar.styl
index f7170566f7..e5d2475352 100644
--- a/styles/app/avatar.styl
+++ b/styles/app/avatar.styl
@@ -22,17 +22,9 @@ future re: pets and whatnot, this is just temporary.
 	transition: padding 0.13s ease-out, border 0.25s ease-out, background 0.25s ease-out
 	outline: 1px solid rgba(0,0,0,0.1)
 
-// vertically center avatar sprite
-// depending on if they have a pet
-.herobox[data-haspet="hasPet"]
-	padding-top: 2em
-.herobox:not([data-haspet="hasPet"])
-	padding-top: 1.75em
-
 // the hero's info frame
 .herobox:after
-	content: attr(data-name) ": " "lv " attr(data-level) // " " attr(data-class)
-	opacity: 0 // hidden by default
+	content: attr(data-name) " – " "lvl " attr(data-level) // " " attr(data-class)
 	position: absolute
 	top: 0
 	display: block
@@ -44,18 +36,37 @@ future re: pets and whatnot, this is just temporary.
 	background: darken($good, 15%)
 	transition: opacity 0.2s ease-out
 
+// info revealed on hover/focus for party
+// always visible on the user's own avatar
+.herobox:after
+	opacity: 0
+.herobox[data-checkuser="isUser"]:after
+	opacity: 1
+	// make it a bit special
+	background darken($better, 15%)
+
+// vertically center avatar sprite
+// depending on if they have a pet
+.herobox[data-checkpet="hasPet"]
+	padding-top: 2em
+.herobox:not([data-checkpet="hasPet"])
+	padding-top: 1.75em
+
+// if it is the user's avatar, check if
+// they have a pet and pad accordingly
+.herobox[data-checkpet="hasPet"][data-checkuser="isUser"]
+	padding-top: 3.25em
+
 // expose hero info on hover, taking
 // into account the extra pet space
 .herobox:hover, .herobox:focus
 	background: desaturate(lighten($better, 30%), 10%)
 	&:after
 		opacity: 1
-
-.herobox[data-haspet="hasPet"]
+.herobox[data-checkpet="hasPet"]
 	&:hover, &:focus
 		padding-top: 3.25em
-
-.herobox:not([data-haspet="hasPet"])
+.herobox:not([data-checkpet="hasPet"])
 	&:hover, &:focus
 		padding-top: 2.5em
 
diff --git a/views/app/avatar.html b/views/app/avatar.html
index 5036de68df..f519cd96f1 100644
--- a/views/app/avatar.html
+++ b/views/app/avatar.html
@@ -27,7 +27,8 @@
     <figure class="herobox"
                 data-name="{@profile.auth.local.username}"
                 data-level="{@profile.stats.lvl}"
-                data-haspet="{#if @profile.items.pet}hasPet{/}"
+                data-checkpet="{#if @profile.items.pet}hasPet{/}"
+                data-checkuser="{#if equal(@profile.id, _user.id)}isUser{/}"
             data-toggle='modal' data-target='#avatar-modal' data-uid="{@profile.id}" x-bind="click:profileChangeActive">
         <div class='character-sprites'>
             {#unless @minimal}{#if @profile.items.pet}<img class="pet" src='img/sprites/{@profile.items.pet.icon}' />{/}{/}
diff --git a/views/app/header.html b/views/app/header.html
index 796ade9802..58a837c90d 100644
--- a/views/app/header.html
+++ b/views/app/header.html
@@ -28,6 +28,9 @@
             </div>
 
             <!-- party -->
+            <!-- I have an idea to use this loop for the user's herobox/avatar as well
+                 NOTE TO SELF: Ask Tyler if some kind of inter-leaving is possible 
+                 where we can put ONE of the results of this loop BEFORE the progress bars, and the rest after-->
             {{#each _partyMembers as :member}}
                 {{#unless equal(:member.id, _userId)}}
                     <div class="herobox-wrap">