Port sandbox rendering into client proper

brendonh · Aug 12, 2012 · 1b5dc9e · 1b5dc9e
1 parent 4b1dfcb
commit 1b5dc9e
Show file tree

Hide file tree

Showing 10 changed files with 1,233 additions and 48 deletions.
diff --git a/client/index.html b/client/index.html
@@ -6,7 +6,7 @@
 
   <body>
 
-    <div id="box">
+    <div id="sector">
       Sorry, no canvas support.
     </div>
 
@@ -16,7 +16,6 @@
       </p>
       <p>FPS: <strong class="fps">??</strong></p>
       <p>Faces: <strong class="faces">??</strong></p>
-      <p>Renderer: <strong class="renderer">??</strong></p>
     </div>
 
   </body>

diff --git a/client/js/dev/collections/SectorShips.js b/client/js/dev/collections/SectorShips.js
@@ -0,0 +1,13 @@
+define([
+    "Backbone",
+    "models/Ship"
+], function(Backbone, Ship) {
+
+    var SectorShips = Backbone.Collection.extend({
+        model: Ship
+
+    });
+
+    return SectorShips;
+
+});
diff --git a/client/js/dev/index.js b/client/js/dev/index.js
@@ -6,7 +6,8 @@ require.config({
         "router": "libs/router",
         "Underscore": "libs/underscore-min",
         "Backbone": "libs/backbone-min",
-        "msgpack": "libs/msgpack"
+        "msgpack": "libs/msgpack",
+        "Three": "libs/Three"
     },
     "shim": {
         "Underscore": {
@@ -16,6 +17,9 @@ require.config({
         "Backbone": {
             "deps": ["Underscore", "jquery"],
             "exports": "Backbone"
+        },
+        "Three": {
+            "exports": "THREE"
         }
     },
     "deps": ["index"],
@@ -25,8 +29,12 @@ require.config({
 require([
     "jquery",
     "Backbone",
-    "collections/Servers"
-], function($, Backbone, Servers) {
+    "collections/Servers",
+    "models/Sector",
+    "models/SectorRenderer",
+    "views/SectorRendererView",
+    "models/Ship"
+], function($, Backbone, Servers, Sector, SectorRenderer, SectorRendererView, Ship) {
 
     var initialServer = "ws://dev.brendonh.org:9998/";
 
@@ -37,45 +45,121 @@ require([
     }
 
     servers.ensure(initialServer).done(startLogin);
-});
 
-function startLogin(server) {
-    console.log("Connected!");
-
-    var user = getQueryVariable('user');
-    var password = getQueryVariable('password');
-
-    if (!user || !password) {
-        alert("Give user and password in query string");
-        return;
+    function startLogin(server) {
+        console.log("Connected!");
+
+        var user = getQueryVariable('user');
+        var password = getQueryVariable('password');
+
+        if (!user || !password) {
+            alert("Give user and password in query string");
+            return;
+        }
+
+        server.callAPI("accounts", "login", 
+                       {"name": user,
+                        "password": password})
+            .done(function(r) { afterLogin(server, r); });
     }
-
-    server.callAPI("accounts", "login", 
-                   {"name": user,
-                    "password": password})
-        .done(function(r) { afterLogin(server, r); });
-}
-
-function afterLogin(server, response) {
-    var shipID = getQueryVariable('ship');
-    if (!shipID) {
-        server.callAPI("ships" ,"list")
-            .done(function(shipResponse) {
-                var ships = shipResponse["data"]["ships"];
-                for (var i in ships) {
-                    var ship = ships[i];
-                    console.log(ship.name, ship.id);
-                }
+
+    function afterLogin(server, response) {
+        var shipID = getQueryVariable('ship');
+        if (!shipID) {
+            server.callAPI("ships" ,"list")
+                .done(function(shipResponse) {
+                    var ships = shipResponse["data"]["ships"];
+                    for (var i in ships) {
+                        var ship = ships[i];
+                        console.log(ship.name, ship.id);
+                    }
+                });
+            return;
+        }
+
+        server.callAPI("ships", "control", {"id": shipID})
+            .done(function() {
+                afterShip(server, shipID);
             });
-        return;
     }
 
-    server.callAPI("ships", "control", {"id": shipID})
-        .done(function() {
-            console.log("Ready!");
+    function afterShip(server, shipID) {
+        var sector = new Sector();
+
+        var renderer = new SectorRenderer({
+            "sector": sector
         });
-}
-
+
+        var view = new SectorRendererView(
+            {"el": $("#sector"), 
+             "model": renderer});
+        view.render();
+
+        var ship = new Ship({"id": shipID})
+        sector.get("ships").add(ship);
+
+        var ghost = new Ship({"id": "ghost"})
+        sector.get("ships").add(ghost);
+        ghost.thrust(true);
+        ghost.rotateRight(true);
+
+        window.onkeydown = function(e) {
+            if (e.keyCode == 38) ship.thrust(true);
+            else if (e.keyCode == 39) ship.rotateRight(true);
+            else if (e.keyCode == 37) ship.rotateLeft(true);
+        };
+
+        window.onkeyup = function(e) {
+            if (e.keyCode == 38) ship.thrust(false);
+            else if (e.keyCode == 39) ship.rotateRight(false);
+            else if (e.keyCode == 37) ship.rotateLeft(false);
+        };
+
+        var requestAnimFrame = (function(){
+            return  window.requestAnimationFrame   || 
+                window.webkitRequestAnimationFrame || 
+                window.mozRequestAnimationFrame    || 
+                window.oRequestAnimationFrame      || 
+                window.msRequestAnimationFrame     || 
+                function( callback ){
+                    window.setTimeout(callback, 1000 / 60);
+                };
+        })();
+
+        var frames = 0;
+        var lastInfoTime = new Date().getTime();
+
+        function frame() {
+            sector.tick();
+            view.renderFrame();
+            info();
+            requestAnimFrame(frame);
+        }
+
+        function info() {
+            if (frames++ > 60) {
+                var time = new Date().getTime();
+                var delta = (time - lastInfoTime) / 1000;
+
+                $("#info .fps").html( Math.round((frames / delta)) );
+
+                frames = 0;
+                lastInfoTime = time;
+
+                var faces = 0;
+                sector.get("ships").each(function(ship) {
+                    faces += ship.get("mesh").geometry.faces.length;
+                });
+
+                $("#info .faces").html(faces);
+            }
+        }
+
+        frame(frame);
+    }
+
+});
+
 
 function getQueryVariable(variable) {
     var query = window.location.search.substring(1);