working stats-only page

fixes #76

doc/stats_webfragment.md

@@ -0,0 +1,11 @@
+
+# Stats webfragment
+
+<img src="./pics/stats_webfragment.png"></img>
+
+The "world stats" info from the bottom right corner of the mapserver
+can be embedded as an iframe into any existing web-page:
+
+```html
+<iframe src="http://127.0.0.1:8080/stats.html"></iframe>
+```

readme.md

@@ -23,6 +23,7 @@ Demo: [Pandorabox Server map](https://pandorabox.io/map/#-1782.25/493.5/10)
 * [Search](doc/search.md)
 * [Configuration](doc/config.md)
 * [Recommended specs](doc/recommended_specs.md)
+* [Stats webfragment](doc/stats_webfragment.md)
 * [Contribution](doc/contrib.md)
 * [Development](doc/dev.md)
 * [License](doc/license.md)

static/js/bundle-stats.js

@@ -0,0 +1,104 @@
+(function(f){typeof define==='function'&&define.amd?define(f):f();}((function(){'use strict';function WorldStats(info){
+
+  var timeIcon = m("span", { class: "fa fa-sun", style: "color: orange;" });
+
+  if (info.time < 5500 || info.time > 19000) //0 - 24'000
+    timeIcon = m("span", { class: "fa fa-moon", style: "color: blue;" });
+
+  function getHour(){
+    return Math.floor(info.time/1000);
+  }
+
+  function getMinute(){
+    var min = Math.floor((info.time % 1000) / 1000 * 60);
+    return min > 10 ? min : "0" + min;
+  }
+
+  function getLag(){
+    var color = "green";
+    if (info.max_lag > 0.8)
+      color = "orange";
+    else if (info.max_lag > 1.2)
+      color = "red";
+
+    return [
+      m("span", { class: "fa fa-wifi", style: "color: " + color }),
+      parseInt(info.max_lag*1000),
+      " ms"
+    ];
+  }
+
+  function getPlayers(){
+    return [
+      m("span", { class: "fa fa-users" }),
+      info.players ? info.players.length : "0"
+    ];
+  }
+
+  return m("div", [
+    getPlayers(),
+    " ",
+    getLag(),
+    " ",
+    m("span", { class: "fa fa-clock" }),
+    timeIcon,
+    getHour(), ":", getMinute()
+  ]);
+
+}class WebSocketChannel {
+  constructor(){
+    this.wsUrl = window.location.protocol.replace("http", "ws") +
+      "//" + window.location.host +
+      window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/")) +
+      "/api/ws";
+
+    this.listenerMap = {/* type -> [listeners] */};
+  }
+
+  addListener(type, listener){
+    var list = this.listenerMap[type];
+    if (!list){
+      list = [];
+      this.listenerMap[type] = list;
+    }
+
+    list.push(listener);
+  }
+
+  removeListener(type, listener){
+    var list = this.listenerMap[type];
+    if (!list){
+      return;
+    }
+
+    this.listenerMap[type] = list.filter(l => l != listener);
+  }
+
+  connect(){
+    var ws = new WebSocket(this.wsUrl);
+    var self = this;
+
+    ws.onmessage = function(e){
+      var event = JSON.parse(e.data);
+      //rendered-tile, mapobject-created, mapobjects-cleared
+
+      var listeners = self.listenerMap[event.type];
+      if (listeners){
+        listeners.forEach(function(listener){
+          listener(event.data);
+        });
+      }
+    };
+
+    ws.onerror = function(){
+      //reconnect after some time
+      setTimeout(self.connect.bind(self), 1000);
+    };
+  }
+}
+
+var wsChannel = new WebSocketChannel();wsChannel.connect();
+
+wsChannel.addListener("minetest-info", function(info){
+	m.render(document.getElementById("app"), WorldStats(info));
+});})));//# sourceMappingURL=bundle-stats.js.map

static/js/components/WorldStats.js

@@ -12,7 +12,7 @@ export default function(info){
 
   function getMinute(){
     var min = Math.floor((info.time % 1000) / 1000 * 60);
-    return min > 10 ? min : "0" + min;
+    return min >= 10 ? min : "0" + min;
   }
 
   function getLag(){

static/js/rollup.config.js

@@ -1,5 +1,5 @@
 
-export default {
+export default [{
 	input: 'main.js',
 	output: {
 		file :'bundle.js',
@@ -7,4 +7,12 @@ export default {
 		sourcemap: true,
 		compact: true
 	}
-};
+},{
+	input: 'stats.js',
+	output: {
+		file :'bundle-stats.js',
+		format: 'umd',
+		sourcemap: true,
+		compact: true
+	}
+}];

static/js/stats.js

@@ -0,0 +1,9 @@
+
+import WorldStats from './components/WorldStats.js';
+import wsChannel from './WebSocketChannel.js';
+
+wsChannel.connect();
+
+wsChannel.addListener("minetest-info", function(info){
+	m.render(document.getElementById("app"), WorldStats(info));
+});

static/stats.html

@@ -14,9 +14,9 @@
     <script src="js/lib/mithril.min.js"></script>
 
     <!-- main module -->
-    <script src="js/main.js?v=1.0" type="module"></script>
+    <script src="js/stats.js" type="module"></script>
 
     <!-- no modules -->
-    <script src="js/bundle.js?v=1.0" nomodule></script>
+    <script src="js/bundle-stats.js" nomodule></script>
   </body>
 </html>