release the client into the wild

5 files changed, 79 insertions, 43 deletions

diff --git a/html/Makefile b/html/Makefile
index 165716f5..9e40f292 100644
--- a/html/Makefile
+++ b/html/Makefile
@@ -52,7 +52,7 @@ BOSSES := kraken tyrant
 BOSS_SITES := $(addprefix boss/,$(BOSSES:=.html))
 BOSS_SITES_HTML := $(addprefix $(BUILDDIR)/,$(BOSS_SITES))
 
-SITES := index.md rules.md cards.md maps.md tools.html decks.md boss/ai-companion.html boss/index.html
+SITES := index.md play.md rules.md cards.md maps.md tools.html decks.md boss/ai-companion.html boss/index.html
 HTML := $(addprefix $(BUILDDIR)/,$(SITES:.md=.html)) $(BOSS_SITES_HTML)
 
 BLOG_SOURCEDIR := $(HTML_ROOT)/blog
@@ -74,6 +74,7 @@ all: $(HTML) $(RULES_HTML) maps misc $(BLOG_POSTS_HTML)
 
 misc: $(BUILDDIR)/latex-build $(BUILDDIR)/cards-data $(FILES_TO_COPY_TARGETS) \
       $(BUILDDIR)/webtools.wasm $(BUILDDIR)/boss/ai-companion.wasm \
+      $(BUILDDIR)/client.wasm \
       $(BUILDDIR)/feed.rss js/wasm_exec.js
 
 js/wasm_exec.js: $(shell go env GOROOT)/lib/wasm/wasm_exec.js
diff --git a/html/feed/items/client-released.xml b/html/feed/items/client-released.xml
new file mode 100644
index 00000000..7575e129
--- /dev/null
+++ b/html/feed/items/client-released.xml
@@ -0,0 +1,9 @@
+<item>
+<title>Client Released</title>
+<description>The first usable version of a digital client for muhq's game is now available.
+Playing a game versus the kraken and multiple smaller challenges are supported.
+Overall the client is alpha-quality at best and probably full of bugs.
+Do not hesitate to report bugs and request improvements.</description>
+<link>https://muhq.space/muhqs-game/html/build/play.html</link>
+<pubDate>Tue, 12 Aug 2025 09:33:35 +0200</pubDate>
+</item>
diff --git a/html/index.md b/html/index.md
index 2ad1fa9b..6ffaff11 100644
--- a/html/index.md
+++ b/html/index.md
@@ -1,7 +1,7 @@
 % Muhq's Game (working title)
 
 <hr>
-[rules](rules.html) [cards](cards.html) [decks](decks.html) [maps](maps.html) [web-tools](tools.html) [blog](blog/) [feed](feed.rss)
+[play](play.html) [rules](rules.html) [cards](cards.html) [decks](decks.html) [maps](maps.html) [web-tools](tools.html) [blog](blog/) [feed](feed.rss)
 <hr>
 
 Muhq's game is a mashup of multiple game mechanics I enjoy.
diff --git a/html/play.md b/html/play.md
new file mode 100644
index 00000000..75aad3db
--- /dev/null
+++ b/html/play.md
@@ -0,0 +1,13 @@
+% Play Muhq's Game
+
+## Online
+
+The implementation of muhq's game is a work in progress.
+However, there exists a client implementation usable in a modern webbrowser.
+
+[Play online](wasm.html?wasm=client.wasm)
+
+## In Paper
+
+A collection of all required material and an introsuction will be available soon.
+In the meantime you can read the [comprehensive rules](rules.html) print the [card sets](cards.html#sets) and [maps](maps.html) you are interested in.
diff --git a/html/wasm.html b/html/wasm.html
index 7b135308..939f96eb 100644
--- a/html/wasm.html
+++ b/html/wasm.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <!--
 Copyright 2018 The Go Authors. All rights reserved.
+Copyright 2025 Florian Fischer
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
@@ -9,56 +10,68 @@ license that can be found in the LICENSE file.
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-	<title>Go wasm</title>
+	<!-- <title>Go wasm</title> -->
 	<script src="eruda.js"></script>
 	<script>eruda.init();</script>
-</head>
-
-<body>
 	<script src="js/wasm_exec.js"></script>
-	<script>
-		if (!WebAssembly.instantiateStreaming) { // polyfill
-			WebAssembly.instantiateStreaming = async (resp, importObject) => {
-				const source = await (await resp).arrayBuffer();
-				return await WebAssembly.instantiate(source, importObject);
-			};
-		}
+	<style>
+.loader {
+	border: 16px solid #f3f3f3;
+	border-top: 16px solid;
+	border-radius: 50%;
+	width: 120px;
+	height: 120px;
+	animation: spin 2s linear infinite;
+}
 
-		const go = new Go();
-		let mod, inst;
-		let url = new URLSearchParams(window.location.search).get("wasm");
-		if (!url) {
-			// url = "dummy-ui/dummy-ui.wasm";
-			// url = "client/client.wasm";
-			url = "ai-companion.wasm";
-		}
-		
-		
-		WebAssembly.instantiateStreaming(fetch(url), go.importObject).then((result) => {
-			document.getElementById("wasmName").innerHTML = url;
-			mod = result.module;
-			inst = result.instance;
-			document.getElementById("runButton").disabled = false;
-		}).catch((err) => {
-			console.error(err);
-		});
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
 
-		async function run() {
-			let wN = document.getElementById("wasmName");
-			let rB = document.getElementById("runButton");
-			document.body.removeChild(wN);
-			document.body.removeChild(rB);
+.container {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+	</style>
+</head>
 
-			console.clear();
-			await go.run(inst);
-		}
-	</script>
+<body>
 	<div style="width:0; height:0; overflow:hidden;">
 	<input id="hiddenInput"></input>
 	</div>
-	<div id="wasmName"></div>
+	<div class="container" id="loader">
+		<div class="loader"></div>
+		<div id="url"></div>
+	</div>
 
-	<button onClick="run();" id="runButton" disabled>Run</button>
-</body>
+	<script>
+if (!WebAssembly.instantiateStreaming) { // polyfill
+	WebAssembly.instantiateStreaming = async (resp, importObject) => {
+		const source = await (await resp).arrayBuffer();
+		return await WebAssembly.instantiate(source, importObject);
+	};
+}
 
+const go = new Go();
+let mod, inst;
+let url = new URLSearchParams(window.location.search).get("wasm");
+if (!url) {
+	url = "client.wasm";
+}
+document.getElementById("url").innerHTML = url;
+
+WebAssembly.instantiateStreaming(fetch(url), go.importObject).then((result) => {
+	mod = result.module;
+	inst = result.instance;
+	let loader = document.getElementById("loader");
+	loader.remove();
+	go.run(inst);
+}).catch((err) => {
+	console.error(err);
+});
+	</script>
+</body>
 </html>