From 951bd51f1258416b8bae2a046640b96c98e1c9f0 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Sat, 7 Mar 2026 00:35:21 +0100
Subject: [PATCH] Add WebAssembly build support via Emscripten

- Cargo.toml: gate `wayland` feature behind cfg(not(wasm32)) so the
  dependency resolves correctly for both native and web targets
- .cargo/config.toml: WASM linker flags (ASYNCIFY, GLFW, memory growth)
- build_web.sh: sets required EMCC_CFLAGS, builds, copies artefacts to web/;
  accepts --serve to start a local HTTP server
- web/index.html: minimal Emscripten shell with canvas and status line
- .gitignore: exclude generated web/*.js and web/*.wasm artefacts
- README: document web build prerequisites and usage

ASYNCIFY lets the native while-loop main loop run unchanged in the browser.
Build output: ~267 KB JS + ~458 KB WASM.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .cargo/config.toml | 11 +++++++++++
 .gitignore         |  2 ++
 Cargo.toml         |  6 ++++++
 README.md          | 11 +++++++++++
 build_web.sh       | 24 +++++++++++++++++++++++
 web/index.html     | 47 ++++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 101 insertions(+)
 create mode 100644 .cargo/config.toml
 create mode 100755 build_web.sh
 create mode 100644 web/index.html

diff --git a/.cargo/config.toml b/.cargo/config.toml
new file mode 100644
index 0000000..7259cf1
--- /dev/null
+++ b/.cargo/config.toml
@@ -0,0 +1,11 @@
+[target.wasm32-unknown-emscripten]
+rustflags = [
+    "-C", "link-arg=-sUSE_GLFW=3",
+    "-C", "link-arg=-sASYNCIFY",
+    "-C", "link-arg=-sASYNCIFY_STACK_SIZE=1048576",
+    "-C", "link-arg=-sGL_ENABLE_GET_PROC_ADDRESS=1",
+    "-C", "link-arg=-sWASM=1",
+    "-C", "link-arg=-sALLOW_MEMORY_GROWTH=1",
+    "-C", "link-arg=-sINITIAL_MEMORY=67108864",
+    "-C", "link-arg=-sFULL_ES3=1",
+]
diff --git a/.gitignore b/.gitignore
index ea8c4bf..192eff6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
 /target
+web/*.js
+web/*.wasm
diff --git a/Cargo.toml b/Cargo.toml
index 5028925..f1ed811 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5,8 +5,14 @@ edition = "2024"
 
 [dependencies]
 rand = "0.10.0"
+
+# wayland is a Linux display-server feature; excluded for WASM builds.
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
 raylib = { version = "5.5.1", features = ["wayland"] }
 
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+raylib = { version = "5.5.1" }
+
 [profile.release]
 opt-level = 3
 lto = "thin"
diff --git a/README.md b/README.md
index 8aebaaf..9ef4065 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,17 @@ cargo run
 cargo run --release
 ```
 
+**Web (WebAssembly)**
+
+Prerequisites: [Emscripten SDK](https://emscripten.org/docs/getting_started/downloads.html) activated in your shell.
+
+```sh
+./build_web.sh           # produces web/*.js + web/*.wasm
+./build_web.sh --serve   # build then serve at http://localhost:8080
+```
+
+The web build uses ASYNCIFY so the main game loop requires no changes between native and browser targets.
+
 **Tests**
 
 ```sh
diff --git a/build_web.sh b/build_web.sh
new file mode 100755
index 0000000..76ee9a5
--- /dev/null
+++ b/build_web.sh
@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+# Build the endless runner for WebAssembly via Emscripten.
+# Usage: ./build_web.sh [--serve]
+set -euo pipefail
+
+# Flags required by raylib-sys for WASM compilation.
+export EMCC_CFLAGS="-O3 -sUSE_GLFW=3 -sASSERTIONS=1 -sWASM=1 -sASYNCIFY -sGL_ENABLE_GET_PROC_ADDRESS=1"
+
+echo "Building for wasm32-unknown-emscripten..."
+cargo build --target wasm32-unknown-emscripten --release
+
+OUT=target/wasm32-unknown-emscripten/release
+
+echo "Copying build artefacts to web/..."
+cp "$OUT/endless_runner.js"   web/
+cp "$OUT/endless_runner.wasm" web/
+
+echo ""
+echo "Build complete. Output in web/"
+
+if [[ "${1-}" == "--serve" ]]; then
+  echo "Serving at http://localhost:8080"
+  python3 -m http.server 8080 --directory web
+fi
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..0c84df9
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Endless Runner</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      background: #16182e;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      font-family: monospace;
+      color: #a0b8ff;
+    }
+    #canvas {
+      display: block;
+      border: 1px solid #3050a0;
+    }
+    #status {
+      margin-top: 12px;
+      font-size: 13px;
+      opacity: 0.6;
+    }
+  </style>
+</head>
+<body>
+  <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+  <div id="status">Loading…</div>
+
+  <script>
+    var statusEl = document.getElementById('status');
+    var Module = {
+      canvas: document.getElementById('canvas'),
+      onRuntimeInitialized: function() {
+        statusEl.textContent = 'SPACE / W / ↑ to jump';
+      },
+      print: function(text) { console.log(text); },
+      printErr: function(text) { console.error(text); },
+    };
+  </script>
+  <script src="endless_runner.js"></script>
+</body>
+</html>