fix downloadfile + importsprites

This commit is contained in:
Theis Pieter Hollebeek 2025-10-11 20:14:57 +02:00
parent 2ecdfcebf0
commit c98810a01c
2 changed files with 39 additions and 49 deletions

View File

@ -86,7 +86,9 @@ importButton.onclick = async () => {
}); });
const code = items.find((x) => x.tag === "code"); const code = items.find((x) => x.tag === "code");
delete code.tag; delete code.tag;
spriteEditor.importSprites(sprites); spriteEditor.importSprites(
sprites.map(({ name, mime, content }) => ({ name, mime, bytes: content })),
);
const dec = new TextDecoder(); const dec = new TextDecoder();
editor.setValue(dec.decode(code.content)); editor.setValue(dec.decode(code.content));
}; };
@ -108,10 +110,10 @@ runButton.onclick = () => {
} }
}; };
function downloadBinaryFile(content, extension) { function downloadFile(content, extension, mime) {
const filename = prompt("Filename?"); const filename = prompt("Filename?");
const blob = new Blob([content]); const blob = new Blob([content], { type: mime });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const element = document.createElement("a"); const element = document.createElement("a");
@ -127,22 +129,6 @@ function downloadBinaryFile(content, extension) {
document.body.removeChild(element); document.body.removeChild(element);
} }
function downloadTextFile(content, mime, extension) {
const filename = prompt("Filename?");
const element = document.createElement("a");
element.href = `data:${mime};charset=utf-8,${encodeURIComponent(content)}`;
element.download = filename.endsWith(extension) ? filename : filename + extension;
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function minifyJs(code) { function minifyJs(code) {
return code return code
.replace(/[\s\n]+/g, " ") .replace(/[\s\n]+/g, " ")
@ -161,7 +147,7 @@ saveButton.onclick = () => {
}; };
saveJsButton.onclick = () => { saveJsButton.onclick = () => {
downloadTextFile(editor.getValue(), "text/javascript", ".js"); downloadFile(editor.getValue(), ".js", "text/javascript");
}; };
saveHtmlButton.onclick = async () => { saveHtmlButton.onclick = async () => {
@ -174,43 +160,43 @@ saveHtmlButton.onclick = async () => {
const html = ` const html = `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="generator" content="karlkoder playground"> <meta name="generator" content="karlkoder playground">
<title>Game</title> <title>Game</title>
<style> <style>
body { body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
} }
An iterable object such as an Array, having ArrayBuffers, TypedArrays, DataViews, Blobs, strings, or a mix of any of such elements, that will be put inside the Blob. Strings should be well-formed Unicode, and lone surrogates are sanitized using the same algorithm as String.prototype.toWellFormed(). An iterable object such as an Array, having ArrayBuffers, TypedArrays, DataViews, Blobs, strings, or a mix of any of such elements, that will be put inside the Blob. Strings should be well-formed Unicode, and lone surrogates are sanitized using the same algorithm as String.prototype.toWellFormed().
</style> </style>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"lib": "data:text/javascript,${encodeURIComponent(lib)}" "lib": "data:text/javascript,${encodeURIComponent(lib)}"
} }
} }
</script> </script>
<script type="module"> <script type="module">
${js} ${js}
</script> </script>
</head> </head>
<body> <body>
<canvas width="480" height="360"></canvas> <canvas width="480" height="360"></canvas>
</body> </body>
</html>`; </html>`;
downloadTextFile(html, "text/html", ".html"); downloadTextFile(html, ".html", "text/html");
}; };
saveKarlkoderButton.onclick = () => { saveKarlkoderButton.onclick = () => {
downloadBinaryFile( downloadFile(
Vermiparous.en( Vermiparous.en(
editor.getValue(), editor.getValue(),
spriteEditor.sprites, spriteEditor.sprites,

View File

@ -21,7 +21,11 @@ export class SpriteEditor {
} }
importSprites(sprites) { importSprites(sprites) {
this.sprites = sprites; this.sprites = [];
for (const sprite of sprites) {
console.log(sprite);
this.addSprite({ name: sprite.name, bytes: sprite.bytes, mime: sprite.mime });
}
this.renderList(); this.renderList();
} }