-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
289 lines (289 loc) · 16.3 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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polydle</title>
<link rel="icon" type="image/x-icon" href="/icon.png">
<meta name="description" content="A Wordle variant where you can solve any number of words at once! Try a new Polydle for each number daily.">
<meta name="keywords" content="Polydle, Quordle, Dordle, Wordle, word game, puzzle, brain teaser">
<meta name="author" content="Jack Boettcher">
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<meta name="google-site-verification" content="liGWiPH9BWzcJD9GWfb0nCeXSbfqBkr2Agw9by6LqOM"/>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X3T3MYTFZC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-X3T3MYTFZC');
</script>
</head>
<body>
<script src="index.js"></script>
<div id="back" onclick="window.location.search = ''">←</div>
<div id="howto2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" onclick="openHowTo()">
<path fill="white" d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path>
</svg>
</div>
<div id="title">DAILY N-DLE #</div>
<!-- <div id="modetitle">classic mode</div> -->
<div id="timer">0.00</div>
<div id="start-page">
<div id="title2">POLYDLE</div>
<div class="subdiv">
<div class="subtitle">©2022 Jack Boettcher</div>
<div class="subtitle small"><p>Based on <a href="https://quordle.com" target="_blank">Quordle</a> by Freddie Meyer</p></div>
</div>
<div id="howto">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" onclick="openHowTo()">
<path fill="white" d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path>
</svg>
</div>
<div id="inputdiv">
<div>How many words? (1-2315)</div>
<input id="ninput" type="number" value="" min="1" max="2315">
</div>
<div id="classicdiv" class="buttonsdiv">
<div id="classicbtn" class="frontbutton green" onclick="expandModes('classic')">Classic Polydle</div>
<div id="classicdaily" class="backbuttonleft green" onclick="submitN('classic')">Daily</div>
<div id="classicrandom" class="backbuttonright notanim white" onclick="submitN('classic',false)">Random</div>
</div>
<div id="speeddiv" class="buttonsdiv">
<div id="speedbtn" class="frontbutton yellow" onclick="expandModes('speed')">Speed Polydle</div>
<div id="speeddaily" class="backbuttonleft notanim white" onclick="submitN('speed')">Daily</div>
<div id="speedrandom" class="backbuttonright yellow" onclick="submitN('speed',false)">Random</div>
</div>
<div id="perfectdiv" class="buttonsdiv">
<div id="perfectbtn" class="frontbutton white" onclick="expandModes('perfect')">Perfect Polydle</div>
<div id="perfectdaily" class="backbuttonleft white" onclick="submitN('perfect')">Daily</div>
<div id="perfectrandom" class="backbuttonright notanim green" onclick="submitN('perfect',false)">Random</div>
</div>
</div>
<div id="howto-page">
<div id="menu">
<div id="ex" onclick="closeHowTo()">×</div>
<div class="howto-title">How to play</div>
<div class="howto-text">
Guess all Polydle words in as few guesses as possible.
Each guess must be a valid 5-letter word.
Hit Enter to submit your guess.
After each guess, the colors will indicate how close you were to each word.
Scroll left and right to see all the words.
You'll get a set of colors for each word you haven't solved.
</div>
<div class="howto-text addtiny">
New Polydles for each number and mode come out each day!
</div>
<div class="howto-subtitle">Colors</div>
<div class="howto-text">
<b class="g">Green</b> squares indicate the letter is in the word and in the right spot.
<b class="y">Yellow</b> squares indicate the letter is in the word but in the wrong spot.
<b>White</b> squares indicate the letter is not in the word in any spot.
</div>
<div class="word howto-word addmargin">
<div class="letter howto-box howto-letter">E</div>
<div class="letter howto-box">R</div>
<div class="letter howto-box">O</div>
<div class="letter howto-box green">D</div>
<div class="letter howto-box">E</div>
</div>
<div class="howto-text">The D is in the word and in the right spot.</div>
<div class="word howto-word addmargin">
<div class="letter howto-box howto-letter yellow">S</div>
<div class="letter howto-box">A</div>
<div class="letter howto-box">I</div>
<div class="letter howto-box">N</div>
<div class="letter howto-box">T</div>
</div>
<div class="howto-text">The S is in the word but in the wrong spot.</div>
<div class="word howto-word addmargin">
<div class="letter howto-box howto-letter">X</div>
<div class="letter howto-box">Y</div>
<div class="letter howto-box">L</div>
<div class="letter howto-box">E</div>
<div class="letter howto-box">M</div>
</div>
<div class="howto-text">The X, Y, L, E, M are all not in the word in any spot.</div>
<div class="howto-subtitle">Multiple Words</div>
<div class="howto-text">
In Polydle, you guess multiple words at once using the same guess for all of them.
You'll get colors independently for each one.
Once you solve a word, you'll stop guessing for that word.
You win once you solve all the words.
</div>
<div class="howto-text addsmall">Consider this 2-dle example:</div>
<div class="section howto-section">
<div class="word howto-word">
<div class="letter howto-box howto-letter">A</div>
<div class="letter howto-box yellow">L</div>
<div class="letter howto-box">I</div>
<div class="letter howto-box green">E</div>
<div class="letter howto-box">N</div>
</div>
<div class="word">
<div class="letter howto-box yellow">A</div>
<div class="letter howto-box">L</div>
<div class="letter howto-box">I</div>
<div class="letter howto-box yellow">E</div>
<div class="letter howto-box yellow">N</div>
</div>
</div>
<div class="howto-text">
The first word has the E in the right spot and the L in the wrong spot.
The second word has A, E, N all in the wrong spots.
Keep guessing until you solve all the words!
</div>
<div class="howto-subtitle">Keyboard Indicators</div>
<div class="howto-text">
The keyboard will tell you information about that letter with respect to each word
based on your guesses so far. The indicators start at 9-o-clock (except for 2-dle)
and continue around clockwise for each word.
</div>
<div class="howto-text addtiny">
<b class="g">Green</b> and <b class="y">Yellow</b> are the same as above, but here,
letters that don't appear in the word are marked as <b class="gr">Gray</b>.
</div>
<div class="howto-text addsmall">Here are some example keys during a 3-dle game:</div>
<div class="row addsmall">
<div class="pie howto-box howto-letter">
<h2 class="howto-h2">Q</h2>
<div class="key circle" style="transform: rotate(-90deg) skewY(30deg)"></div>
<div class="key circle" style="transform: rotate(30deg) skewY(30deg)"></div>
<div class="key circle" style="transform: rotate(150deg) skewY(30deg)"></div>
</div>
<div class="pie howto-box">
<h2 class="howto-h2">W</h2>
<div class="key circle gray" style="transform: rotate(-90deg) skewY(30deg)"></div>
<div class="key circle gray" style="transform: rotate(30deg) skewY(30deg)"></div>
<div class="key circle gray" style="transform: rotate(150deg) skewY(30deg)"></div>
</div>
<div class="pie howto-box">
<h2 class="howto-h2">E</h2>
<div class="key circle gray" style="transform: rotate(-90deg) skewY(30deg)"></div>
<div class="key circle green" style="transform: rotate(30deg) skewY(30deg)"></div>
<div class="key circle gray" style="transform: rotate(150deg) skewY(30deg)"></div>
</div>
<div class="pie howto-box">
<h2 class="howto-h2">R</h2>
<div class="key circle gray" style="transform: rotate(-90deg) skewY(30deg)"></div>
<div class="key circle gray" style="transform: rotate(30deg) skewY(30deg)"></div>
<div class="key circle yellow" style="transform: rotate(150deg) skewY(30deg)"></div>
</div>
</div>
<div class="howto-text addsmall">
So far, we've guessed W, E, R but not Q.
W wasn't in any of the words.
E was only in word 2 and we got the position correct.
R was only in word 3 and we didn't get the position correct.
</div>
<div class="howto-title">Modes</div>
<div class="howto-subtitle aftertitle">Classic</div>
<div class="howto-text">
In classic mode, you aim to minimize your total number of guesses across all words.
While the game won't enforce a limit on number of guesses, a good score to aim for is n+5 (where n is the number of words).
</div>
<div class="howto-subtitle">Speed</div>
<div class="howto-text">
In speed mode, it doesn't matter how many guesses you make. All that matters is the time it takes.
Your goal is to get all words as fast as possible, regardless of how many guesses it takes.
</div>
<div class="howto-subtitle">Perfect</div>
<div class="howto-text">
<!-- In perfect mode, you're trying to play 100% perfectly. You start with 3 lives and every time you miss a word,
you lose a life. Lost lives appear as red lines and you don't get clues for those guesses. Thankfully, the game
gives you the first word. And on each subsequent guess, it guarantees that there is at least one column
where there is a unique non-obscure word that satisfies all the clues so far. Don't worry though-- the game will
indicate if a word is considered obscure (and thus not included in the uniqueness determination) by turning the
text gray before you submit. And if you submit an obscure word, you won't lose a life for it either. -->
Perfect mode is a little more complicated. The idea is you are attempting to play 100% perfectly.
To make this possible, the game will start with the first word already inputted-- you simply have to hit
Enter to begin the game. From then on, it will then guarantee that there is always (at least) 1 column available where
the clues so far make the word for that column unique*. Your goal for each guess is to find a column
where this is true and then identify the unique word. Getting this word correct will then give you additional
clues in other columns until eventually every column can be uniquely determined.
</div>
<div class="howto-text addtiny">
After 3 incorrect guesses, you lose the game. If you make an incorrect guess, the line
will turn <b class="r">Red</b> and you will not receive any new clues:
</div>
<div class="section howto-section">
<div class="word howto-word">
<div class="letter howto-box howto-letter death">D</div>
<div class="letter howto-box death">O</div>
<div class="letter howto-box death">N</div>
<div class="letter howto-box death">U</div>
<div class="letter howto-box death">T</div>
</div>
<div class="word">
<div class="letter howto-box death">D</div>
<div class="letter howto-box death">O</div>
<div class="letter howto-box death">N</div>
<div class="letter howto-box death">U</div>
<div class="letter howto-box death">T</div>
</div>
</div>
<div class="howto-text">
Thus, the only additional information this gives you is that the word you guessed is not the solution to any
of the remaining columns. There are two ways you can make an incorrect guess. One way is that
you simply guess a word that does not fit the clues of any column. The other way (and the one that's
harder to avoid) is that you picked the wrong column-- that is, you picked a column where there was more than
one possible solution to the clues so far. In such a case, this just means there's a different column where
the solution is indeed unique and you should perhaps try that one instead.
</div>
<div class="howto-text addtiny">
If you do end up losing, the game will play out the rest of the game in one of the correct orders-- that is,
it will show you the remaining words in an order such that each guess was uniquely determined by the clues prior.
There may be other possible orders, but the game will just pick one of them to show.
</div>
<div class="howto-text addmargin">
*The uniqueness determination isn't quite exhaustive. In order to keep the possible sets of words from
being too restrictive, a slightly smaller dictionary consisting of "non-obscure" words is used to determine
uniqueness. That is, each solution is only guaranteed to be a unique <i>non-obscure</i> word given the clues so far.
Because of this, there sometimes may be other obscure words that satisfy all the clues, but that are not the correct
solution to that column. To account for this, the game will indicate to you that a word is considered obscure by
turning the text color <b class="gr">Gray</b> before you submit. And if you do happen to submit an obscure word,
you do not get penalized for it (nor do you get additional clues though), and the line will just turn
<b class="gr">Gray</b>:
</div>
<div class="section howto-section">
<div class="word howto-word">
<div class="letter howto-box howto-letter gray">P</div>
<div class="letter howto-box gray">H</div>
<div class="letter howto-box gray">P</div>
<div class="letter howto-box gray">H</div>
<div class="letter howto-box gray">T</div>
</div>
<div class="word">
<div class="letter howto-box gray">P</div>
<div class="letter howto-box gray">H</div>
<div class="letter howto-box gray">P</div>
<div class="letter howto-box gray">H</div>
<div class="letter howto-box gray">T</div>
</div>
</div>
<div class="howto-subtitle">More modes coming soon!</div>
<div class="howto-title">Contact</div>
<div class="howto-text">
Send suggestions, report bugs, or just say hi at contactpolydle@gmail.com
</div>
<br>
</div>
</div>
<div id="container">
<div id="s-0" class="section"></div>
</div>
<div id="keyboard">
<div id="row1" class="row"></div>
<div id="row2" class="row"></div>
<div id="row3" class="row"></div>
</div>
<div id="win">
<div id="share" onclick="copy()">SHARE</div>
<div id="time">NEXT POLYDLES IN</div>
</div>
</body>
</html>