hexmap/test.html at master · jholloc/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
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 xmlns:v-bind="https://vuejs.org/v2" xmlns:v-on="https://vuejs.org/v2" >
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="svg.select.css">
  <link rel="stylesheet" href="base.css">
</head>
<body>
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Hexmap</a>
  <!--<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">-->
  <!--<ul class="navbar-nav px-3">-->
    <!--<li class="nav-item text-nowrap">-->
      <!--<a class="nav-link" href="#">Sign out</a>-->
    <!--</li>-->
  <!--</ul>-->
</nav>

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky" style="padding-left: 1em" id="hexmap">
        Num hexes: {{ num_hexes }}
        <ul class="nav flex-column hex-selected" v-if="selected">
          <li class="hex-id">
            {{ selected.node.id }}
          </li>
          <li>
            <img v-bind:id="selected.node.id + '-view'" v-bind:src="selected.image" v-on:click="imageClicked" width="50px" height="50px" />
          </li>
          <ul class="nav flex-column" v-if="showImagePicker">
            <li v-for="(image, idx) in images">
              <img v-bind:src="image" v-on:click="imageSelected" width="100px" height="100px"/>
            </li>
          </ul>
        </ul>
      </div>
    </nav>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div
          class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button class="btn btn-sm btn-outline-secondary" v-on:click="resetZoom">Reset Zoom</button>
            <button class="btn btn-sm btn-outline-secondary">Export</button>
          </div>
          <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
            This week
          </button>
        </div>
      </div>

      <div id="drawing"></div>
    </main>

  </div>
</div>

<script src="svg.js"></script>
<script src="svg.select.js"></script>
<script src="svg.shapes.js"></script>
<script src="svg.panzoom.js"></script>
<script src="app.js"></script>
</body>
</html>