Merge pull request #15 from hobnob/features/htmlAmends

HTML amends

css/main.css

@@ -1,3 +1,30 @@
+body
+{
+ background-color:#ECECEC;
+}
+
+#preload, #gameWindow
+{
+ margin:auto;
+}
+
+#gameWindow
+{
+ padding:19px 29px;
+ width:800px;
+ height:600px;
+ background-image:url('../img/game-window.png');
+ background-repeat:no-repeat;
+ display:none;
+}
+
+canvas
+{
+ -moz-box-shadow: 0 0 10px #000000;
+ -webkit-box-shadow: 0 0 10px #000000;
+ box-shadow: 0 0 10px #000000;
+}
+
 #preload
 {
  padding-top:250px;
@@ -14,7 +41,7 @@
 
 #game_tooltip
 {
- position:absolute;
+ position:relative;
  width:800px;
  background: linear-gradient(#ECECEC, #CACACA);
  border-bottom: 1px solid #9A9A9A;
@@ -25,18 +52,16 @@
  padding-bottom:10px;
  font-weight: bold;
  text-align: center;
- top:8px;
- left:8px;
+ top:-605px;
  display:none;
 }
 
 #game_scorecard_bg
 {
- position:absolute;
+ position:relative;
  width:800px;
  height:600px;
- top:8px;
- left:8px;
+ top:-624px;
  background-color: rgba(0,0,0,0.4);
  display:none;
 }
@@ -113,29 +138,31 @@
 
 #game_scorecard .nextLevel
 {
- background-image:url(../img/next-off.png);
+ background-image:url(../img/next-button.png);
  width:180px;
  height:92px;
  top:-313px;
  margin-left:277px;
+ background-position: 0px 0px;
 }
 
 #game_scorecard .nextLevel:hover
 {
- background-image:url(../img/next-on.png);
+ background-position: -190px 0px;
 }
 
 #game_scorecard .mainMenu
 {
- background-image:url(../img/menu-off.png);
+ background-image:url(../img/menu-button.png);
  width:180px;
  height:92px;
  margin-left:28px;
+ background-position: 0px 0px;
 }
 
 #game_scorecard .mainMenu:hover
 {
- background-image:url(../img/menu-on.png);
+ background-position: -190px 0px;
 }
 
 #game_scorecard .resetLevel

index.htm

@@ -27,5 +27,8 @@
  <img src="img/loading.gif" />
  <img src="img/loading-text.png" />
  </div>
+ <div id="gameWindow">
+ <canvas id="gjs-canvas"></canvas>
+ </div>
  </body>
 </html>

js/lib/levels/level_1.js

@@ -6,10 +6,16 @@
  {"type":"door", "x":700,"y":218}
  ]},
  {
- "type":"tooltip","x":300,"y":641,"width":100,"height":100,
- "text":"Press <span class='button e'>e</span> or <span class='button enter'>enter</span> to activate switches<br>At least one clone must remain at a switch to keep it active"},
+ "type":"tooltip","x":150,"y":641,"width":50,"height":50,
+ "text":"Press the <span class='button left'>left</span> arrow or <span class='button a'>a</span> to move left<br>Press the <span class='button right'>right</span> arrow or <span class='button d'>d</span> to move right"
+ },
+ {
+ "type":"tooltip","x":350,"y":641,"width":50,"height":50,
+ "text":"Press <span class='button e'>e</span> or <span class='button enter'>enter</span> to activate switches<br>At least one clone must remain at a switch to keep it active"
+ },
  {
  "type":"tooltip","x":650,"y":641,"width":50,"height":50,
- "text":"Press <span class='button c'>c</span> to create a clone<br/>Press <span class='button tab'>tab</span> to switch between them"},
+ "text":"Press <span class='button c'>c</span> to create a clone<br/>Press <span class='button tab'>tab</span> to switch between them"
+ },
  {"type":"goal","x":890,"y":540}
 ]

js/lib/scorecard.js

@@ -11,7 +11,7 @@ function scorecard()
 
  if ( !($('#game_scorecard').length) )
  {
- $('body').append('<div id="game_scorecard_bg"></div>');
+ $('#gameWindow').append('<div id="game_scorecard_bg"></div>');
  $('#game_scorecard_bg').append('<div id="game_scorecard"></div>');
  $('#game_scorecard').append('<h1>Results</h1>');
  $('#game_scorecard').append('<p>Number of Clones<span class="clones">0</span></p>');

js/lib/tooltip.js

@@ -8,7 +8,7 @@ function tooltip()
 
  if ( !($('#game_tooltip').length) )
  {
- $('body').append('<div id="game_tooltip"></div>');
+ $('#gameWindow').append('<div id="game_tooltip"></div>');
  }
 
  var _text = '';
@@ -40,8 +40,22 @@ function tooltip()
  tooltip.timer = setTimeout(this.hide, 5000)
  }
 
- this.hide = function(){
- $('#game_tooltip').fadeOut();
+ this.hide = function(animate){
+ if ( typeof(animate) == 'undefined' )
+ {
+ animate = true;
+ }
+
+ if ( animate )
+ {
+ $('#game_tooltip').fadeOut();
+ }
+ else
+ {
+ $('#game_tooltip').hide();
+ }
+
+
  tooltip.timer = null;
  }
 

js/lib/world.js

@@ -284,6 +284,15 @@ function world()
 
  if ( _levelComplete )
  {
+ for( var i = 0; i < _objects.sprites().length; i++ )
+ {
+ var obj = _objects.sprites()[i];
+ if ( obj instanceof tooltip )
+ {
+ obj.hide(false);
+ }
+ }
+
  _scorecard.setTimeTaken(_gameTime / 1000);
  _scorecard.setClonesUsed(_p.getNumClones());
  _scorecard.show();

js/main.js

@@ -63,13 +63,13 @@ gamejs.ready(function() {
  $('#game_scorecard .resetLevel').click();
  event.preventDefault();
  break;
-
  }
  }
  });
 
  //Remove the loading bar
  $('#preload').remove();
+ $('#gameWindow').show();
 
  //Set up the tick function, run at 60fps
  gamejs.time.fpsCallback(tick, self, 60);