Used world state for heigh/width

client/garageserver.io.js

@@ -6,7 +6,7 @@ options = {
     onPlayerUpdate: function (state),
     onEntityUpdate: function (state),
     onPlayerRemove: function (id),
-    onGameState: function (state),
+    onWorldState: function (state),
     onPing: function (pingDelay),
     onUpdatePlayerPhysics: function (state, inputs, deltaTime),
     onInterpolation: function(previousState, targetState, amount)
@@ -175,8 +175,8 @@ var GarageServerIO = (function (socketio) {
                 }
             });
             _socket.on('state', function (data) {
-                if (_options.onGameState) {
-                    _options.onGameState(data); 
+                if (_options.onWorldState) {
+                    _options.onWorldState(data.worldState); 
                 }
                 _stateController.physicsDelta = data.physicsDelta;
                 _stateController.interpolation = data.interpolation;

example/game.js

@@ -13,7 +13,8 @@ function Game (sockets) {
             logging: true,
             interpolation: true,
             clientSidePrediction: true,
-            smoothingFactor: this.physicsDelta * 20
+            smoothingFactor: this.physicsDelta * 20,
+            worldState: { height: '400px', width: '800px' }
         });
 }
 

example/public/javascripts/game.js

@@ -7,7 +7,11 @@ $(function () {
     GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', {
         logging: true,
         onUpdatePlayerPhysics: GamePhysics.getNewState,
-        onInterpolation: GamePhysics.getInterpolatedState
+        onInterpolation: GamePhysics.getInterpolatedState,
+        onWorldState: function (state) {
+            document.getElementById('gameCanvas').style.width = state.width;
+            document.getElementById('gameCanvas').style.height = state.height;
+        }
     });
     GarageServerIO.setState({ x: 0, y: 0 });
 

example/public/stylesheets/style.css

@@ -5,7 +5,6 @@
     margin-left: auto;
     margin-right: auto;
     display: block;
-    width: 800px;
 }
 
 #fps {