Added game info bar

public/index.html

@@ -9,6 +9,7 @@
 
   <canvas class="display" ></canvas>
   <div class="stats"></div>
+  <div class="play"></div>
 
   <script src="socket.io.js"></script>
   <script src="main.js"></script>

public/main.js

@@ -3,6 +3,7 @@
 (function() {
 
   var stats = document.getElementsByClassName('stats')[0];
+  var play = document.getElementsByClassName('play')[0];
 
   var socket = io();
 
@@ -22,6 +23,20 @@
   function onSetting(data) {
     canvas_size_x = data.canvas.size.x;
     canvas_size_y = data.canvas.size.y;
+
+    var out = 'Play PixelFlut @ ';
+
+    if (data.network.ip4 != '') {
+      out += 'IP4 ' + data.network.ip4 + ' ';
+    }
+    if (data.network.ip4 != '' && data.network.ip6 != '') {
+      out += '|| ';
+    }
+    if (data.network.ip6 != '') {
+      out += 'IP6 ' + data.network.ip6 + ' ';
+    }
+    out += 'port ' + data.network.port;
+    play.innerHTML = out;
   }
 
 

public/style.css

@@ -26,3 +26,14 @@ html, body {
   left: 10px;
   bottom: 10px;
 }
+
+.play {
+  z-index: 100;
+  position: absolute;
+  background-color: #00000022;
+  padding: 3px;
+  left: 10px;
+  right: 10px;
+  top: 10px;
+  text-align: center;
+}