-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
98 lines (91 loc) · 3.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<title>PyAgent Inspector</title>
<gi-tcg-standalone-chessboard id="agentChessboard0" who="0">
</gi-tcg-standalone-chessboard>
<gi-tcg-standalone-chessboard id="agentChessboard1" who="1">
</gi-tcg-standalone-chessboard>
<details>
<summary>Detail logs</summary>
<gi-tcg-detail-log-viewer id="detailLogViewer"> </gi-tcg-detail-log-viewer>
</details>
<script type="module">
import { Game } from "https://esm.sh/@gi-tcg/[email protected]";
import getData from "https://esm.sh/@gi-tcg/[email protected]";
import {
RpcRequest,
Notification,
RpcResponse,
} from "https://esm.sh/@gi-tcg/[email protected]";
import { createPlayer } from "https://esm.sh/@gi-tcg/[email protected]";
import {
entities,
characters,
actionCards,
} from "https://esm.sh/@gi-tcg/[email protected]";
const names = [...entities, ...characters, ...actionCards].reduce(
(acc, entity) => {
acc[entity.id] = entity.name;
return acc;
},
{},
);
// 星柚
// AZFy20EQAUHC9UUQFVFB94QQCWJhBo8RClJxB5gRFGICCTEUDLLxi8AZDaJRDMYRDcEB
const deck0 = {
characters: [1107, 1507, 1204],
cards: [
215071, 215071, 311206, 311303, 311406, 312004, 312004, 312018, 312018,
321013, 321013, 322004, 322004, 322008, 330001, 332004, 332004, 332005,
332006, 332006, 332021, 332021, 332022, 332022, 332024, 332025, 332032,
332032, 333003, 333004,
],
};
const deck1 = {
characters: [1107, 1507, 1204],
cards: [
215071, 215071, 311206, 311303, 311406, 312004, 312004, 312018, 312018,
321013, 321013, 322004, 322004, 322008, 330001, 332004, 332004, 332005,
332006, 332006, 332021, 332021, 332022, 332022, 332024, 332025, 332032,
332032, 333003, 333004,
],
};
const decks = [deck0, deck1];
const state = Game.createInitialState({
data: getData(),
decks,
});
const game = new Game(state);
// Setup detail log viewer
const detailLogViewer = document.querySelector("#detailLogViewer");
detailLogViewer.names = (id) => names[id];
game.onPause = async () => {
detailLogViewer.logs = [...game.detailLog];
};
// Agent: query server for action
const createAgentIo = (who, elementId) => {
const element = document.getElementById(elementId);
element.assetAltText = (id) => names[id];
return {
notify: (msg) => {
fetch(`/notify/${who}`, {
method: "POST",
body: Notification.encode(msg).finish(),
});
element.state = msg.state;
element.mutations = msg.mutation;
},
rpc: async (data) => {
const response = await fetch(`/rpc/${who}`, {
method: "POST",
body: RpcRequest.encode(data).finish(),
}).then((res) => res.arrayBuffer());
return RpcResponse.decode(new Uint8Array(response));
},
};
};
game.players[0].io = createAgentIo(0, "agentChessboard0");
game.players[1].io = createAgentIo(1, "agentChessboard1");
game.start();
</script>
</html>