-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (76 loc) · 4.21 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 minimum-scale=1">
<script src="src/constants.js"></script>
<script src="src/parser.js"></script>
<script src="src/presets.js"></script>
<script src="src/main.js" defer></script>
<title>5DChess variant editor</title>
<!-- No favicon -->
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<div class="controls">
<textarea id="fen" spellcheck="false">[Board "Custom"]
[Size "8x8"]
[Promotions "Q,R"]
[r*nbqk*bnr*/p*p*p*p*p*p*p*p*/8/8/8/8/P*P*P*P*P*P*P*P*/R*NBQK*BNR*:0:1:w]</textarea>
<div id="settings">
<section id="dimensions"> <!-- Dimension input -->
<div class="input-container">
<span title="Set the width for the boards. Only effective once 'Set dimensions' is pressed!">Width</span>
<input type="text" id="width" value="8">
<span title="Set the height for the boards. Only effective once 'Set dimensions' is pressed!">Height</span>
<input type="text" id="height" value="8">
</div>
<button id="empty" title="Sets the desired width and height for the boards. Empties the boards!">Set dimensions</button>
</section>
<section id="input-settings" class="mobile-first"> <!-- Mode settings -->
<span title="Chooses the current mode between 'Edit pieces' and 'Add boards'. The current mode does not automatically go back to 'Add pieces'. Hover over either of the buttons for more info!">Current mode:</span>
<div class="input-container">
<button id="edit-pieces" name="Edit pieces" class="selected" title="The 'Add pieces' mode allows you to place/remove pieces on the boards.">Add pieces</button>
<button id="space-around" name="Add boards" title="The 'Add boards' mode allows you to add new boards. You cannot place pieces while in this mode.">Add boards</button>
</div>
<span title="Selects whether or not the next placed piece will have the 'moved' tag associated with it. Hover over either of the buttons for more info!">Add next piece as:</span>
<div class="input-container">
<button id="not-moved" class="selected" title="A piece that wasn't touched/moved yet, indicated by no highlight. Pawns that weren't touched yet can advance two tiles at once and kings that weren't touched yet can castle towards rooks that weren't touched yet.">Not yet moved</button>
<button id="moved" title="A piece that was already touched/moved, indicated by a black highlight. Pawns that were already touched cannot advance two tiles at once and kings that were already touched cannot castle.">Already moved</button>
</div>
</section>
<section> <!-- Presets -->
<span title="Select a preset from the drop-down and hit 'Load preset' to load a preset!">Select preset:</span>
<select name="presets" id="presets" title="Select a preset from the drop-down and hit 'Load preset' to load a preset!">
<option value="Standard">Standard</option>
<option value="Standard - Turn Zero">Standard - Turn Zero</option>
</select>
<button id="set-preset" title="Overwrites the current position with the chosen preset.">Load preset</button>
</section>
<!-- TODO: Screenshot button -->
</div>
</div>
<div class="render">
<!-- Canvases: -->
<canvas id="canvas">
Sorry, your browser needs to support canvases to render this!
</canvas>
<canvas id="axes"></canvas>
<!-- Piece selection palette: -->
<div id="pieces">
<div id="pieces-none-container">
<ul id="pieces-none"><li id="0" class="selected" title="No piece (erase)" onclick="selected_piece = 0; update_pieces();"><img src="cross.svg" /></li></ul>
</div>
<div class="mobile-vertical">
<ul id="pieces-white"></ul>
<ul id="pieces-black"></ul>
</div>
</div>
<!-- Status bar: -->
<div class="bar">
<div id="status" class="ok">Loading...</div>
</div>
</div>
</body>
</html>