Permalink
Browse files

Port sandbox rendering into client proper

  • Loading branch information...
1 parent 4b1dfcb commit 1b5dc9e450f2f8afc2e59d310a7b0bce151edbf8 @brendonh committed Aug 12, 2012
View
@@ -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>
@@ -0,0 +1,13 @@
+define([
+ "Backbone",
+ "models/Ship"
+], function(Backbone, Ship) {
+
+ var SectorShips = Backbone.Collection.extend({
+ model: Ship
+
+ });
+
+ return SectorShips;
+
+});
View
@@ -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);
Oops, something went wrong.

0 comments on commit 1b5dc9e

Please sign in to comment.