From cf72daacbec2730687c7cbf3e79f01a0e713b02d Mon Sep 17 00:00:00 2001
From: "Eevee (Evelyn Woods)" <eevee.git@veekun.com>
Date: Thu, 14 Jan 2021 00:53:54 -0700
Subject: [PATCH] Checkpoint some minor editor bits

---
 js/main-editor.js     | 11 +++++++++++
 js/renderer-canvas.js |  4 ++++
 style.css             |  7 ++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/js/main-editor.js b/js/main-editor.js
index 943124a..a39ae08 100644
--- a/js/main-editor.js
+++ b/js/main-editor.js
@@ -260,6 +260,17 @@ class EditorLevelBrowserOverlay extends DialogOverlay {
             }
         });
 
+        // FIXME it would be super swell if i could load this lazily
+        /*
+        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+        this.sortable = new Sortable(this.list, {
+            group: 'editor-levels',
+            onEnd: ev => {
+                // FIXME rearrange the levels for realsies
+            },
+        });
+        */
+
         this.add_button("new level", ev => {
             this.conductor.editor.append_new_level();
             this.close();
diff --git a/js/renderer-canvas.js b/js/renderer-canvas.js
index 7db0c9f..0981549 100644
--- a/js/renderer-canvas.js
+++ b/js/renderer-canvas.js
@@ -50,6 +50,8 @@ export class CanvasRenderer {
         this.canvas = mk('canvas', {width: tileset.size_x * this.viewport_size_x, height: tileset.size_y * this.viewport_size_y});
         this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
         this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+        this.canvas.style.setProperty('--tile-width', `${tileset.size_x}px`);
+        this.canvas.style.setProperty('--tile-height', `${tileset.size_y}px`);
         this.ctx = this.canvas.getContext('2d');
         this.viewport_x = 0;
         this.viewport_y = 0;
@@ -130,6 +132,8 @@ export class CanvasRenderer {
         this.canvas.setAttribute('height', this.tileset.size_y * this.viewport_size_y);
         this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
         this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+        this.canvas.style.setProperty('--tile-width', `${this.tileset.size_x}px`);
+        this.canvas.style.setProperty('--tile-height', `${this.tileset.size_y}px`);
     }
 
     draw(tic_offset = 0) {
diff --git a/style.css b/style.css
index 3be6628..cc15a3f 100644
--- a/style.css
+++ b/style.css
@@ -1612,14 +1612,18 @@ body.--debug #player-debug {
 #editor .editor-canvas {
     grid-area: level;
     overflow: auto;
+    position: relative;
     /* Flex layout to center the canvas and overlay together */
     display: flex;
     /* This isn't supported in Chrome (still!!), so use auto margins on the child instead
     align-items: safe center;
     justify-content: safe center;
     */
-    background: #202020;
+    background: #101010;
     border: 0.125em solid black;
+    /* FIXME would love if this were above the canvas too, but can't figure out how to do that
+     * easily in a scrolling element */
+    box-shadow: inset 0 0 3px black;
 }
 #editor .editor-canvas .-container {
     position: relative;
@@ -1635,6 +1639,7 @@ body.--debug #player-debug {
     width: calc(var(--viewport-width) * var(--tile-width) * var(--scale));
     --viewport-width: 9;
     --viewport-height: 9;
+    --scale: 1;
 }
 /* SVG overlays */
 #editor svg.level-editor-overlay {