Put the images in a div so that a nametag can be added

macrovision.css

@@ -18,9 +18,10 @@ body {
     font-family: 'Coda', cursive;
 }
 
-.entity {
+.entity-box {
     position: absolute;
     --height: 100px;
+    max-height: var(--height);
     height: var(--height);
     text-align: center;
     -webkit-user-drag: none;
@@ -28,7 +29,25 @@ body {
     -moz-user-drag: none;
     -o-user-drag: none;
     transform: translate(-50%, -100%);
-    pointer-events: fill;
+    pointer-events: none;
+}
+
+.entity-image {
+    position: absolute;
+    height: 100%;
+    pointer-events: auto;
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+}
+
+.entity-name {
+    position: absolute;
+    top: -25%;
+    left: 50%;
+    font-size: 24px;
+    pointer-events: none
 }
 
 .selected {

macrovision.js

@@ -181,13 +181,13 @@ function makeEntity() {
     return entityTemplate;
 }
 
-function clickDown(e) {
-    clicked = e.target;
-    const rect = e.target.getBoundingClientRect();
+function clickDown(target, x, y) {
+    clicked = target;
+    const rect = target.getBoundingClientRect();
     let entX = document.querySelector("#entities").getBoundingClientRect().x;
     let entY = document.querySelector("#entities").getBoundingClientRect().y;
-    dragOffsetX = e.clientX - rect.left + entX - rect.width / 2;
-    dragOffsetY = e.clientY - rect.top + entY - rect.height;
+    dragOffsetX = x - rect.left + entX - rect.width / 2;
+    dragOffsetY = y - rect.top + entY - rect.height;
     clickTimeout = setTimeout(() => { dragging = true }, 200)
 }
 
@@ -311,33 +311,40 @@ function testClick(event) {
         }));
         target.style.display = oldDisplay;
     } else {
-        clickDown(event);
+        clickDown(target.parentElement, event.clientX, event.clientY);
     }
 }
 
 function displayEntity(entity, view, x, y) {
-    const location = entity.location;
+    const box = document.createElement("div");
+    box.classList.add("entity-box");
 
     const img = document.createElement("img");
+    img.classList.add("entity-image");
+    const nameTag = document.createElement("div");
+    nameTag.classList.add("entity-name");
+    nameTag.innerText = entity.name;
+    box.appendChild(img);
+    box.appendChild(nameTag);
+
     img.src = "./man.svg"
-    img.classList.add("entity");
 
-    img.dataset.x = x;
-    img.dataset.y = y;
+    box.dataset.x = x;
+    box.dataset.y = y;
 
     img.addEventListener("mousedown", e => { testClick(e); e.stopPropagation() });
 
-    img.id = "entity-" + entityIndex;
-    img.dataset.key = entityIndex;
-    img.dataset.view = view;
+    box.id = "entity-" + entityIndex;
+    box.dataset.key = entityIndex;
+    box.dataset.view = view;
 
     entities[entityIndex] = entity;
 
     entityIndex += 1;
 
     const world = document.querySelector("#entities");
-    world.appendChild(img);
-    updateEntityElement(entity, img);
+    world.appendChild(box);
+    updateEntityElement(entity, box);
 }
 
 document.addEventListener("DOMContentLoaded", () => {