-
Notifications
You must be signed in to change notification settings - Fork 77
/
index.html
544 lines (544 loc) · 18.6 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
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTMLifier</title>
<meta charset="UTF-8" />
<meta
name="description"
content="Converts a Scratch project to HTML/JavaScript"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- no-offline -->
<link rel="stylesheet" type="text/css" href="../../sheep3.css" />
<script src="../../sheep3.js" charset="utf-8"></script>
<!-- /no-offline -->
<link
href="https://fonts.googleapis.com/css2?family=Exo:wght@500&family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./main.css" />
<script type="text/javascript">
window.errors = []
if (window.addEventListener) {
window.addEventListener(
'error',
function (e) {
if (e.message) {
if (e.error && e.error.stack) {
if (e.message.indexOf('Uncaught SyntaxError') === 0) {
window.errors.push(
e.message +
' at ' +
e.filename +
':' +
e.lineno +
':' +
e.colno
)
} else {
window.errors.push(e.error.stack)
}
if (window.onNewError) window.onNewError()
}
} else {
window.errors.push(
'Problem loading ' + (e.target.src || e.target.href)
)
if (window.onNewError) window.onNewError()
}
window.onerror = null
},
true
) // true so that errors bubble up to window
window.addEventListener(
'unhandledrejection',
function (e) {
window.errors.push(
e.reason && (e.reason.stack || e.reason.message || e.reason)
)
if (window.onNewError) window.onNewError()
},
false
)
}
window.onerror = function (message, source, lineno, colno, error) {
if (colno) {
lineno += ':' + colno
}
if (error && error.stack) {
window.errors.push(error.stack)
} else {
window.errors.push(message + ' at ' + source + ':' + lineno)
}
if (window.onNewError) window.onNewError()
}
</script>
</head>
<body>
<textarea
id="errors"
readonly
placeholder="I have not logged any errors."
></textarea>
<div class="header">
<h1>Project HTMLifier</h1>
<h3><em>Convert a Scratch project to HTML</em></h3>
<button
class="htmlify"
id="other-htmlify-btn"
form="options"
type="submit"
>
HTMLify
</button>
</div>
<div class="mainarea">
<p>
This packages your Scratch project into a single HTML file that can run
on its own in a web browser. The HTML file will be pretty big because it
contains the entire Scratch engine (2.6 MB) and the costume and sound
files used in the project.
</p>
<div class="notice info">
<p>
Note: The
<strong
><a href="https://packager.turbowarp.org/"
>TurboWarp Packager</a
></strong
>
has better performance and can produce .exe files. Refer to the
<a href="#see-also">See also section</a> for more alternatives.
</p>
</div>
<div id="root">
<noscript>
<div class="notice start-warning">
<p>
Please enable JavaScript. Converting projects can't be done with
HTML and CSS alone.
</p>
</div>
</noscript>
<div class="notice start-warning hidden" id="js-enabled">
<p>
If you see this, you can check to see if there were
<a href="#errors">any issues</a> loading the HTMLifier. Make sure
you're using a modern browser.
</p>
<p class="hidden" id="no-nullish-coalescing">
Your browser does not support modern JavaScript features; check to
make sure
<a
href="https://caniuse.com/mdn-javascript_operators_nullish_coalescing"
>your browser is modern</a
>.
</p>
</div>
</div>
<p>
If you want to view or edit the HTML file, you can use the specialized
<a
href="https://sheeptester.github.io/words-go-here/htmlifier/large-file-editor/"
>Large File Editor</a
>
to hide the long lines that may hang or crash normal text editors.
</p>
<h2 id="updates">Update history</h2>
<p>
See the code and previous versions on
<a href="https://github.com/SheepTester/htmlifier/">Github</a>.
</p>
<h3>
2021-08-12 (<a
href="https://github.com/SheepTester/htmlifier/releases/download/v1.0.2/htmlifier-offline.html"
>download</a
>)
</h3>
<ul>
<li>Fixed connecting to cloud servers.</li>
</ul>
<h3>
2021-08-09 (<a
href="https://github.com/SheepTester/htmlifier/releases/download/v1.0.1/htmlifier-offline.html"
>download</a
>)
</h3>
<ul>
<li>Fixed sprite dragging.</li>
</ul>
<h3>
2021-08-08 (<a
href="https://github.com/SheepTester/htmlifier/releases/download/v1.0.0/htmlifier-offline.html"
>download</a
>)
</h3>
<ul>
<li>
To support the use of the HTMLifier in
<a href="https://nodejs.org/en/">Node</a> and
<a href="https://deno.land/">Deno</a>, I rewrote the HTMLifier, so now
it can be used programmatically (<a
href="https://github.com/SheepTester/htmlifier/issues/27"
>by request</a
>). This might mean there could be many bugs.
</li>
<li>
I also remade the options area in
<a href="https://reactjs.org/">React</a> and reworded a few options in
the process.
</li>
<li>
The Scratch engine is stored in a separate file (<code>vm.js</code>)
when you download as a ZIP, so you can make multiple HTMLified
projects share the same Scratch engine file to avoid wasting disk
space (by request).
</li>
<li>Downloading as a ZIP now works for <code>.sb2</code> files.</li>
<li>
<code>ctrl</code>/<code>⌘</code> + <code>F</code> now toggles
fullscreen (<a
href="https://scratch.mit.edu/users/Sheep_maker/#comments-141217533"
>by request</a
>).
</li>
<li>
The loading image now appears <em>before</em> the background image (by
request).
</li>
<li>
You can detect whether the project has been HTMLified by doing
<code><key (join [HTMLifier] []) pressed?></code> (<a
href="https://scratch.mit.edu/users/Sheep_maker/#comments-129186942"
>by request</a
>).
</li>
<li>
You can now add more than one unofficial extension (<a
href="https://scratch.mit.edu/users/Sheep_maker/#comments-123224516"
>by request</a
>).
</li>
<li>
You can add custom JavaScript (called "plugins" in
<a href="https://sheeptester.github.io/scratch-gui/">E羊icques</a>) to
the HTML. You can also upload JavaScript files instead of pasting URLs
for both extensions and plugins. (Both
<a
href="https://scratch.mit.edu/users/Sheep_maker/#comments-142357006"
>by request</a
>.)
</li>
<li>
Added an option to show a button that downloads the project with the
current variable and list values stored (<a
href="https://scratch.mit.edu/users/Sheep_maker/#comments-126598941"
>by request</a
>). This can be used to save your progress through a game.
</li>
<li>
Added an option to show a button that lets you select a Scratch sprite
to add to the project (<a
href="https://scratch.mit.edu/users/Sheep_maker/#comments-120920668"
>by request</a
>). This can be used for some OS projects to add new apps, where each
app is a sprite.
</li>
<li>List monitors now show item numbers.</li>
<li>
The loading bar now shows a percentage rather than a fraction (<a
href="https://scratch.mit.edu/users/Sheep_maker/#comments-120295599"
>by request</a
>).
</li>
<li>
Disabling sprite fencing has been separated from disabling the
clone/list/etc. limits.
</li>
</ul>
<details>
<summary>Past updates</summary>
<h3>
2021-03-16 (<a
href="https://github.com/SheepTester/htmlifier/releases/download/2021-03-16/htmlifier-offline.html"
>download</a
>)
</h3>
<ul>
<li>
New cloud behaviours:
<ul>
<li>
<code>☁ url</code> contains the current URL of the web page.
</li>
<li>
<code>☁ pasted</code> contains the last pasted text by the user.
</li>
<li>
<code>☁ username</code>, when set, will change what the
"username" block reports.
</li>
</ul>
</li>
<li>Fixed the background image not showing in full screen.</li>
<li>Fixed the progress bar being shown under the loading image.</li>
</ul>
<h3>
2021-02-07 (<a
href="https://github.com/SheepTester/htmlifier/releases/download/2021-02-07/htmlifier-offline.html"
>download</a
>)
</h3>
<ul>
<li>Save the options in the URL</li>
<li>
New customisation options:
<ul>
<li>Background image</li>
<li>Cursor</li>
<li>Favicon</li>
<li>New loading bar design with customisable colours</li>
<li>
Loading screen image from a URL
<ul>
<li>Option to stretch only the loading screen image</li>
</ul>
</li>
</ul>
</li>
<li>
Option to show start/stop buttons (equivalent to the green flag/stop
sign)
</li>
<li>
New special cloud behaviours:
<ul>
<li>Better support for <code>☁ eval</code> returning Promises</li>
<li><code>☁ open link</code> opens a URL in a new tab.</li>
<li><code>☁ redirect</code> redirects to a URL.</li>
<li>
<code>☁ set clipboard</code> tries to copy text to the
clipboard.
</li>
<li>
<code>☁ set server ip</code> changes the cloud server URL.
</li>
</ul>
</li>
<li>
Ability to distinguish between left/right modifier keys using
<code><key (join [code_ShiftLeft] []) pressed?>></code>, for
example.
</li>
<li>
Clicking on a variable slider no longer gives it focus, so keys will
continue to work.
</li>
<li>A bookmarklet creator</li>
<li>
BREAKING: The mouse lock position now sets mouse x/y to the
accumulative mouse position, which should be more reliable. This
works best with the "Remove limits" option.
</li>
<li>
Updated CSS by
<a href="https://scratch.mit.edu/users/mrcringekidyt/"
>Mr. Cringe Kid</a
>
</li>
<li>Fixed the HTMLification log progress not resetting</li>
<li>
Also, the
<a href="https://github.com/SheepTester/primitive-cloud-server"
>primitive cloud server</a
>
has been updated.
</li>
</ul>
<h3>2020-12-18</h3>
<ul>
<li>
Specific mouse buttons can now be detected using
<code><key (join [MouseN] []) pressed?></code>, where
<code>N</code> can be 1 for left click, 2 for middle click, 3 for
right click, and 0 for touch/pen.
</li>
<li>
Fixed an issue where Scratch 2.0 projects with bitmap costumes
wouldn't work.
</li>
</ul>
<h3>
2020-06-13 (<a
href="https://github.com/SheepTester/htmlifier/releases/download/2020-06-13/htmlifier-offline.html"
>download</a
>)
</h3>
<ul>
<li>More options for styling variable/list monitors</li>
<li>Option to generate a .zip of files</li>
<li>Option to preview the HTMLified project</li>
<li>
Readded the option for a progress counter despite lack of demand
</li>
<li>Warn if a file might be too large for JavaScript to HTMLify</li>
<li>Fixed HTMLifying 2.0 projects</li>
</ul>
<h3>
2020-06-01 (<a
href="https://github.com/SheepTester/htmlifier/releases/download/2020-06-01/htmlifier-offline.html"
>download</a
>)
</h3>
<ul>
<li>Option to remove clone/list length limits</li>
<li>Option to hide the cursor</li>
<li>
Ability to distinguish between cloud variables for localStorage and
the server (and run JavaScript using cloud variables)
</li>
<li>Option for rudimentary pointer lock</li>
<li>Fixed mouse position and unresized lists not showing</li>
<li>
Default project changed to one of
<a href="https://scratch.mit.edu/users/ScratchCat/">ScratchCat</a>'s
</li>
<li>
Unfortunately, as part of these changes, I removed the option for a
progress bar. If there's demand, I'll try to add it back.
</li>
</ul>
<h3>2020-05-01</h3>
<ul>
<li>Support for custom extensions from a URL</li>
<li>
CSS by
<a href="https://scratch.mit.edu/users/mrcringekidyt/"
>Mr. Cringe Kid</a
>
</li>
</ul>
<h3>
2020-03-29 (<a
href="https://github.com/SheepTester/words-go-here/releases/download/htmlifier-2020-03-29/htmlifier-offline.html"
>download</a
>)
</h3>
<ul>
<li>Fixed custom stage sizes</li>
</ul>
<h3>2020-03-27</h3>
<ul>
<li>Show an image such as a gif while loading</li>
<li>Fixed dragging sprites simulating another green flag click</li>
</ul>
<h3>2020-01-06</h3>
<ul>
<li>An offline version of the HTMLifier</li>
</ul>
<h3>2019-12-25</h3>
<ul>
<li>
An option to use a custom cloud server for cloud variables instead
of saving to localStorage
</li>
</ul>
<h3>2019-11-23</h3>
<ul>
<li>A fullscreen button</li>
<li>An option to change monitor colours</li>
</ul>
<h3>2019-10-05</h3>
<ul>
<li>New ask box</li>
</ul>
<h3>2019-09-28</h3>
<ul>
<li>A status text that shows the assets loaded</li>
<li>Support the video extension</li>
<li>Support draggable sprites</li>
</ul>
<h3>2019-08-08</h3>
<ul>
<li>Removed "Scratch" from the name of this utility just in case</li>
</ul>
<h3>2019-07-27</h3>
<ul>
<li>Support 16:9 projects</li>
<li>Simplify the number of modes for HTMLification</li>
</ul>
<h3>2019-07-13</h3>
<ul>
<li>Cloud variables store in localStorage</li>
</ul>
<h3>2019-06-29</h3>
<ul>
<li>Upload project file instead of using project ID</li>
<li>Toggle compatibility and turbo mode</li>
</ul>
<h3>2019-03-31</h3>
<ul>
<li>Variable and list watchers</li>
</ul>
<h3>2019-02-09</h3>
<ul>
<li>Project start</li>
</ul>
</details>
<h2 id="credits">Credits</h2>
<p>
Made by
<a href="https://scratch.mit.edu/users/Sheep_maker/">Sheep_maker</a>,
who used <a href="https://github.com/LLK/scratch-vm/">scratch-vm</a>,
<a href="https://stuk.github.io/jszip/">JSZip</a>,
<a href="https://deno.land/">Deno</a>,
<a href="https://reactjs.org/">React</a>, and their dependencies for
this project.
</p>
<p>
CSS by
<a href="https://scratch.mit.edu/users/mrcringekidyt/">Mr. Cringe Kid</a
>.
</p>
<h2 id="see-also">See also</h2>
<p>
Depending on your use case, the HTMLifier may not be the best option for
you. The HTMLifier prioritizes accuracy by using almost the same engine
that vanilla Scratch uses, sacrificing speed and editability.
</p>
<p>
If you want better performance, <em>compile</em> the project to
JavaScript:
<a href="https://phosphorus.github.io/">Phosphorus</a> (Scratch 2.0
only), <a href="https://forkphorus.github.io/">Forkphorus</a>, and
<a href="https://turbowarp.org/">TurboWarp</a>.
</p>
<p>
If you want to learn JavaScript, convert the Scratch blocks to close
equivalents in JavaScript using
<a href="https://leopardjs.now.sh/">Leopard</a>.
</p>
</div>
<script src="./index.bundle.min.js" charset="utf-8"></script>
<script type="text/javascript">
var errorsTextarea = document.getElementById('errors')
if (!window.onNewError) {
window.onNewError = function () {
errorsTextarea.value =
window.errors.length + ' errors(s)\n' + window.errors.join('\n')
}
window.onNewError()
}
try {
eval('0 ?? 0')
} catch (_) {
var oldBrowserNotice = document.getElementById('no-nullish-coalescing')
oldBrowserNotice.className = ''
}
var hasJs = document.getElementById('js-enabled')
if (hasJs) {
hasJs.classList.remove('hidden')
}
</script>
</body>
</html>