├── x.png
├── box.png
├── info.png
├── mail.png
├── ogp.png
├── stamp.png
├── undo.png
├── favicon.ico
├── loading.png
├── mail-checked.png
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── safari-pinned-tab.svg
└── index.html


/x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/x.png


--------------------------------------------------------------------------------
/box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/box.png


--------------------------------------------------------------------------------
/info.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/info.png


--------------------------------------------------------------------------------
/mail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/mail.png


--------------------------------------------------------------------------------
/ogp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/ogp.png


--------------------------------------------------------------------------------
/stamp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/stamp.png


--------------------------------------------------------------------------------
/undo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/undo.png


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/favicon.ico


--------------------------------------------------------------------------------
/loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/loading.png


--------------------------------------------------------------------------------
/mail-checked.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/mail-checked.png


--------------------------------------------------------------------------------
/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/favicon-16x16.png


--------------------------------------------------------------------------------
/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/favicon-32x32.png


--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/posting-puzzle/HEAD/apple-touch-icon.png


--------------------------------------------------------------------------------
/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017
 9 | </metadata>
10 | <g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M1420 2542 c-30 -10 -82 -37 -115 -60 -33 -23 -67 -47 -75 -52 -8 -5
13 | -69 -47 -135 -93 -66 -45 -172 -118 -235 -162 -173 -118 -268 -184 -335 -231
14 | -33 -23 -74 -61 -92 -86 -58 -79 -63 -123 -63 -503 l0 -340 358 -133 c196 -73
15 | 364 -136 372 -139 8 -4 35 -14 60 -23 l45 -16 -1 -50 c0 -49 0 -49 -40 -57
16 | -143 -31 -286 -96 -335 -153 -97 -111 -67 -241 76 -332 59 -37 185 -80 283
17 | -96 110 -18 341 -14 438 7 289 64 429 215 346 372 -21 41 -73 95 -90 95 -6 0
18 | -12 4 -14 8 -9 24 -182 85 -293 104 -19 3 -20 12 -21 114 l-1 111 71 49 c38
19 | 27 111 77 161 111 49 34 95 66 101 71 5 5 20 14 31 21 12 6 27 17 35 23 7 7
20 | 64 47 126 88 l112 75 -1 353 c0 274 -4 362 -14 393 -8 22 -15 43 -16 47 -24
21 | 108 -136 265 -254 358 -152 120 -350 171 -485 126z m257 -128 c86 -34 140 -71
22 | 217 -149 50 -50 139 -178 138 -199 0 -3 8 -28 18 -55 16 -45 18 -88 19 -368
23 | l2 -318 -233 -160 c-128 -88 -290 -199 -360 -248 -71 -48 -129 -84 -129 -80
24 | -1 5 -2 127 -4 273 -1 146 -5 281 -9 300 -8 40 -26 100 -35 115 -3 6 -6 15 -7
25 | 22 -1 7 -11 25 -22 40 -11 15 -20 31 -21 36 -3 36 -186 220 -263 265 -31 18
26 | -84 42 -119 54 -35 11 -72 23 -81 26 -21 9 601 438 669 463 60 22 138 16 220
27 | -17z m-840 -544 c195 -68 365 -257 413 -458 17 -72 18 -568 1 -585 -12 -12
28 | -61 2 -206 58 -33 13 -171 65 -308 116 l-248 93 1 303 c1 312 4 338 44 399 20
29 | 32 93 84 131 95 34 9 113 0 172 -21z m613 -1318 c0 -186 -1 -200 -20 -220 -25
30 | -26 -81 -30 -105 -6 -13 13 -15 40 -13 177 l3 161 60 43 c33 23 63 42 68 43 4
31 | 0 7 -89 7 -198z m-244 -87 c1 -8 -3 -15 -9 -15 -8 0 -8 -3 -2 -8 6 -4 11 -33
32 | 11 -64 3 -96 53 -156 137 -165 71 -8 112 4 156 45 45 42 58 86 54 180 -2 46 1
33 | 52 15 48 9 -2 42 -10 72 -16 93 -21 226 -94 231 -128 9 -52 6 -62 -26 -95 -81
34 | -83 -257 -131 -475 -130 -292 1 -535 122 -464 231 23 35 38 47 104 79 55 27
35 | 181 64 189 57 3 -3 6 -11 7 -19z"/>
36 | <path d="M595 1431 c4 -7 7 -43 7 -80 l0 -67 221 -83 c122 -46 243 -92 268
37 | -102 l47 -18 -1 79 0 78 -206 77 c-113 42 -215 80 -226 85 -11 4 -33 13 -50
38 | 18 -16 6 -39 13 -49 18 -14 5 -17 4 -11 -5z"/>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html lang="en-US">
  2 |   <head>
  3 |     <meta charset="utf-8" />
  4 |     <title>Posting Puzzle</title>
  5 |     <meta name="description" content="The puzzle is to stamp letters and send them to the mailbox." />
  6 |     <meta property="og:type" content="website" />
  7 |     <meta property="og:title" content="Posting Puzzle" />
  8 |     <meta property="og:url" content="https://mame.github.io/posting-puzzle/" />
  9 |     <meta property="og:description" content="The puzzle is simply to stamp letters and send them to the mailbox." />
 10 |     <meta property="og:site_name" content="Posting Puzzle" />
 11 |     <meta property="og:image" content="https://mame.github.io/posting-puzzle/ogp.png" />
 12 |     <meta name="twitter:card" content="summary_large_image" />
 13 |     <link rel="apple-touch-icon" sizes="180x180" href="https://mame.github.io/posting-puzzle/apple-touch-icon.png">
 14 |     <link rel="icon" type="image/png" sizes="32x32" href="https://mame.github.io/posting-puzzle/favicon-32x32.png">
 15 |     <link rel="icon" type="image/png" sizes="16x16" href="https://mame.github.io/posting-puzzle/favicon-16x16.png">
 16 |     <link rel="icon" href="https://mame.github.io/posting-puzzle/favicon.ico">
 17 |     <link rel="mask-icon" href="https://mame.github.io/posting-puzzle/safari-pinned-tab.svg" color="#5bbad5">
 18 |     <meta name="msapplication-TileColor" content="#da532c">
 19 |     <meta name="theme-color" content="#ffffff">
 20 |     <style>
 21 |       * { padding: 0; margin: 0; }
 22 |       html {
 23 |         overflow: hidden;
 24 |         touch-action: manipulation;
 25 |       }
 26 |       body {
 27 |         background: #ffffff;
 28 |         overflow: hidden;
 29 |         user-select: none;
 30 |         font-family: sans-serif;
 31 |         font-size: 5vmin;
 32 |         color: #666666;
 33 |       }
 34 |       div.body {
 35 |         display: flex;
 36 |         flex-direction: column;
 37 |         justify-content: space-around;
 38 |         height: 100%;
 39 |         padding: 0% 5%;
 40 |       }
 41 | 
 42 |       div.nav {
 43 |         display: flex;
 44 |         justify-content: space-between;
 45 |       }
 46 |       div.nav select {
 47 |         font-size: inherit;
 48 |         color: inherit;
 49 |       }
 50 | 
 51 |       div.main {
 52 |         display: flex;
 53 |         align-items: center;
 54 |       }
 55 | 
 56 |       div#lanes.ready {
 57 |         display: flex;
 58 |         justify-content: space-between;
 59 |         width: 100%;
 60 |       }
 61 | 
 62 |       div.lane {
 63 |         flex-grow: 1;
 64 |         display: flex;
 65 |         padding: 0px 1vh;
 66 |         flex-direction: row;
 67 |         flex-wrap: nowrap;
 68 |         align-items: center;
 69 |         height: 18vh;
 70 |       }
 71 |       div.main div.lane {
 72 |         background: #f3f3f3;
 73 |         border-top: 1px solid #666666;
 74 |         border-bottom: 1px solid #666666;
 75 |       }
 76 |       div#lanes.ready div.lane {
 77 |         background: #f3fff3;
 78 |         box-shadow: 0.2vh 0.2vh 0vh rgba(0, 0.5, 0, 0.3);
 79 |         border-radius: 0.5vh;
 80 |         position: relative;
 81 |         transition: all 0.3s ease-in;
 82 |       }
 83 |       div#lanes.ready div.lane.active {
 84 |         background: #c2dfc2;
 85 |       }
 86 |       div#lanes.ready div.lane.active::after {
 87 |         position: absolute;
 88 |         top: 50%;
 89 |         left: 50%;
 90 |         width: 20vh;
 91 |         height: 20vh;
 92 |         margin-top: -10vh;
 93 |         margin-left: -10vh;
 94 |         content: "";
 95 |         background: #ffffff;
 96 |         border-radius: 100%;
 97 |         opacity: 0;
 98 |         animation: ripple 0.3s 1 ease-out;
 99 |       }
100 |       @keyframes ripple {
101 |         0% {
102 |           opacity: 1;
103 |           transform: scale(0);
104 |         }
105 |         100% {
106 |           opacity: 0;
107 |           transform: scale(1);
108 |         }
109 |       }
110 |       div#lanes.ready span#loading {
111 |         display: none;
112 |       }
113 |       div#lanes.loading {
114 |         display: flex;
115 |         justify-content: center;
116 |         align-items: center;
117 |       }
118 |       div#lanes.loading span#loading {
119 |         display: block;
120 |       }
121 |       div#lanes.loading div.lane {
122 |         display: none;
123 |       }
124 | 
125 |       span.pair {
126 |         display: flex;
127 |         flex-direction: column;
128 |         flex-wrap: nowrap;
129 |         justify-content: center;
130 |         flex-shrink: 1;
131 |         max-width: 9vh;
132 |         width: 100%;
133 |         position: relative;
134 |         flex-basis: auto;
135 |         animation: pair-start 1s 1 forwards;
136 |       }
137 |       span.item-wrapper {
138 |         animation: item-wrapper-start 1s 1 forwards;
139 |         position: relative;
140 |       }
141 |       span.item {
142 |         display: inline-block;
143 |         width: 100%;
144 |         aspect-ratio: 1;
145 |         max-width: 7vh;
146 |         background-size: 100%;
147 |       }
148 |       span.item[data-type="a"] {
149 |         /* https://icooon-mono.com/12533-%e3%83%a1%e3%83%bc%e3%83%ab%e3%81%ae%e7%84%a1%e6%96%99%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%9d%e3%81%ae8/ */
150 |         background-image: url("mail.png");
151 |       }
152 |       span.item[data-type="b"] {
153 |         /* https://icooon-mono.com/14512-%e5%88%a4%e5%ad%90%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b33/ */
154 |         background-image: url("stamp.png");
155 |       }
156 |       span.ui {
157 |         position: absolute;
158 |         z-index: 2;
159 |       }
160 |       span#box {
161 |         width: 15vh;
162 |         height: 15vh;
163 |         background-size: 100%;
164 |         /* https://icooon-mono.com/14675-%e3%83%a1%e3%83%bc%e3%83%ab%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b31/ */
165 |         background-image: url("box.png");
166 |       }
167 |       span#info {
168 |         width: 8vh;
169 |         height: 8vh;
170 |         background-size: 100%;
171 |         /* https://icooon-mono.com/11926-%e6%83%85%e5%a0%b1%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/ */
172 |         background-image: url("info.png");
173 |       }
174 |       span#undo {
175 |         width: 8vh;
176 |         height: 8vh;
177 |         background-size: 100%;
178 |         /* https://icooon-mono.com/12604-u%e3%82%bf%e3%83%bc%e3%83%b3%e7%9f%a2%e5%8d%b0-1/ */
179 |         background-image: url("undo.png");
180 |       }
181 |       span#undo.active {
182 |         animation: undo-active 2s 1 forwards;
183 |       }
184 |       @keyframes undo-active {
185 |         0% { }
186 |         50% { transform: scale(1); }
187 |         60% { transform: scale(1.2) rotate(20deg); }
188 |         70% { transform: scale(1.2) rotate(-20deg); }
189 |         80% { transform: scale(1.2) rotate(20deg); }
190 |         90% { transform: scale(1.2) rotate(-20deg); }
191 |         100% { transform: scale(1); }
192 |       }
193 |       span#loading {
194 |         width: 15vh;
195 |         height: 15vh;
196 |         background-size: 100%;
197 |         /* https://icooon-mono.com/12678-%e3%83%ad%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e4%b8%ad%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b34/ */
198 |         background-image: url("loading.png");
199 |         animation: rotate 3s linear infinite;
200 |       }
201 |       @keyframes rotate {
202 |         0% { transform: rotate(0); }
203 |         100% { transform: rotate(360deg); }
204 |       }
205 | 
206 |       @keyframes pair-start {
207 |         0% { width: 0%; }
208 |         100% { width: 100%; }
209 |       }
210 |       @keyframes item-wrapper-start {
211 |         0% { transform: translateX(100vw); opacity: 0; }
212 |         100% { transform: translateX(0px); opacity: 1; }
213 |       }
214 | 
215 |       span.pair.posted {
216 |         animation: shrink-pair 2s 1 forwards;
217 |       }
218 |       span.pair.posted span.upper {
219 |         animation: upper-posted 2s 1 forwards;
220 |       }
221 |       span.pair.posted span.lower {
222 |         animation: lower-posted 2s 1 forwards;
223 |       }
224 |       span.pair.posted span.ui {
225 |         /* https://icooon-mono.com/12544-%e3%83%a1%e3%83%bc%e3%83%ab%e3%81%ae%e7%84%a1%e6%96%99%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%9d%e3%81%ae19/ */
226 |         background-image: url("mail-checked.png");
227 |         animation: ui-posted 2s 1 forwards;
228 |       }
229 |       @keyframes shrink-pair {
230 |         0% { width: 100%; }
231 |         75% { width: 100%; }
232 |         100% { width: 0%; }
233 |       }
234 |       @keyframes upper-posted {
235 |         0% { transform: translateY(0px); opacity: 1; }
236 |         50% { transform: translateY(0px); opacity: 1; }
237 |         75% { transform: translateY(50%); opacity: 0; }
238 |         100% { opacity: 0; }
239 |       }
240 |       @keyframes lower-posted {
241 |         0% { transform: translateY(0px); opacity: 1; }
242 |         50% { transform: translateY(0px); opacity: 1; }
243 |         75% { transform: translateY(-50%); opacity: 0; }
244 |         100% { opacity: 0; }
245 |       }
246 |       @keyframes ui-posted {
247 |         0% { opacity: 0; }
248 |         50% { opacity: 0; }
249 |         75% { transform: translateX(0%); opacity: 1; }
250 |         100% { transform: translateX(-200%); opacity: 0; }
251 |       }
252 | 
253 |       span.pair.not-posted span.upper {
254 |         animation: upper-not-posted 2s 1 forwards;
255 |       }
256 |       span.pair.not-posted span.lower {
257 |         animation: lower-not-posted 2s 1 forwards;
258 |       }
259 |       span.pair.not-posted span.ui {
260 |         /* https://icooon-mono.com/11913-%e3%82%84%e3%82%84%e5%a4%aa%e3%81%84%e3%83%90%e3%83%84%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/ */
261 |         background-image: url("x.png");
262 |         animation: not-posted 2s 1 forwards;
263 |       }
264 |       @keyframes upper-not-posted {
265 |         0% { transform: translateY(0px); }
266 |         50% { transform: translateY(0px); }
267 |         100% { transform: translateY(-20%); }
268 |       }
269 |       @keyframes lower-not-posted {
270 |         0% { transform: translateY(0px); }
271 |         50% { transform: translateY(0px); }
272 |         100% { transform: translateY(20%); }
273 |       }
274 |       @keyframes not-posted {
275 |         0% { opacity: 0; }
276 |         50% { opacity: 0; }
277 |         100% { opacity: 1; }
278 |       }
279 | 
280 |       div.modal {
281 |         position: fixed;
282 |         top: 0;
283 |         right: 0;
284 |         bottom: 0;
285 |         left: 0;
286 |         background-color: rgba(0, 0, 0, 0.6);
287 |         z-index: 10;
288 |         font-size: 3vh;
289 |         pointer-events: none;
290 |         opacity: 0;
291 |         transition: opacity 1s ease 0s;
292 |       }
293 |       div.modal[data-active="true"] {
294 |         opacity: 1;
295 |         pointer-events: auto;
296 |       }
297 |       div.modal div.modal-inner {
298 |         background: #ffffff;
299 |         position: absolute;
300 |         padding: 0.5em 0.5em;
301 |         top: 50%;
302 |         left: 50%;
303 |         max-width: 80vw;
304 |         max-height: 80vh;
305 |         transform: translateX(-50%) translateY(-50%);
306 |         font-size: 1.2em;
307 |         overflow-y: auto;
308 |       }
309 |       div#clear-modal {
310 |         text-align: center;
311 |       }
312 |       ul {
313 |         font-size: 0.8em;
314 |         margin: 0em 0em 1em 1em;
315 |       }
316 |       span.button {
317 |         display: block;
318 |         margin: 1em 0em 0em 0em;
319 |         padding: 0.2em 1em;
320 |         background-color: #cdebcd;
321 |         border-radius: 0.2em;
322 |         font-size: 0.7em;
323 |         text-align: center;
324 |       }
325 | 
326 |       @media (orientation: landscape) {
327 |         div#lanes {
328 |           flex-direction: row;
329 |           height: 20vh;
330 |         }
331 |         div.lane {
332 |           margin: 0vh 1vh;
333 |         }
334 |       }
335 |       @media (orientation: portrait) {
336 |         div#lanes {
337 |           flex-direction: column;
338 |           height: 58vh;
339 |         }
340 |         div.lane {
341 |           margin: 1vh 0vh;
342 |         }
343 |       }
344 |     </style>
345 |   </head>
346 |   <body>
347 |     <div class="body">
348 |       <div class="nav">
349 |         <p>Posting Puzzle</p>
350 |         <p>
351 |           <select id="stage-select">
352 |             <option value="1" id="stage-option-1">Stage: 1</option>
353 |           </select>
354 |         </p>
355 |       </div>
356 |       <div id="" class="main">
357 |         <span id="box"></span>
358 |         <div id="main-lane" class="lane">
359 |         </div>
360 |       </div>
361 |       <div id="lanes" class="loading">
362 |         <span id="loading"></span>
363 |         <div id="lane1" class="lane"></div>
364 |         <div id="lane2" class="lane"></div>
365 |         <div id="lane3" class="lane"></div>
366 |       </div>
367 |       <div class="nav">
368 |         <span id="info"></span>
369 |         <span id="undo"></span>
370 |       </div>
371 |       <div id="info-modal" class="modal" data-active="false">
372 |         <div class="modal-inner">
373 |           <p>Rule:</p>
374 |           <ul>
375 |             <li>Please match letters with stamps and post them into the mailbox.</li>
376 |             <li>You will complete the stage if you empty the inbox of all unsent letters and unused stamps.</li>
377 |             <li>There are six stages in all.</li>
378 |           </ul>
379 |           <p>Credit:</p>
380 |           <ul>
381 |             <li>This puzzle is written in <a href="https://github.com/ruby/ruby.wasm">ruby.wasm</a>, without any direct use of JavaScript.</li>
382 |             <li>The icons are from <a href="https://icooon-mono.com/">ICOOON MONO</a></li>
383 |             <li>The source code is available in <a href="https://github.com/mame/posting-puzzle">GitHub: mame/posting-puzzle</a></li>
384 |           </ul>
385 |           <p><span class="button">OK</span></p>
386 |         </div>
387 |       </div>
388 |       <div id="clear-modal" class="modal" data-active="false">
389 |         <div class="modal-inner">
390 |           <p id="clear-message">Clear!</p>
391 |           <p><span id="clear-button-message" class="button">Next Stage</span></p>
392 |         </div>
393 |       </div>
394 |     </div>
395 |     
396 |     <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@0.4.0-2022-11-04-a/dist/browser.script.iife.js"></script>
397 |     <script type="text/ruby">
398 |       require "js"
399 | 
400 |       Window = JS.global[:window]
401 |       Document = JS.global[:document]
402 | 
403 |       class Game
404 |         def initialize
405 |           @stage_id = 0
406 |           @lane_u = ""
407 |           @lane_l = ""
408 |           @state = :playing # :playing | :stuck | :clear
409 |           @history = []
410 | 
411 |           reached_stage = Window[:localStorage][:reached_stage]
412 |           reached_stage = 0 if reached_stage == JS::Undefined
413 |           (0..reached_stage.to_s.to_i).each {|stage_id| unlock_stage(stage_id) }
414 | 
415 |           current_stage = Window[:localStorage][:current_stage]
416 |           current_stage = 0 if current_stage == JS::Undefined
417 |           set_stage(current_stage.to_s.to_i)
418 |         end
419 | 
420 |         StageData = [
421 |           [ ["a","bb"], ["aaa","b"], ["aa","aa"] ],
422 |           [ ["a","abbb"], ["a","ba"], ["aba","b"] ],
423 |           [ ["abb","b"], ["b","baa"], ["a","aa"] ],
424 |           [ ["abb","b"], ["b","baa"], ["a","a"] ],
425 |           [ ["baab","a"], ["a","bba"], ["ab","b"] ],
426 |           [ ["ab", "a"], ["b", "aab"], ["bba", "b"] ],
427 |         ]
428 | 
429 |         def unlock_stage(stage_id)
430 |           if Document.getElementById("stage-option-#{ stage_id + 1 }") == JS::Null
431 |             # <option value="1" id="stage-option-1">Stage: 1</option>
432 |             opt = Document.createElement("option")
433 |             opt[:value] = "#{ stage_id + 1 }"
434 |             opt[:id] = "stage-option-#{ stage_id + 1 }"
435 |             opt[:innerText] = "Stage: #{ stage_id + 1 }"
436 |             Document.getElementById("stage-select").append(opt)
437 |           end
438 |           Document.getElementById("stage-select")[:selectedIndex] = stage_id
439 | 
440 |           reached_stage = Window[:localStorage][:reached_stage]
441 |           reached_stage = 0 if reached_stage == JS::Undefined
442 |           if reached_stage.to_s.to_i < stage_id
443 |             Window[:localStorage][:reached_stage] = stage_id.to_s
444 |           end
445 |         end
446 | 
447 |         def set_stage(stage_id)
448 |           @stage_id = stage_id
449 |           @lane_u = ""
450 |           @lane_l = ""
451 |           @state = :playing
452 |           @history = []
453 | 
454 |           unlock_stage(stage_id)
455 |           Window[:localStorage][:current_stage] = stage_id.to_s
456 | 
457 |           main_lane = Document.getElementById("main-lane")
458 |           empty_lane(main_lane)
459 | 
460 |           StageData[@stage_id].each_with_index do |(lane_u, lane_l), lane_id|
461 |             lane = Document.getElementById("lane#{ lane_id + 1 }")
462 |             empty_lane(lane)
463 |             [lane_u.size, lane_l.size].max.times do |i|
464 |               lane.appendChild(create_pair(lane_u[i], lane_l[i]))
465 |             end
466 |           end
467 |         end
468 | 
469 |         def lane_pushed(lane_id)
470 |           return unless @state == :playing
471 |           lane = Document.getElementById("lane#{ lane_id + 1 }")
472 |           lane[:classList].add("active")
473 |           @history << lane_id
474 |           main_lane = Document.getElementById("main-lane")
475 |           pairs = main_lane[:children]
476 |           [@lane_u, @lane_l].each_with_index do |lane, y|
477 |             StageData[@stage_id][lane_id][y].each_char do |type|
478 |               pairs[:length].to_s.to_i
479 |               if pairs[:length].to_s.to_i <= lane.size
480 |                 c = create_pair(nil, nil)
481 |                 main_lane.appendChild(c)
482 |                 pairs = main_lane[:children]
483 |               end
484 | 
485 |               item = pairs[lane.size][:children][y * 2]
486 |               item[:children][0][:dataset][:type] = type
487 |               item[:classList].add("item-wrapper")
488 | 
489 |               if @state == :playing
490 |                 opposite_item = pairs[lane.size][:children][(1 - y) * 2]
491 |                 opposite_type = opposite_item[:children][0][:dataset][:type]
492 |                 if opposite_type == JS::Undefined
493 |                   # nothing to do
494 |                 elsif opposite_type.to_s != type
495 |                   pairs[lane.size][:classList].add("posted")
496 |                 else
497 |                   pairs[lane.size][:classList].add("not-posted")
498 |                   Document.getElementById("undo")[:classList].add("active")
499 |                   @state = :stuck
500 |                 end
501 |               end
502 | 
503 |               lane << type
504 |             end
505 |           end
506 | 
507 |           if @state == :playing && @lane_u.size == @lane_l.size
508 |             @state = :clear
509 |             pairs[@lane_u.size - 1][:children][1].addEventListener("animationend") do
510 |               Document.getElementById("clear-modal")[:dataset][:active] = "true"
511 |               if StageData[@stage_id + 1]
512 |                 Document.getElementById("clear-message")[:innerText] = "Clear!"
513 |                 Document.getElementById("clear-button-message")[:innerText] = "Next Stage"
514 |               else
515 |                 Document.getElementById("clear-message")[:innerText] = "All clear!"
516 |                 Document.getElementById("clear-button-message")[:innerText] = "OK"
517 |               end
518 |             end
519 |           end
520 |         end
521 | 
522 |         def undo_pushed
523 |           return unless @state != :clear
524 |           @state = :playing
525 |           return if @history.empty?
526 |           main_lane = Document.getElementById("main-lane")
527 |           pairs = main_lane[:children]
528 |           lane_id = @history.pop
529 |           [@lane_u, @lane_l].each_with_index do |lane, y|
530 |             StageData[@stage_id][lane_id][y].each_char do |type|
531 |               lane[-1, 1] = ""
532 |               item = pairs[lane.size][:children][y * 2]
533 |               item[:children][0].removeAttribute("data-type")
534 |               item[:classList].remove("item-wrapper")
535 |               pairs[lane.size][:classList].remove("posted")
536 |               pairs[lane.size][:classList].remove("not-posted")
537 |             end
538 |           end
539 |           len = [@lane_u.size, @lane_l.size].max
540 |           while pairs[:length].to_s.to_i > len
541 |             main_lane.removeChild(pairs[len])
542 |             pairs = main_lane[:children]
543 |           end
544 |         end
545 | 
546 |         def clear_pushed
547 |           set_stage(@stage_id + 1) if StageData[@stage_id + 1]
548 |           Document.getElementById("clear-modal")[:dataset][:active] = "false"
549 |         end
550 | 
551 |         def stage_changed
552 |           set_stage(Document.getElementById("stage-select")[:value].to_s.to_i - 1)
553 |         end
554 | 
555 |         private
556 | 
557 |         def create_item(y, type)
558 |           # <span class="item-wrapper">
559 |           #   <span class="item" data-type="a"></span>
560 |           # </span>
561 |           wrapper = Document.createElement("span")
562 |           wrapper[:classList].add("item-wrapper") if type
563 |           content = Document.createElement("span")
564 |           content[:classList].add("item")
565 |           content[:classList].add(y.to_s)
566 |           content[:dataset][:type] = type if type
567 |           wrapper.appendChild(content)
568 |           wrapper
569 |         end
570 | 
571 |         def create_pair(upper, lower)
572 |           # <span class="pair">
573 |           #   ${ create_item }
574 |           #   <span class="item ui"></span>
575 |           #   ${ create_item }
576 |           # </span>
577 |           pair = Document.createElement("span")
578 |           pair[:classList].add("pair")
579 |           pair.appendChild(create_item(:upper, upper))
580 |           ui = Document.createElement("span")
581 |           ui[:classList].add("item")
582 |           ui[:classList].add("ui")
583 |           pair.appendChild(ui)
584 |           pair.appendChild(create_item(:lower, lower))
585 |           pair
586 |         end
587 | 
588 |         def empty_lane(lane)
589 |           lane.removeChild(lane[:firstChild]) while lane[:firstChild] != JS::Null
590 |         end
591 |       end
592 | 
593 |       game = Game.new
594 | 
595 |       3.times do |lane_id|
596 |         lane = Document.getElementById("lane#{ lane_id + 1 }")
597 |         lane.addEventListener("click") { game.lane_pushed(lane_id) }
598 |         lane.addEventListener("animationend") { lane[:classList].remove("active") }
599 |       end
600 | 
601 |       Document.getElementById("info").addEventListener("click") do
602 |         Document.getElementById("info-modal")[:dataset][:active] = "true"
603 |       end
604 | 
605 |       undo = Document.getElementById("undo")
606 |       undo.addEventListener("click") { game.undo_pushed }
607 |       undo.addEventListener("animationend") { undo[:classList].remove("active") }
608 | 
609 |       Document.getElementById("info-modal").addEventListener("click") do
610 |         Document.getElementById("info-modal")[:dataset][:active] = "false"
611 |       end
612 | 
613 |       Document.getElementById("clear-modal").addEventListener("click") do
614 |         game.clear_pushed
615 |       end
616 | 
617 |       Document.getElementById("stage-select").addEventListener("change") do
618 |         game.stage_changed
619 |       end
620 | 
621 |       Document.addEventListener("keydown") do |ev|
622 |         case ev[:key].to_s
623 |         when "1" then game.lane_pushed(0)
624 |         when "2" then game.lane_pushed(1)
625 |         when "3" then game.lane_pushed(2)
626 |         when "Backspace" then game.undo_pushed
627 |         end
628 |       end
629 | 
630 |       Document.getElementById("lanes")[:classList].remove("loading")
631 |       Document.getElementById("lanes")[:classList].add("ready")
632 |     </script>
633 |   </body>
634 | </html>
635 | 


--------------------------------------------------------------------------------