Add some gridlines

macrovision.js

@@ -1,5 +1,74 @@
 let selected = null;
 
+
+function drawScale() {
+    function drawTicks(/** @type {CanvasRenderingContext2D} */ ctx) {
+        for (let y = ctx.canvas.clientHeight - 50; y >= 50; y -= 50) {
+            drawTick(ctx, 50, y);
+        }
+    }
+
+    function drawTick(/** @type {CanvasRenderingContext2D} */ ctx, x, y) {
+        const oldStyle = ctx.strokeStyle;
+        console.log(ctx.strokeStyle);
+
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x+20, y);
+        ctx.strokeStyle = "#000000";
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.moveTo(x+20, y);
+        ctx.lineTo(ctx.canvas.clientWidth - 70, y);
+        ctx.strokeStyle = "#aaaaaa";
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.moveTo(ctx.canvas.clientWidth - 70, y);
+        ctx.lineTo(ctx.canvas.clientWidth - 50, y);
+        ctx.strokeStyle = "#000000";
+        ctx.stroke();
+
+        ctx.strokeStyle = oldStyle;
+        console.log(ctx.strokeStyle);
+    }
+    const canvas = document.querySelector("#display");
+
+    /** @type {CanvasRenderingContext2D} */
+
+    const ctx = canvas.getContext("2d");
+    ctx.scale(1,1);
+    console.log(canvas.clientWidth);
+    ctx.canvas.width  = canvas.clientWidth;
+    ctx.canvas.height = canvas.clientHeight;
+
+    ctx.beginPath();
+    ctx.moveTo(50, 50);
+    ctx.lineTo(50, ctx.canvas.clientHeight - 50);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(ctx.canvas.clientWidth - 50, 50);
+    ctx.lineTo(ctx.canvas.clientWidth - 50, ctx.canvas.clientHeight - 50);
+    ctx.stroke();
+
+    drawTicks(ctx);
+}
+
+function makeEntity() {
+    const entityTemplate = {
+        name: "",
+        author: "",
+        location: {
+            x: 0,
+            y: 0
+        }
+    }
+    
+    return entityTemplate;
+}
+
 function select(target) {
     if (selected) {
         selected.classList.remove("selected");
@@ -9,12 +78,14 @@ function select(target) {
     selected.classList.add("selected");
 }
 
-function createEntity(entity) {
+function displayEntity(entity) {
+    const location = entity.location;
+
     const div = document.createElement("div");
     div.classList.add("entity");
 
-    div.style.left = entity.x;
-    div.style.top = entity.y;
+    div.style.left = location.x + "px";
+    div.style.top = location.y + "px";
 
     div.addEventListener("click", e => select(e.target));
 
@@ -24,7 +95,12 @@ function createEntity(entity) {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-    createEntity({x: "300px", y: "300px"});
-    createEntity({x: "400px", y: "300px"});
-    createEntity({x: "500px", y: "300px"});
+    for (let x = 0; x < 5; x++) {
+        const entity = makeEntity();
+        entity.location.x = 300 + Math.random() * 600;
+        entity.location.y = 300 + Math.random() * 400;
+        displayEntity(entity);
+    }
+
+    drawScale();
 });