From dc8b6dd391a25c44bd1b5d288e149e6b67c3ec82 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Wed, 5 Feb 2020 09:59:15 -0500
Subject: [PATCH] Add names below each entity

---
 macrovision.css | 12 ++++++++++--
 macrovision.js  | 16 ++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/macrovision.css b/macrovision.css
index 30fb30d0..149aa568 100644
--- a/macrovision.css
+++ b/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%);
 }
\ No newline at end of file
diff --git a/macrovision.js b/macrovision.js
index a997e51f..68fb05b0 100644
--- a/macrovision.js
+++ b/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);
 }