sbrl-github
/
Nibriboard
mirror of https://github.com/sbrl/Nibriboard.git
1
0
Fork 0
Code

Wire up more of the Handshake Response

This commit is contained in:
Starbeamrainbowlabs 2017-02-19 13:22:35 +00:00
parent 1db1788626
commit 8c04cfb9e9
7 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Nibriboard/Client/Messages/Message.cs
View File

@ -4,10 +4,12 @@ namespace Nibriboard.Client.Messages
{ {
public class Message public class Message
{ {
public readonly string Event = string.Empty;
public readonly DateTime TimeSent = DateTime.Now; public readonly DateTime TimeSent = DateTime.Now;
public Message() public Message()
{ {
Event = this.GetType().Name.Replace("Message", "");
} }
} }
} }

2
Nibriboard/Client/NibriClient.cs
View File

@ -105,7 +105,7 @@ namespace Nibriboard.Client
private async Task handleMessage(string frame) private async Task handleMessage(string frame)
{ {
string eventName = JsonUtilities.DeserializeProperty<string>(frame, "event"); string eventName = JsonUtilities.DeserializeProperty<string>(frame, "Event");
if(eventName == null) { if(eventName == null) {
Log.WriteLine("[NibriClient#{0}] Received message that didn't have an event.", Id); Log.WriteLine("[NibriClient#{0}] Received message that didn't have an event.", Id);

27
Nibriboard/ClientFiles/BoardWindow.js
View File

@ -25,10 +25,22 @@ class BoardWindow extends EventEmitter
this.renderTimeIndicator.innerHTML = "0ms"; this.renderTimeIndicator.innerHTML = "0ms";
document.querySelector(".fps").appendChild(this.renderTimeIndicator); document.querySelector(".fps").appendChild(this.renderTimeIndicator);
// --~~~--
// Our unique id
this.Id = -1;
// Our colour
this.Colour = "rgba(255, 255, 255, 0.3)";
// --~~~--
// Setup the canvas // Setup the canvas
this.canvas = canvas; this.canvas = canvas;
this.context = canvas.getContext("2d"); this.context = canvas.getContext("2d");
// Grab a reference to the sidebar
this.sidebar = document.getElementById("sidebar");
// --~~~-- // --~~~--
// Setup the favicon thingy // Setup the favicon thingy
@ -71,7 +83,7 @@ class BoardWindow extends EventEmitter
this.rippleLink.on("connect", (function(event) { this.rippleLink.on("connect", (function(event) {
// Send the handshake request // Send the handshake request
this.rippleLink.send({ this.rippleLink.send({
event: "HandshakeRequest", Event: "HandshakeRequest",
InitialViewport: { // TODO: Add support for persisting this between sessions InitialViewport: { // TODO: Add support for persisting this between sessions
X: 0, X: 0,
Y: 0, Y: 0,
@ -89,6 +101,9 @@ class BoardWindow extends EventEmitter
// RippleLink message bindings // RippleLink message bindings
// Handle the HandshakeResponse when it comes in
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));
} }
@ -163,6 +178,16 @@ class BoardWindow extends EventEmitter
this.viewportState = event; // Store the viewport information for later this.viewportState = event; // Store the viewport information for later
} }
handleHandshakeResponse(message) {
console.log("Received handshake response");
// Store the information send by the server
this.Id = message.Id;
this.Colour = message.Colour;
this.sidebar.style.borderTopColor = this.Colour;
}
handlePeerUpdates(message) { handlePeerUpdates(message) {
// Update our knowledge about other clients // Update our knowledge about other clients
for (let otherClient of message.ClientStates) { for (let otherClient of message.ClientStates) {

12
Nibriboard/ClientFiles/Nibri.css
View File

@ -8,10 +8,22 @@ body
{ {
position: absolute; position: absolute;
top: 0; right: 0; bottom: 0; left: 0; top: 0; right: 0; bottom: 0; left: 0;
z-index: 1000;
cursor: crosshair; cursor: crosshair;
} }
#sidebar
{
position: absolute;
top: 0; left: 0; bottom: 0;
z-index: 2000;
display: flex;
background: rgba(255, 255, 255, 0.3);
border-top: 0.2em solid rgba(255, 255, 255 0.3);
}
.fps .fps
{ {
top: 0.2em !important; right: 0.2em !important; top: 0.2em !important; right: 0.2em !important;

4
Nibriboard/ClientFiles/RippleLink.js
View File

@ -40,10 +40,10 @@ class RippleLink extends EventEmitter
handleMessage(event) { handleMessage(event) {
// Decode the message form the server // Decode the message form the server
var message = JSON.parse(event.data); var message = JSON.parse(event.data);
console.debug(message); console.debug(message.Event, message);
// Pass it on to the board manager by triggering the appropriate event // Pass it on to the board manager by triggering the appropriate event
this.emit(message.event, message); this.emit(message.Event, message);
} }
/** /**

4
Nibriboard/ClientFiles/index.html
View File

@ -5,6 +5,10 @@
<title>Nibriboard</title> <title>Nibriboard</title>
</head> </head>
<body> <body>
<aside id="sidebar">
<div class="Name">Your name here</div>
</aside>
<canvas id="canvas-main"></canvas> <canvas id="canvas-main"></canvas>
<!----------------> <!---------------->

2
Nibriboard/Log.cs
View File

@ -6,7 +6,7 @@ namespace Nibriboard
public static int WriteLine(string text, params object[] args) public static int WriteLine(string text, params object[] args)
{ {
string outputText = $"[{Env.SecondsSinceStart}] " + string.Format(text, args); string outputText = $"[{Env.SecondsSinceStart.ToString("N3")}] " + string.Format(text, args);
Console.WriteLine(outputText); Console.WriteLine(outputText);
return outputText.Length; return outputText.Length;
} }