add popup with token name on click, add retry to token resize if img is not bound yet

static/map.js

@@ -27,8 +27,11 @@ function resizeMarkers() {
   tokens.forEach(t=>{
     const icon = t.m.options.icon;
     const scaleFactor = mapImg._image.clientWidth / mapImg._image.naturalWidth;
+    
     icon.options.iconSize = [scaleFactor * t.t.w, scaleFactor * t.t.h];
     icon.options.iconAnchor = [scaleFactor * t.t.oX, scaleFactor * t.t.oY];
+    icon.options.popupAnchor = [0, -scaleFactor * t.t.oY];
+    
     t.m.setIcon(icon);
   });
 }
@@ -42,6 +45,7 @@ function processTokens(tokenChanges) {
       if (t.x != null && t.y != null && !self.t.active && t.active) {
         self.t.active = true;
         self.m.addTo(map);
+        resizeMarkers();
       // token was made inactive
       } else if (t.x != null && t.y != null && self.t.active && !t.active) {
         self.t.active = false;
@@ -70,6 +74,7 @@ function processTokens(tokenChanges) {
         });
         if (t.active) {
           self.m.addTo(map);
+          resizeMarkers();
         }
       }
     }
@@ -87,14 +92,6 @@ function toggleActive(tokenId) {
   }
 }
 
-function getCascadingPos() {
-  const topLeft = [0,0];
-  const n = tokens.length;
-  topLeft[1] += (n)*Math.random()*10 - 5;
-  topLeft[0] -= (n)*Math.random()*10 - 5;
-  return topLeft;
-}
-
 function moveToken(id) {
   const existing = tokens.find(t=>t.t.id == id);
   if (existing) {
@@ -122,14 +119,17 @@ function NewToken(token) {
     icon: L.icon({
       iconUrl: token.sprite,
       iconSize: [token.w,token.h],
-      iconAnchor: [token.oX, token.oY]
+      iconAnchor: [token.oX, token.oY],
+      popupAnchor: [0, -token.oY]
     }),
     title: token.name,
     draggable: true,
     autoPan: true
   });
-  
   marker.on("moveend", ()=>{moveToken(token.id)});
+  const node = document.createElement('div');
+  node.innerText = token.name;
+  marker.bindPopup(node);
 
   return {
     t: token,

static/style.css

@@ -126,6 +126,8 @@ pre {
   background: var(--sub_color);
   color: var(--fg_color);
   white-space: pre-wrap;
+  max-height: 80vh;
+  overflow-y: auto;
 }
 
 #auxMsgZone {
@@ -346,6 +348,28 @@ input[type=range]::-moz-range-track {
   color: var(--err_color);
 }
 
+.leaflet-popup-content-wrapper
+{
+  color: var(--fg_color);
+  background: var(--bg_color);
+  border-radius: 0;
+  text-align: center;
+}
+
+.leaflet-popup-tip {
+  background: transparent;
+  box-shadow: none;
+}
+
+.leaflet-popup-close-button {
+  color: var(--err_color) !important;
+}
+
+.leaflet-popup-close-button:hover,
+.leaflet-popup-close-button:focus {
+  color: var(--main_color) !important;
+}
+
 #noscript_container {
   z-index:999;
   position: fixed;