-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathOtrio.html
91 lines (88 loc) · 3.89 KB
/
Otrio.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
<html>
<script src="Otrio.js"></script>
<style>
.collapsible {
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: #ccc;
}
.collapsible:after {
content: "\02795"; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<body onload="OnLoad()">
</body>
<div width="fit-content">
<canvas id="canvas"></canvas>
<div id="settings" style="text-align: center;">
<div style="width: 20%; display: inline-block; vertical-align: top">
<button type="button" class="collapsible">Setting</button>
<div class="content" id="util_setting">
<label for="player-count">Number of Players</label>
<input type="number" id="player-count" min="2" max="4" step="1" value="2" onchange="OnLoad()" />
<br />
<label for="checkbox-corpse">Use Corpses</label>
<input checked id="checkbox-corpse" value="hasCorpse" type="checkbox" onchange="OnLoad()" />
<br />
<label for="game-width">Image Scale</label>
<input type="number" id="game-width" value="14" min="2" step="1" onchange="getSettings()" />
<br />
<label for="game-size">Board Size</label>
<input type="number" id="game-size" value="3" min="3" step="1" onchange="OnLoad()" />
<br />
<label for="blank-alpha">Alpha Values</label>
<br/>
<label for="blank-alpha">Blanks Alpha</label>
<input type="number" id="blank-alpha" value="51" min="0" max="255" step="1" />
<label for="corpse-alpha">Corpse Alpha</label>
<input type="number" id="corpse-alpha" value="102" min="0" max="255" step="1"/>
</div>
</div>
<div style="width: 40%; display: inline-block; vertical-align: top">
<button type="button" class="collapsible">Colors</button>
<div class="content" id="colors">
<div>
<label for="bkgrd_color">Bkgd|Nil</label
><input
id="bkgrd_color"
type="color"
style="width: 35%"
onchange="background_color = this.value"
/><input
id="empty_color"
type="color"
style="width: 35%"
onfocus="this.setAttribute('old_color', this.value)"
onchange="exchange_colors(this,null,0)"
/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>