boardgamers · zeitlinger · Sep 28, 2024 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ wbindgen/
 *.cmd/
 *.result.json
 game.json
+node_modules/
diff --git a/README.md b/README.md
@@ -12,8 +12,18 @@
 ### Run local web client
 
 - `cd client`
-- `./wasm-bindgen-macroquad.sh local_client`
-  In the `client` directory, run `basic-http-server .` in `dist/` and open `http://localhost:4000` in a browser.
+- `./build-local.sh local_client`
+- `cd dist`
+- `basic-http-server .`
+- open `http://localhost:4000` in a browser.
+
+### Run remote web client locally
+
+- `cd client`
+- `./build-remote.sh`
+- `cd remote_client/dist`
+- `basic-http-server .`
+- `google-chrome --disable-web-security --user-data-dir=/tmp http://localhost:8612`
 
 ### Server wrapper
 
@@ -24,6 +34,11 @@
 # Notes
 
 - https://stackoverflow.com/questions/40102686/how-to-install-package-with-local-path-by-yarn-it-couldnt-find-package
+- class:d-none={!stateSent}
+
+# Todo
+
+- Add https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js to scripts
 
 ## Boardgamers Mono
 
@@ -43,13 +58,13 @@ old
 .tool-versions
 
 ```
-nodejs 14.21.3
+nodejs 16.x
 pnpm 6.14.1
 ```
 
 ### Bypass npm publish
 
-```
+```diff
 Index: apps/game-server/app/services/engines.ts
 IDEA additional info:
 Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
@@ -71,6 +86,37 @@ diff --git a/apps/game-server/app/services/engines.ts b/apps/game-server/app/ser
  export async function getEngine(name: string, version: number): Promise<Engine> {
 ```
 
+### Set viewer directly
+
+```diff
+Index: apps/api/app/resources.ts
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/apps/api/app/resources.ts b/apps/api/app/resources.ts
+--- a/apps/api/app/resources.ts	(revision 741eecd403ed7c5b38b3b98b1e26be8a502cafc0)
++++ b/apps/api/app/resources.ts	(date 1726922668897)
+@@ -31,7 +31,8 @@
+
+   const viewer: ViewerInfo =
+     gameInfo?.viewer?.alternate?.url && ctx.query.alternate === "1" ? gameInfo?.viewer.alternate : gameInfo.viewer;
+-  const viewerUrl = ctx.query.customViewerUrl || viewer.url;
++  const viewerUrl = "/home/gregor/source/clash/client/remote_client/index.js";
+
+   ctx.body = `
+     <html>
+@@ -48,7 +49,9 @@
+         </div>
+       </body>
+       <${"script"} type='text/javascript'>
+-        const gameObj = window.${viewer.topLevelVariable}.launch('#app');
++        const gameObj = window.clash.launch('#app');
+         window.addEventListener('message', event => {
+           console.log('received message from controller', event.data.type, JSON.parse(JSON.stringify(event.data)));
+           switch (event.data.type) {
+```
+
 ## Docs
 
 - [Game API](https://docs.boardgamers.space/guide/engine-api.html)
diff --git a/client/Cargo.lock b/client/Cargo.lock
diff --git a/client/Cargo.toml b/client/Cargo.toml
@@ -2,6 +2,13 @@
 name = "client"
 version = "0.1.0"
 edition = "2021"
+default-run = "local_client"
+
+[profile.dev]
+debug = true
+
+[profile.release]
+debug = true
 
 [features]
 # disable file import and export
@@ -22,7 +29,13 @@ wasm-bindgen = "0.2.83"
 wasm-bindgen-futures = "0.4.33"
 lazy_static = "1.4.0"
 log = "0.4.20"
+async-std = "1.13.0"
+serde-wasm-bindgen = "0.6.5"
 
 [[bin]]
 name = "local_client"
 path = "src/local_client/bin/main.rs"
+
+[[bin]]
+name = "remote_client"
+path = "src/remote_client/bin/main.rs"
diff --git a/client/wasm-bindgen-macroquad.sh → client/build-local.sh b/client/wasm-bindgen-macroquad.sh → client/build-local.sh
@@ -80,7 +80,7 @@ HTML=$(
 		        }
 		    </style>
 		</head>
-		<body style="margin: 0; padding: 0; height: 100vh; width: 100vw;">
+		<body >
 		    <canvas id="glcanvas" tabindex='1' hidden></canvas>
 		    <script src="https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js"></script>
 		    <script type="module">
@@ -110,6 +110,16 @@ HTML=$(
 	END
 )
 
+OUTER=$(
+	cat <<-END
+		<html lang="en">
+  		<body><iframe src="iframe.html">
+
+		</iframe></body>
+		</html>
+	END
+)
+
 TARGET_DIR="target/wasm32-unknown-unknown"
 # Build
 echo "Building $PROJECT_NAME..."
@@ -137,6 +147,7 @@ sed -i "s/imports\['env'\] = __wbg_star0;/return imports.wbg\;/" dist/"$PROJECT_
 sed -i "s/const imports = __wbg_get_imports();/return __wbg_get_imports();/" dist/"$PROJECT_NAME".js
 
 # Create index from the HTML variable
-echo "$HTML" >dist/index.html
+echo "$HTML" >dist/iframe.html
+echo "$OUTER" >dist/index.html
 
 echo "Done!"
diff --git a/client/build-remote.sh b/client/build-remote.sh
@@ -0,0 +1,87 @@
+#!/usr/bin/env bash
+
+set -e
+
+# from https://gist.github.com/nicolas-sabbatini/8af10dddc96be76d2bf24fc671131add
+
+HELP_STRING=$(
+	cat <<-END
+		usage: build_remote.sh [--release]
+	END
+)
+
+die() {
+	echo >&2 "$HELP_STRING"
+	echo >&2
+	echo >&2 "Error: $*"
+	exit 1
+}
+
+# Parse primary commands
+while [[ $# -gt 0 ]]; do
+	key="$1"
+	case $key in
+	--release)
+		RELEASE=yes
+		shift
+		;;
+
+	-h | --help)
+		echo "$HELP_STRING"
+		exit 0
+		;;
+
+	*)
+		POSITIONAL+=("$1")
+		shift
+		;;
+	esac
+done
+
+# Restore positionals
+set -- "${POSITIONAL[@]}"
+[ $# -ne 0 ] && die "too many arguments provided"
+
+PROJECT_NAME=remote_client
+
+TARGET_DIR="target/wasm32-unknown-unknown"
+# Build
+echo "Building $PROJECT_NAME..."
+if [ -n "$RELEASE" ]; then
+	cargo build --release --target wasm32-unknown-unknown --features "wasm"
+	TARGET_DIR="$TARGET_DIR/release"
+else
+	cargo build --target wasm32-unknown-unknown --features "wasm"
+	TARGET_DIR="$TARGET_DIR/debug"
+fi
+
+# Generate bindgen outputs
+echo "Running wasm-bindgen..."
+
+mkdir -p dist
+
+#cp remote_client/*.js dist/
+
+wasm-bindgen $TARGET_DIR/"$PROJECT_NAME".wasm --out-dir dist --target web --no-typescript
+
+echo "Patching wasm-bindgen output..."
+
+# Shim to tie the thing together
+sed -i "s/import \* as __wbg_star0 from 'env';//" dist/"$PROJECT_NAME".js
+sed -i "s/let wasm;/let wasm; export const set_wasm = (w) => wasm = w;/" dist/"$PROJECT_NAME".js
+sed -i "s/imports\['env'\] = __wbg_star0;/return imports.wbg\;/" dist/"$PROJECT_NAME".js
+sed -i "s/const imports = __wbg_get_imports();/return __wbg_get_imports();/" dist/"$PROJECT_NAME".js
+#sed -i "s#import { get_control }.*#import { get_control } from './control.js'#" dist/"$PROJECT_NAME".js
+#rm -rf dist/snippets
+
+pushd remote_client
+mkdir -p dist
+rm -rf dist/*
+npm run build
+cp -r ../assets dist/
+pushd dist
+mv *.wasm client.wasm
+popd
+popd
+
+echo "Done!"
diff --git a/client/remote_client/.tool-versions b/client/remote_client/.tool-versions
@@ -0,0 +1 @@
+nodejs 14.21.3