Permalink
Browse files

Add global population tooltip

  • Loading branch information...
1 parent bae81b8 commit 67dca34db72ccb5327cbbddfca7cf707c7a66994 @glecollinet glecollinet committed Mar 12, 2012
View
@@ -147,7 +147,7 @@ footer, header, hgroup, menu, nav, section {
#mask {height:100%;width:100%;position:fixed;top:0;left:0;background:rgba(20,20,20,1);opacity:1;z-index:20;-moz-transition:0.5s opacity linear;-webkit-transition:0.5s opacity linear;-o-transition:0.5s opacity linear;-ms-transition:0.5s opacity linear;transition:0.5s opacity linear;pointer-events:none;}
#bar-container {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:relative;width:100%;z-index:10;}
- #healthbar {background:url('../img/1/barsheet.png');image-rednering:-moz-crisp-edges;position:absolute;}
+ #healthbar {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:absolute;}
#hitpoints {background:#d83939;-moz-transition:.5s width ease;-webkit-transition:.5s width ease;-o-transition:.5s width ease;-ms-transition:.5s width ease;transition:.5s width ease;}
#hitpoints.white {-moz-animation:flash 0.5s linear 1;-webkit-animation:flash 0.5s linear 1;-o-animation:flash 0.5s linear 1;-ms-animation:flash 0.5s linear 1;animation:flash 0.5s linear 1;}
#hitpoints.invincible {-moz-animation:invincible 0.3s steps(3, end) alternate infinite;-webkit-animation:invincible 0.3s steps(3, end) alternate infinite;-o-animation:invincible 0.3s steps(3, end) alternate infinite;-ms-animation:invincible 0.3s steps(3, end) alternate infinite;}
@@ -159,6 +159,10 @@ footer, header, hgroup, menu, nav, section {
#notifications span {display:block;text-align:center;width:100%;opacity:1;}
#playercount {font-family:'GraphicPixel';color:#e3e3e3;position:absolute;}
+ #playercount:hover {cursor:pointer;color:#FCE045;}
+ #population {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:absolute;font-family:'GraphicPixel';color:#fff;text-align:center;opacity:0;pointer-events:none;-moz-transition:0.2s opacity linear, 0.2s height ease;-webkit-transition:0.2s opacity linear, 0.2s height ease;-o-transition:0.2s opacity linear, 0.2s height ease;-ms-transition:0.2s opacity linear, 0.2s height ease;transition:0.2s opacity linear, 0.2s height ease;height:0;overflow:hidden;}
+ #population span {color:#FCE045;}
+ #population.visible {opacity:1;pointer-events:auto;}
.barbutton {background:url('../img/1/barsheet.png');image-rendering:-moz-crispt-edges;position:absolute;}
@@ -409,7 +413,7 @@ footer, header, hgroup, menu, nav, section {
@media screen and (min-width: 1501px) {
.upscaled #logo, .upscaled #logosparks, .upscaled .left-ornament, .upscaled .right-ornament, .upscaled #character, .upscaled #character div, .upscaled .button, .upscaled .button div, .upscaled #respawn, .upscaled #scroll, .upscaled #instructions, .upscaled .icon, .upscaled #tilt, .upscaled .parchment-left, .upscaled .parchment-middle, .upscaled .parchment-right, .upscaled .avatar, .upscaled .facebook, .upscaled .twitter, .upscaled .close, .upscaled .ribbon .top, .upscaled .ribbon .bottom, .upscaled #about .img, .upscaled .ext-link {background-image:url('../img/3/spritesheet.png');}
- .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox {background-image:url('../img/3/barsheet.png');}
+ .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox, .upscaled #population {background-image:url('../img/3/barsheet.png');}
.upscaled #achievements, .upscaled #achievements li, .upscaled .coin, .upscaled #achievement-notification, .upscaled #coinsparks, .upscaled .achievement-sharing a, .upscaled #previous, .upscaled #next {background:url('../img/3/achievements.png');}
@@ -496,6 +500,10 @@ footer, header, hgroup, menu, nav, section {
#notifications span {line-height:45px;height:45px;}
#playercount {font-size:20px;left:1076px;top:18px;width:172px;text-align:center;}
+ #population {background-size:1440px;right:105px;bottom:66px;width:393px;background-position:-720px -144px;font-size:20px;line-height:30px;}
+ #population.visible {height:96px;}
+ #instance-population {padding-top:18px;}
+
.barbutton {background-size:1440px;height:45px;width:42px;}
#chatbutton {background-position:-306px -51px;top:3px;left:1260px;}
@@ -565,7 +573,7 @@ footer, header, hgroup, menu, nav, section {
@media screen and (max-width: 1500px) {
.upscaled #logo, .upscaled #logosparks, .upscaled .left-ornament, .upscaled .right-ornament, .upscaled #character, .upscaled #character div, .upscaled .button, .upscaled .button div, .upscaled #respawn, .upscaled #scroll, .upscaled #instructions, .upscaled .icon, .upscaled #tilt, .upscaled .parchment-left, .upscaled .parchment-middle, .upscaled .parchment-right, .upscaled .avatar, .upscaled .facebook, .upscaled .twitter, .upscaled .close, .upscaled .ribbon .top, .upscaled .ribbon .bottom, .upscaled #about .img, .upscaled .ext-link {background-image:url('../img/2/spritesheet.png');}
- .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox {background-image:url('../img/2/barsheet.png');}
+ .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox, .upscaled #population {background-image:url('../img/2/barsheet.png');}
.upscaled #achievements, .upscaled #achievements li, .upscaled .coin, .upscaled #achievement-notification, .upscaled #coinsparks, .upscaled .achievement-sharing a, .upscaled #previous, .upscaled #next {background:url('../img/2/achievements.png');}
body {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/1/wood.png') repeat, #000; background-size:auto, 256px;}
@@ -650,6 +658,9 @@ footer, header, hgroup, menu, nav, section {
#notifications span {line-height:30px;height:30px;}
#playercount {font-size:16px;left:717px;top:10px;width:114px;text-align:center;}
+ #population {background-size:960px;right:70px;bottom:44px;width:262px;background-position:-480px -96px;font-size:14px;line-height:20px;}
+ #population.visible {height:64px;}
+ #instance-population {padding-top:12px;}
.barbutton {background-size:960px;height:30px;width:28px;}
#chatbutton {background-position:-204px -34px;top:2px;left:840px;}
@@ -719,7 +730,7 @@ footer, header, hgroup, menu, nav, section {
@media screen and (max-height: 850px) {
.upscaled #logo, .upscaled #logosparks, .upscaled .left-ornament, .upscaled .right-ornament, .upscaled #character, .upscaled #character div, .upscaled .button, .upscaled .button div, .upscaled #respawn, .upscaled #scroll, .upscaled #instructions, .upscaled .icon, .upscaled #tilt, .upscaled .parchment-left, .upscaled .parchment-middle, .upscaled .parchment-right, .upscaled .avatar, .upscaled .facebook, .upscaled .twitter, .upscaled .close, .upscaled .ribbon .top, .upscaled .ribbon .bottom, .upscaled #about .img, .upscaled .ext-link {background-image:url('../img/2/spritesheet.png');}
- .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox {background-image:url('../img/2/barsheet.png');}
+ .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox, .upscaled #population {background-image:url('../img/2/barsheet.png');}
.upscaled #achievements, .upscaled #achievements li, .upscaled .coin, .upscaled #achievement-notification, .upscaled #coinsparks, .upscaled .achievement-sharing a, .upscaled #previous, .upscaled #next {background:url('../img/2/achievements.png');}
body {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/1/wood.png') repeat, #000; background-size:auto, 256px;}
@@ -804,6 +815,9 @@ footer, header, hgroup, menu, nav, section {
#notifications span {line-height:30px;height:30px;}
#playercount {font-size:16px;left:717px;top:10px;width:114px;text-align:center;}
+ #population {background-size:960px;right:70px;bottom:44px;width:262px;background-position:-480px -96px;font-size:14px;line-height:20px;}
+ #population.visible {height:64px;}
+ #instance-population {padding-top:12px;}
.barbutton {background-size:960px;height:30px;width:28px;}
#chatbutton {background-position:-204px -34px;top:2px;left:840px;}
@@ -956,6 +970,9 @@ footer, header, hgroup, menu, nav, section {
#notifications span {line-height:15px;height:15px;}
#playercount {font-size:10px;left:358px;top:4px;width:57px;text-align:center;}
+ #population {background-size:480px;right:35px;bottom:22px;width:131px;background-position:-240px -48px;font-size:9px;line-height:12px;}
+ #population.visible {height:32px;}
+ #instance-population {padding-top:5px;}
.barbutton {background-size:480px;height:15px;width:14px;}
#chatbutton {background-position:-102px -17px;top:1px;left:420px;}
@@ -1048,6 +1065,7 @@ footer, header, hgroup, menu, nav, section {
#playercount {font-size:20px;left:270px;top:8px;width:114px;text-align:center;}
#playercount span {display:none;}
#playercount span.count {display:inline;}
+ #population {display:none;}
.barbutton {background-size:960px;height:30px;width:28px;}
#chatbutton {background-position:-204px -34px;top:2px;left:360px;}
@@ -1226,4 +1244,4 @@ footer, header, hgroup, menu, nav, section {
.chromewin #parchment, .chromewin #parchment input, .chromewin #notifications, .chromewin #instructions, .chromewin #achievements, .chromewin #achievement-notification,
.chromewin #playercount, .chromewin #credits, .chromewin #loadcharacter, .chromewin #confirmation, .chromewin #death, .chromewin #error, .chromewin #about,
- .chromewin #parchment p, .chromewin #portrait p, .chromewin #noscript, .chromewin footer, .chromewin .bubble p {font-family:'AdvoCut';}
+ .chromewin #parchment p, .chromewin #portrait p, .chromewin #noscript, .chromewin footer, .chromewin .bubble p, .chromewin #population {font-family:'AdvoCut';}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -272,7 +272,7 @@ <h1 id="logo">
<span id="message2"></span>
</div>
</div>
- <div id="playercount">
+ <div id="playercount" class="clickable">
<span class="count">0</span> <span>online</span>
</div>
<div id="barbuttons">
@@ -287,6 +287,14 @@ <h1 id="logo">
<input id="chatinput" class="gp" type="text" maxlength="60">
</form>
</div>
+ <div id="population">
+ <div id="instance-population" class="">
+ <span>75</span> players in your instance
+ </div>
+ <div id="world-population" class="">
+ <span>2,456</span> players worldwide
+ </div>
+ </div>
</div>
</div>
<footer>
View
@@ -418,6 +418,10 @@ define(['jquery', 'storage'], function($, Storage) {
}
$('#helpbutton').removeClass('active');
},
+
+ togglePopulationInfo: function() {
+ $('#population').toggleClass('visible');
+ },
openPopup: function(type, url) {
var h = $(window).height(),
View
@@ -49,6 +49,14 @@ define(['jquery', 'app'], function($, App) {
$('#instructions').click(function() {
app.hideWindows();
});
+
+ $('#playercount').click(function() {
+ app.togglePopulationInfo();
+ });
+
+ $('#population').click(function() {
+ app.togglePopulationInfo();
+ });
$('.clickable').click(function(event) {
event.stopPropagation();

0 comments on commit 67dca34

Please sign in to comment.