summaryrefslogtreecommitdiff
path: root/play.html
blob: 21439d104383f5ef61c6a2afc7db6affa2cde956 (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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta charset="utf-8">
<title>JULIUS CAESAR</title>
<link rel="icon" href="Vexilloid_of_the_Roman_Empire.svg">
<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/common/grid.css">
<link rel="stylesheet" href="/common/battle_abc.css">
<link rel="stylesheet" href="blocks_simple.css">
<link rel="stylesheet" href="blocks_columbia.css">
<link rel="stylesheet" href="play.css">
<script defer src="/socket.io/socket.io.min.js"></script>
<script defer src="/common/client.js"></script>
<script defer src="data.js"></script>
<script defer src="play.js"></script>
</head>
<body>

<table id="battle">
<tr>
<th id="battle_header" colspan=4>
<tr class="battle_reserves enemy">
<td colspan=4><div id="ER"></div>
<tr class="battle_line enemy">
<td class="battle_a_cell"><div id="EA"></div>
<td class="battle_b_cell"><div id="EB"></div>
<td class="battle_c_cell"><div id="EC"></div>
<td class="battle_d_cell"><div id="ED"></div>
<tr class="battle_separator">
<td colspan=4>
<tr class="battle_line friendly">
<td class="battle_a_cell"><div id="FA"></div>
<td class="battle_b_cell"><div id="FB"></div>
<td class="battle_c_cell"><div id="FC"></div>
<td class="battle_d_cell"><div id="FD"></div>
<tr class="battle_reserves friendly">
<td colspan=4><div id="FR"></div>
<tr>
<th id="battle_message" colspan=4>
</table>

<header>
	<div class="menu">
		<div class="menu_title"><img src="/images/cog.svg"></div>
		<div class="menu_popup">
			<div class="menu_item" onclick="toggle_fullscreen()">Fullscreen</div>
			<div class="menu_separator"></div>
			<div class="menu_item" onclick="set_columbia_labels()">Columbia labels</div>
			<div class="menu_item" onclick="set_simple_labels()">Simple labels</div>
			<div class="menu_item" onclick="set_spread_layout()">Spread blocks</div>
			<div class="menu_item" onclick="set_stack_layout()">Stack blocks</div>
			<div class="menu_separator"></div>
			<div class="menu_item" onclick="window.open('info/notes.html', '_blank')">Notes</div>
			<div class="menu_item" onclick="window.open('info/rules.html', '_blank')">Rules</div>
			<div class="menu_item" onclick="window.open('info/cards.html', '_blank')">Cards</div>
			<div class="menu_item" onclick="window.open('info/blocks.html', '_blank')">Blocks</div>
			<div class="resign menu_separator"></div>
			<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
		</div>
	</div>
	<div class="icon_button" onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></div>
	<div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
	<div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
	<div id="prompt"></div>
	<div id="actions"></div>
</header>

<aside>
	<div id="roles">
		<div class="role one">
			<div class="role_name">
				Caesar
				<div class="role_vp" id="caesar_vp">VP</div>
				<div class="role_user">-</div>
			</div>
			<div class="role_info"><div class="small_card card_back" id="caesar_card"></div></div>
		</div>
		<div class="role two">
			<div class="role_name">
				Pompeius
				<div class="role_vp" id="pompeius_vp">VP</div>
				<div class="role_user">-</div>
			</div>
			<div class="role_info">
				<div class="small_card card_back" id="pompeius_card"></div>
			</div>
		</div>
		<div id="turn_info">-</div>
	</div>
	<div id="log"></div>
</aside>

<main>
	<div id="mapwrap">
		<div id="map">
			<div id="blocks"></div>
			<div id="spaces"></div>
			<div id="turn" class="year_705"></div>
		</div>
	</div>
	<div id="cards" class="hand">
		<div id="card+1" class="card card_apollo" onclick="select_card(1)"></div>
		<div id="card+2" class="card card_jupiter" onclick="select_card(2)"></div>
		<div id="card+3" class="card card_mars" onclick="select_card(3)"></div>
		<div id="card+4" class="card card_mercury" onclick="select_card(4)"></div>
		<div id="card+5" class="card card_neptune" onclick="select_card(5)"></div>
		<div id="card+6" class="card card_pluto" onclick="select_card(6)"></div>
		<div id="card+7" class="card card_vulcan" onclick="select_card(7)"></div>
		<div id="card+8" class="card card_41" onclick="select_card(8)"></div>
		<div id="card+9" class="card card_32" onclick="select_card(9)"></div>
		<div id="card+10" class="card card_32" onclick="select_card(10)"></div>
		<div id="card+11" class="card card_31" onclick="select_card(11)"></div>
		<div id="card+12" class="card card_31" onclick="select_card(12)"></div>
		<div id="card+13" class="card card_31" onclick="select_card(13)"></div>
		<div id="card+14" class="card card_23" onclick="select_card(14)"></div>
		<div id="card+15" class="card card_23" onclick="select_card(15)"></div>
		<div id="card+16" class="card card_23" onclick="select_card(16)"></div>
		<div id="card+17" class="card card_23" onclick="select_card(17)"></div>
		<div id="card+18" class="card card_22" onclick="select_card(18)"></div>
		<div id="card+19" class="card card_22" onclick="select_card(19)"></div>
		<div id="card+20" class="card card_22" onclick="select_card(20)"></div>
		<div id="card+21" class="card card_22" onclick="select_card(21)"></div>
		<div id="card+22" class="card card_21" onclick="select_card(22)"></div>
		<div id="card+23" class="card card_21" onclick="select_card(23)"></div>
		<div id="card+24" class="card card_21" onclick="select_card(24)"></div>
		<div id="card+25" class="card card_13" onclick="select_card(25)"></div>
		<div id="card+26" class="card card_12" onclick="select_card(26)"></div>
		<div id="card+27" class="card card_12" onclick="select_card(27)"></div>
		<div id="back+1" class="card card_back"></div>
		<div id="back+2" class="card card_back"></div>
		<div id="back+3" class="card card_back"></div>
		<div id="back+4" class="card card_back"></div>
		<div id="back+5" class="card card_back"></div>
		<div id="back+6" class="card card_back"></div>
	</div>
</main>

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

</body>