From 4147e72fd8cd424167024142bdc2807e7c0db342 Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Fri, 31 Jan 2020 11:32:06 -0500 Subject: [PATCH] Add selection of entities --- macrovision.css | 14 ++++++++++++++ macrovision.html | 11 ++++++----- macrovision.js | 25 +++++++++++++++++++++++++ 3 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 macrovision.js diff --git a/macrovision.css b/macrovision.css index a53b13aa..bda9f429 100644 --- a/macrovision.css +++ b/macrovision.css @@ -2,6 +2,7 @@ html { height: 100%; overflow-x: hidden; overflow-y: hidden; + color: #eee; } body { @@ -25,17 +26,30 @@ body { text-align: center; } +.entity.selected { + box-shadow: 10px 10px 5px grey; +} + #world { min-width: 90vw; min-height: 80vh; } #menubar { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; min-height: 10vh; min-width: 100vw; background: #222; } +.menu-item { + font-size: 24px; + color: #ccc; +} + #display { width: 100%; height: 100%; diff --git a/macrovision.html b/macrovision.html index 15c46ef3..c0b6354e 100644 --- a/macrovision.html +++ b/macrovision.html @@ -6,6 +6,7 @@ Macrovision + @@ -16,14 +17,14 @@
-
- I'm a box +
+
- - + +
diff --git a/macrovision.js b/macrovision.js new file mode 100644 index 00000000..60462a97 --- /dev/null +++ b/macrovision.js @@ -0,0 +1,25 @@ +let selected = null; + +function select(entity) { + if (selected) { + selected.classList.remove("selected"); + } + + selected = entity; + selected.classList.add("selected"); +} + +function createEntity() { + const entity = document.createElement("div"); + entity.classList.add("entity"); + + entity.addEventListener("click", e => select(e.target)); + + + const world = document.querySelector("#entities"); + world.appendChild(entity); +} + +document.addEventListener("DOMContentLoaded", () => { + createEntity(); +});