-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
101 lines (96 loc) · 3.55 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<title>Constellation.js</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:description" content="A grid geometry toolkit for A-star pathfinding and 2D sprite motion." />
<meta property="og:site_name" content="Constellation" />
<meta property="og:title" content="Constellation.js" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://gmac.github.io/constellation-js/" />
<link rel="canonical" href="http://gmac.github.io/constellation-js/" />
<link href="website/style.css" rel="stylesheet" media="screen"/>
</head>
<body>
<div class="container" id="app">
<div class="header">
<h1>constellation</h1>
<ul class="nav">
<li><a href="https://github.com/gmac/constellation-js">GitHub Source</a></li>
<li><a href="https://github.com/gmac/constellation-js#api-documentation">Documentation</a></li>
</ul>
</div>
<div class="toolbar" id="toolbar">
<strong>Actions</strong>
<ul>
<li><button class="action" @click="joinNodes">Join nodes <span>j</span></button></li>
<li><button class="action" @click="splitNodes">Break nodes <span>b</span></button></li>
<li><button class="action" @click="addCell">Add cell <span>c</span></button></li>
<li><button class="action" @click="deleteGeometry">Delete <span>DEL</span></button></li>
</ul>
<strong>Functions</strong>
<ul>
<li><button class="action" @click="findPath">Pathfinder <span>f</span></button></li>
<li><button class="action" @click="snapToGrid">Snap point <span>s</span></button></li>
<li><button class="action" @click="hitTestGeometry">Hittest <span>h</span></button></li>
<li><button class="action" @click="print">Print <span>p</span></button></li>
</ul>
</div>
<svg class="canvas" id="canvas" @mousedown="touch($event)">
<path v-for="(cell, id) in cells"
:key="id"
:id="id"
:d="cell"
:class="{ selected: hasSelection(id) }" />
<line v-for="(line, id) in lines"
:key="id"
:id="id"
:x1="line.ax"
:y1="line.ay"
:x2="line.bx"
:y2="line.by"
:class="{ selected: hasHighlight(id) }" />
<circle v-for="(node, id) in grid.nodes"
:key="id"
:id="id"
r="6.5"
:cx="node.x"
:cy="node.y"
:class="{ selected: hasSelection(id) }" />
<text v-for="ord in ordinals"
:x="ord.x"
:y="ord.y"
text-anchor="middle"
alignment-baseline="middle"
>{{ord.text}}</text>
<rect v-if="marquee"
:x="marquee.x"
:y="marquee.y"
:width="marquee.width"
:height="marquee.height"
class="marquee" />
</svg>
<transition name="fade">
<div class="message" id="message" v-if="message">{{message.text}} <span v-show="message.hint">{{message.hint}}</span></div>
</transition>
</div>
<div class="info" id="info">
<div class="view" :class="{ open: enabled }">
<b>About</b>
<p>Constellation manages 2D point grids and path navigation; it's designed to control dynamic sprite motion around 2D scenes. Constellation expands upon the motion system used in the <a href="https://www.youtube.com/watch?v=qxngufqrZBE">What Makes You Tick?</a> games.</p>
<b>Controls</b>
<ul>
<li>Double-click on canvas to add grid nodes.</li>
<li>Click+drag on canvas for selection marquee.</li>
<li>SHIFT+click to add and remove selections.</li>
</ul>
</div>
<button class="toggle" @click="enabled=!enabled">{{ enabled ? 'x' : '?' }}</button>
</div>
<script src="dist/index.js"></script>
<script src="website/vue.js"></script>
<script src="website/app.js"></script>
</body>
</html>