Changeset 186


Ignore:
Timestamp:
Sep 10, 2014, 8:09:18 PM (10 years ago)
Author:
alloc
Message:

webfiles

File:
1 edited

Legend:

Unmodified
Added
Removed
  • binary-improvements/webserver/js/index.js

    r179 r186  
    1414
    1515
    16 // ===============================================================================================
    17 // 7dtd coordinate transformations
    18 
    19 SDTD_Projection = {
    20         project: function (latlng) {
    21                 return new L.Point(latlng.lng / 16, latlng.lat / 16);
    22         },
    23 
    24         unproject: function (point) {
    25                 return new L.LatLng(point.y * 16, point.x * 16);
    26         }
    27 };
    28 
    29 SDTD_CRS = L.extend({}, L.CRS.Simple, {
    30         projection: SDTD_Projection,
    31         transformation: new L.Transformation(1, 0, -1, 0),
    32 
    33         scale: function (zoom) {
    34                 return Math.pow(2, zoom);
    35         }
     16function initMap() {
     17        // ===============================================================================================
     18        // 7dtd coordinate transformations
     19
     20        SDTD_Projection = {
     21                project: function (latlng) {
     22                        return new L.Point(
     23                                (latlng.lat) / Math.pow(2, MAXZOOM),
     24                                (latlng.lng) / Math.pow(2, MAXZOOM) );
     25                },
     26               
     27                unproject: function (point) {
     28                        return new L.LatLng(
     29                                point.x * Math.pow(2, MAXZOOM),
     30                                point.y * Math.pow(2, MAXZOOM) );
     31                }
     32        };
     33
     34        SDTD_CRS = L.extend({}, L.CRS.Simple, {
     35                projection: SDTD_Projection,
     36                transformation: new L.Transformation(1, 0, -1, 0),
     37
     38                scale: function (zoom) {
     39                        return Math.pow(2, zoom);
     40                }
     41        });
     42
     43        var CoordToChunk = function(latlng) {
     44                var x = Math.floor(((latlng.lat + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
     45                var y = Math.floor(((latlng.lng + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
     46                return L.latLng(x, y);
     47        }
     48
     49        var CoordToRegion = function(latlng) {
     50                var x = Math.floor(((latlng.lat + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
     51                var y = Math.floor(((latlng.lng + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
     52                return L.latLng(x, y);
     53        }
     54
     55        var FormatCoord = function(latlng) {
     56                return "" +
     57                        Math.abs(latlng.lng) + (latlng.lng>=0 ? " N" : " S") + " / " +
     58                        Math.abs(latlng.lat) + (latlng.lat>=0 ? " E" : " W");
     59        }
     60
     61        var FormatRegionFileName = function(latlng) {
     62                return "r." + latlng.lat + "." + latlng.lng + ".7rg";
     63        }
     64
     65
     66
     67        // ===============================================================================================
     68        // Map and basic tile layers
     69
     70        var tileTime = new Date().getTime();
     71
     72        map = L.map('map', {
     73                zoomControl: false, // Added by Zoomslider
     74                zoomsliderControl: true,
     75                attributionControl: false,
     76                crs: SDTD_CRS
     77        }).setView([0, 0], Math.max(0, MAXZOOM-5));
     78
     79        var tileLayer = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', {
     80                maxZoom:MAXZOOM+1,
     81                minZoom: Math.max(0, MAXZOOM-5),
     82                maxNativeZoom: MAXZOOM,
     83                tileSize: TILESIZE,
     84                continuousWorld: true,
     85                tms: true,
     86                unloadInvisibleTiles: false,
     87                time: function() { return tileTime; }
     88        }).addTo(map);
     89
     90        var tileLayerMiniMap = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', {
     91                maxZoom: MAXZOOM,
     92                minZoom: 0,
     93                maxNativeZoom: MAXZOOM,
     94                tileSize: TILESIZE,
     95                continuousWorld: true,
     96                tms: true,
     97                unloadInvisibleTiles: false,
     98                time: function() { return tileTime; }
     99        });
     100
     101        var regionLayer = L.tileLayer.canvas({
     102                maxZoom: MAXZOOM+1,
     103                minZoom: 0,
     104                maxNativeZoom: MAXZOOM+1,
     105                tileSize: TILESIZE,
     106                continuousWorld: true
     107        });
     108
     109        regionLayer.drawTile = function(canvas, tilePoint, zoom) {
     110                var blockWorldSize = TILESIZE * Math.pow(2, MAXZOOM-zoom);
     111                var tileLeft = tilePoint.x * blockWorldSize;
     112                var tileBottom = (-1-tilePoint.y) * blockWorldSize;
     113                var blockPos = L.latLng(tileLeft, tileBottom);
     114       
     115                var ctx = canvas.getContext('2d');
     116       
     117                ctx.strokeStyle = "lightblue";
     118                ctx.fillStyle = "lightblue";
     119                ctx.lineWidth = 1;
     120                ctx.font="14px Arial";
     121       
     122                var lineCount = blockWorldSize / REGIONSIZE;
     123                if (lineCount >= 1) {
     124                        var pos = 0;
     125                        while (pos < TILESIZE) {
     126                                // Vertical
     127                                ctx.beginPath();
     128                                ctx.moveTo(pos, 0);
     129                                ctx.lineTo(pos, TILESIZE);
     130                                ctx.stroke();
     131                       
     132                                // Horizontal
     133                                ctx.beginPath();
     134                                ctx.moveTo(0, pos);
     135                                ctx.lineTo(TILESIZE, pos);
     136                                ctx.stroke();
     137
     138                                pos += TILESIZE / lineCount;
     139                        }
     140                        ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
     141                } else {
     142                        if ((tileLeft % REGIONSIZE) == 0) {
     143                                // Vertical
     144                                ctx.beginPath();
     145                                ctx.moveTo(0, 0);
     146                                ctx.lineTo(0, TILESIZE);
     147                                ctx.stroke();
     148                        }
     149                        if ((tileBottom % REGIONSIZE) == 0) {
     150                                // Horizontal
     151                                ctx.beginPath();
     152                                ctx.moveTo(0, TILESIZE);
     153                                ctx.lineTo(TILESIZE, TILESIZE);
     154                                ctx.stroke();
     155                        }
     156                        if ((tileLeft % REGIONSIZE) == 0 && (tileBottom % REGIONSIZE) == 0) {
     157                                ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
     158                        }
     159                }
     160
     161                var pos = tileLeft;
     162
     163        }
     164
     165
     166        // ===============================================================================================
     167        // Reload control
     168
     169        L.Control.ReloadTiles = L.Control.extend({
     170                options: {
     171                        position: 'bottomleft'
     172                },
     173
     174                onAdd: function (map) {
     175                        var name = 'control-reloadtiles',
     176                            container = L.DomUtil.create('div', name + ' leaflet-bar');
     177
     178                        this._map = map;
     179
     180                        this._reloadbutton = this._createButton(
     181                                "Reload tiles", "Reload tiles",
     182                                name + "-btn", container, this._reload, this);
     183
     184                        return container;
     185                },
     186
     187                onRemove: function (map) {
     188                },
     189
     190                _reload: function (e) {
     191                        tileTime = new Date().getTime();
     192                        tileLayer.redraw();
     193                        tileLayerMiniMap.redraw();
     194                },
     195
     196                _createButton: function (html, title, className, container, fn, context) {
     197                        var link = L.DomUtil.create('a', className, container);
     198                        link.innerHTML = html;
     199                        link.href = '#';
     200                        link.title = title;
     201
     202                        var stop = L.DomEvent.stopPropagation;
     203
     204                        L.DomEvent
     205                            .on(link, 'click', stop)
     206                            .on(link, 'mousedown', stop)
     207                            .on(link, 'dblclick', stop)
     208                            .on(link, 'click', L.DomEvent.preventDefault)
     209                            .on(link, 'click', fn, context)
     210                            .on(link, 'click', this._refocusOnMap, context);
     211
     212                        return link;
     213                }
     214
     215        });
     216
     217        new L.Control.ReloadTiles({
     218        }).addTo(map);
     219
     220
     221        // ===============================================================================================
     222        // Coordinates control
     223        //      <div id="info">
     224        //              MouseCoords: <span id="pos"></span>
     225        //      </div>
     226
     227        L.Control.Coordinates = L.Control.extend({
     228                options: {
     229                        position: 'bottomleft'
     230                },
     231
     232                onAdd: function (map) {
     233                        var name = 'control-coordinates',
     234                            container = L.DomUtil.create('div', name + ' leaflet-bar');
     235               
     236                        container.innerHTML = "- N / - E"
     237
     238                        this._map = map;
     239                        this._div = container;
     240
     241                        map.on('mousemove', this._onMouseMove, this);
     242
     243                        return container;
     244                },
     245
     246                onRemove: function (map) {
     247                },
     248       
     249                _onMouseMove: function (e) {
     250                        this._div.innerHTML = FormatCoord(e.latlng);
     251                }
     252
     253
     254        });
     255
     256        new L.Control.Coordinates({
     257        }).addTo(map);
     258
     259
     260
     261
     262        // ===============================================================================================
     263        // Overlays and controls
     264
     265        var playersOnlineMarkerGroup = L.layerGroup();
     266        var playersOfflineMarkerGroup = L.markerClusterGroup({
     267                maxClusterRadius: function(zoom) { return zoom == MAXZOOM ? 10 : 50; }
     268        });
     269
     270
     271        var landClaimsGroup = L.layerGroup();
     272        var landClaimsClusterGroup = L.markerClusterGroup({
     273                disableClusteringAtZoom: MAXZOOM,
     274                singleMarkerMode: true,
     275                maxClusterRadius: 50
     276        });
     277        var landClaimsRectGroup = L.layerGroup();
     278        landClaimsGroup.addLayer(landClaimsClusterGroup);
     279        landClaimsGroup.addLayer(landClaimsRectGroup);
     280        var maxZoomForCluster = 4;
     281
     282        var baseLayers = {
     283                //"Map": tileLayer
     284        };
     285
     286        var overlays = {
     287                "Land claims" : landClaimsGroup,
     288                "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup,
     289                "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup,
     290                "Region files": regionLayer,
     291        };
     292
     293       
     294        L.control.layers(baseLayers, overlays, {
     295                collapsed: false
     296        }).addTo(map);
     297
     298        //map.on('mousemove', function(e) {
     299        //      L.DomUtil.get('pos').textContent = FormatCoord(e.latlng);
     300        //});
     301
     302        var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
     303                zoomLevelOffset: -6,
     304                toggleDisplay: true
     305        }).addTo(map);
     306
     307
     308        var playersMappingList = {};
     309
     310
     311
     312        // ===============================================================================================
     313        // Inventory dialog
     314
     315        var showInv = function(steamid) {
     316                $.getJSON( "../api/getplayerinventory", { steamid: steamid  })
     317                .done(function(data) {
     318                        $("#invPlayerName").text(playersMappingList[steamid].name);
     319                        for (var y = 0; y < BAG_ROWS; y++) {
     320                                for (var x = 0; x < BAG_COLS; x++) {
     321                                        if (data.bag[y*BAG_COLS+x].count > 0) {
     322                                                $("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);");
     323                                                $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
     324                                        } else {
     325                                                $("#bagField"+x+"_"+y).attr("style", "background-image: none;");
     326                                                $("#bagFieldText"+x+"_"+y).text("");
     327                                        }
     328                                }
     329                        }
     330
     331                        for (var x = 0; x < BELT_COLS; x++) {
     332                                if (data.belt[x].count > 0) {
     333                                        $("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);");
     334                                        $("#beltFieldText"+x).text(data.belt[x].count);
     335                                } else {
     336                                        $("#beltField"+x).attr("style", "background-image: none;");
     337                                        $("#beltFieldText"+x).text("");
     338                                }
     339                        }
     340
     341                        $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({
     342                                modal: true,
     343                                width: BAG_COLS*(INV_ITEM_WIDTH+14) + 20,
     344                                buttons: {
     345                                        Ok: function() {
     346                                                $( this ).dialog( "close" );
     347                                        }
     348                                }
     349                        });
     350                })
     351                .fail(function(jqxhr, textStatus, error) {
     352                        console.log("Error fetching player inventory");
     353                })
     354                .always(function() {
     355                });
     356        };
     357
     358        for (var y = 0; y < BAG_ROWS; y++) {
     359                $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
     360                for (var x = 0; x < BAG_COLS; x++) {
     361                        $("#bagRow"+y).append(
     362                                "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
     363                                "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
     364                                "</td>");
     365                }
     366        }
     367
     368        $("#beltTable").append("<tr id=\"beltRow0\"></tr>");
     369        for (var x = 0; x < BELT_COLS; x++) {
     370                $("#beltRow0").append(
     371                        "<td class=\"invField\" id=\"beltField"+x+"\">" +
     372                        "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
     373                        "</td>");
     374        }
     375
     376
     377
     378        // ===============================================================================================
     379        // Player markers
     380
     381        $(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
     382                showInv($(this).data('steamid'));
     383        });
     384
     385        var setPlayerMarkers = function(data) {
     386                var online = 0;
     387                var offline = 0;
     388                $.each( data, function( key, val ) {
     389                        var marker;
     390                        if (playersMappingList.hasOwnProperty(val.steamid)) {
     391                                marker = playersMappingList[val.steamid].currentPosMarker;
     392                                marker.setLatLng([val.position.x, val.position.z]);
     393                        } else {
     394                                marker = L.marker([val.position.x, val.position.z]).bindPopup(
     395                                        "Player: " + val.name + "<br/>" +
     396                                        "<a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
     397                                );
     398                                playersMappingList[val.steamid] = { online: !val.online };
     399                        }
     400                        if (playersMappingList[val.steamid].online != val.online) {
     401                                if (val.online) {
     402                                        marker.setOpacity(1.0);
     403                                        playersOfflineMarkerGroup.removeLayer(marker);
     404                                        playersOnlineMarkerGroup.addLayer(marker);
     405                                } else {
     406                                        marker.setOpacity(0.5);
     407                                        playersOnlineMarkerGroup.removeLayer(marker);
     408                                        playersOfflineMarkerGroup.addLayer(marker);
     409                                }
     410                        }
     411                        val.currentPosMarker = marker;
     412                        playersMappingList[val.steamid] = val;
     413               
     414                        if (val.online)
     415                                online++;
     416                        else
     417                                offline++;
     418                });
     419                $( "#mapControlOnlineCount" ).text( online );
     420                $( "#mapControlOfflineCount" ).text( offline );
     421        }
     422
     423        var updatePlayerEvent = function() {
     424                $.getJSON( "../api/getplayerslocation")
     425                .done(setPlayerMarkers)
     426                .fail(function(jqxhr, textStatus, error) {
     427                        console.log("Error fetching players list");
     428                })
     429                .always(function() {
     430                        window.setTimeout(updatePlayerEvent, 2000);
     431                });
     432        }
     433
     434        window.setTimeout(updatePlayerEvent, 500);
     435
     436
     437
     438        // ===============================================================================================
     439        // Land claim markers
     440
     441        var setLandClaims = function(data) {
     442                landClaimsClusterGroup.clearLayers();
     443                landClaimsRectGroup.clearLayers();
     444       
     445                var claimPower = Math.floor(Math.log(data.claimsize) / Math.LN2);
     446                var maxClusterZoomUnlimited = MAXZOOM - (claimPower - 3);
     447                var maxClusterZoomLimitedMax = Math.min(maxClusterZoomUnlimited, MAXZOOM+1);
     448                maxZoomForCluster = Math.max(maxClusterZoomLimitedMax, 0);
     449       
     450                checkClaimClustering({target: map});
     451
     452                var sizeHalf = Math.floor(data.claimsize / 2);
     453
     454                $.each( data.claimowners, function( key, val ) {
     455                        var steamid = val.steamid;
     456                        var active = val.claimactive;
     457                        var color = active ? "#55ff55" : "#ff0000";
     458               
     459                        $.each( val.claims, function( key, val ) {
     460                                var pos = L.latLng(val.x, val.z);
     461                                var bounds = L.latLngBounds(L.latLng(val.x - sizeHalf, val.z - sizeHalf), L.latLng(val.x + sizeHalf, val.z + sizeHalf));
     462                                var r = L.rectangle(bounds, {color: color, weight: 1, opacity: 0.8, fillOpacity: 0.15});
     463                                var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) });
     464                                if (playersMappingList.hasOwnProperty(steamid)) {
     465                                        r.bindPopup("Owner: " + playersMappingList[steamid].name);
     466                                } else {
     467                                        r.bindPopup("Owner: unknown ("+steamid+")");
     468                                }
     469                                landClaimsRectGroup.addLayer(r);
     470                                landClaimsClusterGroup.addLayer(m);
     471                        });
     472                });
     473        }
     474
     475        var updateClaimsEvent = function() {
     476                $.getJSON( "../api/getlandclaims")
     477                .done(setLandClaims)
     478                .fail(function(jqxhr, textStatus, error) {
     479                        console.log("Error fetching land claim list");
     480                })
     481                .always(function() {
     482                        //updateClaimTimer = window.setTimeout(updateClaimsEvent, 3000);
     483                });
     484        }
     485
     486
     487
     488        // ===============================================================================================
     489        // Layer events
     490
     491        var updateClaimTimer;
     492        map.on('overlayadd', function(e) {
     493                if (e.layer == landClaimsGroup) {
     494                        updateClaimsEvent();
     495                }
     496        });
     497
     498        map.on('overlayremove', function(e) {
     499                if (e.layer == landClaimsGroup) {
     500                        //window.clearTimeout(updateClaimTimer);
     501                }
     502        });
     503
     504        var checkClaimClustering = function(e) {
     505                if (e.target._zoom >= maxZoomForCluster) {
     506                        landClaimsGroup.removeLayer(landClaimsClusterGroup);   
     507                } else {
     508                        landClaimsGroup.addLayer(landClaimsClusterGroup);       
     509                }
     510        };
     511
     512        map.on('zoomend', checkClaimClustering);
     513
     514}
     515
     516
     517
     518$.getJSON( "../map/mapinfo.json")
     519.done(function(data) {
     520        TILESIZE = data.blockSize;
     521        MAXZOOM = data.maxZoom;
     522        initMap();
     523})
     524.fail(function(jqxhr, textStatus, error) {
     525        console.log("Error fetching map information");
     526})
     527.always(function() {
     528        //updateClaimTimer = window.setTimeout(updateClaimsEvent, 3000);
    36529});
    37530
    38 var CoordToChunk = function(latlng) {
    39         var x = Math.floor(((latlng.lng + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
    40         var y = Math.floor(((latlng.lat + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
    41         return L.latLng(y, x);
    42 }
    43 
    44 var CoordToRegion = function(latlng) {
    45         var x = Math.floor(((latlng.lng + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
    46         var y = Math.floor(((latlng.lat + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
    47         return L.latLng(y, x);
    48 }
    49 
    50 var FormatCoord = function(latlng) {
    51         return Math.abs(latlng.lat)+ (latlng.lat>=0 ? " N" : " S") + " / " + Math.abs(latlng.lng) + (latlng.lng>=0 ? " E" : " W");
    52 }
    53 
    54 var FormatRegionFileName = function(latlng) {
    55         return "r." + latlng.lng + "." + latlng.lat + ".7rg";
    56 }
    57 
    58 
    59 
    60 // ===============================================================================================
    61 // Map and basic tile layers
    62 
    63 var tileTime = new Date().getTime();
    64 
    65 var map = L.map('map', {
    66         zoomControl: false, // Added by Zoomslider
    67         zoomsliderControl: true,
    68         attributionControl: false,
    69         crs: SDTD_CRS
    70 }).setView([0, 0], 0);
    71 
    72 var tileLayer = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
    73         maxZoom: MAXZOOM+1,
    74         minZoom: 0,
    75         maxNativeZoom: MAXZOOM,
    76         tileSize: TILESIZE,
    77         continuousWorld: true,
    78         tms: true,
    79         unloadInvisibleTiles: false,
    80         time: function() { return tileTime; }
    81 });
    82 
    83 var tileLayerMiniMap = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
    84         maxZoom: MAXZOOM,
    85         minZoom: 0,
    86         maxNativeZoom: MAXZOOM,
    87         tileSize: TILESIZE,
    88         continuousWorld: true,
    89         tms: true,
    90         unloadInvisibleTiles: false,
    91         time: function() { return tileTime; }
    92 });
    93 
    94 var regionLayer = L.tileLayer.canvas({
    95         maxZoom: MAXZOOM+1,
    96         minZoom: 0,
    97         maxNativeZoom: MAXZOOM+1,
    98         tileSize: TILESIZE,
    99         continuousWorld: true
    100 });
    101 
    102 regionLayer.drawTile = function(canvas, tilePoint, zoom) {
    103         var blockWorldSize = TILESIZE * Math.pow(2, MAXZOOM-zoom);
    104         var tileLeft = tilePoint.x * blockWorldSize;
    105         var tileBottom = (-1-tilePoint.y) * blockWorldSize;
    106         var blockPos = L.latLng(tileBottom, tileLeft);
    107        
    108         var ctx = canvas.getContext('2d');
    109        
    110         ctx.strokeStyle = "lightblue";
    111         ctx.fillStyle = "lightblue";
    112         ctx.lineWidth = 1;
    113         ctx.font="14px Arial";
    114        
    115         var lineCount = blockWorldSize / REGIONSIZE;
    116         if (lineCount >= 1) {
    117                 var pos = 0;
    118                 while (pos < TILESIZE) {
    119                         // Vertical
    120                         ctx.beginPath();
    121                         ctx.moveTo(pos, 0);
    122                         ctx.lineTo(pos, TILESIZE);
    123                         ctx.stroke();
    124                        
    125                         // Horizontal
    126                         ctx.beginPath();
    127                         ctx.moveTo(0, pos);
    128                         ctx.lineTo(TILESIZE, pos);
    129                         ctx.stroke();
    130 
    131                         pos += TILESIZE / lineCount;
    132                 }
    133                 ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
    134         } else {
    135                 if ((tileLeft % REGIONSIZE) == 0) {
    136                         // Vertical
    137                         ctx.beginPath();
    138                         ctx.moveTo(0, 0);
    139                         ctx.lineTo(0, TILESIZE);
    140                         ctx.stroke();
    141                 }
    142                 if ((tileBottom % REGIONSIZE) == 0) {
    143                         // Horizontal
    144                         ctx.beginPath();
    145                         ctx.moveTo(0, TILESIZE);
    146                         ctx.lineTo(TILESIZE, TILESIZE);
    147                         ctx.stroke();
    148                 }
    149                 if ((tileLeft % REGIONSIZE) == 0 && (tileBottom % REGIONSIZE) == 0) {
    150                         ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
    151                 }
    152         }
    153 
    154         var pos = tileLeft;
    155 
    156 }
    157 
    158 
    159 
    160 // ===============================================================================================
    161 // Reload control
    162 
    163 L.Control.ReloadTiles = L.Control.extend({
    164         options: {
    165                 position: 'bottomleft'
    166         },
    167 
    168         onAdd: function (map) {
    169                 var name = 'control-reloadtiles',
    170                     container = L.DomUtil.create('div', name + ' leaflet-bar');
    171 
    172                 this._map = map;
    173 
    174                 this._reloadbutton = this._createButton(
    175                         "Reload tiles", "Reload tiles",
    176                         name + "-btn", container, this._reload, this);
    177 
    178                 return container;
    179         },
    180 
    181         onRemove: function (map) {
    182         },
    183 
    184         _reload: function (e) {
    185                 tileTime = new Date().getTime();
    186                 tileLayer.redraw();
    187                 tileLayerMiniMap.redraw();
    188         },
    189 
    190         _createButton: function (html, title, className, container, fn, context) {
    191                 var link = L.DomUtil.create('a', className, container);
    192                 link.innerHTML = html;
    193                 link.href = '#';
    194                 link.title = title;
    195 
    196                 var stop = L.DomEvent.stopPropagation;
    197 
    198                 L.DomEvent
    199                     .on(link, 'click', stop)
    200                     .on(link, 'mousedown', stop)
    201                     .on(link, 'dblclick', stop)
    202                     .on(link, 'click', L.DomEvent.preventDefault)
    203                     .on(link, 'click', fn, context)
    204                     .on(link, 'click', this._refocusOnMap, context);
    205 
    206                 return link;
    207         }
    208 
    209 });
    210 
    211 new L.Control.ReloadTiles({
    212 }).addTo(map);
    213 
    214 
    215 // ===============================================================================================
    216 // Coordinates control
    217 //      <div id="info">
    218 //              MouseCoords: <span id="pos"></span>
    219 //      </div>
    220 
    221 L.Control.Coordinates = L.Control.extend({
    222         options: {
    223                 position: 'bottomleft'
    224         },
    225 
    226         onAdd: function (map) {
    227                 var name = 'control-coordinates',
    228                     container = L.DomUtil.create('div', name + ' leaflet-bar');
    229                
    230                 container.innerHTML = "- N / - E"
    231 
    232                 this._map = map;
    233                 this._div = container;
    234 
    235                 map.on('mousemove', this._onMouseMove, this);
    236 
    237                 return container;
    238         },
    239 
    240         onRemove: function (map) {
    241         },
    242        
    243         _onMouseMove: function (e) {
    244                 this._div.innerHTML = FormatCoord(e.latlng);
    245         }
    246 
    247 
    248 });
    249 
    250 new L.Control.Coordinates({
    251 }).addTo(map);
    252 
    253 
    254 
    255 // ===============================================================================================
    256 // Overlays and controls
    257 
    258 var playersOnlineMarkerGroup = L.layerGroup();
    259 var playersOfflineMarkerGroup = L.markerClusterGroup({
    260         maxClusterRadius: function(zoom) { return zoom == MAXZOOM ? 10 : 50; }
    261 });
    262 var landClaimsGroup = L.markerClusterGroup({
    263         disableClusteringAtZoom: MAXZOOM,
    264         maxClusterRadius: 50
    265 });
    266 
    267 var baseLayers = {
    268         //"Map": tileLayer
    269 };
    270 
    271 var overlays = {
    272         "Land claims" : landClaimsGroup,
    273         "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup,
    274         "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup,
    275         "Region files": regionLayer,
    276 };
    277 
    278 tileLayer.addTo(map);
    279 L.control.layers(baseLayers, overlays, {
    280         collapsed: false
    281 }).addTo(map);
    282 
    283 //map.on('mousemove', function(e) {
    284 //      L.DomUtil.get('pos').textContent = FormatCoord(e.latlng);
    285 //});
    286 
    287 var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
    288         toggleDisplay: true
    289 }).addTo(map);
    290 
    291 
    292 var playersMappingList = {};
    293 
    294 
    295 
    296 // ===============================================================================================
    297 // Inventory dialog
    298 
    299 var showInv = function(steamid) {
    300         $.getJSON( "../api/getplayerinventory", { steamid: steamid  })
    301         .done(function(data) {
    302                 $("#invPlayerName").text(playersMappingList[steamid].name);
    303                 for (var y = 0; y < BAG_ROWS; y++) {
    304                         for (var x = 0; x < BAG_COLS; x++) {
    305                                 if (data.bag[y*BAG_COLS+x].count > 0) {
    306                                         $("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);");
    307                                         $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
    308                                 } else {
    309                                         $("#bagField"+x+"_"+y).attr("style", "background-image: none;");
    310                                         $("#bagFieldText"+x+"_"+y).text("");
    311                                 }
    312                         }
    313                 }
    314 
    315                 for (var x = 0; x < BELT_COLS; x++) {
    316                         if (data.belt[x].count > 0) {
    317                                 $("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);");
    318                                 $("#beltFieldText"+x).text(data.belt[x].count);
    319                         } else {
    320                                 $("#beltField"+x).attr("style", "background-image: none;");
    321                                 $("#beltFieldText"+x).text("");
    322                         }
    323                 }
    324 
    325                 $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({
    326                         modal: true,
    327                         width: BAG_COLS*(INV_ITEM_WIDTH+14) + 20,
    328                         buttons: {
    329                                 Ok: function() {
    330                                         $( this ).dialog( "close" );
    331                                 }
    332                         }
    333                 });
    334         })
    335         .fail(function(jqxhr, textStatus, error) {
    336                 console.log("Error fetching player inventory");
    337         })
    338         .always(function() {
    339         });
    340 };
    341 
    342 for (var y = 0; y < BAG_ROWS; y++) {
    343         $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
    344         for (var x = 0; x < BAG_COLS; x++) {
    345                 $("#bagRow"+y).append(
    346                         "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
    347                         "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
    348                         "</td>");
    349         }
    350 }
    351 
    352 $("#beltTable").append("<tr id=\"beltRow0\"></tr>");
    353 for (var x = 0; x < BELT_COLS; x++) {
    354         $("#beltRow0").append(
    355                 "<td class=\"invField\" id=\"beltField"+x+"\">" +
    356                 "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
    357                 "</td>");
    358 }
    359 
    360 
    361 
    362 // ===============================================================================================
    363 // Player markers
    364 
    365 $(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
    366         showInv($(this).data('steamid'));
    367 });
    368 
    369 var setPlayerMarkers = function(data) {
    370         var online = 0;
    371         var offline = 0;
    372         $.each( data, function( key, val ) {
    373                 var marker;
    374                 if (playersMappingList.hasOwnProperty(val.steamid)) {
    375                         marker = playersMappingList[val.steamid].currentPosMarker;
    376                         marker.setLatLng([val.position.z, val.position.x]);
    377                 } else {
    378                         marker = L.marker([val.position.z, val.position.x]).bindPopup(
    379                                 "Player: " + val.name + "<br/>" +
    380                                 "<a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
    381                         );
    382                         playersMappingList[val.steamid] = { online: !val.online };
    383                 }
    384                 if (playersMappingList[val.steamid].online != val.online) {
    385                         if (val.online) {
    386                                 marker.setOpacity(1.0);
    387                                 playersOfflineMarkerGroup.removeLayer(marker);
    388                                 playersOnlineMarkerGroup.addLayer(marker);
    389                         } else {
    390                                 marker.setOpacity(0.5);
    391                                 playersOnlineMarkerGroup.removeLayer(marker);
    392                                 playersOfflineMarkerGroup.addLayer(marker);
    393                         }
    394                 }
    395                 val.currentPosMarker = marker;
    396                 playersMappingList[val.steamid] = val;
    397                
    398                 if (val.online)
    399                         online++;
    400                 else
    401                         offline++;
    402         });
    403         $( "#mapControlOnlineCount" ).text( online );
    404         $( "#mapControlOfflineCount" ).text( offline );
    405 }
    406 
    407 var updatePlayerEvent = function() {
    408         $.getJSON( "../api/getplayerslocation")
    409         .done(setPlayerMarkers)
    410         .fail(function(jqxhr, textStatus, error) {
    411                 console.log("Error fetching players list");
    412         })
    413         .always(function() {
    414                 window.setTimeout(updatePlayerEvent, 2000);
    415         });
    416 }
    417 
    418 window.setTimeout(updatePlayerEvent, 500);
    419 
    420 
    421 
    422 // ===============================================================================================
    423 // Land claim markers
    424 
    425 var setLandClaims = function(data) {
    426         landClaimsGroup.clearLayers();
    427         var sizeHalf = Math.floor(data.claimsize / 2);
    428 
    429         $.each( data.claimowners, function( key, val ) {
    430                 var steamid = val.steamid;
    431                 var active = val.claimactive;
    432                 var color = active ? "#00ff00" : "#ff0000";
    433                
    434                 $.each( val.claims, function( key, val ) {
    435                         var pos = L.latLng(val.z, val.x);
    436                         var bounds = L.latLngBounds(L.latLng(val.z - sizeHalf, val.x - sizeHalf), L.latLng(val.z + sizeHalf, val.x + sizeHalf));
    437                         var r = L.rectangle(bounds, {color: color, weight: 1});
    438                         var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) });
    439                         if (playersMappingList.hasOwnProperty(steamid)) {
    440                                 r.bindPopup("Owner: " + playersMappingList[steamid].name);
    441                         } else {
    442                                 r.bindPopup("Owner: unknown ("+steamid+")");
    443                         }
    444                         landClaimsGroup.addLayer(r);
    445                         landClaimsGroup.addLayer(m);
    446                 });
    447         });
    448 }
    449 
    450 var updateClaimsEvent = function() {
    451         $.getJSON( "../api/getlandclaims")
    452         .done(setLandClaims)
    453         .fail(function(jqxhr, textStatus, error) {
    454                 console.log("Error fetching land claim list");
    455         })
    456         .always(function() {
    457                 //updateClaimTimer = window.setTimeout(updateClaimsEvent, 3000);
    458         });
    459 }
    460 
    461 
    462 
    463 // ===============================================================================================
    464 // Layer events
    465 
    466 var updateClaimTimer;
    467 map.on('overlayadd', function(e) {
    468         if (e.layer == landClaimsGroup) {
    469                 updateClaimsEvent();
    470         }
    471 });
    472 
    473 map.on('overlayremove', function(e) {
    474         if (e.layer == landClaimsGroup) {
    475                 //window.clearTimeout(updateClaimTimer);
    476         }
    477 });
    478 
    479 
Note: See TracChangeset for help on using the changeset viewer.