fixing mouse drag on web

1 files changed, 32 insertions, 23 deletions

diff --git a/build.zig b/build.zig
index b55d1c1a..f2a691c3 100644
--- a/build.zig
+++ b/build.zig
@@ -208,7 +208,7 @@ pub fn build(b: *std.Build) void {
     // SDL3 backend wiring (`-Dsdl`, or Emscripten replay builds). The sdl package builds SDL3 from source
     // as a static lib + emits the SDL3/ headers; we @cImport those headers in
     // ui_sdl.zig, link the lib, and pull in stb_truetype (for the glyph atlas) and
-    // the embedded Maple Mono NF font. All gated on the flag so a plain `zig build`
+    // the embedded Adwaita Mono font. All gated on the flag so a plain `zig build`
     // (vaxis) never fetches or compiles SDL.
     var sdl_lib_for_wasm: ?*std.Build.Step.Compile = null;
     if (sdl_backend) {
@@ -270,7 +270,7 @@ pub fn build(b: *std.Build) void {
         });
         if (emscripten_libc_file) |libc_file| replay_obj.setLibCFile(libc_file);
 
-        const emcc_path = b.option([]const u8, "emcc", "path to emcc for replay-wasm final link") orelse "/usr/lib/emscripten/emcc";
+        const emcc_path = b.option([]const u8, "emcc", "path to emcc for browser replay final link") orelse "/usr/lib/emscripten/emcc";
         const emcc = b.addSystemCommand(&.{emcc_path});
         emcc.addFileArg(replay_obj.getEmittedBinDirectory().path(b, "pardes-replay_zcu.o"));
         emcc.addFileArg(replay_obj.getEmittedBin());
@@ -372,18 +372,22 @@ pub fn build(b: *std.Build) void {
     const run = b.step("run", "descend to the pardes");
     run.dependOn(&run_exe.step);
 
-    const run_replay = b.addRunArtifact(replay);
-    if (b.args) |args| run_replay.addArgs(args);
-    const replay_step = b.step("replay", "replay a pardes dump: zig build replay -- <dump.zon>");
-    replay_step.dependOn(&run_replay.step);
-
-    const replay_wasm_step = b.step("replay-wasm", "build browser SDL replay (requires -Dtarget=wasm32-emscripten -Dreplay-dump=<dump.zon>)");
+    const replay_step = b.step("replay", if (is_emscripten)
+        "build browser SDL replay (requires -Dreplay-dump=<dump.zon>)"
+    else
+        "replay a pardes dump: zig build replay -- <dump.zon>");
+    const replay_wasm_step = b.step("replay-wasm", "compatibility alias for browser replay; use `zig build replay -Dtarget=wasm32-emscripten -Dreplay-dump=<dump.zon>`");
     if (!is_emscripten) {
-        replay_wasm_step.dependOn(&b.addFail("replay-wasm requires -Dtarget=wasm32-emscripten").step);
+        const run_replay = b.addRunArtifact(replay);
+        if (b.args) |args| run_replay.addArgs(args);
+        replay_step.dependOn(&run_replay.step);
+        replay_wasm_step.dependOn(&b.addFail("replay-wasm requires -Dtarget=wasm32-emscripten; use `zig build replay` for native replay").step);
     } else if (replay_dump == null) {
-        replay_wasm_step.dependOn(&b.addFail("replay-wasm requires -Dreplay-dump=<dump.zon>").step);
+        replay_step.dependOn(&b.addFail("replay requires -Dreplay-dump=<dump.zon> when targeting wasm32-emscripten").step);
+        replay_wasm_step.dependOn(replay_step);
     } else if (emscripten_sysroot == null) {
-        replay_wasm_step.dependOn(&b.addFail("replay-wasm requires an Emscripten sysroot; pass --sysroot <emscripten>/cache/sysroot or set EM_CACHE/EMSDK").step);
+        replay_step.dependOn(&b.addFail("replay requires an Emscripten sysroot; pass --sysroot <emscripten>/cache/sysroot or set EM_CACHE/EMSDK").step);
+        replay_wasm_step.dependOn(replay_step);
     } else {
         const emcc = emcc_for_wasm.?;
         emcc.addPrefixedDirectoryArg("-I", b.path("vendor/stb"));
@@ -401,13 +405,9 @@ pub fn build(b: *std.Build) void {
             "-o",
         });
         const replay_js = emcc.addOutputFileArg("pardes-replay.js");
-        replay_wasm_step.dependOn(&b.addInstallFileWithDir(replay_js, .{ .custom = "web" }, "pardes-replay.js").step);
-        replay_wasm_step.dependOn(&b.addInstallFileWithDir(replay_js.dirname().path(b, "pardes-replay.wasm"), .{ .custom = "web" }, "pardes-replay.wasm").step);
+        replay_step.dependOn(&b.addInstallFileWithDir(replay_js, .{ .custom = "web" }, "pardes-replay.js").step);
+        replay_step.dependOn(&b.addInstallFileWithDir(replay_js.dirname().path(b, "pardes-replay.wasm"), .{ .custom = "web" }, "pardes-replay.wasm").step);
 
-        const canvas_rendering_css = switch (web_filter) {
-            .linear => " image-rendering: auto;",
-            .nearest => " image-rendering: crisp-edges; image-rendering: pixelated;",
-        };
         const replay_html = std.mem.concat(b.allocator, u8, &.{
             \\<!doctype html>
             \\<html>
@@ -419,9 +419,9 @@ pub fn build(b: *std.Build) void {
             \\    html, body { margin: 0; width: 100%; height: 100%; background: #121212; }
             \\    body { overflow: hidden; }
             \\    canvas { display: block; width: 100vw; height: 100vh; outline: none;
-            ,
-            canvas_rendering_css,
-            \\ }
+            \\      image-rendering: crisp-edges; image-rendering: pixelated;
+            \\      -ms-interpolation-mode: nearest-neighbor;
+            \\      transform: translateZ(0); backface-visibility: hidden; }
             \\  </style>
             \\</head>
             \\<body>
@@ -429,7 +429,15 @@ pub fn build(b: *std.Build) void {
             \\  <script>
             \\    const canvas = document.getElementById('canvas');
             \\    canvas.addEventListener('contextmenu', (event) => event.preventDefault());
-            \\    canvas.addEventListener('pointerdown', () => canvas.focus({ preventScroll: true }));
+            \\    canvas.addEventListener('pointerdown', (event) => {
+            \\      canvas.focus({ preventScroll: true });
+            \\      canvas.setPointerCapture?.(event.pointerId);
+            \\    });
+            \\    const releasePointer = (event) => {
+            \\      if (canvas.hasPointerCapture?.(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
+            \\    };
+            \\    canvas.addEventListener('pointerup', releasePointer);
+            \\    canvas.addEventListener('pointercancel', releasePointer);
             \\    window.Module = { canvas };
             \\  </script>
             \\  <script src="pardes-replay.js"></script>
@@ -438,7 +446,8 @@ pub fn build(b: *std.Build) void {
         }) catch @panic("failed to build replay.html");
         const web = b.addWriteFiles();
         const html = web.add("replay.html", replay_html);
-        replay_wasm_step.dependOn(&b.addInstallFileWithDir(html, .{ .custom = "web" }, "replay.html").step);
+        replay_step.dependOn(&b.addInstallFileWithDir(html, .{ .custom = "web" }, "replay.html").step);
+        replay_wasm_step.dependOn(replay_step);
     }
 
     const test_browser_step = b.step("test-browser", "run browser SDL replay screenshot e2e (requires -Dtarget=wasm32-emscripten -Dreplay-dump=<dump.zon>)");
@@ -451,7 +460,7 @@ pub fn build(b: *std.Build) void {
         run_browser_e2e.addArg("zig-out/web");
         run_browser_e2e.addArg("zig-out/browser-replay.png");
         run_browser_e2e.addArg(b.fmt("{d}", .{web_render_scale}));
-        run_browser_e2e.step.dependOn(replay_wasm_step);
+        run_browser_e2e.step.dependOn(replay_step);
         test_browser_step.dependOn(&run_browser_e2e.step);
     }