player overlay stub

server/static/index.html

@@ -27,7 +27,10 @@
     <script src="js/WebSocketChannel.js"></script>
     <script src="js/RealtimeTileLayer.js"></script>
     <script src="js/CoordinatesDisplay.js"></script>
+
+    <!-- overlays -->
     <script src="js/overlays/TravelnetOverlay.js"></script>
+    <script src="js/overlays/PlayerOverlay.js"></script>
 
     <!-- bootstrap -->
     <script src="js/main.js"></script>

server/static/js/WebSocketChannel.js

@@ -15,6 +15,17 @@ WebSocketChannel.prototype.addListener = function(type, listener){
   list.push(listener);
 };
 
+WebSocketChannel.prototype.removeListener = function(type, listener){
+  var list = this.listenerMap[type];
+  if (!list){
+    return
+  }
+
+  this.listenerMap[type] = list.filter(function(l){
+    return l != listener;
+  });
+};
+
 WebSocketChannel.prototype.connect = function(){
   var ws = new WebSocket(this.wsUrl);
   var self = this;

server/static/js/main.js

@@ -6,7 +6,7 @@ api.getConfig().then(function(cfg){
   wsChannel.connect();
 
   wsChannel.addListener("minetest-info", function(e){
-    console.log(e);
+    console.log(e); //XXX
   });
 
   var rtTiles = new RealtimeTileLayer(wsChannel);
@@ -33,6 +33,7 @@ api.getConfig().then(function(cfg){
   tileLayer.addTo(map);
 
   layers["Base"] = tileLayer;
+  overlays["Players"] = new PlayerOverlay(wsChannel, layerMgr);
   overlays["Travelnet"] = new TravelnetOverlay(wsChannel, layerMgr);
 
   L.control.layers(layers, overlays).addTo(map);

server/static/js/overlays/PlayerOverlay.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var PlayerIcon = L.icon({
+  iconUrl: 'pics/sam.png',
+
+  iconSize:     [16, 32],
+  iconAnchor:   [8, 16],
+  popupAnchor:  [0, -16]
+});
+
+var PlayerOverlay = L.LayerGroup.extend({
+  initialize: function(wsChannel, layerMgr) {
+    L.LayerGroup.prototype.initialize.call(this);
+
+    this.layerMgr = layerMgr;
+    this.wsChannel = wsChannel;
+
+    this.currentObjects = [];
+
+    this.onLayerChange = this.onLayerChange.bind(this);
+    this.reDraw = this.reDraw.bind(this);
+    this.onMapMove = debounce(this.onMapMove.bind(this), 50);
+
+    this.wsChannel.addListener("minetest-info", this.onMinetestUpdate.bind(this));
+  },
+
+  onLayerChange: function(layer){
+    this.reDraw();
+  },
+
+  onMinetestUpdate: function(info){
+    //TODO
+  },
+
+  reDraw: function(){
+    var self = this;
+
+    this.clearLayers();
+
+    var mapLayer = this.layerMgr.getCurrentLayer()
+    //TODO
+  },
+
+  onAdd: function(map) {
+    this.layerMgr.addListener(this.reDraw);
+    this.reDraw(true)
+  },
+
+  onRemove: function(map) {
+    this.clearLayers();
+    this.layerMgr.removeListener(this.reDraw);
+  }
+});