-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpuzzle.html
233 lines (212 loc) · 13.4 KB
/
puzzle.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Squaredle Maker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/results.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<link rel="icon" href="assets/logo.svg">
<!-- Primary Meta Tags -->
<title>Squaredle Maker</title>
<meta name="title" content="Squaredle Maker" />
<meta name="description" content="Squaredle Maker is a tool that helps create and test puzzles for the popular word game Squaredle. This is not affiliated in any way with Squaredle LLC.
" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://squaredle-maker.pages.dev/" />
<meta property="og:title" content="Squaredle Maker" />
<meta property="og:description" content="Squaredle Maker is a tool that helps create and test puzzles for the popular word game Squaredle. This is not affiliated in any way with Squaredle LLC.
" />
<meta property="og:image" content="https://squaredle-maker.pages.dev/assets/Squaredle_Maker.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://squaredle-maker.pages.dev/" />
<meta property="twitter:title" content="Squaredle Maker" />
<meta property="twitter:description" content="Squaredle Maker is a tool that helps create and test puzzles for the popular word game Squaredle. This is not affiliated in any way with Squaredle LLC.
" />
<meta property="twitter:image" content="https://squaredle-maker.pages.dev/assets/Squaredle_Maker.png" />
<!-- Meta Tags Generated with https://metatags.io -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="module" src="./js/components.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
</head>
<body>
<nav>
<a href="index.html"><img src="assets/logo.svg" height="64" alt="M" id="nav__logo"></a>
<input id="name_input" value="" maxlength="40">
<button id="aboutSite" class="smallbtn"><i class="fa-solid fa-circle-info"></i></button>
</nav>
<div id="actionbar">
<button id="changeSettings" class="smallbtn" description="Settings"><i class="fas fa-gear"></i></button>
<button id="toggleFullscreen" class="smallbtn" description="Toggle Fullscreen Mode"><i class="fas fa-maximize"></i></button>
<button id="savePuzzle" class="smallbtn" description="Save"><i class="fas fa-save"></i></button>
<button id="exportDscd" class="smallbtn" description="Share"><i class="fa-solid fa-share-from-square"></i></button>
<button id="printResults" class="smallbtn" description="Print"><i class="fa-solid fa-print"></i></button>
<button id="deletePuzzle" class="smallbtn" description="Delete Puzzle"><i class="fa-solid fa-trash"></i></button>
<button id="wordSort" class="smallbtn" description="Manual Word Sort"><i class="fa-solid fa-file-word"></i></button>
<button class="smallbtn notitle">|</button>
<button id="rotateLeft" class="smallbtn" description="Rotate Counter-clockwise"><i class="fa-solid fa-rotate-left"></i></button>
<button id="rotateRight" class="smallbtn" description="Rotate Clockwise"><i class="fa-solid fa-rotate-right"></i></button>
<button class="smallbtn notitle">|</button>
<button id="submitPuzzle" class="smallbtn" description="Submit Puzzle"><i class="fa-solid fa-paper-plane"></i></button>
</div>
<section>
<aside>
<h1>Results</h1>
<span id="results_notice">To see this puzzle's results, please press the red "Solve!" button.</span>
<span id="time_numwords"></span>
<span id="warnings">
<div class="left"><i class="fa-solid fa-triangle-exclamation"></i></div>
<div class="right">
<span class="title">Warning!</span>
<span class="desc">Your Puzzle has X awkward works!</span>
</div>
</span>
<!--<span id="results__analysis">Read Full Analysis</span>-->
<div id="solvingModal">
<span class="analysis_invoke" data-invoke="#analysis_awkward" data-open="no">Awkward Words <i class="fa-solid fa-caret-right"></i></span>
<div id="analysis_awkward" class="analysis_content">
Your puzzle has <span class="num">0 awkward words</span><span class="msg"></span>
<ul id="analysis_awkward_list"></ul>
</div>
<span class="analysis_invoke" data-invoke="#analysis_words_per_square" data-open="no">Words Per Square <i class="fa-solid fa-caret-right"></i></span>
<div id="analysis_words_per_square" class="analysis_content">
Click on a square to get analytics about it
<squaredle-puzzle id="analysis_wps_puzzle" size="0" puzzle="" style="display:block;width: min(80%, 300px);" read_only>Loading puzzle...</squaredle-puzzle>
<div id="analysis_wps_content" style="display: none;">
<div><span class="wps_header">Number of "required" words:</span> <span id="analysis_wps_required">-1</span></div>
<div><span class="wps_header">Number of "bonus" words:</span> <span id="analysis_wps_bonus">-1</span></div>
<div><span class="wps_header">Total words:</span> <span id="analysis_wps_total">-1</span></div>
<div id="wps_results"></div>
</div>
</div>
<span class="analysis_invoke" data-invoke="#analysis_words_distribution" data-open="no">Word Distribution <i class="fa-solid fa-caret-right"></i></span>
<div id="analysis_words_distribution" class="analysis_content">
This will apply a filter to the Squaredle board that shows the usage of every square. The darker a square, the more words use it.
<div class="analysis_distrib_container">
<b>Required Words</b>
<label class="switch"><input type="checkbox" class="required"><span class="slider round"></span></label>
</div>
<div class="analysis_distrib_container">
<b>Bonus Words</b>
<label class="switch"><input type="checkbox" class="bonus"><span class="slider round"></span></label>
</div>
<div class="analysis_distrib_container">
<b>All Words</b>
<label class="switch"><input type="checkbox" class="all"><span class="slider round"></span></label>
</div>
</div>
</div>
<div id="results"></div>
</aside>
<main>
<squaredle-puzzle id="puzzle" size="0" puzzle="" style="width: 100%;">Loading puzzle...</squaredle-puzzle>
<button id="process" class="coolbtn" disabled>Loading words...</button>
<button id="hidePath" class="coolbtn">Hide Path</button>
</main>
</section>
<div id="wordDef" class="modal">
<h2 class="header"><span id="word__def">LOADING</span> <span id="word__close" class="close">×</span></h2>
<button id="addRequired" class="smallCoolBtn">Ensure Required</button>
<button id="addBonus" class="smallCoolBtn">Ensure Bonus</button>
<button id="wordPath" class="smallCoolBtn">Show on board</button>
</div>
<div id="deletePopup" class="modal">
<h2 class="header"><i class="fa-solid fa-trash"></i> Are you ABSOLUTELY sure? <span class="close">×</span></h2>
<p>This action <b>CANNOT</b> be undone. Deleting <b class="deletename">{name}</b> will PERMANENTLY delete all
your hard work making this puzzle. Be ABSOLUTELY sure before deleting this puzzle.</p>
<p>To confirm, please write <b><span class="deletename">{name}</span></b> below:</p>
<input id="deleteInput" placeholder="{name}" autocomplete="off">
<button id="deleteDelete">I understand the consequences, delete this puzzle.</button>
</div>
<div id="sfreqPopup" class="tooltip">
Hover over a square to see its stats!
</div>
<div id="download" class="BigModal">
<div class="modal-content">
<h1><i class="fa-solid fa-share-from-square"></i> Share! <span class="close">×</span></h1>
<textarea id="shareEmojis" spellcheck="false"></textarea>
<button id="download__copyEmoji" class="coolbtn">Copy Emojis</button>
</div>
</div>
<!--<div id="solvingModal" class="BigModal">
<div class="modal-content">
<h1 class="header">Puzzle Analysis <span class="close">×</span></h1>
<span class="analysis_invoke" data-invoke="#analysis_awkward" data-open="no">Awkward Words <i class="fa-solid fa-caret-right"></i></span>
<div id="analysis_awkward" class="analysis_content">
I found <span class="num">0 awkward words</span> in your puzzle<span class="msg"></span>
<ul id="analysis_awkward_list"></ul>
</div>
<span class="analysis_invoke" data-invoke="#analysis_words_per_square" data-open="no">Words Per Square <i class="fa-solid fa-caret-right"></i></span>
<div id="analysis_words_per_square" class="analysis_content">
Click on a square to get analytics about it
<squaredle-puzzle id="analysis_wps_puzzle" size="0" puzzle="" style="display:block;width: min(50%, 300px);" read_only>Loading puzzle...</squaredle-puzzle>
<div id="analysis_wps_content" style="display: none;">
<div><span class="wps_header">Number of "required" words:</span> <span id="analysis_wps_required">-1</span></div>
<div><span class="wps_header">Number of "bonus" words:</span> <span id="analysis_wps_bonus">-1</span></div>
<div><span class="wps_header">Total words:</span> <span id="analysis_wps_total">-1</span></div>
<div id="wps_results"></div>
</div>
</div>
<span class="analysis_invoke" data-invoke="#analysis_words_distribution" data-open="no">Word Distribution <i class="fa-solid fa-caret-right"></i></span>
<div id="analysis_words_distribution" class="analysis_content">
The lighter the square, the fewer words use it. Use the <b onclick="$(`.analysis_invoke[data-invoke='#analysis_words_per_square']`).click()" style="cursor: pointer">Words Per Square</b>
tool to get more specific results.
<div class="analysis_distrib_container">
<b class="analysis_invoke" data-invoke="#analysis_distrib_required" data-open="yes">Required Words <i class="fa-solid fa-caret-down"></i></b>
<squaredle-puzzle id="analysis_distrib_required" size="0" puzzle="" style="display:block;width: min(50%, 300px)" read_only>Loading puzzle...</squaredle-puzzle>
</div>
<div class="analysis_distrib_container">
<b class="analysis_invoke" data-invoke="#analysis_distrib_bonus" data-open="yes">Bonus Words <i class="fa-solid fa-caret-down"></i></b>
<squaredle-puzzle id="analysis_distrib_bonus" size="0" puzzle="" style="display:block;width: min(50%, 300px)" read_only>Loading puzzle...</squaredle-puzzle>
</div>
<div class="analysis_distrib_container">
<b class="analysis_invoke" data-invoke="#analysis_distrib_all" data-open="yes">All Words <i class="fa-solid fa-caret-down"></i></b>
<squaredle-puzzle id="analysis_distrib_all" size="0" puzzle="" style="display:block;width: min(50%, 300px)" read_only>Loading puzzle...</squaredle-puzzle>
</div>
</div>
</div>
</div>-->
<div id="settingsModal" class="BigModal">
<div class="modal-content">
<h1 class="header"><i class="fas fa-gear"></i> Settings <span class="close">×</span></h1>
<div class="option">
<b data-info="How big should this puzzle be?">Puzzle Size</b>
<input type="number" value="4" min="3" max="10" id="settings__size">
</div>
<div class="option">
<b>Word Frequency Cutoff</b>
<i>All words are assigned a frequency between 0 (not frequent) and 10 (very frequent). All words with a frequency below the frequency cutoff will be counted bonus. Keep in mind that this is not a perfect indicator of if a word is required or bonus.</i>
<input type="number" value="2.7" min="0" max="10" id="settings__freq_cutoff" step="0.1">
</div>
</div>
</div>
<div id="info" class="BigModal">
<div class="modal-content">
Loading Information...
</div>
</div>
<div id="squareContextMenu">
<button id="squareCtxHide">Hide Square</button>
</div>
<div id="wordSortModal" class="BigModal">
<div class="modal-content">
<h1>Manual Word Sort <span class="close">×</span></h1>
<h1 style="font-size: 24px;">Required Words</h1>
<div id="reqWords">Loading...</div>
<h1 style="font-size: 24px;">Bonus Words</h1>
<div id="bonusWords">Loading...</div>
<!--<h1 style="font-size: 24px;">Watchlist</h1>
<div id="watchlistWords">Loading...</div>-->
</div>
</div>
<footer>This is not affiliated with <a href="https://squaredle.app">Squaredle LLC</a> in any way.</footer>
<script src="js/utils.js"></script>
<script src="js/const.js"></script>
<script src="js/solver.js" defer></script>
<script src="js/script.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/dom-to-image@2.6.0/dist/dom-to-image.min.js"></script>
</body>
</html>