Add selection of entities

5 anni fa · 4147e72fd8
--- 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%;
--- a/macrovision.html
+++ b/macrovision.html
@@ -6,6 +6,7 @@
  <title>Macrovision</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="macrovision.css">
  <script src="macrovision.js"></script>
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="How big are they anyway?" />
  <meta property="og:title" content="Macrovision" />
@@ -16,14 +17,14 @@

 <body>
  <div id="menubar">
    this is a menu
    <div class="menu-item">This will be a menu at some point</div>
  </div>
  <div id="world">
    <div class="entity">
      I'm a box
    <div id="entities">
      
    </div>
      <canvas id="display">
      </canvas>
    <canvas id="display">
    </canvas>
  </div>
 </body>
 </html>
--- a/macrovision.js
+++ 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();
 });