From 5324017a1dda02918bc50c0ed242fd540730627e Mon Sep 17 00:00:00 2001
From: Alex Karle <alex@karle.co>
Date: Sun, 29 Mar 2020 00:30:22 -0400
Subject: [PATCH] lobby: Add 'join' button with diagnostic output

This commit just encapsulates the JavaScript testing segment in
~ckarle's last commit and puts it in a button. It also makes the
onmessage output a little prettier, so that the game state is
pretty printed for debugging reasons.
---
 public/index.html | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7bf12cc..6c00f3e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,9 +8,27 @@
   <div id="content"></div>
   <script>
     var ws = new WebSocket('ws://localhost:3000/play');
-    ws.onmessage = function (event) { document.body.innerHTML += event.data };
+    ws.onmessage = function (event) { 
+      msg = JSON.parse(JSON.parse(event.data)); // double parsed?
+      document.body.innerHTML += '<br>Game:          ' + msg.game.id + '<br>'
+      document.body.innerHTML += 'Players:       ' + msg.game.players + '<br>'
+      document.body.innerHTML += 'Spectators:    ' + msg.game.spectators + '<br>'
+    };
+
+    function joinGame() {
+      uname = document.getElementById('username').value;
+      gname = document.getElementById('gamename').value;
+      console.log('U: ' + uname + ' G: ' + gname);
+      ws.send(JSON.stringify({action:'join_game', player_name: uname, game_id: gname}))
+    }
   </script>
- <h1>Hello, Chris</h1>
+ <h1>Hello, World</h1>
+
+ <label for="username">Username:</label>
+ <input type="text" id="username">
+ <label for="gamename">Game:</label>
+ <input type="text" id="gamename">
+ <button onclick="joinGame()">Join Game</button>
 
 </body>
 </html>
--
libgit2 1.1.1