forked from SheepTester/htmlifier
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
279 lines (278 loc) · 13.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>SHTML</title>
<meta charset="UTF-8">
<meta name="description" content="Converts any Scratch project to HTML"/>
<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>
<script src="./offlineifier.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 src="./download.js" charset="utf-8"></script>
<script src="./jszip.min.js" charset="utf-8"></script>
<style media="screen">
html {
/* https://stackoverflow.com/a/56467997 */
scroll-padding-top: 120px;
}
:target {
animation: flash 3s;
}
@keyframes flash {
0% {
background-color: rgba(255, 255, 0, 0.5);
}
100% {
background-color: transparent;
}
}
button,
input[type=file],
::-webkit-file-upload-button {
cursor: pointer;
}
#load-no-minify {
font-size: 1.2em;
}
.offline::after {
content: 'Offline edition';
position: fixed;
bottom: 0;
right: 0;
color: rgba(0, 0, 0, 0.5);
margin: 10px;
}
</style>
</head>
<body>
<h1>Scratch to HTML</h1>
<button style="display:none;" class="htmlify" id="other-htmlify-btn">HTMLify</button>
<div class="mainarea">
<!-- no-offline -->
<p><button id="offlineify">Download offline version</button></p>
<!-- /no-offline -->
<p>The project will automatically start, and there are no green flag or stop sign buttons.</p>
<p><label><input type="radio" name="upload-mode" value="id" checked> Project ID: <input type="number" placeholder="Project ID" value="381280770" id="id"></label></p>
<p><label><input type="radio" name="upload-mode" value="file"> Upload project file: <input type="file" id="file" accept=".sb,.sb2,.sb3"></label></p>
<fieldset>
<legend>Options</legend>
<p><label for="title">Project name: </label><input type="text" placeholder="Project name" value="Flashlight Hide and Seek" id="title"></p>
<p><label for="username">Username value: </label><input type="text" placeholder="Username" value="ScratchCat" id="username"></p>
<p><label><input type="checkbox" id="fullscreen" checked> Show fullscreen button?</label></p>
<p><label><input type="checkbox" id="turbo"> Enable <a href="https://en.scratch-wiki.info/wiki/Turbo_Mode">turbo mode</a>?</label></p>
<p><label><input type="checkbox" id="progress" checked> Load progress indicator?</label></p>
<p><label><input type="checkbox" id="loading-image"> Loading image: <input type="file" id="loading-image-file" accept="image/*"></label></p>
<p><label><input type="checkbox" id="compatibility" checked> Enable compatibility mode?</label><a id="ref-2" href="#note-2"><sup>2</sup></a></p>
<p><label><input type="checkbox" id="stretch"> Stretch the canvas to fit (as opposed to maintaining the aspect ratio)?</label></p>
<p><label><input type="checkbox" id="no-cursor"> Hide cursor?</label></p>
<p><label><input type="checkbox" id="pointer-lock"> Lock the pointer on click? The mouse x/y blocks will report the mouse movement.</label><a id="ref-3" href="#note-3"><sup>3</sup></a></p>
<p><label><input type="checkbox" id="zip"> Output a .zip file? The .zip file will contain an index.html file and separate files for the project's assets.</label></p>
<fieldset>
<legend>Monitor style</legend>
<p><label><input type="checkbox" id="use-colour"> Use custom variable/list monitor colour: <input type="color" id="monitor-colour" value="#ff8c1a">? (If unchecked, a translucent black will be used.)</label></p>
<p><label>Monitor text colour: <input type="color" id="monitor-text" value="#ffffff"></label></p>
<p><label><input type="checkbox" id="transparent-monitor"> Hide the monitor background boxes?</label></p>
</fieldset>
<p></p>
<fieldset>
<legend>Cloud variable source</legend>
<p><label><input type="radio" name="cloud-provider" value="localstorage" checked> Save cloud variables locally using localStorage</label><a id="ref-1" href="#note-1"><sup>1</sup></a></p>
<p><label><input type="radio" name="cloud-provider" value="ws"> Use a <a href="https://github.com/SheepTester/primitive-cloud-server">custom server</a>: <input type="url" id="cloud-ws" placeholder="ws://localhost:3000/"></label></p>
<p><label><input type="checkbox" id="special-cloud"> Give certain cloud variables special behaviours depending on the name?</label><a id="ref-4" href="#note-4"><sup>4</sup></a></p>
</fieldset>
<p></p>
<fieldset id="bott">
<legend>Modded options</legend>
<p><label><input type="checkbox" id="wider"> Does this project use a <a href="https://sheeptester.github.io/scratch-gui/?width=640&height=360">custom size</a>?</label> <label>Width: <input type="number" value="640" id="width"></label> <label>Height: <input type="number" value="360" id="height"></label></p>
<p><label>Load <a href="https://github.com/LLK/scratch-vm/blob/develop/docs/extensions.md#types-of-extensions">unofficial extension</a> from URL: <input type="url" id="extension-url"></label></p>
<p><label><input type="checkbox" id="no-limits"> Remove limits such as clone and list length limits?</label></p>
</fieldset>
</fieldset>
<p>
<button id="load-no-minify">Convert</button>
<label><input type="checkbox" id="autodownload" checked> Download automatically?</label>
</p>
<ul class="log" id="log"></ul>
<p id="note-1"><a href="#ref-1"><sup>1</sup></a>You may have to deal with privacy laws around cookies outside of Scratch.</p>
<p id="note-2"><a href="#ref-2"><sup>2</sup></a>Compatibility mode forces projects to run at 30 FPS, like in Scratch 2.0. Turning this off allows the project to run at a higher framerate (usually 60 FPS, depending on the computer screen's refresh rate).</p>
<p id="note-3"><a href="#ref-3"><sup>3</sup></a>I think the implementation of this is poor. Maybe instead of setting mouse x/y, it can set a cloud variable with a certain name. You can leave feedback and suggestions on <a href="https://scratch.mit.edu/users/Sheep_maker/">my profile</a>.</p>
<p id="note-4"><a href="#ref-4"><sup>4</sup></a>If a cloud variable with the name "☁ eval" is set, it'll run the variable value as JavaScript and store it in a cloud variable named "☁ eval output"; if there is an error, it'll be stored in "☁ eval error." If you're using a custom cloud server, then cloud variables whose names start with "☁ local storage" will store their values in localStorage instead of in the server.</p>
<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="http://danml.com/download.html">download.js</a>, and their dependencies for this project.</p>
<p>CSS by <a href="https://scratch.mit.edu/users/Vanceagher/">Vanceagher</a>.</p>
</div>
<!-- VM relies on document.body existing oof -->
<script src="https://sheeptester.github.io/scratch-vm/16-9/vm.min.js" charset="utf-8"></script>
<script src="./hacky-file-getter.js" charset="utf-8"></script>
<script type="text/javascript">
const loadNoMinifyBtn = document.getElementById('load-no-minify');
const otherHtmlifyBtn = document.getElementById('other-htmlify-btn')
const title = document.getElementById('title');
const id = document.getElementById('id');
const username = document.getElementById('username');
const file = document.getElementById('file');
const logOutput = document.getElementById('log');
const compatibility = document.getElementById('compatibility');
const turbo = document.getElementById('turbo');
const wider = document.getElementById('wider');
const progressBar = document.getElementById('progress');
const fullscreen = document.getElementById('fullscreen');
const useColour = document.getElementById('use-colour');
const monitorColour = document.getElementById('monitor-colour');
const cloudServer = document.getElementById('cloud-ws');
const useLoadingImage = document.getElementById('loading-image');
const loadingImage = document.getElementById('loading-image-file');
const width = document.getElementById('width');
const height = document.getElementById('height');
const extensionURL = document.getElementById('extension-url');
const noLimits = document.getElementById('no-limits');
const pointerLock = document.getElementById('pointer-lock');
const stretch = document.getElementById('stretch');
const noCursor = document.getElementById('no-cursor');
const specialCloud = document.getElementById('special-cloud');
const zip = document.getElementById('zip');
const monitorText = document.getElementById('monitor-text');
const transparentMonitors = document.getElementById('transparent-monitor');
const autodownload = document.getElementById('autodownload')
let scroll = false
function log(text, style) {
const entry = document.createElement('div')
entry.className = `log-entry log-${style}`
entry.textContent = text
logOutput.appendChild(entry)
if (scroll) logOutput.scrollTop = logOutput.scrollHeight
return entry
}
function getProject() {
if (document.querySelector('input[name="upload-mode"]:checked').value === 'file') {
if (!file.files || !file.files[0]) return Promise.reject(new Error('No file selected'));
return { file: file.files[0] };
} else {
return {id: id.value};
}
}
function load() {
loadNoMinifyBtn.disabled = true;
otherHtmlifyBtn.disabled = true;
logOutput.innerHTML = '';
scroll = true;
downloadAsHTML(getProject(), {
title: title.value,
username: username.value,
log,
progressBar: progressBar.checked,
fullscreen: fullscreen.checked,
monitorColour: useColour.checked ? monitorColour.value : null,
cloudServer: document.querySelector('input[name="cloud-provider"]:checked').value === 'ws'
? cloudServer.value : null,
projectId: id.value,
loadingImage: useLoadingImage ? loadingImage.files[0] : null,
customRatio: wider.checked,
width: wider.checked ? width.value : 480,
height: wider.checked ? height.value : 360,
extension: extensionURL.value || null,
noLimits: noLimits.checked,
pointerLock: pointerLock.checked,
stretch: stretch.checked,
noCursor: noCursor.checked,
specialCloud: specialCloud.checked,
zip: zip.checked,
monitorText: monitorText.value,
transparentMonitors: transparentMonitors.checked,
})
.then(blob => {
function downloadBlob () {
log('Attempting to download file.', 'status');
download(blob, title.value + (blob.type === 'application/zip' ? '.zip' : '.html'), blob.type);
}
if (autodownload.checked) {
downloadBlob();
}
const entry = log('Done! ', 'done');
const downloadBtn = document.createElement('button');
downloadBtn.textContent = 'Download';
downloadBtn.addEventListener('click', downloadBlob);
entry.appendChild(downloadBtn);
if (blob.type === 'text/html') {
const previewBtn = document.createElement('button');
previewBtn.textContent = 'Open preview';
previewBtn.addEventListener('click', async e => {
const newTab = window.open('', '_blank');
newTab.document.write('<style>html, body { height: 100%; margin: 0; }</style><body></body>');
const frame = document.createElement('iframe');
frame.style = 'width: 100%; height: 100%; border: none;';
frame.srcdoc = await blob.text();
frame.addEventListener('load', e => {
newTab.document.title = frame.contentDocument.title;
});
newTab.document.body.appendChild(frame);
})
entry.appendChild(previewBtn);
}
loadNoMinifyBtn.disabled = false;
otherHtmlifyBtn.disabled = false;
}).catch(err => {
console.error(err);
if (err.message !== 'error logged') {
log('Unexpected error:\n' + err.stack, 'error');
}
loadNoMinifyBtn.disabled = false;
otherHtmlifyBtn.disabled = false;
scroll = false;
});
}
loadNoMinifyBtn.addEventListener('click', load);
otherHtmlifyBtn.addEventListener('click', load);
let defaultTitle = true;
title.addEventListener('change', e => {
defaultTitle = false;
});
file.addEventListener('change', e => {
if (file.files[0]) {
document.querySelector('input[name="upload-mode"][value="file"]').checked = true;
if (defaultTitle) {
title.value = file.files[0].name.replace(/\.\w+$/, '').replace(/_/g, ' ')
}
}
});
cloudServer.addEventListener('change', e => {
document.querySelector('input[name="cloud-provider"][value="ws"]').checked = true;
})
width.addEventListener('change', e => {
wider.checked = true;
});
height.addEventListener('change', e => {
wider.checked = true;
});
monitorColour.addEventListener('change', e => {
useColour.checked = true;
});
loadingImage.addEventListener('change', e => {
useLoadingImage.checked = true;
});
/* no-offline */
const offlineifyBtn = document.getElementById('offlineify');
offlineifyBtn.addEventListener('click', e => {
logOutput.innerHTML = '';
offlineifyBtn.disabled = true;
scroll = true;
offlineify({log})
.then(() => {
offlineifyBtn.disabled = false;
})
.catch(err => {
console.error(err);
if (err.message !== 'error logged') {
log('Unexpected error:\n' + err.stack, 'error');
}
offlineifyBtn.disabled = false;
scroll = false;
});
})
/* /no-offline */
</script>
</body>
</html>