Adding in start of websocket stuff

2 files changed, 55 insertions, 2 deletions

diff --git a/public/index.html b/public/index.html
index 51bcab9..bbac0a6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,8 +13,8 @@
 	  <h1>rogue.js</h1>
 	</div>
 	<canvas id="gameboard" class="center" width="512" height="416"></canvas>
-    <button id="newgame" type="button" title="New Game">New Game</button>
-    <button id="leave" type="button" title="Leave Game">Leave Game</button>
+    <button id="joingame" type="button" title="Join Game">Join Game</button>
+    <button id="leavegame" type="button" title="Leave Game">Leave Game</button>
     <button id="wsButton" type="button" title="Open WebSocket connection">
       Open WebSocket connection
     </button>
diff --git a/public/js/rogue.js b/public/js/rogue.js
index e3c046f..1580593 100644
--- a/public/js/rogue.js
+++ b/public/js/rogue.js
@@ -8,6 +8,7 @@
  */
 
 var gamemap = {};
+var player = {};
 
 function Sprite(x, y, width, height) {
 	this.x = x;
@@ -101,6 +102,58 @@ var space = new Sprite(1, 59, 8, 16);
 
 /** Client Logic **/
 
+const messages = document.querySelector('#messages');
+const joinGame = document.querySelector('#joingame');
+const leaveGame = document.querySelector('#leavegame');
+const wsButton = document.querySelector('#wsButton');
+const wsSendButton = document.querySelector('#wsSendButton');
+let websocket;
+
+/**
+ * Show messages from the server
+ */
+function showMessage(message) {
+    messages.textContent += `\n${message}`;
+    messages.scrollTop = messages.scrollHeight;
+}
+
+joinGame.onclick = function() {
+	// TODO if we need this
+};
+
+leaveGame.onclick = function() {
+	// TODO if we need this
+};
+
+wsButton.onclick = function() {
+	if (websocket) {
+		websocket.onerror = websocket.onopen = websocket.onclose = null;
+		websocket.close();
+    }
+
+    websocket = new WebSocket(`ws://localhost:8080`);
+    websocket.onerror = function() {
+		showMessage('WebSocket error');
+    };
+    websocket.onopen = function() {
+		showMessage('WebSocket connection established');
+    };
+    websocket.onclose = function() {
+		showMessage('WebSocket connection closed');
+		websocket = null;
+    };
+};
+
+wsSendButton.onclick = function() {
+    if (!websocket) {
+		showMessage('No WebSocket connection');
+		return;
+    }
+
+    websocket.send('Hello World!');
+    showMessage('Sent "Hello World!"');
+};
+
 const canvas = document.getElementById('gameboard');
 const context = canvas.getContext('2d');
 const spritemap = new Image(320, 1264);