Dust off WASM build support

Building.md

@@ -278,6 +278,32 @@ cp /usr/x86_64-w64-mingw32/bin/SDL*.dll bin/
 SDL2_ttf requires libfreetype, you can get its DLL here:
 https://github.com/ubawurinna/freetype-windows-binaries
 
+# WebAssembly
+
+There is some **experimental** support for a WebAssembly build of Sketchy Maze
+since the very early days. Early on, the game "basically worked" but performance
+could be awful: playing levels was OK but clicking and dragging in the editor
+would cause your browser to freeze. Then for a time, the game wouldn't even get
+that far. Recently (December 2023), WASM performance seems much better but there
+are strange graphical glitches:
+
+* On the title screen, the example levels in the background load OK and their
+  doodads will wander around and performance seems OK.
+* But during Play Mode, only the menu bar draws but nothing else on the screen.
+* In the Level Editor, the entire screen is white BUT tooltips will appear and
+  the menu bar can be clicked on (blindly) and the drop-down menus do appear.
+  Some popups like the Palette Editor can be invoked and draw to varying degrees
+  of success.
+
+Some tips to get a WASM build to work:
+
+* For fonts: symlink it so that ./wasm/fonts points to ./assets/fonts.
+* You may need an updated wasm_exec.js shim from Go. On Fedora,
+  `dnf install golang-misc` and `cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .`
+  from the wasm/ folder.
+* Run `make wasm` to build the WASM binary and `make wasm-serve` to run a simple
+  Go web server to serve it from.
+
 # Old Docs
 
 ## Build Tags

pkg/fps.go

@@ -8,9 +8,9 @@ import (
 	"git.kirsle.net/SketchyMaze/doodle/pkg/balance"
 	"git.kirsle.net/SketchyMaze/doodle/pkg/collision"
 	"git.kirsle.net/SketchyMaze/doodle/pkg/drawtool"
+	"git.kirsle.net/SketchyMaze/doodle/pkg/native"
 	"git.kirsle.net/SketchyMaze/doodle/pkg/uix"
 	"git.kirsle.net/go/render"
-	"git.kirsle.net/go/render/sdl"
 	"git.kirsle.net/go/ui"
 )
 
@@ -65,10 +65,7 @@ func (d *Doodle) DrawDebugOverlay() {
 	}
 
 	// Get the size of cached SDL2 textures at the render engine level.
-	var texCount = "n/a"
+	var texCount = native.CountTextures(d.Engine)
-	if sdl, ok := d.Engine.(*sdl.Renderer); ok {
-		texCount = fmt.Sprintf("%d", sdl.CountTextures())
-	}
 
 	var (
 		darken  = balance.DebugStrokeDarken

pkg/level/giant_screenshot/regular_screenshot.go

@@ -8,6 +8,7 @@ import (
 	"image/png"
 	"os"
 	"path/filepath"
+	"runtime"
 	"time"
 
 	"git.kirsle.net/SketchyMaze/doodle/pkg/balance"
@@ -21,6 +22,11 @@ import (
 
 // CroppedScreenshot returns a rendered RGBA image of the level.
 func CroppedScreenshot(lvl *level.Level, viewport render.Rect) (image.Image, error) {
+	// Not for WASM for now.
+	if runtime.GOOS == "js" {
+		return nil, errors.New("screenshots not yet supported for WASM")
+	}
+
 	// Lock this to one user at a time.
 	if locked {
 		return nil, errors.New("a screenshot is still being processed; try later...")

pkg/native/engine_sdl.go

@@ -5,6 +5,7 @@ package native
 
 import (
 	"errors"
+	"fmt"
 	"image"
 
 	"git.kirsle.net/SketchyMaze/doodle/pkg/shmem"
@@ -33,6 +34,15 @@ func CopyToClipboard(text string) error {
 	return errors.New("not supported")
 }
 
+// CountTextures returns the count of loaded SDL2 textures, for the F3 debug overlay, or "n/a"
+func CountTextures(e render.Engine) string {
+	var texCount = "n/a"
+	if sdl, ok := e.(*sdl.Renderer); ok {
+		texCount = fmt.Sprintf("%d", sdl.CountTextures())
+	}
+	return texCount
+}
+
 /*
 TextToImage takes an SDL2_TTF texture and makes it into a Go image.
 

pkg/native/engine_wasm.go

@@ -4,6 +4,7 @@
 package native
 
 import (
+	"errors"
 	"image"
 
 	"git.kirsle.net/go/render"
@@ -20,3 +21,7 @@ func TextToImage(e render.Engine, text render.Text) (image.Image, error) {
 func CopyToClipboard(text string) error {
 	return errors.New("not supported on WASM")
 }
+
+func CountTextures(e render.Engine) string {
+	return "n/a"
+}

wasm/main_wasm.go

@@ -1,3 +1,4 @@
+//go:build js && wasm
 // +build js,wasm
 
 package main
@@ -38,7 +39,7 @@ func main() {
 	game.SetWindowSize(w, h)
 
 	// game.Goto(&doodle.GUITestScene{})
-	game.Goto(&doodle.EditorScene{})
+	// game.Goto(&doodle.EditorScene{})
 
 	game.Run()
 }

wasm/server.go

@@ -1,3 +1,4 @@
+//go:build disabled
 // +build disabled
 
 package main
@@ -9,15 +10,13 @@ import (
 	"net/http"
 	"os/exec"
 	"path/filepath"
-
-	"github.com/fsnotify/fsnotify"
 )
 
 func main() {
 	const wasm = "/doodle.wasm"
 
 	// Watch the dev directory for changes.
-	go watchChanges()
+	// go watchChanges()
 
 	http.Handle("/", http.FileServer(http.Dir(".")))
 	http.HandleFunc(wasm, func(w http.ResponseWriter, r *http.Request) {
@@ -41,6 +40,7 @@ func onChange() {
 
 // Watch the Doodle source tree for changes to Go files and rebuild
 // the wasm binary automatically.
+/*
 func watchChanges() {
 	watcher, err := fsnotify.NewWatcher()
 	if err != nil {
@@ -86,6 +86,7 @@ func watchChanges() {
 	}
 	<-done
 }
+*/
 
 // Crawl the filesystem and return paths with Go files.
 func crawlDirectory(root string) []string {

wasm/wasm_exec.js

@@ -2,53 +2,25 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+"use strict";
+
 (() => {
-	// Map multiple JavaScript environments to a single common API,
-	// preferring web standards over Node.js API.
-	//
-	// Environments considered:
-	// - Browsers
-	// - Node.js
-	// - Electron
-	// - Parcel
-
-	if (typeof global !== "undefined") {
-		// global already exists
-	} else if (typeof window !== "undefined") {
-		window.global = window;
-	} else if (typeof self !== "undefined") {
-		self.global = self;
-	} else {
-		throw new Error("cannot export Go (neither global, window nor self is defined)");
-	}
-
-	if (!global.require && typeof require !== "undefined") {
-		global.require = require;
-	}
-
-	if (!global.fs && global.require) {
-		const fs = require("fs");
-		if (Object.keys(fs) !== 0) {
-			global.fs = fs;
-		}
-	}
-
 	const enosys = () => {
 		const err = new Error("not implemented");
 		err.code = "ENOSYS";
 		return err;
 	};
 
-	if (!global.fs) {
+	if (!globalThis.fs) {
 		let outputBuf = "";
-		global.fs = {
+		globalThis.fs = {
 			constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
 			writeSync(fd, buf) {
 				outputBuf += decoder.decode(buf);
 				const nl = outputBuf.lastIndexOf("\n");
 				if (nl != -1) {
-					console.log(outputBuf.substr(0, nl));
+					console.log(outputBuf.substring(0, nl));
-					outputBuf = outputBuf.substr(nl + 1);
+					outputBuf = outputBuf.substring(nl + 1);
 				}
 				return buf.length;
 			},
@@ -86,8 +58,8 @@
 		};
 	}
 
-	if (!global.process) {
+	if (!globalThis.process) {
-		global.process = {
+		globalThis.process = {
 			getuid() { return -1; },
 			getgid() { return -1; },
 			geteuid() { return -1; },
@@ -101,38 +73,26 @@
 		}
 	}
 
-	if (!global.crypto) {
+	if (!globalThis.crypto) {
-		const nodeCrypto = require("crypto");
+		throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)");
-		global.crypto = {
-			getRandomValues(b) {
-				nodeCrypto.randomFillSync(b);
-			},
-		};
 	}
 
-	if (!global.performance) {
+	if (!globalThis.performance) {
-		global.performance = {
+		throw new Error("globalThis.performance is not available, polyfill required (performance.now only)");
-			now() {
-				const [sec, nsec] = process.hrtime();
-				return sec * 1000 + nsec / 1000000;
-			},
-		};
 	}
 
-	if (!global.TextEncoder) {
+	if (!globalThis.TextEncoder) {
-		global.TextEncoder = require("util").TextEncoder;
+		throw new Error("globalThis.TextEncoder is not available, polyfill required");
 	}
 
-	if (!global.TextDecoder) {
+	if (!globalThis.TextDecoder) {
-		global.TextDecoder = require("util").TextDecoder;
+		throw new Error("globalThis.TextDecoder is not available, polyfill required");
 	}
 
-	// End of polyfills for common API.
-
 	const encoder = new TextEncoder("utf-8");
 	const decoder = new TextDecoder("utf-8");
 
-	global.Go = class {
+	globalThis.Go = class {
 		constructor() {
 			this.argv = ["js"];
 			this.env = {};
@@ -153,6 +113,10 @@
 				this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true);
 			}
 
+			const setInt32 = (addr, v) => {
+				this.mem.setUint32(addr + 0, v, true);
+			}
+
 			const getInt64 = (addr) => {
 				const low = this.mem.getUint32(addr + 0, true);
 				const high = this.mem.getInt32(addr + 4, true);
@@ -246,7 +210,10 @@
 
 			const timeOrigin = Date.now() - performance.now();
 			this.importObject = {
-				go: {
+				_gotest: {
+					add: (a, b) => a + b,
+				},
+				gojs: {
 					// Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
 					// may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
 					// function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
@@ -254,6 +221,7 @@
 
 					// func wasmExit(code int32)
 					"runtime.wasmExit": (sp) => {
+						sp >>>= 0;
 						const code = this.mem.getInt32(sp + 8, true);
 						this.exited = true;
 						delete this._inst;
@@ -266,6 +234,7 @@
 
 					// func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
 					"runtime.wasmWrite": (sp) => {
+						sp >>>= 0;
 						const fd = getInt64(sp + 8);
 						const p = getInt64(sp + 16);
 						const n = this.mem.getInt32(sp + 24, true);
@@ -274,16 +243,19 @@
 
 					// func resetMemoryDataView()
 					"runtime.resetMemoryDataView": (sp) => {
+						sp >>>= 0;
 						this.mem = new DataView(this._inst.exports.mem.buffer);
 					},
 
 					// func nanotime1() int64
 					"runtime.nanotime1": (sp) => {
+						sp >>>= 0;
 						setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000);
 					},
 
-					// func walltime1() (sec int64, nsec int32)
+					// func walltime() (sec int64, nsec int32)
-					"runtime.walltime1": (sp) => {
+					"runtime.walltime": (sp) => {
+						sp >>>= 0;
 						const msec = (new Date).getTime();
 						setInt64(sp + 8, msec / 1000);
 						this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true);
@@ -291,6 +263,7 @@
 
 					// func scheduleTimeoutEvent(delay int64) int32
 					"runtime.scheduleTimeoutEvent": (sp) => {
+						sp >>>= 0;
 						const id = this._nextCallbackTimeoutID;
 						this._nextCallbackTimeoutID++;
 						this._scheduledTimeouts.set(id, setTimeout(
@@ -303,13 +276,14 @@
 									this._resume();
 								}
 							},
-							getInt64(sp + 8) + 1, // setTimeout has been seen to fire up to 1 millisecond early
+							getInt64(sp + 8),
 						));
 						this.mem.setInt32(sp + 16, id, true);
 					},
 
 					// func clearTimeoutEvent(id int32)
 					"runtime.clearTimeoutEvent": (sp) => {
+						sp >>>= 0;
 						const id = this.mem.getInt32(sp + 8, true);
 						clearTimeout(this._scheduledTimeouts.get(id));
 						this._scheduledTimeouts.delete(id);
@@ -317,11 +291,13 @@
 
 					// func getRandomData(r []byte)
 					"runtime.getRandomData": (sp) => {
+						sp >>>= 0;
 						crypto.getRandomValues(loadSlice(sp + 8));
 					},
 
 					// func finalizeRef(v ref)
 					"syscall/js.finalizeRef": (sp) => {
+						sp >>>= 0;
 						const id = this.mem.getUint32(sp + 8, true);
 						this._goRefCounts[id]--;
 						if (this._goRefCounts[id] === 0) {
@@ -334,47 +310,55 @@
 
 					// func stringVal(value string) ref
 					"syscall/js.stringVal": (sp) => {
+						sp >>>= 0;
 						storeValue(sp + 24, loadString(sp + 8));
 					},
 
 					// func valueGet(v ref, p string) ref
 					"syscall/js.valueGet": (sp) => {
+						sp >>>= 0;
 						const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16));
-						sp = this._inst.exports.getsp(); // see comment above
+						sp = this._inst.exports.getsp() >>> 0; // see comment above
 						storeValue(sp + 32, result);
 					},
 
 					// func valueSet(v ref, p string, x ref)
 					"syscall/js.valueSet": (sp) => {
+						sp >>>= 0;
 						Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
 					},
 
 					// func valueDelete(v ref, p string)
 					"syscall/js.valueDelete": (sp) => {
+						sp >>>= 0;
 						Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16));
 					},
 
 					// func valueIndex(v ref, i int) ref
 					"syscall/js.valueIndex": (sp) => {
+						sp >>>= 0;
 						storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
 					},
 
 					// valueSetIndex(v ref, i int, x ref)
 					"syscall/js.valueSetIndex": (sp) => {
+						sp >>>= 0;
 						Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
 					},
 
 					// func valueCall(v ref, m string, args []ref) (ref, bool)
 					"syscall/js.valueCall": (sp) => {
+						sp >>>= 0;
 						try {
 							const v = loadValue(sp + 8);
 							const m = Reflect.get(v, loadString(sp + 16));
 							const args = loadSliceOfValues(sp + 32);
 							const result = Reflect.apply(m, v, args);
-							sp = this._inst.exports.getsp(); // see comment above
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
 							storeValue(sp + 56, result);
 							this.mem.setUint8(sp + 64, 1);
 						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
 							storeValue(sp + 56, err);
 							this.mem.setUint8(sp + 64, 0);
 						}
@@ -382,14 +366,16 @@
 
 					// func valueInvoke(v ref, args []ref) (ref, bool)
 					"syscall/js.valueInvoke": (sp) => {
+						sp >>>= 0;
 						try {
 							const v = loadValue(sp + 8);
 							const args = loadSliceOfValues(sp + 16);
 							const result = Reflect.apply(v, undefined, args);
-							sp = this._inst.exports.getsp(); // see comment above
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
 							storeValue(sp + 40, result);
 							this.mem.setUint8(sp + 48, 1);
 						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
 							storeValue(sp + 40, err);
 							this.mem.setUint8(sp + 48, 0);
 						}
@@ -397,14 +383,16 @@
 
 					// func valueNew(v ref, args []ref) (ref, bool)
 					"syscall/js.valueNew": (sp) => {
+						sp >>>= 0;
 						try {
 							const v = loadValue(sp + 8);
 							const args = loadSliceOfValues(sp + 16);
 							const result = Reflect.construct(v, args);
-							sp = this._inst.exports.getsp(); // see comment above
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
 							storeValue(sp + 40, result);
 							this.mem.setUint8(sp + 48, 1);
 						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
 							storeValue(sp + 40, err);
 							this.mem.setUint8(sp + 48, 0);
 						}
@@ -412,11 +400,13 @@
 
 					// func valueLength(v ref) int
 					"syscall/js.valueLength": (sp) => {
+						sp >>>= 0;
 						setInt64(sp + 16, parseInt(loadValue(sp + 8).length));
 					},
 
 					// valuePrepareString(v ref) (ref, int)
 					"syscall/js.valuePrepareString": (sp) => {
+						sp >>>= 0;
 						const str = encoder.encode(String(loadValue(sp + 8)));
 						storeValue(sp + 16, str);
 						setInt64(sp + 24, str.length);
@@ -424,17 +414,20 @@
 
 					// valueLoadString(v ref, b []byte)
 					"syscall/js.valueLoadString": (sp) => {
+						sp >>>= 0;
 						const str = loadValue(sp + 8);
 						loadSlice(sp + 16).set(str);
 					},
 
 					// func valueInstanceOf(v ref, t ref) bool
 					"syscall/js.valueInstanceOf": (sp) => {
+						sp >>>= 0;
 						this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0);
 					},
 
 					// func copyBytesToGo(dst []byte, src ref) (int, bool)
 					"syscall/js.copyBytesToGo": (sp) => {
+						sp >>>= 0;
 						const dst = loadSlice(sp + 8);
 						const src = loadValue(sp + 32);
 						if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
@@ -449,6 +442,7 @@
 
 					// func copyBytesToJS(dst ref, src []byte) (int, bool)
 					"syscall/js.copyBytesToJS": (sp) => {
+						sp >>>= 0;
 						const dst = loadValue(sp + 8);
 						const src = loadSlice(sp + 16);
 						if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
@@ -469,6 +463,9 @@
 		}
 
 		async run(instance) {
+			if (!(instance instanceof WebAssembly.Instance)) {
+				throw new Error("Go.run: WebAssembly.Instance expected");
+			}
 			this._inst = instance;
 			this.mem = new DataView(this._inst.exports.mem.buffer);
 			this._values = [ // JS values that Go currently has references to, indexed by reference id
@@ -477,7 +474,7 @@
 				null,
 				true,
 				false,
-				global,
+				globalThis,
 				this,
 			];
 			this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id
@@ -486,7 +483,7 @@
 				[null, 2],
 				[true, 3],
 				[false, 4],
-				[global, 5],
+				[globalThis, 5],
 				[this, 6],
 			]);
 			this._idPool = [];   // unused ids that have been garbage collected
@@ -527,6 +524,13 @@
 				offset += 8;
 			});
 
+			// The linker guarantees global data starts from at least wasmMinDataAddr.
+			// Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
+			const wasmMinDataAddr = 4096 + 8192;
+			if (offset >= wasmMinDataAddr) {
+				throw new Error("total length of command line and environment variables exceeds limit");
+			}
+
 			this._inst.exports.run(argc, argv);
 			if (this.exited) {
 				this._resolveExitPromise();
@@ -554,35 +558,4 @@
 			};
 		}
 	}
-
-	if (
-		global.require &&
-		global.require.main === module &&
-		global.process &&
-		global.process.versions &&
-		!global.process.versions.electron
-	) {
-		if (process.argv.length < 3) {
-			console.error("usage: go_js_wasm_exec [wasm binary] [arguments]");
-			process.exit(1);
-		}
-
-		const go = new Go();
-		go.argv = process.argv.slice(2);
-		go.env = Object.assign({ TMPDIR: require("os").tmpdir() }, process.env);
-		go.exit = process.exit;
-		WebAssembly.instantiate(fs.readFileSync(process.argv[2]), go.importObject).then((result) => {
-			process.on("exit", (code) => { // Node.js exits if no event handler is pending
-				if (code === 0 && !go.exited) {
-					// deadlock, make Go print error and stack traces
-					go._pendingEvent = { id: 0 };
-					go._resume();
-				}
-			});
-			return go.run(result.instance);
-		}).catch((err) => {
-			console.error(err);
-			process.exit(1);
-		});
-	}
 })();