-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex_human.html
108 lines (100 loc) · 3.21 KB
/
index_human.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
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<title>PyAgent Inspector</title>
<details>
<summary>Agent perspective</summary>
<gi-tcg-standalone-chessboard id="agentChessboard">
</gi-tcg-standalone-chessboard>
</details>
<div id="humanPlayerChessboard"></div>
<details>
<summary>Detail Log</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 agentChessboard = document.querySelector("#agentChessboard");
agentChessboard.assetAltText = (id) => names[id];
const io0 = {
notify: (msg) => {
fetch(`/notify`, {
method: "POST",
body: Notification.encode(msg).finish(),
});
agentChessboard.state = msg.state;
agentChessboard.mutations = msg.mutation;
},
rpc: async (data) => {
const response = await fetch(`/rpc`, {
method: "POST",
body: RpcRequest.encode(data).finish(),
}).then((res) => res.arrayBuffer());
return RpcResponse.decode(new Uint8Array(response));
},
};
// Human: use webpage chessboard
const io1 = createPlayer(
document.querySelector("#humanPlayerChessboard"),
1,
{
assetAltText: (id) => names[id],
onGiveUp: () => game.giveUp(1),
},
);
game.players[0].io = io0;
game.players[1].io = io1;
game.start();
</script>
</html>