hexmap/index.html at master · ebabel-eu/hexmap · GitHub

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
<!DOCTYPE html>
<html lang="en-gb">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hex Map Generator</title>
  <link rel="stylesheet" href="./styles.css" />
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>
  <div id="buttons">
    <button id="newMapButton">New Map</button>
    <button id="toggleDangerButton">DM / Players</button>
    <button id="toggleColourMode">Colour / Gray</button>
  </div>

  <div class="legend">
    <ul>
      <li><span class="swatch" id="swatch-desert" style="background: var(--terrain-desert);"></span> Desert</li>
      <li><span class="swatch" id="swatch-swamp" style="background: var(--terrain-swamp);"></span> Swamp</li>
      <li><span class="swatch" id="swatch-grassland" style="background: var(--terrain-grassland);"></span> Grassland
      </li>
      <li><span class="swatch" id="swatch-forest" style="background: var(--terrain-forest);"></span> Forest</li>
      <li><span class="swatch" id="swatch-river" style="background: var(--terrain-river);"></span> River</li>
      <li><span class="swatch" id="swatch-ocean" style="background: var(--terrain-ocean);"></span> Ocean</li>
      <li><span class="swatch" id="swatch-mountain" style="background: var(--terrain-mountain);"></span> Mountain</li>
    </ul>
    <ul>
      <li>Walking: 4 hours</li>
      <li>Mounted: 2 hours</li>
      <li>Sailing: 1 hour</li>
      <li>Arduous terrain: 8 hours</li>
      <li>Difficult terrain: time x2</li>
      <li>&nbsp;</li>
      <li class="risks">Safe, <span class="risk-3">Unsafe</span>, <span class="risk-2">Risky</span>, <span class="risk-1">Deadly</span></li>
    </ul>
  </div>

  <canvas id="hexMap" width="1000" height="1000"></canvas>
  <div id="contextMenu" class="context-menu"></div>
  <div id="poiList" style="display: block;"></div>

  <script src="./hexmap.js"></script>
</body>

</html>