✨ Hint for the teleporter

editor-solidjs/src/MiddlePane.jsx

@@ -90,6 +90,56 @@ export default function MiddlePane(props) {
         return panes;
     });
 
+    let getHovered = createMemo(() => {
+        let x = Math.floor((mouse.x - canvas.width / 2 - view.cx) / view.tile_size);
+        let y = Math.floor((mouse.y - canvas.height / 2 - view.cy) / view.tile_size);
+
+        return [x, y];
+    });
+
+    let getSelectedHint = createMemo(() => {
+        let coords = settings.selected;
+        if (!coords) return null;
+
+        let full_tile = world().get(...coords);
+        if (!full_tile) return null;
+
+        let hint = getHint(full_tile.tile);
+        full_tile.free();
+        return hint;
+    });
+
+    let getHoveredHint = createMemo(() => {
+        let coords = getHovered();
+        if (!coords) return null;
+
+        let full_tile = world().get(...coords);
+        if (!full_tile) return null;
+
+        let hint = getHint(full_tile.tile);
+        full_tile.free();
+        return hint;
+    });
+
+    function getHint(tile) {
+        if (!tile) return null;
+
+        let name = Object.keys(tile)[0];
+        tile = tile[name];
+
+        if (name === "Teleporter") {
+            let pane = world().get_pane(tile.coordinates[0]);
+            if (!pane) return null;
+
+            let [dx, dy] = pane.position;
+
+            pane.free();
+            return [dx + tile.coordinates[1], dy + tile.coordinates[2], 1, 1];
+        }
+
+        return null;
+    }
+
     // Draw
     function draw() {
         if (!canvas.ctx) return;
@@ -101,6 +151,25 @@ export default function MiddlePane(props) {
         let view_height = view.height;
         let panes = getPanes();
 
+        function fill_cursor(x, y, w, h) {
+            let x2 = Math.round(x * tile_size + cx + width / 2) - zoom_factor * 2;
+            let y2 = Math.round(y * tile_size + cy + height / 2) - zoom_factor * 2;
+            let w2 = Math.round(w * tile_size) + zoom_factor * 2;
+            let h2 = Math.round(h * tile_size) + zoom_factor * 2;
+
+            ctx.fillRect(x2, y2, zoom_factor, zoom_factor * 3);
+            ctx.fillRect(x2 + zoom_factor, y2, zoom_factor * 2, zoom_factor);
+
+            ctx.fillRect(x2 + w2, y2, zoom_factor, zoom_factor * 3);
+            ctx.fillRect(x2 + w2 - zoom_factor * 2, y2, zoom_factor * 2, zoom_factor);
+
+            ctx.fillRect(x2, y2 + h2 - zoom_factor * 2, zoom_factor, zoom_factor * 3);
+            ctx.fillRect(x2 + zoom_factor, y2 + h2, zoom_factor * 2, zoom_factor);
+
+            ctx.fillRect(x2 + w2, y2 + h2 - zoom_factor * 2, zoom_factor, zoom_factor * 3);
+            ctx.fillRect(x2 + w2 - zoom_factor * 2, y2 + h2, zoom_factor * 2, zoom_factor);
+        }
+
         function stroke_rect(x, y, w, h) {
             ctx.lineWidth = zoom_factor;
             ctx.strokeRect(
@@ -196,12 +265,22 @@ export default function MiddlePane(props) {
             ctx.fillStyle = "rgba(230, 255, 230, 0.07)";
             stroke_rect(x, y, 1, 1);
             fill_rect(x, y, 1, 1);
+
+            if (getHoveredHint() !== null) {
+                ctx.fillStyle = "rgba(230, 255, 230, 0.07)";
+                fill_cursor(...getHoveredHint());
+            }
         }
 
         if (settings.selected) {
             let [x, y] = settings.selected;
             ctx.strokeStyle = "rgba(230, 230, 255, 0.1)";
             stroke_rect(x, y, 1, 1);
+
+            if (getSelectedHint() !== null) {
+                ctx.fillStyle = "rgba(230, 230, 255, 0.1)";
+                fill_cursor(...getSelectedHint());
+            }
         }
     }
 
@@ -276,13 +355,6 @@ export default function MiddlePane(props) {
         loop();
     });
 
-    let getHovered = createMemo(() => {
-        let x = Math.floor((mouse.x - canvas.width / 2 - view.cx) / view.tile_size);
-        let y = Math.floor((mouse.y - canvas.height / 2 - view.cy) / view.tile_size);
-
-        return [x, y];
-    });
-
     let _canvas, container;
     return (<div
         class={styles.MiddlePane}