Merge pull request #165 from ninjadev/post_release_fixes

Post release fixes

index.html

@@ -82,12 +82,14 @@ <h2>Upgrades</h2>
     </div>
 
     <div class="health template">
-        <img src=res/heart.png />
+        <span class=heart>&hearts;</span>
         <span class=value></span>
     </div>
 
     <div class="weapons template"></div>
 
+    <div class="achievements template"></div>
+
     <script id="upgrade-img-template" type="text/x-handlebars-template">
         <div class="tooltip upgrade {{#if canPurchase}}can-purchase{{/if}}" data-id="{{ id }}">
             <img class=upgrade-purchase src=res/achievements/{{ img }} />
@@ -115,6 +117,7 @@ <h2>Upgrades</h2>
 
 
     <script id="achievements-list-template" type="text/x-handlebars-template">
+        <a href=javascript:; class=back-button>[Back]</a>
         <h1>Achievements</h1>
         <div class="achievement-list">
             {{#each achievements}}

res/style.css

@@ -1,16 +1,19 @@
-*{
-    margin:0;
-    padding:0;
-    border:0;
-    outline:0;
-}
-html,body {
-    overflow:hidden;
-    background:black;
+* {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+}
+
+html, body {
+    overflow: hidden;
+    background: black;
     user-select: none;
     -ms-user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
+    -webkit-touch-callout: none;
+    -ms-touch-action: none;
     font-family: 'blackoutmidnight';
     cursor: default;
 }
@@ -24,13 +27,12 @@ button {
     top: 75%;
     left: 0;
     margin: 0 auto;
-    width:100%;
-    background: white;
+    width: 100%;
     padding: 2%;
     text-align: center;
     font-size: 300%;
     display: none;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
     color: white;
 }
 
@@ -49,7 +51,7 @@ button {
 }
 
 .achievement .image {
-    float:left;
+    float: left;
     margin-right: 1%;
     width: 10%;
 }
@@ -76,37 +78,30 @@ button {
     text-align: center;
     color: #d6116e;
     display: none;
-}
-
-.health img {
-    width: 4%;
-}
-
-.health .value {
-    font-size: 100%;
+    font-size: 180%;
 }
 
 @font-face {
     font-family: 'blackoutmidnight';
     src: url('fonts/blackout-nor-webfont.eot');
-    src: url('fonts/blackout-nor-webfont.eot') format('embedded-opentype'),url('fonts/blackout-nor-webfont.woff') format('woff'),url('fonts/blackout-nor-webfont.ttf') format('truetype'),url('fonts/blackout-nor-webfont.svg') format('svg');
+    src: url('fonts/blackout-nor-webfont.eot') format('embedded-opentype'), url('fonts/blackout-nor-webfont.woff') format('woff'), url('fonts/blackout-nor-webfont.ttf') format('truetype'), url('fonts/blackout-nor-webfont.svg') format('svg');
     font-weight: normal;
     font-style: normal;
 }
 
 #overlay {
     z-index: 1000;
     position: fixed;
-    top:0;
-    left:0;
-    width:100%;
-    height:100%;
-    background: rgba(0,0,0,0.5);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
 }
 
 #game-over {
     z-index: 1001;
-    position:absolute;
+    position: absolute;
     left: 50%;
     top: 50%;
     width: 300px;
@@ -145,7 +140,7 @@ p {
 }
 
 strong {
-    padding:10px 0;
+    padding: 10px 0;
 }
 
 .upgrade img,
@@ -164,7 +159,7 @@ strong {
     width: 20%;
     top: 2%;
     left: 1%;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
     color: white;
 }
 
@@ -178,20 +173,21 @@ strong {
 }
 
 .can-purchase {
-    opacity:1;
+    opacity: 1;
 }
 
 .img-upgrade-container {
     overflow: hidden;
 }
 
 .weapons {
+    display: none;
     position: absolute;
     left: 1%;
     bottom: 2%;
     padding: 1%;
     z-index: 2000;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
     color: white;
     width: 20%;
 }
@@ -204,34 +200,51 @@ strong {
 }
 
 .weapon img {
-    margin: 0;
+    margin-top: 0;
+}
+
+#wrapper.achievements {
+    background: white;
 }
 
 .achievements {
     position: absolute;
-    left: 10%;
-    right: 10%;
-    top: 5%;
-    bottom: 5%;
-    background: rgba(0,0,0,0.5);
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
     font-size: 200%;
     overflow: hidden;
 }
+
 .achievement-element {
-    padding: 1%;
+    padding: 1% 5%;
     clear: both;
     overflow: hidden;
 }
 
 .achievements h1 {
-    padding: .6em 1em;
+    padding-left: 5%;
     background: #01bbd2;
     color: white;
+    height: 15%;
+    line-height: 2.4em;
 }
+
+.achievements .back-button {
+    float: right;
+    text-decoration: none;
+    color: white;
+    line-height: 5em;
+    margin-right: 5%;
+}
+
 .achievement-list {
     overflow: auto;
     width: 100%;
-    height: 100%;
+    top: 15%;
+    bottom: 0;
     position: absolute;
 }
 

src/AchievementState.js

@@ -1,50 +1,66 @@
 // Copy this file, rename to name of state and add to StateManager
-function AchievementState(){
-}
+function AchievementState() {
+};
 
-AchievementState.prototype.init = function(){
-    this.elements = [];
-    var source = $("#achievements-list-template").html();
-    this.template = Handlebars.compile(source);
-}
+AchievementState.prototype.init = function() {
+  this.elements = [];
+  var source = $("#achievements-list-template").html();
+  this.template = Handlebars.compile(source);
 
-AchievementState.prototype.pause = function(){
-  $('#wrapper').empty();
-}
+  this.achievement_data = new Achievements();
+};
 
-AchievementState.prototype.resume = function(){
+AchievementState.prototype.pause = function() {
+  $('#wrapper').empty().removeClass('achievements');
+  $('.back-button').off('click');
+};
+
+AchievementState.prototype.resume = function() {
+  var achievements = this.getAchievements();
+
+  var html = this.template({achievements: achievements});
+
+  this.$achievement_template = $('.achievements.template').clone()
+    .removeClass('template');
+  this.$achievement_template.html(html);
+  $('#wrapper').addClass('achievements').append(this.$achievement_template);
+
+  $('.back-button').on('click touchstart', function() {
+    sm.changeState('menu');
+  });
+};
+
+AchievementState.prototype.render = function(ctx) {
+};
+
+AchievementState.prototype.update = function() {
+  if (KEYS[27]) {
+    sm.changeState("menu");
+  }
+};
+
+AchievementState.prototype.getAchievements = function() {
   var json_data = getCookie("cuteanimals_stats");
   if (json_data === undefined) {
-    return false;
+    return [
+      {
+        name: "No achievements",
+        description: "You should try the game, and come back later!",
+        custom_image: "default"
+      }
+    ];
   }
   var data = JSON.parse(json_data);
   var uniqueNames = [];
-  $.each(data.achievements, function(i, el){
-        if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
+  $.each(data.achievements, function(i, el) {
+    if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
   });
-  var achievement_data = new Achievements();
   var achievements = [];
-  for (var i=0;i<uniqueNames.length;i++) {
-    achievements[i] = achievement_data.achievements[uniqueNames[i]];
+  for (var i = 0; i < uniqueNames.length; i++) {
+    achievements[i] = this.achievement_data.achievements[uniqueNames[i]];
     if (achievements[i].custom_image === undefined) {
       achievements[i].custom_image = uniqueNames[i];
     }
   }
-  var html = this.template({achievements: achievements});
-  console.log(achievements);
-  console.log(html);
-
-  this.achievement_template = $('.achievements.template').clone()
-    .removeClass('template');
-  this.achievement_template.html(html);
-  $('#wrapper').append(this.achievement_template);
-}
-
-AchievementState.prototype.render = function(ctx){
-}
-
-AchievementState.prototype.update = function(){
-  if (KEYS[27]) {
-    sm.changeState("menu");
-  }
-}
+  return achievements;
+};