-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-2023S.html
178 lines (167 loc) · 9.6 KB
/
index-2023S.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
169
170
171
172
173
174
175
176
177
178
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>CIV 5 Replays Database</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror-theme-vars/base.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js" type="text/javascript"></script>
<script src='https://cdn.plot.ly/plotly-2.26.0.min.js' type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js" type="text/javascript"></script>
</head>
<body>
<h1>CIV 5 Replays Database</h1>
<input type="checkbox" id="darkThemeToggle"/>
<label for="darkThemeToggle" id="darkThemeToggleLabel">
<svg class="icon-light" width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
<svg class="icon-dark" width="40px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
</svg>
<svg class="icon-dark" width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" />
</svg>
<svg class="icon-light" width="40px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>
</label>
<main>
<div id="inputs" style="display: none">
<label class="labelTab TabsFiller"> </label>
<input class="radioTab plot-clk" id="tab0" type="radio" name="tabs" checked>
<label class="labelTab" for="tab0">Games</label>
<input class="radioTab plot-clk" id="tab1" type="radio" name="tabs">
<label class="labelTab" for="tab1">Plot by Game</label>
<input class="radioTab plot-clk" id="tab2" type="radio" name="tabs">
<label class="labelTab" for="tab2">Plot by Player</label>
<input class="radioTab plot-clk" id="tab3" type="radio" name="tabs">
<label class="labelTab" for="tab3">Compare Average</label>
<input class="radioTab plot-clk" id="tab4" type="radio" name="tabs">
<label class="labelTab" for="tab4">Plot Distribution</label>
<input class="radioTab plot-clk" id="tab5" type="radio" name="tabs">
<label class="labelTab" for="tab5">Tables</label>
<div id="error" class="error"></div>
<section id="content0">
</section>
<section id="content1">
<span class="sp">Choose game:</span>
<div class="dropdown">
<button id="gameID-select-head" class="btn dropdown-head"></button>
<div id="gameID-select-dropdown" class="dropdown-content"></div>
</div>
<br>
<div class="dropdown">
<button id="dataset-select-head" class="btn dropdown-head"></button>
<div id="dataset-select-dropdown" class="dropdown-content"></div>
</div>
<br>
<button id="plotAllGames" class="btn plot-clk">Plot all games</button>
</section>
<section id="content2">
<span class="sp">Player:</span>
<div class="dropdown">
<button id="playerID-select-head" class="btn dropdown-head"></button>
<div id="playerID-select-dropdown" class="dropdown-content"></div>
</div>
<br>
<div class="dropdown">
<button id="dataset-select-head-2" class="btn dropdown-head"></button>
<div id="dataset-select-dropdown-2" class="dropdown-content"></div>
</div>
<br>
<button id="plotAllPlayers" class="btn plot-clk">Plot all players</button>
</section>
<section id="content3">
<span class="sp">Choose group to compare:</span>
<div class="dropdown">
<button id="compare-group-select-head" class="btn dropdown-head"></button>
<div id="compare-group-select-dropdown" class="dropdown-content">
</div>
</div>
<br>
<div class="dropdown">
<button id="dataset-select-head-3" class="btn dropdown-head"></button>
<div id="dataset-select-dropdown-3" class="dropdown-content"></div>
</div>
<br>
Method:
<input class="sp compare-clk" id="compare-group-arithmeticMean" type="radio" name="compareGroupMode" checked>
<label for="compare-group-arithmeticMean">Arithmetic Mean</label>
<input class="sp compare-clk" id="compare-group-winsorizedMean" type="radio" name="compareGroupMode">
<label for="compare-group-winsorizedMean">20% Winsorized Mean</label>
<input class="sp compare-clk" id="compare-group-median" type="radio" name="compareGroupMode">
<label for="compare-group-median">Median</label>
</section>
<section id="content4">
<span class="sp">Bar charts:</span>
<br>
<button id="beliefs-time" class="btn plot-clk">Beliefs-Time</button>
<button id="policies-time" class="btn plot-clk">Policies-Time</button>
<button id="techs-time" class="btn plot-clk">Technologies-Time</button>
<br>
<span class="sp">Sankey diagrams:</span>
<br>
Show groups:
<input class="sp sankey-clk" id="sankey-groups1" type="radio" name="groupMode" checked>
<label for="sankey-groups1">Simple</label>
<input class="sp sankey-clk" id="sankey-groups2" type="radio" name="groupMode">
<label for="sankey-groups2">Winners</label>
<input class="sp sankey-clk" id="sankey-groups3" type="radio" name="groupMode">
<label for="sankey-groups3">Winners (Detailed)</label>
<br>
<button id="sankey-policies" class="btn sankey-clk">Policy Branches</button>
<br>
<button id="sankey-tradition" class="btn sankey-clk">Tradition</button>
<button id="sankey-liberty" class="btn sankey-clk">Liberty</button>
<button id="sankey-honor" class="btn sankey-clk">Honor</button>
<br>
<button id="sankey-piety" class="btn sankey-clk">Piety</button>
<button id="sankey-patronage" class="btn sankey-clk">Patronage</button>
<button id="sankey-aesthetics" class="btn sankey-clk">Aesthetics</button>
<br>
<button id="sankey-commerce" class="btn sankey-clk">Commerce</button>
<button id="sankey-exploration" class="btn sankey-clk">Exploration</button>
<button id="sankey-rationalism" class="btn sankey-clk">Rationalism</button>
<br>
<button id="sankey-freedom" class="btn sankey-clk">Freedom</button>
<button id="sankey-order" class="btn sankey-clk">Order</button>
<button id="sankey-autocracy" class="btn sankey-clk">Autocracy</button>
<br>
<button id="sankey-techs" class="btn sankey-clk">Techs-test</button>
</section>
<section id="content5">
<button id="tableHallOfFame" class="btn">Hall of Fame</button>
<button id="tableBeliefAdoption" class="btn">Belief Adoption</button>
<button id="tablePolicyAdoption" class="btn">Policy Adoption</button>
<button id="tableTechResearch" class="btn">Technology Research</button>
<button id="tableWonderConstruction" class="btn">Wonder Construction</button>
<br>
<label for="showSql" class="sp">Show SQL</label>
<input id="showSql" type="checkbox" class="chk">
<div id="sqlBox">
<textarea id="commands"></textarea>
<button id="execute" class="btn">Execute</button>
<button id="savedb" class="btn">Save the db</button>
</div>
<span id="sql-status" class="sp"></span>
<br>
<pre id="output"></pre>
</section>
<div id="plotOut"><!-- Plotly chart will be drawn inside this DIV --></div>
</div>
<span id="loading" style="font-size: 22px;" class="sp">Loading...</span>
</main>
<script type="text/javascript" src="sql.js"></script>
<footer>
<label id="dbsize"></label>
<a href='index.html' class="sref">Fall 2024 Tournament</a>
<a href='index-2024W.html' class="sref">Winter 2024 Tournament</a>
<span class="sttl">Summer 2023 Tournament</span>
</footer>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="gui-2023S.js"></script>
</body>
</html>