source: binary-improvements/webserver/js/index.js@ 165

var REGIONSIZE = 512;
var CHUNKSIZE = 16;
var TILESIZE = 128;
var MAXZOOM = 4;

var BAG_COLS = 8;
var BAG_ROWS = 4;
var BELT_COLS = 8;
var INV_ITEM_WIDTH = 58;
var INV_ITEM_HEIGHT = 40;

SDTD_Projection = {
        project: function (latlng) {
                return new L.Point(latlng.lng / 16, latlng.lat / 16);
        },

        unproject: function (point) {
                return new L.LatLng(point.y * 16, point.x * 16);
        }
};

SDTD_CRS = L.extend({}, L.CRS.Simple, {
        projection: SDTD_Projection,
        transformation: new L.Transformation(1, 0, -1, 0),

        scale: function (zoom) {
                return Math.pow(2, zoom);
        }
});

var CoordToChunk = function(latlng) {
        var x = Math.floor(((latlng.lng + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
        var y = Math.floor(((latlng.lat + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
        return L.latLng(y, x);
}

var CoordToRegion = function(latlng) {
        var x = Math.floor(((latlng.lng + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
        var y = Math.floor(((latlng.lat + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
        return L.latLng(y, x);
}

var FormatCoord = function(latlng) {
        return Math.abs(latlng.lat)+ (latlng.lat>=0 ? " N" : " S") + " / " + Math.abs(latlng.lng) + (latlng.lng>=0 ? " E" : " W");
}

var FormatRegionFileName = function(latlng) {
        return "r." + latlng.lng + "." + latlng.lat + ".7rg";
}

var map = L.map('map', {
        zoomControl: true,
        attributionControl: false,
        crs: SDTD_CRS
}).setView([0, 0], 0);

var tileLayer = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
        maxZoom: MAXZOOM+1,
        minZoom: 0,
        maxNativeZoom: MAXZOOM,
        tileSize: TILESIZE,
        continuousWorld: true,
        tms: true,
        unloadInvisibleTiles: true,
        time: function() { return new Date().getTime(); }
});

var regionLayer = L.tileLayer.canvas({
        maxZoom: MAXZOOM+1,
        minZoom: 0,
        maxNativeZoom: MAXZOOM+1,
        tileSize: TILESIZE,
        continuousWorld: true
});

regionLayer.drawTile = function(canvas, tilePoint, zoom) {
        var blockWorldSize = TILESIZE * Math.pow(2, MAXZOOM-zoom);
        var tileLeft = tilePoint.x * blockWorldSize;
        var tileBottom = (-1-tilePoint.y) * blockWorldSize;
        var blockPos = L.latLng(tileBottom, tileLeft);
        
        var ctx = canvas.getContext('2d');
        
        ctx.strokeStyle = "lightblue";
        ctx.fillStyle = "lightblue";
        ctx.lineWidth = 1;
        ctx.font="14px Arial";
        
        var lineCount = blockWorldSize / REGIONSIZE;
        if (lineCount >= 1) {
                var pos = 0;
                while (pos < TILESIZE) {
                        // Vertical
                        ctx.beginPath();
                        ctx.moveTo(pos, 0);
                        ctx.lineTo(pos, TILESIZE);
                        ctx.stroke();
                        
                        // Horizontal
                        ctx.beginPath();
                        ctx.moveTo(0, pos);
                        ctx.lineTo(TILESIZE, pos);
                        ctx.stroke();

                        pos += TILESIZE / lineCount;
                }
                ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
        } else {
                if ((tileLeft % REGIONSIZE) == 0) {
                        // Vertical
                        ctx.beginPath();
                        ctx.moveTo(0, 0);
                        ctx.lineTo(0, TILESIZE);
                        ctx.stroke();
                }
                if ((tileBottom % REGIONSIZE) == 0) {
                        // Horizontal
                        ctx.beginPath();
                        ctx.moveTo(0, TILESIZE);
                        ctx.lineTo(TILESIZE, TILESIZE);
                        ctx.stroke();
                }
                if ((tileLeft % REGIONSIZE) == 0 && (tileBottom % REGIONSIZE) == 0) {
                        ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
                }
        }

        var pos = tileLeft;

}

var playersOnlineMarkerGroup = L.layerGroup();
var playersOfflineMarkerGroup = L.layerGroup();

var baseLayers = {
    //"Map": tileLayer
};

var overlays = {
    "Region files": regionLayer,
    "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup,
    "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup
};

tileLayer.addTo(map);
L.control.layers(baseLayers, overlays, {
        collapsed: false
}).addTo(map);

map.on('mousemove', function(e) {
        L.DomUtil.get('pos').textContent = FormatCoord(e.latlng);
});

var playersMappingList = {};

var showInv = function(steamid) {
        $.getJSON( "../api/getplayerinventory", { steamid: steamid  })
        .done(function(data) {
                $("#invPlayerName").text(playersMappingList[steamid].name);
                for (var y = 0; y < BAG_ROWS; y++) {
                        for (var x = 0; x < BAG_COLS; x++) {
                                if (data.bag[y*BAG_COLS+x].count > 0) {
                                        $("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);");
                                        $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
                                } else {
                                        $("#bagField"+x+"_"+y).attr("style", "background-image: none;");
                                        $("#bagFieldText"+x+"_"+y).text("");
                                }
                        }
                }

                for (var x = 0; x < BELT_COLS; x++) {
                        if (data.belt[x].count > 0) {
                                $("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);");
                                $("#beltFieldText"+x).text(data.belt[x].count);
                        } else {
                                $("#beltField"+x).attr("style", "background-image: none;");
                                $("#beltFieldText"+x).text("");
                        }
                }

                $( "#dialog-message" ).dialog({
                        modal: true,
                        width: BAG_COLS*INV_ITEM_WIDTH + 60,
                        buttons: {
                                Ok: function() {
                                        $( this ).dialog( "close" );
                                }
                        }
                });
        })
        .fail(function() {
                console.log("Error fetching player inventory");
        })
        .always(function() {
        });
};

for (var y = 0; y < BAG_ROWS; y++) {
        $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
        for (var x = 0; x < BAG_COLS; x++) {
                $("#bagRow"+y).append(
                        "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
                        "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
                        "</td>");
        }
}

$("#beltTable").append("<tr id=\"beltRow0\"></tr>");
for (var x = 0; x < BELT_COLS; x++) {
        $("#beltRow0").append(
                "<td class=\"invField\" id=\"beltField"+x+"\">" +
                "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
                "</td>");
}

var setPlayerMarkers = function(data) {
        var online = 0;
        var offline = 0;
        $.each( data, function( key, val ) {
                var marker;
                if (playersMappingList.hasOwnProperty(val.steamid)) {
                        marker = playersMappingList[val.steamid].currentPosMarker;
                        marker.setLatLng([val.position.z, val.position.x]);
                } else {
                        marker = L.marker([val.position.z, val.position.x]).bindPopup(
                                "Player: " + val.name + "<br/>" +
                                "<a onClick='showInv(\""+val.steamid+"\")'>Show inventory</a>" 
                        );
                        playersMappingList[val.steamid] = { online: !val.online };
                }
                if (playersMappingList[val.steamid].online != val.online) {
                        if (val.online) {
                                marker.setOpacity(1.0);
                                playersOfflineMarkerGroup.removeLayer(marker);
                                playersOnlineMarkerGroup.addLayer(marker);
                        } else {
                                marker.setOpacity(0.5);
                                playersOnlineMarkerGroup.removeLayer(marker);
                                playersOfflineMarkerGroup.addLayer(marker);
                        }
                }
                val.currentPosMarker = marker;
                playersMappingList[val.steamid] = val;
                
                if (val.online)
                        online++;
                else
                        offline++;
        });
        $( "#mapControlOnlineCount" ).text( online );
        $( "#mapControlOfflineCount" ).text( offline );
}

var updatePlayerEvent = function() {
        $.getJSON( "../api/getplayerslocation")
        .done(setPlayerMarkers)
        .fail(function() {
                console.log("Error fetching players list");
        })
        .always(function() {
                window.setTimeout(updatePlayerEvent, 2000);
        });
}

window.setTimeout(updatePlayerEvent, 500);