2023-07-03 05:10:58 +00:00
|
|
|
let map = null;
|
2023-07-04 07:08:01 +00:00
|
|
|
let mapImg = null;
|
2023-07-05 07:18:46 +00:00
|
|
|
let tokens = [];
|
2023-07-06 08:20:30 +00:00
|
|
|
const worldBounds = [[180, -180],[-180, 180]];
|
2023-07-03 05:10:58 +00:00
|
|
|
|
|
|
|
function initializeMap(mapImgUrl) {
|
2023-07-08 05:56:41 +00:00
|
|
|
let init = false;
|
2023-07-04 07:08:01 +00:00
|
|
|
if (!map) {
|
2023-07-08 05:56:41 +00:00
|
|
|
init = true;
|
2023-07-12 05:57:06 +00:00
|
|
|
map = L.map('map', { minZoom: 0, maxZoom: 4, crs: L.CRS.Simple, attributionControl: false, zoomControl: false });
|
|
|
|
map.on("zoomend", ()=>{resizeMarkers();scaleSpritePreview();scaleAltSpritePreview();});
|
2023-07-04 07:08:01 +00:00
|
|
|
}
|
|
|
|
if (mapImg) {
|
|
|
|
mapImg.removeFrom(map);
|
|
|
|
}
|
2023-07-06 08:20:30 +00:00
|
|
|
mapImg = L.imageOverlay(mapImgUrl, worldBounds);
|
2023-07-04 07:08:01 +00:00
|
|
|
mapImg.addTo(map);
|
2023-07-06 08:20:30 +00:00
|
|
|
map.setMaxBounds(worldBounds);
|
2023-07-08 05:56:41 +00:00
|
|
|
if (init) {
|
|
|
|
map.setView([0,0], 2);
|
|
|
|
}
|
2023-07-05 07:18:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// this works but assumes the map is square (reasonable limitation I think)
|
|
|
|
function resizeMarkers() {
|
|
|
|
tokens.forEach(t=>{
|
|
|
|
const icon = t.m.options.icon;
|
|
|
|
const scaleFactor = mapImg._image.clientWidth / mapImg._image.naturalWidth;
|
2023-07-09 06:48:19 +00:00
|
|
|
icon.options.iconSize = [scaleFactor * t.t.w, scaleFactor * t.t.h];
|
|
|
|
icon.options.iconAnchor = [scaleFactor * t.t.oX, scaleFactor * t.t.oY];
|
2023-07-05 07:18:46 +00:00
|
|
|
t.m.setIcon(icon);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-07-09 06:48:19 +00:00
|
|
|
function processTokens(tokenChanges) {
|
|
|
|
for (const t of tokenChanges) {
|
|
|
|
const i = tokens.findIndex(tk=>tk.t.id == t.id);
|
|
|
|
if (i >= 0) {
|
|
|
|
const self = tokens[i];
|
|
|
|
// token was made active
|
|
|
|
if (t.x != null && t.y != null && !self.t.active && t.active) {
|
|
|
|
self.t.active = true;
|
|
|
|
self.m.addTo(map);
|
|
|
|
// token was made inactive
|
|
|
|
} else if (t.x != null && t.y != null && self.t.active && !t.active) {
|
|
|
|
self.t.active = false;
|
|
|
|
self.m.removeFrom(map);
|
|
|
|
// token was destroyed
|
|
|
|
} else if (t.x == null && t.y == null) {
|
|
|
|
self.m.removeFrom(map);
|
|
|
|
tokens.splice(i, 1);
|
|
|
|
// token was moved
|
|
|
|
} else {
|
|
|
|
self.t.x = t.x;
|
|
|
|
self.t.y = t.y;
|
|
|
|
self.m.setLatLng([t.y, t.x]);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (t.x != null && t.y != null) {
|
|
|
|
const self = NewToken(t);
|
|
|
|
tokens.push(self);
|
2023-07-14 02:27:19 +00:00
|
|
|
tokens.sort((a,b)=>{
|
|
|
|
if (a.t.name < b.t.name) {
|
|
|
|
return -1;
|
|
|
|
} else if (a.t.name > b.t.name) {
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
});
|
2023-07-09 06:48:19 +00:00
|
|
|
if (t.active) {
|
|
|
|
self.m.addTo(map);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
resizeMarkers();
|
|
|
|
}
|
|
|
|
|
|
|
|
function toggleActive(tokenId) {
|
|
|
|
const existing = tokens.find(t=>t.t.id == tokenId);
|
|
|
|
if (existing) {
|
|
|
|
const self = Object.assign({}, existing.t);
|
|
|
|
self.active = !self.active;
|
|
|
|
console.log(self);
|
|
|
|
publish({token: self});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-07-06 08:20:30 +00:00
|
|
|
function getCascadingPos() {
|
2023-07-08 07:42:31 +00:00
|
|
|
const topLeft = [0,0];
|
2023-07-06 08:20:30 +00:00
|
|
|
const n = tokens.length;
|
2023-07-08 07:42:31 +00:00
|
|
|
topLeft[1] += (n)*Math.random()*10 - 5;
|
|
|
|
topLeft[0] -= (n)*Math.random()*10 - 5;
|
2023-07-06 08:20:30 +00:00
|
|
|
return topLeft;
|
|
|
|
}
|
|
|
|
|
2023-07-09 06:48:19 +00:00
|
|
|
function moveToken(id) {
|
|
|
|
const existing = tokens.find(t=>t.t.id == id);
|
|
|
|
if (existing) {
|
|
|
|
const self = Object.assign({}, existing.t);
|
|
|
|
const realPos = existing.m.getLatLng();
|
|
|
|
self.x = realPos.lng;
|
|
|
|
self.y = realPos.lat;
|
|
|
|
console.log(self);
|
|
|
|
publish({token: self});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function NewToken(token) {
|
|
|
|
const marker = L.marker([token.y,token.x], {
|
|
|
|
icon: L.icon({
|
|
|
|
iconUrl: token.sprite,
|
|
|
|
iconSize: [token.w,token.h],
|
|
|
|
iconAnchor: [token.oX, token.oY]
|
|
|
|
}),
|
|
|
|
title: token.name,
|
|
|
|
draggable: true,
|
|
|
|
autoPan: true
|
|
|
|
});
|
|
|
|
|
|
|
|
marker.on("moveend", ()=>{moveToken(token.id)});
|
2023-07-10 05:41:30 +00:00
|
|
|
|
2023-07-08 05:56:41 +00:00
|
|
|
return {
|
2023-07-09 06:48:19 +00:00
|
|
|
t: token,
|
|
|
|
m: marker,
|
|
|
|
};
|
2023-07-03 05:10:58 +00:00
|
|
|
}
|