all repos — felt @ fdc675dd220728476187918ec10f0111f6d5710a

virtual tabletop for dungeons and dragons (and similar) using Go, MongoDB, and websockets

add popup with token name on click, add retry to token resize if img is not bound yet
Iris Lightshard nilix@nilfm.cc
PGP Signature 
-----BEGIN PGP SIGNATURE-----

iQIzBAABCAAdFiEEkFh6dA+k/6CXFXU4O3+8IhROY5gFAmSyJ7MACgkQO3+8IhRO
Y5h/SQ//QDX40BFdLLApYoe33uF9DX3KSyOHOJ4/PwKgm6bg+cMgHoRhudfGPzd4
QPLNIUr7y2iNuS77Qfnp1Em5/GatjCKmDERBLCpgVY+cvEveR9Q/Oh5fKNcVLcAc
oAgUAmevJmMUuOYeaEPqDxogIsMycCxcLUgRaekv4srg6hVddHzdAeRaGB4QkeSj
Hxk6U+MbSY31El7lFRLfRWcCybBeeG+PkHzUIslJBWC18+7OZwxoRyHusycWPiQA
uPT13oNLUV5Zu/M2gs1anbu03KqR0G8xmq8wr4cgvulr7nFODX5VQpcGumk61L4u
hWBa8pavvMo8yT3HJvFPbwyxRGQBGs85zVLUvibKv1SnxYQ/ZwPIxIcgEnSl6oVi
u9/JlG1jkIf9F/O0P2znNvsm/9NNeb6NWHMijbGWYGXL4YjwDMPqwUjzhN/tAoV+
K3hblETAUFOyJk+uT4YbbiIzIklZAEiTj9CNcySwrL0kQj3YL97Omemjhf3zuHBV
VYlH+6rl5+68FNYYn0Pa1he9sG0shJHYS6EFRo0xIZop0umhuTgQV9ENN2wfYXII
x8ln5cKo0ACq7A2B4dEjnaK9zDLzf312lW3BXJVMb7vB1OZYPe2NVeQXOL4g20GC
RooaPtth+iuoS4Vrp/oHgJj2XyINtqnPAbv3zgfdXr8WIOinYSQ=
=zQAR
-----END PGP SIGNATURE-----
commit

fdc675dd220728476187918ec10f0111f6d5710a

parent

fa74c72a12159dc547a89bd5fb4bd32074f784cd

2 files changed, 34 insertions(+), 10 deletions(-)

jump to
M static/map.js → 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 @@ // token was made active
       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 @@ return 0;
         });
         if (t.active) {
           self.m.addTo(map);
+          resizeMarkers();
         }
       }
     }

@@ -87,14 +92,6 @@ publish({token: stripToken(self)});
   }
 }
 
-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 @@ const marker = L.marker([token.y,token.x], {
     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,
M static/style.css → static/style.css 
@@ -126,6 +126,8 @@ font-size: 125%;
   background: var(--sub_color);
   color: var(--fg_color);
   white-space: pre-wrap;
+  max-height: 80vh;
+  overflow-y: auto;
 }
 
 #auxMsgZone {

@@ -344,6 +346,28 @@ }
 
 .error {
   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 {