Add names below each entity

macrovision.css

@@ -109,8 +109,8 @@ body {
 
 #world {
     flex: 9 0 85vw;
-    min-height: 90vh;
-    max-height: 90vh;
+    min-height: 85vh;
+    max-height: 85vh;
     overflow: hidden;
 }
 
@@ -164,4 +164,12 @@ body {
 body #test-canvas {
     position: fixed;
     top: 100vh;
+}
+
+.bottom-name {
+    text-align: center;
+    position: fixed;
+    width: 75px;
+    height: 50px;
+    transform: translate(125%, 0%);
 }

macrovision.js

@@ -73,6 +73,11 @@ function updateEntityElement(entity, element) {
 
     element.querySelector(".entity-name").innerText = entity.name;
 
+    const bottomName = document.querySelector("#bottom-name-" + element.dataset.key);
+
+    bottomName.style.left = position.x + "px";
+    bottomName.style.top = "95vh";
+    bottomName.innerText = entity.name;
 }
 
 function updateSizes() {
@@ -517,10 +522,17 @@ function displayEntity(entity, view, x, y) {
 
     entities[entityIndex] = entity;
 
-    entityIndex += 1;
-
     const world = document.querySelector("#entities");
     world.appendChild(box);
+
+    const bottomName = document.createElement("div");
+    bottomName.classList.add("bottom-name");
+    bottomName.id = "bottom-name-" + entityIndex;
+    bottomName.innerText = entity.name;
+
+    world.appendChild(bottomName);
+    entityIndex += 1;
+
     updateEntityElement(entity, box);
 }