summaryrefslogtreecommitdiff
path: root/play.html
blob: a6969d8f11c31de1c9ee34432d960feced2ae832 (plain)
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
<!DOCTYPE html>
<!-- vim:set nowrap: -->
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta charset="utf-8">
<title>TIME OF CRISIS</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/common/play.css">
<link rel="stylesheet" href="play.css">
<script defer src="/common/play.js"></script>
<script defer src="play.js"></script>
</head>
<body>

<header>
	<div id="toolbar">
		<div class="menu">
			<div class="menu_title"><img src="/images/cog.svg"></div>
			<div class="menu_popup">
				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/rules.html">Rules of Play</a>
				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/expansion.html">Expansion Rules</a>
				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/cards.html">Card Gallery</a>
				<div class="debug menu_separator"></div>
				<div class="debug menu_item" onclick="send_save()">&#x1F41E; Save</div>
				<div class="debug menu_item" onclick="send_restore()">&#x1F41E; Restore</div>
				<div class="debug menu_item" onclick="send_restart('Standard')">&#x26a0; Restart</div>
			</div>
		</div>
		<div class="icon_button" onclick="toggle_pieces()"><img src="/images/earth-africa-europe.svg"></div>
		<div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
	</div>
	<div id="prompt"></div>
	<div id="actions"></div>
</header>

<aside>
	<div id="roles">
		<div class="role" id="role_Red"><div class="role_name">Red<div class="role_vp"></div><div class="role_user">-</div></div></div>
		<div class="role" id="role_Blue"><div class="role_name">Blue<div class="role_vp"></div><div class="role_user">-</div></div></div>
		<div class="role" id="role_Yellow"><div class="role_name">Yellow<div class="role_vp"></div><div class="role_user">-</div></div></div>
		<div class="role" id="role_Green"><div class="role_name">Green<div class="role_vp"></div><div class="role_user">-</div></div></div>
	</div>
	<div id="log"></div>
</aside>

<main>

<div id="mapwrap">
<div id="map">
<div id="crisis_table" class="p4"></div>

<div style="position:relative;display:flex;flex-wrap:wrap;gap:8px;top:200px;left:600px;width:1000px;">
<div class="amphitheater"></div>
<div class="basilica"></div>
<div class="limes"></div>
<div class="militia"></div>
<div class="alamanni"></div>
<div class="alamanni inactive"></div>
<div class="franks"></div>
<div class="franks inactive"></div>
<div class="goths"></div>
<div class="goths inactive"></div>
<div class="nomads"></div>
<div class="nomads inactive"></div>
<div class="sassanids"></div>
<div class="sassanids inactive"></div>
<div class="goths" id="cniva"></div>
<div class="sassanids" id="ardashir"></div>
<div class="sassanids" id="shapur"></div>
<div class="rival" id="postumus"></div>
<div class="rival" id="priest_king"></div>
<div class="rival" id="zenobia"></div>
<div class="red governor"></div>
<div class="blue governor"></div>
<div class="yellow governor"></div>
<div class="green governor"></div>
<div class="red general"></div>
<div class="blue general"></div>
<div class="yellow general"></div>
<div class="green general"></div>
<div class="red emperor_turns"></div>
<div class="blue emperor_turns"></div>
<div class="yellow emperor_turns"></div>
<div class="green emperor_turns"></div>
<div class="red legacy"></div>
<div class="blue legacy"></div>
<div class="yellow legacy"></div>
<div class="green legacy"></div>
<div class="red legacy_40"></div>
<div class="blue legacy_40"></div>
<div class="yellow legacy_40"></div>
<div class="green legacy_40"></div>
<div class="red seat_of_power"></div>
<div class="blue seat_of_power"></div>
<div class="yellow seat_of_power"></div>
<div class="green seat_of_power"></div>
<div class="red breakaway"></div>
<div class="blue breakaway"></div>
<div class="yellow breakaway"></div>
<div class="green breakaway"></div>
<div class="castra"></div>
<div class="quaestor"></div>
<div class="mob"></div>
<div class="mob_x2"></div>
<div class="legion" id="legion_1"></div>
<div class="legion" id="legion_2"></div>
<div class="legion" id="legion_3"></div>
<div class="legion" id="legion_4"></div>
<div class="legion" id="legion_5"></div>
<div class="legion" id="legion_6"></div>
<div class="legion" id="legion_7"></div>
<div class="legion" id="legion_8"></div>
<div class="legion" id="legion_9"></div>
<div class="legion" id="legion_10"></div>
<div class="legion" id="legion_11"></div>
<div class="legion" id="legion_12"></div>
<div class="legion" id="legion_13"></div>
<div class="legion" id="legion_14"></div>
<div class="legion" id="legion_15"></div>
<div class="legion" id="legion_16"></div>
<div class="legion" id="legion_17"></div>
<div class="legion" id="legion_18"></div>
<div class="legion" id="legion_19"></div>
<div class="legion" id="legion_20"></div>
<div class="legion" id="legion_21"></div>
<div class="legion" id="legion_22"></div>
<div class="legion" id="legion_23"></div>
<div class="legion" id="legion_24"></div>
<div class="legion" id="legion_25"></div>
<div class="legion" id="legion_26"></div>
<div class="legion" id="legion_27"></div>
<div class="legion" id="legion_28"></div>
<div class="legion" id="legion_29"></div>
<div class="legion" id="legion_30"></div>
<div class="legion" id="legion_31"></div>
<div class="legion" id="legion_32"></div>
<div class="legion reduced" id="legion_33"></div>
<div class="dice white d1"></div>
<div class="dice white d2"></div>
<div class="dice white d3"></div>
<div class="dice white d4"></div>
<div class="dice white d5"></div>
<div class="dice white d6"></div>
<div class="dice black"></div>

</div>

<div id="pieces">

<div id="crisis_die_2" class="dice black d1" style="right:230px;top:525px"></div>
<div id="crisis_die_1" class="dice white d6" style="right:182px;top:525px"></div>

<div id="red_emperor_turns" class="red emperor_turns" style="top:10px;left:47px;"></div>
<div id="blue_emperor_turns" class="blue emperor_turns" style="top:30px;left:41px;"></div>
<div id="green_emperor_turns" class="green emperor_turns" style="top:50px;left:38px;"></div>
<div id="yellow_emperor_turns" class="yellow emperor_turns" style="top:70px;left:35px;"></div>
<div id="red_legacy" class="red legacy" style="top:12px;left:50px;"></div>
<div id="blue_legacy" class="blue legacy" style="top:32px;left:47px;"></div>
<div id="green_legacy" class="green legacy" style="top:52px;left:44px;"></div>
<div id="yellow_legacy" class="yellow legacy" style="top:72px;left:41px;"></div>

<div id=""Aegyptus_Support" class="neutral governor" style="left:1700px;top:1468px"></div>
<div id=""Africa_Support" class="neutral governor" style="left:647px;top:1290px"></div>
<div id=""Asia_Support" class="neutral governor" style="left:1679px;top:1000px"></div>
<div id=""Britannia_Support" class="neutral governor" style="left:231px;top:260px"></div>
<div id=""Galatia_Support" class="neutral governor" style="left:1954px;top:931px"></div>
<div id=""Gallia_Support" class="neutral governor" style="left:460px;top:507px"></div>
<div id=""Hispania_Support" class="neutral governor" style="left:154px;top:980px"></div>
<div id=""Italia_Support" class="neutral governor" style="left:1028px;top:835px"></div>
<div id=""Macedonia_Support" class="neutral governor" style="left:1384px;top:936px"></div>
<div id=""Pannonia_Support" class="neutral governor" style="left:1154px;top:626px"></div>
<div id=""Syria_Support" class="neutral governor" style="left:2034px;top:1280px"></div>
<div id=""Thracia_Support" class="neutral governor" style="left:1502px;top:720px"></div>

<div id="Aegyptus_NPG" class="no_place_governor" style="left:1793px;top:1380px"></div>
<div id="Africa_NPG" class="no_place_governor" style="left:741px;top:1204px"></div>
<div id="Asia_NPG" class="no_place_governor" style="left:1790px;top:908px"></div>
<div id="Britannia_NPG" class="no_place_governor" style="left:325px;top:177px"></div>
<div id="Galatia_NPG" class="no_place_governor" style="left:2048px;top:842px"></div>
<div id="Gallia_NPG" class="no_place_governor" style="left:554px;top:418px"></div>
<div id="Hispania_NPG" class="no_place_governor" style="left:249px;top:892px"></div>
<div id="Italia_NPG" class="no_place_governor" style="left:1038px;top:743px"></div>
<div id="Macedonia_NPG" class="no_place_governor" style="left:1477px;top:850px"></div>
<div id="Pannonia_NPG" class="no_place_governor" style="left:1214px;top:536px"></div>
<div id="Syria_NPG" class="no_place_governor" style="left:2174px;top:1193px"></div>
<div id="Thracia_NPG" class="no_place_governor" style="left:1594px;top:631px"></div>

<!--
<div id="Aegyptus_Militia" class="militia" style="left:1793px;top:1380px"></div>
<div id="Africa_Militia" class="militia" style="left:741px;top:1204px"></div>
<div id="Asia_Militia" class="militia" style="left:1790px;top:908px"></div>
<div id="Britannia_Militia" class="militia" style="left:325px;top:177px"></div>
<div id="Galatia_Militia" class="militia" style="left:2048px;top:842px"></div>
<div id="Gallia_Militia" class="militia" style="left:554px;top:418px"></div>
<div id="Hispania_Militia" class="militia" style="left:249px;top:892px"></div>
<div id="Italia_Militia" class="militia" style="left:1038px;top:743px"></div>
<div id="Macedonia_Militia" class="militia" style="left:1477px;top:850px"></div>
<div id="Pannonia_Militia" class="militia" style="left:1214px;top:536px"></div>
<div id="Syria_Militia" class="militia" style="left:2174px;top:1193px"></div>
<div id="Thracia_Militia" class="militia" style="left:1594px;top:631px"></div>
-->

<div class="neutral governor" style="top:259px;left:230px;"></div>
<div class="quaestor" style="top:220px;left:258px;"></div>
<div class="militia" style="top:192px;left:320px;"></div>
<div class="blue general" style="top:172px;left:340px;"></div>
<div class="castra" style="top:172px;left:344px;"></div>
<div class="franks inactive" style="top:172px;left:420px;"></div>
<div class="limes" style="top:320px;left:260px;"></div>

<div class="legion hide" id="legion_1"></div>
<div class="legion hide" id="legion_2"></div>
<div class="legion hide" id="legion_3"></div>
<div class="legion hide" id="legion_4"></div>
<div class="legion hide" id="legion_5"></div>
<div class="legion hide" id="legion_6"></div>
<div class="legion hide" id="legion_7"></div>
<div class="legion hide" id="legion_8"></div>
<div class="legion hide" id="legion_9"></div>
<div class="legion hide" id="legion_10"></div>
<div class="legion hide" id="legion_11"></div>
<div class="legion hide" id="legion_12"></div>
<div class="legion hide" id="legion_13"></div>
<div class="legion hide" id="legion_14"></div>
<div class="legion hide" id="legion_15"></div>
<div class="legion hide" id="legion_16"></div>
<div class="legion hide" id="legion_17"></div>
<div class="legion hide" id="legion_18"></div>
<div class="legion hide" id="legion_19"></div>
<div class="legion hide" id="legion_20"></div>
<div class="legion hide" id="legion_21"></div>
<div class="legion hide" id="legion_22"></div>
<div class="legion hide" id="legion_23"></div>
<div class="legion hide" id="legion_24"></div>
<div class="legion hide" id="legion_25"></div>
<div class="legion hide" id="legion_26"></div>
<div class="legion hide" id="legion_27"></div>
<div class="legion hide" id="legion_28"></div>
<div class="legion hide" id="legion_29"></div>
<div class="legion hide" id="legion_30"></div>
<div class="legion hide" id="legion_31"></div>
<div class="legion hide" id="legion_32"></div>
<div class="legion hide" id="legion_33"></div>

</div>

</div>
</div>
</div>

<div id="action_panel" class="panel">
<div id="action_header" class="panel_header">Actions</div>
<div id="action_body" class="panel_body">

<div class="action_row">
<button>Recruit General 1</button>
<button>Recruit General 2</button>
<button>Recruit General 3</button>
<button>Recruit General 4</button>
<button>Recruit General 5</button>
</div>
<div class="action_row">
<button>Add Legion to Army</button>
<button>Create Army</button>
<button>Train Legions</button>
<button>Move Army</button>
<button>Initiate Battle</button>
<button>Disperse Mob</button>
</div>

<div class="action_row">
<button>Recruit Governor 1</button>
<button>Recruit Governor 2</button>
<button>Recruit Governor 3</button>
<button>Recruit Governor 4</button>
<button>Recruit Governor 5</button>
</div>
<div class="action_row">
<button>Place Governor</button>
<button>Recall Governor</button>
</div>

<div class="action_row">
<button>Increase Support Level</button>
<button>Place Militia</button>
<button>Hold Games</button>
<button id="build_limes">Build Limes</button>
<button id="build_amphitheater">Build Amphitheater</button>
<button id="build_basilica">Build Basilica</button>
</div>

<div class="action_row">

<button>Castra</button>
<button>Flanking Maneuver</button>
<button>Praetorian Guard</button>
<button>Tribute</button>
<button>Foederati</button>
<button>Damnatio Memoriae</button>
<button>Quaestor</button>
<button>Mob</button>
<button>Pretender</button>
</div>

</div>
</div>

<div id="played_panel" class="panel">
<div id="played_header" class="panel_header">Played / Events</div>
<div id="played" class="panel_body">
	<div class="card event_back"></div>
</div>
</div>

<div id="hand_panel" class="panel">
<div id="hand_header" class="panel_header">Hand</div>
<div id="hand" class="panel_body">
	<div class="card influence_m1"></div>
	<div class="card influence_m1"></div>
	<div class="card influence_m1"></div>
	<div class="card influence_s1"></div>
	<div class="card influence_s1"></div>
</div>
</div>

<div id="draw_panel" class="panel">
<div id="draw_header" class="panel_header">Draw</div>
<div id="draw" class="panel_body">
	<div class="card influence_s1"></div>
	<div class="card influence_p1"></div>
	<div class="card influence_p1"></div>
	<div class="card influence_p1"></div>
</div>
</div>

<div id="discard_panel" class="panel">
<div id="discard_header" class="panel_header">Discard</div>
<div id="discard" class="panel_body">
	<div class="card influence_back"></div>
</div>
</div>

<div id="market_panel" class="panel">
<div id="market_header" class="panel_header">Market</div>
<div id="market" class="panel_body">
	<div class="card influence_m2"></div>
	<div class="card influence_s2"></div>
	<div class="card influence_p2"></div>
	<div class="card influence_m3"></div>
	<div class="card influence_s3"></div>
	<div class="card influence_p3"></div>
	<div class="card influence_m4"></div>
	<div class="card influence_s4"></div>
	<div class="card influence_p4"></div>
</div>
</div>

</main>

<footer id="status"></footer>

</body>