Modifies the main game window

Modified the main game window so that it now looks much sleeker

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;
 }

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/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,21 @@ 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

@@ -70,6 +70,7 @@ gamejs.ready(function() {
 
  //Remove the loading bar
  $('#preload').remove();
+ $('#gameWindow').show();
 
  //Set up the tick function, run at 60fps
  gamejs.time.fpsCallback(tick, self, 60);