From 6e7b4c650b9ab26f4e963070caa0a8a779fb9d32 Mon Sep 17 00:00:00 2001
From: Tim Wundenberg <tim@wundenbergs.de>
Date: Fri, 3 Apr 2026 23:33:15 +0200
Subject: [PATCH] resize and dataformat

---
 shell.html   | 10 +++++++++-
 src/main.zig | 37 ++++++++++++++++++++++++-------------
 2 files changed, 33 insertions(+), 14 deletions(-)
diff --git a/shell.html b/shell.html
index 26293f3..1327030 100644
--- a/shell.html
+++ b/shell.html
@@ -13,8 +13,16 @@
   <body>
     <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
     <script>
+      var canvas = document.getElementById('canvas');
+      function resizeCanvas() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+      }
+      resizeCanvas();
+      window.addEventListener('resize', resizeCanvas);
+
       var Module = {
-        canvas: document.getElementById('canvas'),
+        canvas: canvas,
         print: function(text) { console.log(text); },
         printErr: function(text) { console.error(text); },
       };
diff --git a/src/main.zig b/src/main.zig
index 5e6e16d..fd8bd2e 100644
--- a/src/main.zig
+++ b/src/main.zig
@@ -3,11 +3,20 @@ const rl = @import("raylib");
 const builtin = @import("builtin");
 const math = std.math;
 
-const SCREEN_W: i32 = 1024;
-const SCREEN_H: i32 = 768;
-const CX: f32 = @as(f32, @floatFromInt(SCREEN_W)) / 2.0;
-const CY: f32 = @as(f32, @floatFromInt(SCREEN_H)) / 2.0;
 const NODE_R: f32 = 42.0;
+
+fn screenW() i32 {
+    return rl.getScreenWidth();
+}
+fn screenH() i32 {
+    return rl.getScreenHeight();
+}
+fn centerX() f32 {
+    return @as(f32, @floatFromInt(screenW())) / 2.0;
+}
+fn centerY() f32 {
+    return @as(f32, @floatFromInt(screenH())) / 2.0;
+}
 const ORBIT_R: f32 = 220.0;
 
 // ── Data model ───────────────────────────────────────────────────────────────
@@ -101,8 +110,8 @@ fn buildVis() void {
                 @as(f32, @floatFromInt(n)) - math.pi / 2.0;
             vis[vis_count] = .{
                 .id = id,
-                .x = CX + r * @cos(angle),
-                .y = CY + r * @sin(angle),
+                .x = centerX() + r * @cos(angle),
+                .y = centerY() + r * @sin(angle),
                 .is_center = false,
             };
             vis_count += 1;
@@ -111,7 +120,7 @@ fn buildVis() void {
         // Drill-down view: selected node at centre, its links in orbit
         const cur_id = nav_stack[nav_depth - 1];
         const cur = findNode(cur_id) orelse return;
-        vis[vis_count] = .{ .id = cur_id, .x = CX, .y = CY, .is_center = true };
+        vis[vis_count] = .{ .id = cur_id, .x = centerX(), .y = centerY(), .is_center = true };
         vis_count += 1;
         const n = cur.links.len;
         if (n > 0) {
@@ -120,8 +129,8 @@ fn buildVis() void {
                     @as(f32, @floatFromInt(n)) - math.pi / 2.0;
                 vis[vis_count] = .{
                     .id = link_id,
-                    .x = CX + ORBIT_R * @cos(angle),
-                    .y = CY + ORBIT_R * @sin(angle),
+                    .x = centerX() + ORBIT_R * @cos(angle),
+                    .y = centerY() + ORBIT_R * @sin(angle),
                     .is_center = false,
                 };
                 vis_count += 1;
@@ -142,6 +151,8 @@ fn visNodeAt(mx: f32, my: f32) ?u8 {
 // ── Per-frame logic ───────────────────────────────────────────────────────────
 
 fn update() void {
+    if (rl.isWindowResized()) buildVis();
+
     const mx: f32 = @floatFromInt(rl.getMouseX());
     const my: f32 = @floatFromInt(rl.getMouseY());
     hovered_id = visNodeAt(mx, my);
@@ -227,7 +238,7 @@ fn drawHUD() void {
         "[B] / right-click to go back"
     else
         "Click a body system to explore";
-    rl.drawText(hint, 10, SCREEN_H - 28, 18, rl.Color.dark_gray);
+    rl.drawText(hint, 10, screenH() - 28, 18, rl.Color.dark_gray);
 
     // Colour legend (top-right)
     const legend = [_]struct { kind: NodeKind, label: [:0]const u8 }{
@@ -237,7 +248,7 @@ fn drawHUD() void {
         .{ .kind = .ingredient, .label = "Ingredient" },
         .{ .kind = .property, .label = "Property" },
     };
-    const lx: i32 = SCREEN_W - 140;
+    const lx: i32 = screenW() - 140;
     var ly: i32 = 10;
     for (legend) |e| {
         rl.drawCircle(lx + 8, ly + 8, 8.0, kindColor(e.kind));
@@ -264,8 +275,8 @@ fn drawFrame() callconv(.c) void {
 }
 
 pub fn main() anyerror!void {
-    rl.setConfigFlags(.{ .msaa_4x_hint = true });
-    rl.initWindow(SCREEN_W, SCREEN_H, "primalwiki");
+    rl.setConfigFlags(.{ .msaa_4x_hint = true, .window_resizable = true });
+    rl.initWindow(1024, 768, "primalwiki");
     defer rl.closeWindow();
 
     const default_font = try rl.getFontDefault();
