-
Notifications
You must be signed in to change notification settings - Fork 39
/
editor.html
46 lines (44 loc) · 1.91 KB
/
editor.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
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<script src="editor.js" type="module" defer></script>
</head>
<body class="on">
<svg id="editor" viewBox="0 0 768 480">
<defs>
<pattern id="edit-spike-up" width="16" height="10" patternUnits="userSpaceOnUse">
<polygon points="8 0 16 8 0 8"/>
</pattern>
<pattern id="edit-spike-down" width="16" height="10" patternUnits="userSpaceOnUse">
<polygon points="0 0 16 0 8 8"/>
</pattern>
<pattern id="edit-spike-left" width="10" height="16" patternUnits="userSpaceOnUse">
<polygon points="8 0 8 16 0 8"/>
</pattern>
<pattern id="edit-spike-right" width="10" height="16" patternUnits="userSpaceOnUse">
<polygon points="0 0 8 8 0 16"/>
</pattern>
<pattern id="grid" width="8" height="8" patternUnits="userSpaceOnUse">
<rect width="1" height="7" x="7" fill="red"/>
<rect width="8" height="1" y="7" fill="red"/>
</pattern>
</defs>
<rect class="grid" x="0" y="0" width="100%" height="100%" fill="url(#grid)"/>
</svg>
<div id="dialog">
<h3>Instructions</h3>
<ul>
<li><kbd>H</kbd> <span>Show these instructions</span></li>
<li><kbd><</kbd> + <kbd>></kbd> <span>Cycle pre-built levels</span></li>
<li><kbd>P</kbd> <span>Create new platform</span></li>
<li><kbd>S</kbd> + <kbd>U</kbd> <span>Create new up spike</span></li>
<li><kbd>S</kbd> + <kbd>D</kbd> <span>Create new down spike</span></li>
<li><kbd>S</kbd> + <kbd>L</kbd> <span>Create new left spike</span></li>
<li><kbd>S</kbd> + <kbd>R</kbd> <span>Create new right spike</span></li>
<li><kbd>SHIFT</kbd> + <code>Click</code> <span>Remove platform/spike</span></li>
<li><code>Double Click</code> <span>Toggle platform layer</span></li>
</ul>
<button type="button" id="close-dialog">Close instructions</button>
</div>
</body>