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

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

LandClaims on webmap test
  • Property svn:executable set to *
File size: 9.9 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({
162 maxClusterRadius: function(zoom) { zoom == MAXZOOM ? 10 : 50 }
163});
164var landClaimsGroup = L.markerClusterGroup({
165 disableClusteringAtZoom: MAXZOOM,
166 maxClusterRadius: 50
167});
168
169var baseLayers = {
170 //"Map": tileLayer
171};
172
173var overlays = {
174 "Land claims" : landClaimsGroup,
175 "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup,
176 "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup,
177 "Region files": regionLayer,
178};
179
180tileLayer.addTo(map);
181L.control.layers(baseLayers, overlays, {
182 collapsed: false
183}).addTo(map);
184
185map.on('mousemove', function(e) {
186 L.DomUtil.get('pos').textContent = FormatCoord(e.latlng);
187});
188
189var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
190 toggleDisplay: true
191}).addTo(map);
192
193
194
195var playersMappingList = {};
196
197
198
199// ===============================================================================================
200// Inventory dialog
201
202var showInv = function(steamid) {
203 $.getJSON( "../api/getplayerinventory", { steamid: steamid })
204 .done(function(data) {
205 $("#invPlayerName").text(playersMappingList[steamid].name);
206 for (var y = 0; y < BAG_ROWS; y++) {
207 for (var x = 0; x < BAG_COLS; x++) {
208 if (data.bag[y*BAG_COLS+x].count > 0) {
209 $("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);");
210 $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
211 } else {
212 $("#bagField"+x+"_"+y).attr("style", "background-image: none;");
213 $("#bagFieldText"+x+"_"+y).text("");
214 }
215 }
216 }
217
218 for (var x = 0; x < BELT_COLS; x++) {
219 if (data.belt[x].count > 0) {
220 $("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);");
221 $("#beltFieldText"+x).text(data.belt[x].count);
222 } else {
223 $("#beltField"+x).attr("style", "background-image: none;");
224 $("#beltFieldText"+x).text("");
225 }
226 }
227
228 $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({
229 modal: true,
230 width: BAG_COLS*(INV_ITEM_WIDTH+14) + 20,
231 buttons: {
232 Ok: function() {
233 $( this ).dialog( "close" );
234 }
235 }
236 });
237 })
238 .fail(function(jqxhr, textStatus, error) {
239 console.log("Error fetching player inventory");
240 })
241 .always(function() {
242 });
243};
244
245for (var y = 0; y < BAG_ROWS; y++) {
246 $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
247 for (var x = 0; x < BAG_COLS; x++) {
248 $("#bagRow"+y).append(
249 "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
250 "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
251 "</td>");
252 }
253}
254
255$("#beltTable").append("<tr id=\"beltRow0\"></tr>");
256for (var x = 0; x < BELT_COLS; x++) {
257 $("#beltRow0").append(
258 "<td class=\"invField\" id=\"beltField"+x+"\">" +
259 "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
260 "</td>");
261}
262
263
264
265// ===============================================================================================
266// Player markers
267
268$(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
269 showInv($(this).data('steamid'));
270});
271
272var setPlayerMarkers = function(data) {
273 var online = 0;
274 var offline = 0;
275 $.each( data, function( key, val ) {
276 var marker;
277 if (playersMappingList.hasOwnProperty(val.steamid)) {
278 marker = playersMappingList[val.steamid].currentPosMarker;
279 marker.setLatLng([val.position.z, val.position.x]);
280 } else {
281 marker = L.marker([val.position.z, val.position.x]).bindPopup(
282 "Player: " + val.name + "<br/>" +
283 "<a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
284 );
285 playersMappingList[val.steamid] = { online: !val.online };
286 }
287 if (playersMappingList[val.steamid].online != val.online) {
288 if (val.online) {
289 marker.setOpacity(1.0);
290 playersOfflineMarkerGroup.removeLayer(marker);
291 playersOnlineMarkerGroup.addLayer(marker);
292 } else {
293 marker.setOpacity(0.5);
294 playersOnlineMarkerGroup.removeLayer(marker);
295 playersOfflineMarkerGroup.addLayer(marker);
296 }
297 }
298 val.currentPosMarker = marker;
299 playersMappingList[val.steamid] = val;
300
301 if (val.online)
302 online++;
303 else
304 offline++;
305 });
306 $( "#mapControlOnlineCount" ).text( online );
307 $( "#mapControlOfflineCount" ).text( offline );
308}
309
310var updatePlayerEvent = function() {
311 $.getJSON( "../api/getplayerslocation")
312 .done(setPlayerMarkers)
313 .fail(function(jqxhr, textStatus, error) {
314 console.log("Error fetching players list");
315 })
316 .always(function() {
317 window.setTimeout(updatePlayerEvent, 2000);
318 });
319}
320
321window.setTimeout(updatePlayerEvent, 500);
322
323
324
325// ===============================================================================================
326// Land claim markers
327
328var setLandClaims = function(data) {
329 landClaimsGroup.clearLayers();
330 var sizeHalf = Math.floor(data.claimsize / 2);
331
332 $.each( data.claimowners, function( key, val ) {
333 var steamid = val.steamid;
334 var active = val.claimactive;
335 var color = active ? "#00ff00" : "#ff0000";
336
337 console.log("id: " + steamid + " - " + active + " - " + color);
338
339 $.each( val.claims, function( key, val ) {
340 var pos = L.latLng(val.z, val.x);
341 var bounds = L.latLngBounds(L.latLng(val.z - sizeHalf, val.x - sizeHalf), L.latLng(val.z + sizeHalf, val.x + sizeHalf));
342 var r = L.rectangle(bounds, {color: color, weight: 1});
343 var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) });
344 if (playersMappingList.hasOwnProperty(steamid)) {
345 r.bindPopup("Owner: " + playersMappingList[steamid].name);
346 } else {
347 r.bindPopup("Owner: unknown ("+steamid+")");
348 }
349 landClaimsGroup.addLayer(r);
350 landClaimsGroup.addLayer(m);
351 });
352 });
353}
354
355var updateClaimsEvent = function() {
356 $.getJSON( "../api/getlandclaims")
357 .done(setLandClaims)
358 .fail(function(jqxhr, textStatus, error) {
359 console.log("Error fetching land claim list");
360 })
361 .always(function() {
362 window.setTimeout(updateClaimsEvent, 5000);
363 });
364}
365
366window.setTimeout(updateClaimsEvent, 750);
367
Note: See TracBrowser for help on using the repository browser.