-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (195 loc) · 8.39 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
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!doctype html>
<!--
// Wordroute – A word game
// Copyright (C) 2023, 2024 Neil Roberts
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="A word search game with the Shavian alphabet.">
<title>WordRoute</title>
<link rel="stylesheet" type="text/css" href="wordroute.css">
<script type="module" src="wordroute.js"></script>
</head>
<body>
<div id="content" class="loading">
<div class="title-bar">
<svg id="back-button" viewBox="0 0 35.9674 35.9674">
<path style="fill:#000"
d="M 10.690,7.006 2.250,16.068 c -1.073,1.152
-1.073,2.938 0,4.090 l 8.439,9.061 c 1.129,1.213
3.028,1.280 4.240,0.150 1.211,-1.129 1.279,-3.026
0.150,-4.238 L 11.338,21.113 h 20.184 c 1.657,0 3,-1.343
3,-3 0,-1.657 -1.343,-3 -3,-3 H 11.338 l 3.742,-4.018 C
16.210,9.883 16.143,7.985 14.930,6.855 13.720,5.729
11.817,5.796 10.690,7.006 Z" />
<a href="/">
<rect x="0" y="0" width="35.9674" height="35.9674" fill="#0000" />
</a>
</svg>
<div class="title-space"></div>
<h1 id="title">WordRoute</h1>
<svg id="help-button" viewBox="0 0 35.967396 35.9674">
<path fill="black"
d="M 17.984,0.649 c -9.557,0 -17.334,7.777 -17.334,17.334
0,9.557 7.777,17.334 17.334,17.334 9.557,0 17.334,-7.777
17.334,-17.334 0,-9.557 -7.777,-17.334 -17.334,-17.334 z
m 0,2.701 c 8.098,0 14.633,6.535 14.633,14.633 0,8.098
-6.535,14.635 -14.633,14.635 -8.098,0 -14.635,-6.537
-14.635,-14.635 0,-8.098 6.537,-14.633 14.635,-14.633
z m -2.389,22.673 h 3.138 v 3.926 h -3.138 z m 3.045,-2.272
h -2.952 v -2.380 q 0,-1.561 0.433,-2.566 0.433,-1.005
1.824,-2.334 l 1.391,-1.376 q 0.881,-0.819 1.267,-1.546
0.402,-0.726 0.402,-1.484 0,-1.376 -1.020,-2.226
-1.005,-0.850 -2.674,-0.850 -1.221,0 -2.612,0.541
-1.376,0.541 -2.875,1.577 v -2.906 q 1.453,-0.881
2.937,-1.314 1.499,-0.433 3.091,-0.433 2.844,0
4.560,1.499 1.731,1.499 1.731,3.957 0,1.175 -0.556,2.241
-0.556,1.051 -1.947,2.380 l -1.360,1.329 q -0.726,0.726
-1.036,1.144 -0.294,0.402 -0.417,0.788 -0.093,0.325
-0.139,0.788 -0.046,0.464 -0.046,1.267 z" />
</svg>
<svg id="share-button" viewBox="0 0 35.9674 35.9674">
<circle fill="#000" r="4.916" cy="6.529" cx="29.016" />
<circle fill="#000" r="4.916" cy="17.984" cx="6.952" />
<circle fill="#000" r="4.916" cy="29.438" cx="29.016" />
<path fill="none" stroke="#000"
stroke-width="4.812" stroke-linecap="round"
stroke-linejoin="round"
d="M 29.206,6.582 6.940,18.149 29.206,29.715" />
</svg>
</div>
<p id="message" style="display: block">Loading…</p>
<div id="game-contents" style="display: none">
<p id="word-count"></p>
<div id="score-meter">
<div id="score-bar"></div>
<div id="next-level-marker"></div>
</div>
<div id="word-container">
<p id="current-word"></p>
<p id="word-message"></p>
</div>
<svg id="game-grid"></svg>
<div id="hint-checkboxes">
<label>
<input id="sort-hint-checkbox" type="checkbox">
Sort words alphabetically
</label>
<label>
<input id="letters-hint-checkbox" type="checkbox">
Show some letters
</label>
</div>
<div id="word-lists"></div>
</div>
<div id="puzzle-selector" style="display: none">
<p>Choose a puzzle to begin playing.</p>
<ul id="puzzle-list">
</ul>
</div>
</div>
<div id="instructions-overlay" style="display: none">
<div id="instructions">
<div class="title-bar">
<div class="title-space"></div>
<h1 id="title">How to play</h1>
<svg id="close-instructions-cross" viewBox="0 0 35.967396 35.9674">
<path stroke="black" stroke-width="5"
d="M 32.670,3.245 l -28.990,29.793
m 0,-29.793 28.990,29.793" />
</svg>
</div>
<p>
WordRoute is a word game using
the <a href="https://www.shavian.info/">Shavian
alphabet</a>. Try to find all the words in the grid that are
at least four letters long.
</p>
<img src="example-word.svg" alt="Example of a word in the grid">
<p>
There are three levels of hints that will help you find all
the words. These will be unlocked as you progress through
the puzzle. The first level tells you how many words start
with each letter and the second one tells you how many words
contain the letter.
</p>
<img src="counts-example.svg"
alt="Explanation of the numbers on the tiles">
<p>
The last hint level gives you two optional changes to the list of words:
</p>
<ul>
<li><b>Sort words alphabetically:</b><br> The missing words
are inserted in sorted order between the words that have
already been found. This can give you an idea of what
letters the missing words might contain. For the Shavian
alphabet the order is: 𐑐𐑑𐑒𐑓𐑔𐑕𐑖𐑗𐑘𐑙 𐑚𐑛𐑜𐑝𐑞𐑟𐑠𐑡𐑢𐑣 𐑤𐑥𐑦𐑧𐑨𐑩𐑪𐑫𐑬𐑭
𐑮𐑯𐑰𐑱𐑲𐑳𐑴𐑵𐑶𐑷 𐑸𐑹𐑺𐑻𐑼𐑽𐑾𐑿
<li><b>Show some letters:</b><br> The missing words in the
list will have a hint about what letters are at the start
or the end.
</ul>
<p>Good luck!</p>
<button id="close-instructions">Close</button>
</div>
</div>
<div id="share-overlay" style="display: none">
<div id="share">
<div class="title-bar">
<div class="title-space"></div>
<h1 id="title">Share</h1>
<svg id="close-share-cross" viewBox="0 0 35.967396 35.9674">
<path stroke="black" stroke-width="5"
d="M 32.670,3.245 l -28.990,29.793
m 0,-29.793 28.990,29.793" />
</svg>
</div>
<textarea id="share-text" rows="6" readonly></textarea>
<button id="copy-share">Copy</button>
<p id="share-text-copied" style="display: none">
Text copied to the clipboard!
</p>
<p>
Thanks for playing WordRoute!
</p>
</div>
</div>
<div id="excluded-word-overlay" style="display: none">
<div id="excluded-word">
<div class="title-bar">
<div class="title-space"></div>
<h1 id="title">Excluded word</h1>
<svg id="close-excluded-word-cross" viewBox="0 0 35.967396 35.9674">
<path stroke="black" stroke-width="5"
d="M 32.670,3.245 l -28.990,29.793
m 0,-29.793 28.990,29.793" />
</svg>
</div>
<p>
In order to keep the game family friendly, some words have
been excluded so that no one has to look for them if they
don’t feel comfortable with it. These words don’t count
towards the score or the bonus count. But don’t worry, there
is no penalty for finding them either.
</p>
<button id="close-excluded-word">Close</button>
</div>
</div>
</body>
</html>