Skip to content

Commit c14f971

Browse files
zeitlingerzeitlinger
authored
create Remote client (#55)
* remote local client * remote local client * remote local client * remote local client * controlled players * remote client state * get player * read wasm url dynamically * add glcanvas dynamically * clippy
1 parent 0834ec9 commit c14f971

21 files changed

+1442
-155
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ wbindgen/
77
*.cmd/
88
*.result.json
99
game.json
10+
node_modules/

‎README.md

+50-4
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,18 @@
1212
### Run local web client
1313

1414
- `cd client`
15-
- `./wasm-bindgen-macroquad.sh local_client`
16-
In the `client` directory, run `basic-http-server .` in `dist/` and open `http://localhost:4000` in a browser.
15+
- `./build-local.sh local_client`
16+
- `cd dist`
17+
- `basic-http-server .`
18+
- open `http://localhost:4000` in a browser.
19+
20+
### Run remote web client locally
21+
22+
- `cd client`
23+
- `./build-remote.sh`
24+
- `cd remote_client/dist`
25+
- `basic-http-server .`
26+
- `google-chrome --disable-web-security --user-data-dir=/tmp http://localhost:8612`
1727

1828
### Server wrapper
1929

@@ -24,6 +34,11 @@
2434
# Notes
2535

2636
- https://stackoverflow.com/questions/40102686/how-to-install-package-with-local-path-by-yarn-it-couldnt-find-package
37+
- class:d-none={!stateSent}
38+
39+
# Todo
40+
41+
- Add https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js to scripts
2742

2843
## Boardgamers Mono
2944

@@ -43,13 +58,13 @@ old
4358
.tool-versions
4459

4560
```
46-
nodejs 14.21.3
61+
nodejs 16.x
4762
pnpm 6.14.1
4863
```
4964

5065
### Bypass npm publish
5166

52-
```
67+
```diff
5368
Index: apps/game-server/app/services/engines.ts
5469
IDEA additional info:
5570
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
7186
export async function getEngine(name: string, version: number): Promise<Engine> {
7287
```
7388

89+
### Set viewer directly
90+
91+
```diff
92+
Index: apps/api/app/resources.ts
93+
IDEA additional info:
94+
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
95+
<+>UTF-8
96+
===================================================================
97+
diff --git a/apps/api/app/resources.ts b/apps/api/app/resources.ts
98+
--- a/apps/api/app/resources.ts (revision 741eecd403ed7c5b38b3b98b1e26be8a502cafc0)
99+
+++ b/apps/api/app/resources.ts (date 1726922668897)
100+
@@ -31,7 +31,8 @@
101+
102+
const viewer: ViewerInfo =
103+
gameInfo?.viewer?.alternate?.url && ctx.query.alternate === "1" ? gameInfo?.viewer.alternate : gameInfo.viewer;
104+
- const viewerUrl = ctx.query.customViewerUrl || viewer.url;
105+
+ const viewerUrl = "/home/gregor/source/clash/client/remote_client/index.js";
106+
107+
ctx.body = `
108+
<html>
109+
@@ -48,7 +49,9 @@
110+
</div>
111+
</body>
112+
<${"script"} type='text/javascript'>
113+
- const gameObj = window.${viewer.topLevelVariable}.launch('#app');
114+
+ const gameObj = window.clash.launch('#app');
115+
window.addEventListener('message', event => {
116+
console.log('received message from controller', event.data.type, JSON.parse(JSON.stringify(event.data)));
117+
switch (event.data.type) {
118+
```
119+
74120
## Docs
75121

76122
- [Game API](https://docs.boardgamers.space/guide/engine-api.html)

‎client/Cargo.lock

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/Cargo.toml

+13
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
name = "client"
33
version = "0.1.0"
44
edition = "2021"
5+
default-run = "local_client"
6+
7+
[profile.dev]
8+
debug = true
9+
10+
[profile.release]
11+
debug = true
512

613
[features]
714
# disable file import and export
@@ -22,7 +29,13 @@ wasm-bindgen = "0.2.83"
2229
wasm-bindgen-futures = "0.4.33"
2330
lazy_static = "1.4.0"
2431
log = "0.4.20"
32+
async-std = "1.13.0"
33+
serde-wasm-bindgen = "0.6.5"
2534

2635
[[bin]]
2736
name = "local_client"
2837
path = "src/local_client/bin/main.rs"
38+
39+
[[bin]]
40+
name = "remote_client"
41+
path = "src/remote_client/bin/main.rs"

‎client/wasm-bindgen-macroquad.sh ‎client/build-local.sh

+13-2
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ HTML=$(
8080
}
8181
</style>
8282
</head>
83-
<body style="margin: 0; padding: 0; height: 100vh; width: 100vw;">
83+
<body >
8484
<canvas id="glcanvas" tabindex='1' hidden></canvas>
8585
<script src="https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js"></script>
8686
<script type="module">
@@ -110,6 +110,16 @@ HTML=$(
110110
END
111111
)
112112

113+
OUTER=$(
114+
cat <<-END
115+
<html lang="en">
116+
<body><iframe src="iframe.html">
117+
118+
</iframe></body>
119+
</html>
120+
END
121+
)
122+
113123
TARGET_DIR="target/wasm32-unknown-unknown"
114124
# Build
115125
echo "Building $PROJECT_NAME..."
@@ -137,6 +147,7 @@ sed -i "s/imports\['env'\] = __wbg_star0;/return imports.wbg\;/" dist/"$PROJECT_
137147
sed -i "s/const imports = __wbg_get_imports();/return __wbg_get_imports();/" dist/"$PROJECT_NAME".js
138148

139149
# Create index from the HTML variable
140-
echo "$HTML" >dist/index.html
150+
echo "$HTML" >dist/iframe.html
151+
echo "$OUTER" >dist/index.html
141152

142153
echo "Done!"

‎client/build-remote.sh

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
#!/usr/bin/env bash
2+
3+
set -e
4+
5+
# from https://gist.github.com/nicolas-sabbatini/8af10dddc96be76d2bf24fc671131add
6+
7+
HELP_STRING=$(
8+
cat <<-END
9+
usage: build_remote.sh [--release]
10+
END
11+
)
12+
13+
die() {
14+
echo >&2 "$HELP_STRING"
15+
echo >&2
16+
echo >&2 "Error: $*"
17+
exit 1
18+
}
19+
20+
# Parse primary commands
21+
while [[ $# -gt 0 ]]; do
22+
key="$1"
23+
case $key in
24+
--release)
25+
RELEASE=yes
26+
shift
27+
;;
28+
29+
-h | --help)
30+
echo "$HELP_STRING"
31+
exit 0
32+
;;
33+
34+
*)
35+
POSITIONAL+=("$1")
36+
shift
37+
;;
38+
esac
39+
done
40+
41+
# Restore positionals
42+
set -- "${POSITIONAL[@]}"
43+
[ $# -ne 0 ] && die "too many arguments provided"
44+
45+
PROJECT_NAME=remote_client
46+
47+
TARGET_DIR="target/wasm32-unknown-unknown"
48+
# Build
49+
echo "Building $PROJECT_NAME..."
50+
if [ -n "$RELEASE" ]; then
51+
cargo build --release --target wasm32-unknown-unknown --features "wasm"
52+
TARGET_DIR="$TARGET_DIR/release"
53+
else
54+
cargo build --target wasm32-unknown-unknown --features "wasm"
55+
TARGET_DIR="$TARGET_DIR/debug"
56+
fi
57+
58+
# Generate bindgen outputs
59+
echo "Running wasm-bindgen..."
60+
61+
mkdir -p dist
62+
63+
#cp remote_client/*.js dist/
64+
65+
wasm-bindgen $TARGET_DIR/"$PROJECT_NAME".wasm --out-dir dist --target web --no-typescript
66+
67+
echo "Patching wasm-bindgen output..."
68+
69+
# Shim to tie the thing together
70+
sed -i "s/import \* as __wbg_star0 from 'env';//" dist/"$PROJECT_NAME".js
71+
sed -i "s/let wasm;/let wasm; export const set_wasm = (w) => wasm = w;/" dist/"$PROJECT_NAME".js
72+
sed -i "s/imports\['env'\] = __wbg_star0;/return imports.wbg\;/" dist/"$PROJECT_NAME".js
73+
sed -i "s/const imports = __wbg_get_imports();/return __wbg_get_imports();/" dist/"$PROJECT_NAME".js
74+
#sed -i "s#import { get_control }.*#import { get_control } from './control.js'#" dist/"$PROJECT_NAME".js
75+
#rm -rf dist/snippets
76+
77+
pushd remote_client
78+
mkdir -p dist
79+
rm -rf dist/*
80+
npm run build
81+
cp -r ../assets dist/
82+
pushd dist
83+
mv *.wasm client.wasm
84+
popd
85+
popd
86+
87+
echo "Done!"

‎client/remote_client/.tool-versions

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodejs 14.21.3

0 commit comments

Comments
 (0)