-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathsantorini.html
168 lines (146 loc) · 7.05 KB
/
santorini.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ort.min.js"></script>
<script src="./santorini/constants_nogod.js"></script>
<script src="./common/game.js"></script>
<script src="./santorini/main.js"></script>
<style>
.ui.table tbody tr td.selectable {
background-color: #f3f8ff;
}
.ui.table tbody tr td.selectable:hover {
background-color: #e8f1ff;
}
</style>
</head>
</head>
<body>
<div class="ui borderless menu">
<div class="ui container">
<div class="fitted item">
<button class="ui icon button" onclick="reset()"><i class="file outline icon"></i></button>
</div>
<div class="fitted item">
<button class="ui icon button" onclick="edit()" id="editBtn"><i class="edit icon"></i></button>
</div>
<div class="fitted item">
<div class="ui small form">
<div class="field">
<select onchange="game.changeDifficulty(this.value)" id="difficultyForm">
<optgroup label="Above optimal">
<option value="12800" >God-like</option>
<option value="3200" >Boosted</option>
<optgroup label="Level used during training">
<option value="800" >Native</option>
<optgroup label="Sub optimal levels">
<option value="200" >Medium</option>
<option value="50" selected>Easy</option>
<option value="12" >Easier</option>
<option value="3" >Come on</option>
</select>
</div>
</div>
</div>
<div class="fitted item">
<div class="ui small form">
<div class="field">
<select onchange="changeGameMode(this.value)">
<option value="P0" selected>You vs AI</option>
<option value="P1" >AI vs you</option>
<option value="Human" >No AI</option>
<option value="AI" >WarGames</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="ui main container">
<h1 class="ui huge center aligned header">Santorini game with AI</h1>
<div class="ui hidden divider"></div>
<!-- Players name and power -->
<div class="ui horizontal basic segments">
<div class="ui center aligned vertically fitted segment">
<span class="ui large green text" id="p0title">You</span>
<p id="p0details">Click highlighted cells to select where to move/build</p>
</div>
<div class="ui center aligned vertically fitted segment">
<span class="ui large red text" id="p1title">AI</span>
<p id="p1details">Will run after you</p>
</div>
</div>
<!-- Table -->
<table class="ui fixed unstackable celled huge compact table"><tbody>
<tr class="center aligned">
<td class="" id="cell_0_0"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_0_1"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_0_2"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_0_3"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_0_4"><div class="ui middle aligned tiny image"></div></td>
</tr>
<tr class="center aligned">
<td class="" id="cell_1_0"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_1_1"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_1_2"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_1_3"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_1_4"><div class="ui middle aligned tiny image"></div></td>
</tr>
<tr class="center aligned">
<td class="" id="cell_2_0"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_2_1"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_2_2"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_2_3"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_2_4"><div class="ui middle aligned tiny image"></div></td>
</tr>
<tr class="center aligned">
<td class="" id="cell_3_0"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_3_1"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_3_2"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_3_3"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_3_4"><div class="ui middle aligned tiny image"></div></td>
</tr>
<tr class="center aligned">
<td class="" id="cell_4_0"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_4_1"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_4_2"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_4_3"><div class="ui middle aligned tiny image"></div></td>
<td class="" id="cell_4_4"><div class="ui middle aligned tiny image"></div></td>
</tr>
</tbody></table>
<!-- Button -->
<div class="ui fluid large compact buttons" id="allBtn" style="display: none">
<button class="ui icon button" id="undoBtn" onclick="cancel_and_undo()"><i class="undo icon"></i></button>
<button class="ui basic teal button" id="usePowerBtn" onclick="togglePower(false)">Without power</button>
<button class="ui basic blue button" id="noPowerBtn" onclick="togglePower(true)">With power</button>
</div>
<button class="ui fluid large active loading button" id="loadingBtn"></button>
<div class="ui hidden info message" id="editMsg">
<div class="header">Info for editing</div>
<p>Tap on cells to change their heights, then tap again on edit button and tap on cells to toggle worker. Tap on god power to change them and finally tap edit button to validate</p>
</div>
<div class="ui basic segment">
<p id="moveSgmt">Loading pyodide, numpy, onnx; please wait...</p>
</div>
</div>
<script>
const allBtn = document.getElementById('allBtn');
const undoBtn = document.getElementById('undoBtn');
const loadingBtn = document.getElementById('loadingBtn');
const usePowerBtn = document.getElementById('usePowerBtn');
const noPowerBtn = document.getElementById('noPowerBtn');
const editBtn = document.getElementById('editBtn');
const moveSgmt = document.getElementById('moveSgmt');
const p0title = document.getElementById('p0title');
const p0details = document.getElementById('p0details');
const p1title = document.getElementById('p1title');
const p1details = document.getElementById('p1details');
const editMsg = document.getElementById('editMsg');
main(usePyodide=true);
</script>
</body>
</html>