1
0
Fork 0
mirror of https://github.com/sbrl/Nibriboard.git synced 2018-01-10 21:33:49 +00:00

Draw debug grid (off by default, press g to toggle)

This commit is contained in:
Starbeamrainbowlabs 2017-04-24 20:12:14 +01:00
parent c394c5b1e9
commit fb25d09461
2 changed files with 75 additions and 8 deletions

View file

@ -29,6 +29,13 @@ class BoardWindow extends EventEmitter
// The width of the lines in other clients' cursors. // The width of the lines in other clients' cursors.
this.otherCursorWidth = 2; this.otherCursorWidth = 2;
this.currentPlaneName = "(You haven't landed yet!)";
// Whether to display the chunk grid or not
this.displayGrid = false;
this.gridLineWidth = 2;
this.gridLineColour = "rgba(22, 123, 228, 0.53)";
// --~~~-- // --~~~--
// Setup the fps indicator in the top right corner // Setup the fps indicator in the top right corner
@ -52,11 +59,9 @@ class BoardWindow extends EventEmitter
// The zoom level of the viewport. 1 = normal. // The zoom level of the viewport. 1 = normal.
zoomLevel: 1 zoomLevel: 1
}; };
/**
* The currents tate of the keyboard. // The current grid size
* @type {Keyboard} this.gridSize = -1;
*/
this.keyboard = new Keyboard();
// --~~~-- // --~~~--
@ -70,7 +75,16 @@ class BoardWindow extends EventEmitter
// Create a map to store information about other clients in // Create a map to store information about other clients in
this.otherClients = new Map(); this.otherClients = new Map();
/**
* The currents tate of the keyboard.
* @type {Keyboard}
*/
this.keyboard = new Keyboard();
// Toggle the grid display when the g key is released
this.keyboard.on("keyup-g", (function(event) {
this.displayGrid = this.displayGrid ? false : true;
console.info(`[BoardWindow/KeyboardHandler] Grid display set to ${this.displayGrid ? "on" : "off"}`);
}).bind(this))
// --~~~-- // --~~~--
@ -132,9 +146,10 @@ class BoardWindow extends EventEmitter
// Handle the HandshakeResponse when it comes in // Handle the HandshakeResponse when it comes in
this.rippleLink.on("HandshakeResponse", this.handleHandshakeResponse.bind(this)); this.rippleLink.on("HandshakeResponse", this.handleHandshakeResponse.bind(this));
// Handle other clients' state updates // Handle other clients' state updates
this.rippleLink.on("ClientStates", this.handlePeerUpdates.bind(this)); this.rippleLink.on("ClientStates", this.handlePeerUpdates.bind(this));
// Handle the plane change confirmations
this.rippleLink.on("PlaneChangeOk", this.handlePlaneChangeOk.bind(this));
} }
/** /**
@ -177,10 +192,43 @@ class BoardWindow extends EventEmitter
{ {
context.clearRect(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
// Draw the grid if it's enabled
if(this.displayGrid)
this.renderGrid(canvas, context);
this.renderOthers(canvas, context); this.renderOthers(canvas, context);
// Render the currently active line // Render the currently active line
if(typeof this.pencil !== "undefined") if(typeof this.pencil !== "undefined")
this.pencil.render(canvas, context); this.pencil.render(canvas, context);
context.restore();
}
renderGrid(canvas, context)
{
context.save();
context.translate(this.viewport.x, this.viewport.y);
context.scale(this.viewport.zoomLevel, this.viewport.zoomLevel);
context.translate(-this.viewport.x, -this.viewport.y);
context.beginPath();
for(let ax = this.viewport.x + (this.viewport.x % this.gridSize); ax < this.viewport.x + canvas.width; ax += this.gridSize)
{
context.moveTo(ax - this.viewport.x, 0);
context.lineTo(ax - this.viewport.x, canvas.height);
}
for(let ay = this.viewport.y + (this.viewport.y % this.gridSize); ay < this.viewport.y + canvas.height; ay += this.gridSize)
{
context.moveTo(0, ay - this.viewport.y);
context.lineTo(canvas.width, ay - this.viewport.y);
}
context.lineWidth = this.gridLineWidth;
context.strokeStyle = this.gridLineColour;
context.stroke();
context.restore();
} }
renderOthers(canvas, context) renderOthers(canvas, context)
@ -270,6 +318,17 @@ class BoardWindow extends EventEmitter
}); });
} }
/**
* Store the details about the new plane we've landed on that the server
* sends us.
* @param {object} message The plane change confirmation message to handle.
*/
handlePlaneChangeOk(message) {
this.currentPlaneName = message.NewPlaneName;
this.gridSize = message.GridSize;
console.info(`Plane changed to ${this.currentPlaneName} with a grid size of ${this.gridSize} successfully.`);
}
/** /**
* Handles peer update messages recieved from the server via the RippleLink. * Handles peer update messages recieved from the server via the RippleLink.
*/ */

View file

@ -1,12 +1,17 @@
"use strict"; "use strict";
window.EventEmitter = require("event-emitter-es6");
window.keycode = require("keycode");
/** /**
* Makes handling keyboard input just that little bit easier. * Makes handling keyboard input just that little bit easier.
*/ */
class Keyboard class Keyboard extends EventEmitter
{ {
constructor() constructor()
{ {
super();
/** /**
* The keyCodes of the keyboard keys that are currently pressed down. * The keyCodes of the keyboard keys that are currently pressed down.
* @type {[number]} * @type {[number]}
@ -33,6 +38,9 @@ class Keyboard
handleKeyUp(event) { handleKeyUp(event) {
if(this.DownKeys.indexOf(event.keyCode) !== -1) if(this.DownKeys.indexOf(event.keyCode) !== -1)
this.DownKeys.splice(this.DownKeys.indexOf(event.keyCode), 1); this.DownKeys.splice(this.DownKeys.indexOf(event.keyCode), 1);
console.debug("[keyboard] Emitting key up event", `keyup-${keycode(event.keyCode)}`);
this.emit(`keyup-${keycode(event.keyCode)}`, event);
} }
} }