added the UI for displaying game events #12

vinnyoodles · Jan 10, 2018 · 01731f3 · vinnyoodles · Jan 10, 2018 · vinnyoodles
1 parent 43c0a66
commit 01731f3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/src/static/index.html b/src/static/index.html
@@ -9,6 +9,12 @@
         <script type="text/javascript" src="/static/index.js"></script>
     </head>
     <body>
-        <canvas id="canvas"></canvas>
+        <div class="game">
+          <canvas id="canvas"></canvas>
+        </div>
+        <div class="messagesContainer">
+            <h2>Game</h2>
+            <div class="messages" id="commands"></div>
+        </div>
     </body>
 </html>
diff --git a/src/static/index.js b/src/static/index.js
@@ -28,7 +28,8 @@ function onLoad(event) {
                 var json = JSON.parse(event.data);
                 switch (json.event) {
                     case 'metadata': return setCanvas(json.width, json.height);
-                    default: console.log(json);
+                    default: gameEvents(json);
+
                 }
             } catch (err) {
                 Raven.captureException(err)
@@ -45,6 +46,22 @@ function onLoad(event) {
     }
 }
 
+function gameEvents(json) {
+  var parent = document.getElementById('commands');
+  var child = document.createElement('p');
+  switch (json.event) {
+    case 'last log':
+        var html = "<p>" + json.data + "</p>";
+        child.innerHTML = html;
+        parent.appendChild(child);
+      break;
+    case 'all logs':
+      break;
+
+    default: //no gets updated
+
+}
+
 function onKey(event) {
     if (!connected)
         Raven.captureMessage('Client is not connected to websocket');

diff --git a/src/static/main.css b/src/static/main.css
@@ -1,7 +1,9 @@
 body {
     background-color: #252227;
 }
-
+.game {
+  float: left;
+}
 #canvas {
     padding: 0;
     top: 0;
@@ -10,4 +12,17 @@ body {
     right: 0;
     margin: auto;
     position: absolute;
-}
+}
+.messagesContainer {
+  float: right;
+  height: 250px;
+  width: 250px;
+  padding: 3px;
+  background:#D3D3D3;
+  height: 100vh;
+}
+.messages {
+  height: 95vh;
+  overflow: auto;
+  background: #fff;
+}