fixed scaling and fitting on web ui

1 files changed, 28 insertions, 8 deletions

diff --git a/build.zig b/build.zig
index 2794b4c5..b55d1c1a 100644
--- a/build.zig
+++ b/build.zig
@@ -3,6 +3,7 @@ const std = @import("std");
 const AppKind = enum { main, replay };
 const GhosttyArtifact = enum { ghostty, lib };
 const TreeSitterGrammars = enum { disabled, minimal, full };
+const WebFilter = enum { linear, nearest };
 
 pub fn build(b: *std.Build) void {
     const requested_optimize = b.standardOptimizeOption(.{});
@@ -31,6 +32,9 @@ pub fn build(b: *std.Build) void {
     const sdl = b.option(bool, "sdl", "build the SDL3 GPU UI frontend instead of the terminal backend") orelse false;
     const sdl_backend = sdl or is_emscripten;
     const replay_dump = b.option([]const u8, "replay-dump", "embed this replay dump .zon into pardes-replay");
+    const web_render_scale = b.option(f32, "web-render-scale", "browser replay backing/glyph scale") orelse 1.5;
+    if (web_render_scale <= 0) @panic("web-render-scale must be greater than zero");
+    const web_filter = b.option(WebFilter, "web-filter", "browser replay filtering: linear, nearest") orelse .linear;
     const default_tree_sitter_grammars: TreeSitterGrammars = if (is_emscripten) .minimal else .full;
     const tree_sitter_grammars = b.option(TreeSitterGrammars, "tree-sitter", "tree-sitter grammar set: disabled, minimal, full") orelse default_tree_sitter_grammars;
     const syntax_highlighting = tree_sitter_grammars != .disabled;
@@ -193,6 +197,10 @@ pub fn build(b: *std.Build) void {
         .optimize = optimize,
         .root_source_file = ui_root,
     });
+    const ui_sdl_config = b.addOptions();
+    ui_sdl_config.addOption(f32, "web_render_scale", web_render_scale);
+    ui_sdl_config.addOption(WebFilter, "web_filter", web_filter);
+    ui_mod.addOptions("ui_sdl_config", ui_sdl_config);
     ui_mod.addImport("vaxis", vaxis_mod);
     exe.root_module.addImport("ui", ui_mod);
     replay.root_module.addImport("ui", ui_mod);
@@ -396,8 +404,11 @@ pub fn build(b: *std.Build) void {
         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);
 
-        const web = b.addWriteFiles();
-        const html = web.add("replay.html",
+        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>
             \\<head>
@@ -405,20 +416,28 @@ pub fn build(b: *std.Build) void {
             \\  <meta name="viewport" content="width=device-width, initial-scale=1">
             \\  <title>pardes replay</title>
             \\  <style>
-            \\    html, body { margin: 0; min-width: 100%; min-height: 100%; background: #121212; }
-            \\    body { overflow: auto; }
-            \\    canvas { display: block; }
+            \\    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,
+            \\ }
             \\  </style>
             \\</head>
             \\<body>
-            \\  <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
+            \\  <canvas id="canvas" tabindex="0"></canvas>
             \\  <script>
-            \\    window.Module = { canvas: document.getElementById('canvas') };
+            \\    const canvas = document.getElementById('canvas');
+            \\    canvas.addEventListener('contextmenu', (event) => event.preventDefault());
+            \\    canvas.addEventListener('pointerdown', () => canvas.focus({ preventScroll: true }));
+            \\    window.Module = { canvas };
             \\  </script>
             \\  <script src="pardes-replay.js"></script>
             \\</body>
             \\</html>
-        );
+        }) 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);
     }
 
@@ -431,6 +450,7 @@ pub fn build(b: *std.Build) void {
         const run_browser_e2e = b.addSystemCommand(&.{ "node", "tests/browser_replay_e2e.mjs" });
         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);
         test_browser_step.dependOn(&run_browser_e2e.step);
     }