web output for trees

.gitignore

@@ -5,3 +5,6 @@
 
 # home-manager stuff
 result
+
+# Web output
+dist/*

Makefile

@@ -0,0 +1,7 @@
+web/trees:
+	mkdir -p dist/trees
+	trunk build --release true trees.html --dist dist/trees
+	ln -sf `pwd`/assets dist/trees/assets
+
+web/trees/serve: web/trees
+	cd dist/trees && simple-http-server

flake.nix

@@ -49,6 +49,9 @@
                 wayland # To use the wayland feature
                 # Bug tracking
                 git-bug
+                # wasm builder
+                trunk
+                simple-http-server
               ];
             LD_LIBRARY_PATH = lib.makeLibraryPath [
                 alsa-lib

rust-toolchain.toml

@@ -1,4 +1,4 @@
 [toolchain]
 channel = "nightly-2025-06-16"
 components = [ "rustfmt", "rustc-dev", "cargo", "clippy", "rust-analyzer", "rustc-codegen-cranelift" ]
-targets = [ "x86_64-unknown-linux-gnu" ]
+targets = [ "x86_64-unknown-linux-gnu", "wasm32-unknown-unknown" ]

src/base_game.rs

@@ -5,12 +5,18 @@ pub struct BaseGamePlugin;
 
 impl Plugin for BaseGamePlugin {
     fn build(&self, app: &mut App) {
-        app.add_plugins(DefaultPlugins)
+        app.add_plugins(DefaultPlugins.set(WindowPlugin {
-            .add_plugins(DebuggingPlugin)
+            primary_window: Some(Window {
-            .add_plugins(MeshPickingPlugin)
+                fit_canvas_to_parent: true,
-            .add_plugins(RapierPhysicsPlugin::<NoUserData>::default())
+                ..default()
-            .add_plugins(LoadingPlugin)
+            }),
-            .add_systems(Startup, setup_camera);
+            ..default()
+        }))
+        .add_plugins(DebuggingPlugin)
+        .add_plugins(MeshPickingPlugin)
+        .add_plugins(RapierPhysicsPlugin::<NoUserData>::default())
+        .add_plugins(LoadingPlugin)
+        .add_systems(Startup, setup_camera);
     }
 }
 

src/debug.rs

@@ -14,21 +14,11 @@ impl Plugin for DebuggingPlugin {
         app.init_state::<DebuggingState>()
             .init_resource::<ToolTip>()
             .add_plugins(RapierDebugRenderPlugin::default().disabled())
-            .add_plugins(WireframePlugin::default())
-            .insert_resource(WireframeConfig {
-                global: false,
-                default_color: MAGENTA.into(),
-            })
             .add_systems(Startup, init_debug_ui)
-            .add_systems(OnEnter(DebuggingState::On), enable_wireframe)
-            .add_systems(OnExit(DebuggingState::On), disable_wireframe)
             .add_systems(
                 Update,
                 (
-                    (
+                    (toggle_state_visibility::<DebuggingState>,)
-                        toggle_state_visibility::<DebuggingState>,
-                        toggle_rapier_debug_render,
-                    )
                         .run_if(state_changed::<DebuggingState>),
                     toggle_debug_state.run_if(on_keyboard_press(KeyCode::F12)),
                     (
@@ -40,6 +30,22 @@ impl Plugin for DebuggingPlugin {
                         .run_if(in_state(DebuggingState::On)),
                 ),
             );
+
+        // WebGL2-incompatible systems
+        #[cfg(not(target_arch = "wasm32"))]
+        {
+            app.add_plugins(WireframePlugin::default())
+                .insert_resource(WireframeConfig {
+                    global: false,
+                    default_color: MAGENTA.into(),
+                })
+                .add_systems(
+                    Update,
+                    toggle_rapier_debug_render.run_if(state_changed::<DebuggingState>),
+                )
+                .add_systems(OnEnter(DebuggingState::On), enable_wireframe)
+                .add_systems(OnExit(DebuggingState::On), disable_wireframe);
+        }
     }
 }
 
@@ -99,7 +105,7 @@ fn toggle_debug_state(
         On => Off,
         Off => On,
     });
-    debug!("Toggling debug state: {:?} -> {:?}", curr, next);
+    info!("Toggling debug state: {:?} -> {:?}", curr, next);
 }
 
 /// Simple system that enables/disables rapier debug visuals when the debugging state changes

trees.css

@@ -0,0 +1,4 @@
+canvas {
+    width: 90%;
+    height: 90%;
+}

trees.html

@@ -0,0 +1,10 @@
+<html>
+  <head>
+      <link
+      data-trunk
+      rel="css"
+      href="trees.css"
+    />
+    <link data-trunk rel="rust" data-bin="trees"/>
+  </head>
+</html>