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

Last change on this file since 174 was 173, checked in by alloc, 10 years ago

LandClaims on webmap
  • Property svn:executable set to *
File size: 9.6 KB
Line 
1// ===============================================================================================
2// Constants
3
4var REGIONSIZE = 512;
5var CHUNKSIZE = 16;
6var TILESIZE = 128;
7var MAXZOOM = 4;
8
9var BAG_COLS = 8;
10var BAG_ROWS = 4;
11var BELT_COLS = 8;
12var INV_ITEM_WIDTH = 58;
13var INV_ITEM_HEIGHT = 40;
14
15
16// ===============================================================================================
17// 7dtd coordinate transformations
18
19SDTD_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
29SDTD_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 }
36});
37
38var 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
44var 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
50var 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
54var FormatRegionFileName = function(latlng) {
55 return "r." + latlng.lng + "." + latlng.lat + ".7rg";
56}
57
58
59
60// ===============================================================================================
61// Map and basic tile layers
62
63var map = L.map('map', {
64 zoomControl: false, // Added by Zoomslider
65 zoomsliderControl: true,
66 attributionControl: false,
67 crs: SDTD_CRS
68}).setView([0, 0], 0);
69
70var tileLayer = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
71 maxZoom: MAXZOOM+1,
72 minZoom: 0,
73 maxNativeZoom: MAXZOOM,
74 tileSize: TILESIZE,
75 continuousWorld: true,
76 tms: true,
77 unloadInvisibleTiles: true,
78 time: function() { return new Date().getTime(); }
79});
80
81var tileLayerMiniMap = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
82 maxZoom: MAXZOOM,
83 minZoom: 0,
84 maxNativeZoom: MAXZOOM,
85 tileSize: TILESIZE,
86 continuousWorld: true,
87 tms: true,
88 unloadInvisibleTiles: true,
89 time: function() { return new Date().getTime(); }
90});
91
92var regionLayer = L.tileLayer.canvas({
93 maxZoom: MAXZOOM+1,
94 minZoom: 0,
95 maxNativeZoom: MAXZOOM+1,
96 tileSize: TILESIZE,
97 continuousWorld: true
98});
99
100regionLayer.drawTile = function(canvas, tilePoint, zoom) {
101 var blockWorldSize = TILESIZE * Math.pow(2, MAXZOOM-zoom);
102 var tileLeft = tilePoint.x * blockWorldSize;
103 var tileBottom = (-1-tilePoint.y) * blockWorldSize;
104 var blockPos = L.latLng(tileBottom, tileLeft);
105
106 var ctx = canvas.getContext('2d');
107
108 ctx.strokeStyle = "lightblue";
109 ctx.fillStyle = "lightblue";
110 ctx.lineWidth = 1;
111 ctx.font="14px Arial";
112
113 var lineCount = blockWorldSize / REGIONSIZE;
114 if (lineCount >= 1) {
115 var pos = 0;
116 while (pos < TILESIZE) {
117 // Vertical
118 ctx.beginPath();
119 ctx.moveTo(pos, 0);
120 ctx.lineTo(pos, TILESIZE);
121 ctx.stroke();
122
123 // Horizontal
124 ctx.beginPath();
125 ctx.moveTo(0, pos);
126 ctx.lineTo(TILESIZE, pos);
127 ctx.stroke();
128
129 pos += TILESIZE / lineCount;
130 }
131 ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
132 } else {
133 if ((tileLeft % REGIONSIZE) == 0) {
134 // Vertical
135 ctx.beginPath();
136 ctx.moveTo(0, 0);
137 ctx.lineTo(0, TILESIZE);
138 ctx.stroke();
139 }
140 if ((tileBottom % REGIONSIZE) == 0) {
141 // Horizontal
142 ctx.beginPath();
143 ctx.moveTo(0, TILESIZE);
144 ctx.lineTo(TILESIZE, TILESIZE);
145 ctx.stroke();
146 }
147 if ((tileLeft % REGIONSIZE) == 0 && (tileBottom % REGIONSIZE) == 0) {
148 ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
149 }
150 }
151
152 var pos = tileLeft;
153
154}
155
156
157// ===============================================================================================
158// Overlays
159
160var playersOnlineMarkerGroup = L.layerGroup();
161var playersOfflineMarkerGroup = L.markerClusterGroup();
162var landClaimsGroup = L.markerClusterGroup({
163 disableClusteringAtZoom: MAXZOOM,
164 maxClusterRadius: 50
165});
166
167var baseLayers = {
168 //"Map": tileLayer
169};
170
171var overlays = {
172 "Land claims" : landClaimsGroup,
173 "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup,
174 "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup,
175 "Region files": regionLayer,
176};
177
178tileLayer.addTo(map);
179L.control.layers(baseLayers, overlays, {
180 collapsed: false
181}).addTo(map);
182
183map.on('mousemove', function(e) {
184 L.DomUtil.get('pos').textContent = FormatCoord(e.latlng);
185});
186
187var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
188 toggleDisplay: true
189}).addTo(map);
190
191
192
193var playersMappingList = {};
194
195
196
197// ===============================================================================================
198// Inventory dialog
199
200var showInv = function(steamid) {
201 $.getJSON( "../api/getplayerinventory", { steamid: steamid })
202 .done(function(data) {
203 $("#invPlayerName").text(playersMappingList[steamid].name);
204 for (var y = 0; y < BAG_ROWS; y++) {
205 for (var x = 0; x < BAG_COLS; x++) {
206 if (data.bag[y*BAG_COLS+x].count > 0) {
207 $("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);");
208 $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
209 } else {
210 $("#bagField"+x+"_"+y).attr("style", "background-image: none;");
211 $("#bagFieldText"+x+"_"+y).text("");
212 }
213 }
214 }
215
216 for (var x = 0; x < BELT_COLS; x++) {
217 if (data.belt[x].count > 0) {
218 $("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);");
219 $("#beltFieldText"+x).text(data.belt[x].count);
220 } else {
221 $("#beltField"+x).attr("style", "background-image: none;");
222 $("#beltFieldText"+x).text("");
223 }
224 }
225
226 $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({
227 modal: true,
228 width: BAG_COLS*(INV_ITEM_WIDTH+14) + 20,
229 buttons: {
230 Ok: function() {
231 $( this ).dialog( "close" );
232 }
233 }
234 });
235 })
236 .fail(function(jqxhr, textStatus, error) {
237 console.log("Error fetching player inventory");
238 })
239 .always(function() {
240 });
241};
242
243for (var y = 0; y < BAG_ROWS; y++) {
244 $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
245 for (var x = 0; x < BAG_COLS; x++) {
246 $("#bagRow"+y).append(
247 "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
248 "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
249 "</td>");
250 }
251}
252
253$("#beltTable").append("<tr id=\"beltRow0\"></tr>");
254for (var x = 0; x < BELT_COLS; x++) {
255 $("#beltRow0").append(
256 "<td class=\"invField\" id=\"beltField"+x+"\">" +
257 "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
258 "</td>");
259}
260
261
262
263// ===============================================================================================
264// Player markers
265
266$(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
267 showInv($(this).data('steamid'));
268});
269
270var setPlayerMarkers = function(data) {
271 var online = 0;
272 var offline = 0;
273 $.each( data, function( key, val ) {
274 var marker;
275 if (playersMappingList.hasOwnProperty(val.steamid)) {
276 marker = playersMappingList[val.steamid].currentPosMarker;
277 marker.setLatLng([val.position.z, val.position.x]);
278 } else {
279 marker = L.marker([val.position.z, val.position.x]).bindPopup(
280 "Player: " + val.name + "<br/>" +
281 "<a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
282 );
283 playersMappingList[val.steamid] = { online: !val.online };
284 }
285 if (playersMappingList[val.steamid].online != val.online) {
286 if (val.online) {
287 marker.setOpacity(1.0);
288 playersOfflineMarkerGroup.removeLayer(marker);
289 playersOnlineMarkerGroup.addLayer(marker);
290 } else {
291 marker.setOpacity(0.5);
292 playersOnlineMarkerGroup.removeLayer(marker);
293 playersOfflineMarkerGroup.addLayer(marker);
294 }
295 }
296 val.currentPosMarker = marker;
297 playersMappingList[val.steamid] = val;
298
299 if (val.online)
300 online++;
301 else
302 offline++;
303 });
304 $( "#mapControlOnlineCount" ).text( online );
305 $( "#mapControlOfflineCount" ).text( offline );
306}
307
308var updatePlayerEvent = function() {
309 $.getJSON( "../api/getplayerslocation")
310 .done(setPlayerMarkers)
311 .fail(function(jqxhr, textStatus, error) {
312 console.log("Error fetching players list");
313 })
314 .always(function() {
315 window.setTimeout(updatePlayerEvent, 2000);
316 });
317}
318
319window.setTimeout(updatePlayerEvent, 500);
320
321
322
323// ===============================================================================================
324// Land claim markers
325
326var setLandClaims = function(data) {
327 landClaimsGroup.clearLayers();
328 var sizeHalf = Math.floor(data.claimsize / 2);
329
330 $.each( data.claimowners, function( key, val ) {
331 var steamid = val.steamid;
332 var active = val.claimactive;
333 var color = active ? "#00ff00" : "#ff0000";
334
335 $.each( val.claims, function( key, val ) {
336 var pos = L.latLng(val.z, val.x);
337 var bounds = L.latLngBounds(L.latLng(val.z - sizeHalf, val.x - sizeHalf), L.latLng(val.z + sizeHalf, val.x + sizeHalf));
338 var r = L.rectangle(bounds, {color: color, weight: 1});
339 var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) });
340 r.bindPopup("Owner: " + playersMappingList[steamid].name);
341 landClaimsGroup.addLayer(r);
342 landClaimsGroup.addLayer(m);
343 });
344 });
345}
346
347var updateClaimsEvent = function() {
348 $.getJSON( "../api/getlandclaims")
349 .done(setLandClaims)
350 .fail(function(jqxhr, textStatus, error) {
351 console.log("Error fetching land claim list");
352 })
353 .always(function() {
354 window.setTimeout(updateClaimsEvent, 5000);
355 });
356}
357
358window.setTimeout(updateClaimsEvent, 750);
359
Note: See TracBrowser for help on using the repository browser.