Adjust canvas position when on desktop

Author: petarov

Gruntfile.js

@@ -173,7 +173,7 @@ module.exports = function (grunt) {
     },
     nwjs: {
       options: {
-        version: 'v0.14.0',
+        version: 'v0.14.5',
         platforms: ['osx64'],
         buildDir: './webkitbuilds',
       },

css/main.css

@@ -15,13 +15,13 @@
   padding: 0;
   cursor: default;
 }
-body, html { 
-  margin:0; 
-  padding: 0; 
-  overflow:hidden; 
-  height: 100%; 
-  font-family: 'Jura', Arial, sans-serif; 
-  font-size:20px 
+body, html {
+  margin:0;
+  padding: 0;
+  overflow:hidden;
+  height: 100%;
+  font-family: 'Jura', Arial, sans-serif;
+  font-size: 20px
 }
 body, html {
   background: rgb(224,226,228); /* Old browsers */
@@ -32,7 +32,7 @@ body, html {
   background: -ms-linear-gradient(top,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* W3C */
 }
-#game { 
+#game {
   position: absolute;
   top: 0;
   left: 50%;
@@ -43,14 +43,17 @@ body, html {
   transform: translate(-50%, 0%);
   width: 400px;
   height: 640px;
-  border: 1px solid #999; 
-  color:white; 
+  border: 1px solid #999;
+  color:white;
   -webkit-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .5);
   box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .5);
 }
+.canvas-pos {
+  top: 15% !important;
+}
 p.sorry {
   margin: 0 auto;
   text-align: center;
   font-size: 12px;
   visibility: hidden;
-}
+}

index.html

@@ -18,7 +18,7 @@
   <% } else if (environment !== 'crx') { %>
   <script src="lib/gj-js-api.js"></script>
   <% } %>
-  /build -->  
+  /build -->
   <!-- build:js:dist,crx lib/crafty-min.js -->
   <script src="lib/crafty.js"></script>
   <!-- /build -->
@@ -28,4 +28,4 @@
   <!-- build:include:dist urch -->
   <!-- /build -->
 </body>
-</html>
+</html>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Strider",
+  "name": "nw-demo",
   "description": "Strider is a 2D sci-fi platformer game.",
   "version": "1.0.6",
   "private": true,

src/loader.js

@@ -10,6 +10,11 @@
 (function(Crafty) {
     document.addEventListener('DOMContentLoaded', function () {
 
+    if (typeof require !== 'undefined') {
+      var el = document.getElementById('game');
+      el.className = 'canvas-pos';
+    }
+
     var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
     var STAGE_WIDTH = 400,
         STAGE_HEIGHT = 640,
@@ -19,9 +24,9 @@
     Crafty.init(STAGE_WIDTH, STAGE_HEIGHT, screen);
     // Crafty.canvas.init();
     Crafty.viewport.init(STAGE_WIDTH, STAGE_HEIGHT, screen);
-    Crafty.viewport.bounds = { 
-        min: { x:-100, y: -Infinity }, 
-        max: { x: STAGE_WIDTH + 50, y: STAGE_HEIGHT } 
+    Crafty.viewport.bounds = {
+        min: { x:-100, y: -Infinity },
+        max: { x: STAGE_WIDTH + 50, y: STAGE_HEIGHT }
     };
     // Crafty.viewport.clampToEntities = true;
     Crafty.settings.modify('autoPause', true);
@@ -75,7 +80,7 @@
 
         Crafty.paths({ audio: "assets/sfx/", images: "assets/images/" });
         var assets = {
-            images: ['splash_screen.jpg', 'splash_screen_blurred.jpg', 'cratfy_logo.png', 'gameoff.jpg', 'wall01.png', 
+            images: ['splash_screen.jpg', 'splash_screen_blurred.jpg', 'cratfy_logo.png', 'gameoff.jpg', 'wall01.png',
                 'backgrounds.png', 'starsky.png', 'audioOn.png', 'audioOff.png', 'musicOn.png', 'musicOff.png'],
             sprites: {
                 'ui_energy.png': {
@@ -240,4 +245,4 @@
     });
 
     }); //eof-ready
-}(Crafty));
+}(Crafty));