Merge pull request #1289 from Mnem42/patch-1

Create zoom.js

mods/zoom.js

@@ -0,0 +1,142 @@
+// IIFE because paranoid
+(() => {
+    let canvas_div = document.getElementById("canvasDiv")
+
+    // Be more granular at higher zoom levels
+    const speed_a = () => zoom_level > 3 ? 5  : 10
+    const speed_b = () => zoom_level > 3 ? 10 : 20
+
+    keybinds["9"] = () => handle_zoom("in")
+    keybinds["0"] = () => handle_zoom("out")
+
+    keybinds["w"] = () => handle_pan("up",    speed_a())
+    keybinds["a"] = () => handle_pan("left",  speed_a())
+    keybinds["s"] = () => handle_pan("down",  speed_a())
+    keybinds["d"] = () => handle_pan("right", speed_a())
+
+    keybinds["W"] = () => handle_pan("up",    speed_b())
+    keybinds["A"] = () => handle_pan("left",  speed_b())
+    keybinds["S"] = () => handle_pan("down",  speed_b())
+    keybinds["D"] = () => handle_pan("right", speed_b())
+
+    const controls_table = document.getElementById("controlsTable").lastElementChild
+
+    controls_table.insertAdjacentHTML("beforeBegin",`
+        <tr>
+            <td>Zoom in/out</td>
+            <td>
+                <kbd>9</kbd>/
+                <kbd>0</kbd>
+            </td>
+        </tr>
+        <tr>
+            <td>Pan</td>
+            <td>
+                <kbd>W</kbd>
+                <kbd>A</kbd>
+                <kbd>S</kbd>
+                <kbd>D</kbd>
+            </td>
+        </tr>
+        <tr>
+            <td>Pan (fast)</td>
+            <td>
+                <kbd>Shift</kbd> + 
+                <kbd>W</kbd>
+                <kbd>A</kbd>
+                <kbd>S</kbd>
+                <kbd>D</kbd>
+            </td>
+        </tr>
+    `)
+    
+    const zoom_data_div = document.createElement("div")
+    document.getElementById("logDiv").appendChild(zoom_data_div)
+
+    const zoom_levels = [
+        0.5,
+        1,
+        2,
+        3,
+        6,
+        12
+    ]
+
+    window.zoom_level = 1
+    window.zoom_panning = [0,0]
+
+    function handle_zoom(direction){
+        switch (direction){
+            case "in":
+                if (!(zoom_level+1 in zoom_levels)) { break; }
+                window.zoom_level += 1
+                break;
+            case "out":
+                if (!(zoom_level-1 in zoom_levels)) { break; }
+                window.zoom_level -= 1
+                break;
+        } 
+        rescale()
+    }
+
+    function handle_pan(direction, speed){
+        switch (direction){
+            case "right":
+                zoom_panning[0] -= speed
+                break;
+            case "left":
+                zoom_panning[0] += speed
+                break;
+            case "up":
+                zoom_panning[1] += speed
+                break;
+            case "down":
+                zoom_panning[1] -= speed
+                break;
+        }   
+        rescale()        
+    }
+
+    function rescale(){
+        log_info()
+
+        const scale = zoom_levels[zoom_level]
+        const x = zoom_panning[0] * (pixelSize * scale)
+        const y = zoom_panning[1] * (pixelSize * scale)
+
+        gameCanvas.style.transform = `translate(${x}px,${y}px) scale(${scale})`
+    }
+
+    function log_info(){
+        // Values are negated to make them more intuitive
+        const x_pan = (-zoom_panning[0]).toString().padEnd(4)
+        const y_pan = (-zoom_panning[1]).toString().padEnd(4)
+
+        zoom_data_div.innerText = ""
+        zoom_data_div.innerText += `Scale: ${zoom_levels[zoom_level]}x\n`
+        zoom_data_div.innerText += `Pan  : ${x_pan}, ${y_pan}`
+    }
+
+    // Redefine to give correct numbers when zoomed
+    window.getMousePos = (canvas, evt) => {
+        if (evt.touches) {
+            evt.preventDefault();
+            evt = evt.touches[0];
+            isMobile = true;
+        }
+        const rect = canvas.getBoundingClientRect();
+
+        let x = (evt.clientX - rect.left) / zoom_levels[zoom_level];
+        let y = (evt.clientY - rect.top)  / zoom_levels[zoom_level];
+
+        x = Math.floor((x / canvas.clientWidth) * (width+1));
+        y = Math.floor((y / canvas.clientHeight) * (height+1));
+
+        return {x:x, y:y};
+    }
+
+    runAfterReset(() => {
+        window.zoom_level = 1
+        rescale()
+    })
+})()