forked from IonPostglacial/hexagon-game-editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
hex.html
70 lines (68 loc) · 3.02 KB
/
hex.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
<!DOCTYPE HTML>
<html>
<head>
<title>Playing with hexagons</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<script src="lib/require.js"></script>
<script>
requirejs(["js/mapeditor", "js/download", "lib/hexmap"], (MapEditor, Download, HexMap) => {
"use strict";
const $ = document.querySelector.bind(document);
const GRID = {width: 14, height:12, radius: 32, data: new HexMap(14, 12)};
MapEditor.init(GRID, $('#layers'), $('#tile-type-selector'), $('#coord-mouse'), $('#coord-hex'));
Download.init(GRID, $('#uploaded'), $('#upload-scene'), $('#download-scene'), $('#save-scene'), $('#load-scene'));
});
</script>
</head>
<body>
<div id="layers" class="layers">
<canvas class="layer" id="background">
This page is useless without canvas.
</canvas>
<canvas class="layer" id="scene">
This page is useless without canvas.
</canvas>
</div>
<form id="tile-type-selector" class="centered tool-box">
<fieldset>
<label class="btn"><input name="tile-type" type="radio" value="0" checked /><span><i class="fa fa-fw fa-car"></i>Land</span></label>
<label class="btn"><input name="tile-type" type="radio" value="1" /><span><i class="fa fa-fw fa-subway"></i>Rock</span></label>
<label class="btn"><input name="tile-type" type="radio" value="2" /><span><i class="fa fa-fw fa-ship"></i>Water</span></label>
<label class="btn"><input name="tile-type" type="radio" value="3" /><span><i class="fa fa-fw fa-plane"></i>Void</span></label>
<label class="btn"><input name="tile-type" type="radio" value="4" /><span><i class="fa fa-fw fa-sun-o"></i>Sand</span></label>
</fieldset>
</form>
<ul class="centered tool-box">
<li class="tool">
<a class="btn" id="download-scene" href="#" download><i class="fa fa-pull-left fa-download fa-lg"></i>Download current stage</a>
</li>
<li class="tool">
<a class="btn" id="upload-scene" href="#"><i class="fa fa-pull-left fa-upload fa-lg"></i>Upload a stage</a>
</li>
<li class="tool">
<a class="btn" id="save-scene" href="#" download><i class="fa fa-pull-left fa-floppy-o fa-lg"></i>Save current stage</a>
</li>
<li class="tool">
<a class="btn" id="load-scene" href="#"><i class="fa fa-pull-left fa-folder-open-o fa-lg"></i>Load stage</a>
</li>
</ul>
<ul class="centered tool-box">
<li class="tool">
<table id="coord-hex" class="tool numerical gauge">
<caption>Hex Coordinates</caption>
<tr><th>x</th><td>0</td><th>y</th><td>0</td></tr>
</table>
</li>
<li class="tool">
<table id="coord-mouse" class="tool numerical gauge">
<caption>Pix Coordinates</caption>
<tr><th>x</th><td>0</td><th>y</th><td>0</td></tr>
</table>
</li>
</ul>
<form id="hidden-form">
<input type="file" id="uploaded" />
</form>
</body>
</html>