-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathlyne-solver.html
134 lines (121 loc) · 6.33 KB
/
lyne-solver.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<!-- https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Should I add initial-scale=1 ? -->
<meta name="viewport" content="width=device-width">
<meta name="author" content="Denilson Sá">
<link href="lyne-solver.css" rel="stylesheet">
<script src="shared.js" defer></script>
<script src="ui.js" defer></script>
<title>LYNE puzzle solver</title>
<script data-goatcounter="https://denilsonsa.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</head>
<body>
<svg id="svgdefs">
<defs>
<marker id="mid_arrow" markerWidth="2" markerHeight="2" viewBox="-1 -1 2 2" orient="auto">
<path fill="#efebdf" d="M-1,-1 L1,0 -1,1 z" />
</marker>
<path id="triangle_shape" d="M0.5,0 l0.5,0.866 h-1 z" />
<clipPath id="triangle_clip" clipPathUnits="userSpaceOnUse">
<use xlink:href="#triangle_shape" x="0" y="0" />
</clipPath>
<symbol id="node_t" viewBox="0 0 1 1">
<use xlink:href="#triangle_shape" x="0" y="0" fill="#ce8930" />
</symbol>
<symbol id="node_T" viewBox="0 0 1 1">
<use xlink:href="#triangle_shape" x="0" y="0" fill="none" stroke="#efebdf" stroke-width="1" clip-path="url(#triangle_clip)" />
<use xlink:href="#triangle_shape" x="0" y="0" fill="none" stroke="#ce8930" stroke-width="0.44" clip-path="url(#triangle_clip)" />
<use xlink:href="#triangle_shape" x="0" y="0" fill="none" stroke="#ffa515" stroke-width="0.15" clip-path="url(#triangle_clip)" />
</symbol>
<path id="diamond_shape" d="M0.5,0 l0.5,0.5 l-0.5,0.5 l-0.5,-0.5 z" />
<clipPath id="diamond_clip" clipPathUnits="userSpaceOnUse">
<use xlink:href="#diamond_shape" x="0" y="0" />
</clipPath>
<symbol id="node_d" viewBox="0 0 1 1">
<use xlink:href="#diamond_shape" x="0" y="0" fill="#4ab2ff" />
</symbol>
<symbol id="node_D" viewBox="0 0 1 1">
<use xlink:href="#diamond_shape" x="0" y="0" fill="none" stroke="#efebdf" stroke-width="1" clip-path="url(#diamond_clip)" />
<use xlink:href="#diamond_shape" x="0" y="0" fill="none" stroke="#4ab2ff" stroke-width="0.5" clip-path="url(#diamond_clip)" />
<use xlink:href="#diamond_shape" x="0" y="0" fill="none" stroke="#0086ff" stroke-width="0.15" clip-path="url(#diamond_clip)" />
</symbol>
<path id="square_shape" d="M0.125,0.125 h0.75 v0.75 h-0.75 z" />
<clipPath id="square_clip" clipPathUnits="userSpaceOnUse">
<use xlink:href="#square_shape" x="0" y="0" />
</clipPath>
<symbol id="node_s" viewBox="0 0 1 1">
<use xlink:href="#square_shape" x="0" y="0" fill="#c60000" />
</symbol>
<symbol id="node_S" viewBox="0 0 1 1">
<use xlink:href="#square_shape" x="0" y="0" fill="none" stroke="#efebdf" stroke-width="1" clip-path="url(#square_clip)" />
<use xlink:href="#square_shape" x="0" y="0" fill="none" stroke="#c60000" stroke-width="0.5" clip-path="url(#square_clip)" />
<use xlink:href="#square_shape" x="0" y="0" fill="none" stroke="#fc1f20" stroke-width="0.15" clip-path="url(#square_clip)" />
</symbol>
<path id="pentagon_shape" d="M0.5,0 l0.476,0.346 -0.182,0.559 h-0.588 l-0.182,-0.559 z" />
<clipPath id="pentagon_clip" clipPathUnits="userSpaceOnUse">
<use xlink:href="#pentagon_shape" x="0" y="0" />
</clipPath>
<symbol id="node_p" viewBox="0 0 1 1">
<use xlink:href="#pentagon_shape" x="0" y="0" fill="#19ca19" />
</symbol>
<symbol id="node_P" viewBox="0 0 1 1">
<use xlink:href="#pentagon_shape" x="0" y="0" fill="none" stroke="#efebdf" stroke-width="1" clip-path="url(#pentagon_clip)" />
<use xlink:href="#pentagon_shape" x="0" y="0" fill="none" stroke="#19ca19" stroke-width="0.5" clip-path="url(#pentagon_clip)" />
<use xlink:href="#pentagon_shape" x="0" y="0" fill="none" stroke="#009e00" stroke-width="0.15" clip-path="url(#pentagon_clip)" />
</symbol>
<path id="hexagon_shape" d="M0,0.5 l0.25,-0.433 h0.5 l0.25,0.433 -0.25,0.433 h-0.5 z" />
<clipPath id="hexagon_clip" clipPathUnits="userSpaceOnUse">
<use xlink:href="#hexagon_shape" x="0" y="0" />
</clipPath>
<symbol id="node_h" viewBox="0 0 1 1">
<use xlink:href="#hexagon_shape" x="0" y="0" fill="#9f005a" />
</symbol>
<symbol id="node_H" viewBox="0 0 1 1">
<use xlink:href="#hexagon_shape" x="0" y="0" fill="none" stroke="#efebdf" stroke-width="1" clip-path="url(#hexagon_clip)" />
<use xlink:href="#hexagon_shape" x="0" y="0" fill="none" stroke="#9f005a" stroke-width="0.5" clip-path="url(#hexagon_clip)" />
<use xlink:href="#hexagon_shape" x="0" y="0" fill="none" stroke="#ca197d" stroke-width="0.15" clip-path="url(#hexagon_clip)" />
</symbol>
<path id="octogon_shape" d="M0.02,0.30 l0.28,-0.28 h0.4 l0.28,0.28 v0.4 l-0.28,0.28 h-0.4 l-0.28,-0.28 z" />
<path id="octogon_diamond_shape" d="M-0.1,0 l0.1,-0.1 l0.1,0.1 l-0.1,0.1 z" />
<symbol id="node_1" viewBox="0 0 1 1">
<use xlink:href="#octogon_shape" x="0" y="0" fill="#d1cfb8" />
<use xlink:href="#octogon_diamond_shape" x="0.5" y="0.5" fill="#1e1e1e" />
</symbol>
<symbol id="node_2" viewBox="0 0 1 1">
<use xlink:href="#octogon_shape" x="0" y="0" fill="#d1cfb8" />
<use xlink:href="#octogon_diamond_shape" x="0.35" y="0.5" fill="#1e1e1e" />
<use xlink:href="#octogon_diamond_shape" x="0.65" y="0.5" fill="#1e1e1e" />
</symbol>
<symbol id="node_3" viewBox="0 0 1 1">
<use xlink:href="#node_2" x="0" y="0" width="1" height="1" />
<use xlink:href="#octogon_diamond_shape" x="0.5" y="0.35" fill="#1e1e1e" />
</symbol>
<symbol id="node_4" viewBox="0 0 1 1">
<use xlink:href="#node_3" x="0" y="0" width="1" height="1" />
<use xlink:href="#octogon_diamond_shape" x="0.5" y="0.65" fill="#1e1e1e" />
</symbol>
</defs>
</svg>
<article>
<section>
<textarea id="puzzleinput">TDS PHp
tdsh4p
123hPH
TdDSs</textarea>
<input type="button" id="solvebutton" value="Solve it!">
<div id="messages"></div>
<label title="Slide to reveal more of the lines once the board has been solved." for="revealrange">Reveal:</label>
<input title="Slide to reveal more of the lines once the board has been solved." type="range" id="revealrange" value="0" min="0" step="1">
<p><label title="Arrows showing the direction of each line."><input type="checkbox" id="showarrowscheckbox"> Arrows</label></p>
<div><label><input type="checkbox" id="autosolvecheckbox"> Auto-solve</label></div>
<p><a href="https://github.com/denilsonsa/lyne-solver">Need help? Read more at GitHub.</a></p>
</section>
<section>
<div id="svgsolutioncontainer"></div>
</section>
</article>
</body>
</html>