Merge pull request #12 from hobnob/features/newScorecard

Scorecard re-design

css/main.css

@@ -43,85 +43,106 @@
 
 #game_scorecard
 {
- background: linear-gradient(#ECECEC, #CACACA);
- box-shadow: 0px 0px 5px #FFFFFF;
- border-radius:10px;
+ background-image:url('../img/scorecard-background.png');
  position:relative;
- top:100px;
- left:200px;
- width:400px;
- height:370px;
+ top:68px;
+ left:140px;
+ width:500px;
+ height:460px;
  z-index: 999;
- padding-top:10px;
- text-shadow: 0 2px 0 #FFFFFF;
  font-family: Helvetica,arial,sans-serif;
- font-size: 25px;
- font-weight: bold;
+}
+
+#game_scorecard h1
+{
+ font-size:30px;
+ text-transform:uppercase;
+ padding-top:37px;
+ margin-left:41px;
 }
 
 #game_scorecard p
 {
- text-align: center;
- margin-bottom:2px;
+ font-size:20px;
+ font-weight: bold;
+ margin-left:38px;
+ border-bottom:1px solid #000000;
+ width:418px;
  margin-top:10px;
 }
 
-#game_scorecard .score
+#game_scorecard p.scoreholder
 {
- float:left;
- padding-left:100px;
- position:relative;
- top:-15px;
+ height:38px;
 }
 
+#game_scorecard p span
+{
+ float:right;
+}
+
+
 #game_scorecard .score .star
 {
- width:64px;
- height:64px;
+ width:42px;
+ height:41px;
  background-image:url(../img/star-off.png);
  background-repeat: no-repeat;
  float:left;
+ position:relative;
+ top:-10px;
 }
 
 #game_scorecard .score .star.enabled
 {
  background-image:url(../img/star-on.png);
 }
 
-#game_scorecard p.clones, #game_scorecard p.time
-{
- padding-top: 2px;
- margin-top:2px;
- font-size: 30px;
- padding-bottom:10px;
-}
-
 #game_scorecard .nextLevel,
-#game_scorecard .resetLevel
+#game_scorecard .resetLevel,
+#game_scorecard .mainMenu
 {
- border:1px solid grey;
- border-bottom:1px solid black;
- width:64px;
- height:64px;
  display:block;
  font-size:-1px;
  text-indent:-9999px;
  outline: none;
- border-radius:10px;
  background-repeat:no-repeat;
  position:relative;
+ margin-top:60px;
 }
 
 #game_scorecard .nextLevel
 {
- background-image:url(../img/next.png);
- left:310px;
- top:80px;
+ background-image:url(../img/next-off.png);
+ width:180px;
+ height:92px;
+ top:-313px;
+ margin-left:277px;
+}
+
+#game_scorecard .nextLevel:hover
+{
+ background-image:url(../img/next-on.png);
+}
+
+#game_scorecard .mainMenu
+{
+ background-image:url(../img/menu-off.png);
+ width:180px;
+ height:92px;
+ margin-left:28px;
+}
+
+#game_scorecard .mainMenu:hover
+{
+ background-image:url(../img/menu-on.png);
 }
 
 #game_scorecard .resetLevel
 {
  background-image:url(../img/reset.png);
- left:167px;
- top:15px;
+ width:100px;
+ height:101px;
+ top:-160px;
+ margin-left:198px;
 }

js/lib/scorecard.js

@@ -13,13 +13,13 @@ function scorecard()
  {
  $('body').append('<div id="game_scorecard_bg"></div>');
  $('#game_scorecard_bg').append('<div id="game_scorecard"></div>');
- $('#game_scorecard').append('<p>Number of Clones</p>');
- $('#game_scorecard').append('<p class="clones">0</p>');
- $('#game_scorecard').append('<p>Time</p>');
- $('#game_scorecard').append('<p class="time">0</p>');
- $('#game_scorecard').append('<p><span class="score"></span></p>');
- $('#game_scorecard').append('<a class="nextLevel" href="#">Next Level</a>');
+ $('#game_scorecard').append('<h1>Results</h1>');
+ $('#game_scorecard').append('<p>Number of Clones<span class="clones">0</span></p>');
+ $('#game_scorecard').append('<p>Time<span class="time">0s</span></p>');
+ $('#game_scorecard').append('<p class="scoreholder">Score<span class="score"></span></p>');
+ $('#game_scorecard').append('<a class="mainMenu" href="#">Main Menu</a>');
  $('#game_scorecard').append('<a class="resetLevel" href="#">Reset Level</a>');
+ $('#game_scorecard').append('<a class="nextLevel" href="#">Next Level</a>');
  }
 
  this.setParForClones = function( par ){
@@ -44,8 +44,8 @@ function scorecard()
  }
 
  this.show = function(){
- $('#game_scorecard p.clones').text(_clones);
- $('#game_scorecard p.time').text(_calcTime());
+ $('#game_scorecard .clones').text(_clones);
+ $('#game_scorecard .time').text(_calcTime());
 
  var score = 0;
 

js/lib/startMenu.js

@@ -37,10 +37,24 @@ function startMenu()
  return false;
  }
 
- $('.nextLevel .resetLevel').die();
+ var backToMenu = function(event){
+ if ( typeof(event) !== 'undefined' )
+ {
+ event.preventDefault();
+ }
+
+ _world = null;
+ $('#game_scorecard_bg').remove();
+ return false;
+ }
+
+ $('.nextLevel').die();
+ $('.resetLevel').die();
+ $('.mainMenu').die();
 
  $('.nextLevel').live('click', nextLevel);
  $('.resetLevel').live('click', resetLevel);
+ $('.mainMenu').live('click', backToMenu);
 
  //Initialise the first level
  nextLevel();