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

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

Fixes intermediate state
  • Property svn:executable set to *
File size: 11.8 KB
Line 
1// ===============================================================================================
2// Constants
3
4var mapinfo = {
5 regionsize: 512,
6 chunksize: 16,
7 tilesize: 128,
8 maxzoom: 4
9}
10
11var BAG_COLS = 8;
12var BAG_ROWS = 4;
13var BELT_COLS = 8;
14var INV_ITEM_WIDTH = 58;
15var INV_ITEM_HEIGHT = 40;
16
17var userdata = false;
18
19
20function initMap() {
21 // ===============================================================================================
22 // 7dtd coordinate transformations
23
24 SDTD_Projection = {
25 project: function (latlng) {
26 return new L.Point(
27 (latlng.lat) / Math.pow(2, mapinfo.maxzoom),
28 (latlng.lng) / Math.pow(2, mapinfo.maxzoom) );
29 },
30
31 unproject: function (point) {
32 return new L.LatLng(
33 point.x * Math.pow(2, mapinfo.maxzoom),
34 point.y * Math.pow(2, mapinfo.maxzoom) );
35 }
36 };
37
38 SDTD_CRS = L.extend({}, L.CRS.Simple, {
39 projection: SDTD_Projection,
40 transformation: new L.Transformation(1, 0, -1, 0),
41
42 scale: function (zoom) {
43 return Math.pow(2, zoom);
44 }
45 });
46
47
48
49
50 // ===============================================================================================
51 // Map and basic tile layers
52
53 var initTime = new Date().getTime();
54
55 map = L.map('tab_map', {
56 zoomControl: false, // Added by Zoomslider
57 zoomsliderControl: true,
58 attributionControl: false,
59 crs: SDTD_CRS
60 }).setView([0, 0], Math.max(0, mapinfo.maxzoom - 5));
61
62 var tileLayer = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', {
63 maxZoom: mapinfo.maxzoom + 1,
64 minZoom: Math.max(0, mapinfo.maxzoom - 5),
65 maxNativeZoom: mapinfo.maxzoom,
66 tileSize: mapinfo.tilesize,
67 continuousWorld: true,
68 tms: true,
69 unloadInvisibleTiles: false,
70 time: initTime
71 });
72
73 // TileLayer w/ TMS=true fix for zoomlevel >= 8
74 tileLayer._getWrapTileNum = function () {
75 return L.point(0, 0);
76 };
77
78 var tileLayerMiniMap = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', {
79 maxZoom: mapinfo.maxzoom,
80 minZoom: 0,
81 maxNativeZoom: mapinfo.maxzoom,
82 tileSize: mapinfo.tilesize,
83 continuousWorld: true,
84 tms: true,
85 unloadInvisibleTiles: false,
86 time: initTime
87 });
88
89
90
91
92
93
94
95 // ===============================================================================================
96 // Overlays and controls
97
98 var playersOnlineMarkerGroup = L.layerGroup();
99 var playersOfflineMarkerGroup = L.markerClusterGroup({
100 maxClusterRadius: function(zoom) { return zoom == mapinfo.maxzoom ? 10 : 50; }
101 });
102
103
104 var landClaimsGroup = L.layerGroup();
105 var landClaimsClusterGroup = L.markerClusterGroup({
106 disableClusteringAtZoom: mapinfo.maxzoom,
107 singleMarkerMode: true,
108 maxClusterRadius: 50
109 });
110 var landClaimsRectGroup = L.layerGroup();
111 landClaimsGroup.addLayer(landClaimsClusterGroup);
112 landClaimsGroup.addLayer(landClaimsRectGroup);
113 var maxZoomForCluster = 4;
114
115 var baseLayers = {
116 //"Map": tileLayer
117 };
118
119 var layerControl = L.control.layers(baseLayers, null, {
120 collapsed: false
121 });
122
123 var layerCount = 0;
124
125
126 if (hasPermission ("web.map")) {
127 tileLayer.addTo(map);
128 new L.Control.Coordinates({}).addTo(map);
129 new L.Control.ReloadTiles({layers: [tileLayer, tileLayerMiniMap]}).addTo(map);
130 layerControl.addOverlay (GetRegionLayer (mapinfo), "Region files");
131 var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
132 zoomLevelOffset: -6,
133 toggleDisplay: true
134 }).addTo(map);
135
136 if (hasPermission ("webapi.getstats")) {
137 new L.Control.GameTime({}).addTo(map);
138 }
139 }
140 if (hasPermission ("webapi.getlandclaims")) {
141 layerControl.addOverlay (landClaimsGroup, "Land claims");
142 layerCount++;
143 }
144 if (hasPermission ("webapi.getplayerslocation")) {
145 layerControl.addOverlay (playersOfflineMarkerGroup, "Players (offline) (<span id='mapControlOfflineCount'>0</span>)");
146 layerControl.addOverlay (playersOnlineMarkerGroup, "Players (online) (<span id='mapControlOnlineCount'>0</span>)");
147 layerCount++;
148 }
149
150 if (layerCount > 0) {
151 layerControl.addTo(map);
152 }
153
154
155 var playersMappingList = {};
156
157
158
159 // ===============================================================================================
160 // Inventory dialog
161
162 var showInv = function(steamid) {
163 $.getJSON( "../api/getplayerinventory", { steamid: steamid })
164 .done(function(data) {
165 $("#invPlayerName").text(playersMappingList[steamid].name);
166 for (var y = 0; y < BAG_ROWS; y++) {
167 for (var x = 0; x < BAG_COLS; x++) {
168 if (data.bag[y*BAG_COLS+x].count > 0) {
169 $("#bagField"+x+"_"+y).attr("style", "background-image: url(../itemicons/" + data.bag[y*BAG_COLS+x].name + ".png);").attr("title", data.bag[y*BAG_COLS+x].name);
170 $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
171 } else {
172 $("#bagField"+x+"_"+y).attr("style", "background-image: none;");
173 $("#bagFieldText"+x+"_"+y).text("");
174 }
175 }
176 }
177
178 for (var x = 0; x < BELT_COLS; x++) {
179 if (data.belt[x].count > 0) {
180 $("#beltField"+x).attr("style", "background-image: url(../itemicons/" + data.belt[x].name + ".png);").attr("title", data.belt[x].name);
181 $("#beltFieldText"+x).text(data.belt[x].count);
182 } else {
183 $("#beltField"+x).attr("style", "background-image: none;");
184 $("#beltFieldText"+x).text("");
185 }
186 }
187
188 $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({
189 modal: true,
190 width: BAG_COLS*(INV_ITEM_WIDTH+14) + 20,
191 buttons: {
192 Ok: function() {
193 $( this ).dialog( "close" );
194 }
195 }
196 });
197 })
198 .fail(function(jqxhr, textStatus, error) {
199 console.log("Error fetching player inventory");
200 })
201 .always(function() {
202 });
203 };
204
205 for (var y = 0; y < BAG_ROWS; y++) {
206 $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
207 for (var x = 0; x < BAG_COLS; x++) {
208 $("#bagRow"+y).append(
209 "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
210 "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
211 "</td>");
212 }
213 }
214
215 $("#beltTable").append("<tr id=\"beltRow0\"></tr>");
216 for (var x = 0; x < BELT_COLS; x++) {
217 $("#beltRow0").append(
218 "<td class=\"invField\" id=\"beltField"+x+"\">" +
219 "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
220 "</td>");
221 }
222
223
224
225 // ===============================================================================================
226 // Player markers
227
228 $(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
229 showInv($(this).data('steamid'));
230 });
231
232 var setPlayerMarkers = function(data) {
233 var online = 0;
234 var offline = 0;
235 $.each( data, function( key, val ) {
236 var marker;
237 if (playersMappingList.hasOwnProperty(val.steamid)) {
238 marker = playersMappingList[val.steamid].currentPosMarker;
239 marker.setLatLng([val.position.x, val.position.z]);
240 } else {
241 marker = L.marker([val.position.x, val.position.z]).bindPopup(
242 "Player: " + val.name +
243 (hasPermission ("webapi.getplayerinventory") ?
244 "<br/><a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
245 : "")
246 );
247 playersMappingList[val.steamid] = { online: !val.online };
248 }
249 if (playersMappingList[val.steamid].online != val.online) {
250 if (val.online) {
251 marker.setOpacity(1.0);
252 playersOfflineMarkerGroup.removeLayer(marker);
253 playersOnlineMarkerGroup.addLayer(marker);
254 } else {
255 marker.setOpacity(0.5);
256 playersOnlineMarkerGroup.removeLayer(marker);
257 playersOfflineMarkerGroup.addLayer(marker);
258 }
259 }
260 val.currentPosMarker = marker;
261 playersMappingList[val.steamid] = val;
262
263 if (val.online)
264 online++;
265 else
266 offline++;
267 });
268 $( "#mapControlOnlineCount" ).text( online );
269 $( "#mapControlOfflineCount" ).text( offline );
270 }
271
272 var updatePlayerEvent = function() {
273 $.getJSON( "../api/getplayerslocation")
274 .done(setPlayerMarkers)
275 .fail(function(jqxhr, textStatus, error) {
276 console.log("Error fetching players list");
277 })
278 .always(function() {
279 window.setTimeout(updatePlayerEvent, 2000);
280 });
281 }
282
283 if (hasPermission ("webapi.getplayerslocation")) {
284 window.setTimeout(updatePlayerEvent, 0);
285 }
286
287
288
289 // ===============================================================================================
290 // Land claim markers
291
292 var setLandClaims = function(data) {
293 landClaimsClusterGroup.clearLayers();
294 landClaimsRectGroup.clearLayers();
295
296 var claimPower = Math.floor(Math.log(data.claimsize) / Math.LN2);
297 var maxClusterZoomUnlimited = mapinfo.maxzoom - (claimPower - 3);
298 var maxClusterZoomLimitedMax = Math.min(maxClusterZoomUnlimited, mapinfo.maxzoom+1);
299 maxZoomForCluster = Math.max(maxClusterZoomLimitedMax, 0);
300
301 checkClaimClustering({target: map});
302
303 var sizeHalf = Math.floor(data.claimsize / 2);
304
305 $.each( data.claimowners, function( key, val ) {
306 var steamid = val.steamid;
307 var active = val.claimactive;
308 var color = active ? "#55ff55" : "#ff0000";
309
310 $.each( val.claims, function( key, val ) {
311 var pos = L.latLng(val.x, val.z);
312 var bounds = L.latLngBounds(L.latLng(val.x - sizeHalf, val.z - sizeHalf), L.latLng(val.x + sizeHalf, val.z + sizeHalf));
313 var r = L.rectangle(bounds, {color: color, weight: 1, opacity: 0.8, fillOpacity: 0.15});
314 var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) });
315 if (playersMappingList.hasOwnProperty(steamid)) {
316 var name = playersMappingList[steamid].name;
317 } else {
318 var name = "unknown"
319 }
320 r.bindPopup("Owner: " + name + " ("+steamid+")<br/>Position: " + val.x + " / " + val.y + " / " + val.z);
321 landClaimsRectGroup.addLayer(r);
322 landClaimsClusterGroup.addLayer(m);
323 });
324 });
325 }
326
327 var updateClaimsEvent = function() {
328 $.getJSON( "../api/getlandclaims")
329 .done(setLandClaims)
330 .fail(function(jqxhr, textStatus, error) {
331 console.log("Error fetching land claim list");
332 })
333 .always(function() {
334 //updateClaimTimer = window.setTimeout(updateClaimsEvent, 3000);
335 });
336 }
337
338
339
340 // ===============================================================================================
341 // Layer events
342
343 var updateClaimTimer;
344 map.on('overlayadd', function(e) {
345 if (e.layer == landClaimsGroup) {
346 updateClaimsEvent();
347 }
348 });
349
350 map.on('overlayremove', function(e) {
351 if (e.layer == landClaimsGroup) {
352 //window.clearTimeout(updateClaimTimer);
353 }
354 });
355
356 var checkClaimClustering = function(e) {
357 if (e.target._zoom >= maxZoomForCluster) {
358 landClaimsGroup.removeLayer(landClaimsClusterGroup);
359 } else {
360 landClaimsGroup.addLayer(landClaimsClusterGroup);
361 }
362 };
363
364 map.on('zoomend', checkClaimClustering);
365
366}
367
368
369
370
371function doTabs () {
372 $(".adminmenu > ul > li").addClass ("menu_button");
373 $(".admincontent > div").addClass ("contenttab");
374 $(".adminmenu .menu_button").first ().addClass ("current_tab");
375 $(".menu_button").on ('click.action', null, function (event) {
376 var menuElement = $(this);
377 var linkElement = menuElement.children ("a");
378 var linkName = linkElement.attr ("href");
379
380 $("*").removeClass ("current_tab");
381 menuElement.addClass ("current_tab");
382 $(linkName).addClass ("current_tab");
383 });
384
385 $(".adminmenu .menu_button").first ().click ();
386}
387
388function initMapInfo () {
389 $.getJSON( "../map/mapinfo.json")
390 .done(function(data) {
391 mapinfo.tilesize = data.blockSize;
392 mapinfo.maxzoom = data.maxZoom;
393 })
394 .fail(function(jqxhr, textStatus, error) {
395 console.log("Error fetching map information");
396 })
397 .always(function() {
398 initMap();
399 });
400}
401
402function initUser () {
403 $.getJSON( "../userstatus")
404 .done(function(data) {
405 userdata = data;
406
407 var userdataDiv = $("#userstate");
408 if (userdata.loggedin == true) {
409 var data = userdataDiv.children ("#userstate_loggedin");
410 data.attr ("style", "display: block");
411 data.children ("#username").attr ("href", "http://steamcommunity.com/profiles/" + userdata.username);
412 data.children ("#username").html (userdata.username);
413 } else {
414 var data = userdataDiv.children ("#userstate_loggedout");
415 data.attr ("style", "display: block");
416 }
417
418 initMapInfo ();
419 })
420 .fail(function(jqxhr, textStatus, error) {
421 console.log("Error fetching user data");
422 })
423}
424
425doTabs ();
426initUser ();
Note: See TracBrowser for help on using the repository browser.