sfja/karlkoder-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[wip] sprite editor

Browse Source
This commit is contained in:
Theis Pieter Hollebeek 2025-10-10 13:40:08 +02:00
parent b04506bfc8
commit 1df4f140af
4 changed files with 106 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@ -14,9 +14,7 @@
} }
} }
</script> </script>
<script <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"></script>
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"
></script>
<script src="./js/index.js" type="module"></script> <script src="./js/index.js" type="module"></script>
</head> </head>
<body> <body>
@ -114,6 +112,58 @@ lib.startGameLoop(loop);
</div> </div>
</section> </section>
</div> </div>
<div class="column">
<section>
<div class="section-header">
Sprite editor
</div>
<div id="sprite-editor-area">
<img
id="sprite-editor-preview"
src="https://tpho.dk/shared/photo%2010-07-2021,%2003.43.17.jpg"
>
</div>
<ul id="sprite-editor-list">
<li><button>Upload new sprite</button></li>
<li><p>hrrmimimi <button class="delete-button">X</button></p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
<li><p>hrrmimimi</p></li>
</ul>
</section>
</div>
</main> </main>
<footer> <footer>

9
js/code-runner.js
View File

@ -32,10 +32,15 @@ export class CodeRunner {
this.isRunning = false; this.isRunning = false;
globalThis.libInternalAbortController?.abort(); globalThis.libInternalAbortController?.abort();
this.console.log("Stopping code...");
} }
toggle() { toggle() {
if (this.isRunning) this.stop(); if (this.isRunning) {
else this.run(); this.stop();
} else {
this.run();
}
} }
} }

4
js/index.js
View File

@ -49,9 +49,7 @@ function downloadFile(content, mime, extension) {
const element = document.createElement("a"); const element = document.createElement("a");
element.href = `data:${mime};charset=utf-8,${encodeURIComponent(content)}`; element.href = `data:${mime};charset=utf-8,${encodeURIComponent(content)}`;
element.download = filename.endsWith(extension) element.download = filename.endsWith(extension) ? filename : filename + extension;
? filename
: filename + extension;
element.style.display = "none"; element.style.display = "none";
document.body.appendChild(element); document.body.appendChild(element);

48
style.css
View File

@ -9,7 +9,7 @@
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
background-color: light-dark(#eee, #333); background-color: #333;
} }
main { main {
@ -24,7 +24,7 @@ main {
background-color: #bdbdbd; background-color: #bdbdbd;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
border: 1px solid light-dark(#bdbdbd, #222); border: 1px solid #222;
padding: 4px; padding: 4px;
padding-left: 8px; padding-left: 8px;
font-family: sans-serif; font-family: sans-serif;
@ -141,6 +141,11 @@ div#buttons button {
font-size: 16px; font-size: 16px;
} }
#editor * {
border-radius: 0;
box-shadow: none;
}
.dropdown-wrapper { .dropdown-wrapper {
position: relative; position: relative;
} }
@ -178,7 +183,8 @@ button {
transition-duration: 200ms; transition-duration: 200ms;
} }
button.active { .dropdown-wrapper:has(.active) button,
button:active {
background-color: #065275; background-color: #065275;
} }
@ -191,3 +197,39 @@ footer {
bottom: 1px; bottom: 1px;
left: 1px; left: 1px;
} }
#sprite-editor-area {
line-height: 0;
}
#sprite-editor-preview {
background-color: #1d2021;
max-height: 450px;
object-fit: contain;
width: 100%;
border-radius: 0px;
padding-block: 32px;
}
#sprite-editor-list {
list-style: none;
padding: 1rem;
margin: 0;
}
#sprite-editor-list .delete-button {
background-color: #c83e4d;
padding: 0.25rem 0.75rem;
}
#sprite-editor-list .delete-button:hover {
background-color: #9f2d3a;
}
#sprite-editor-list .delete-button:active {
background-color: #7f242f;
}
#sprite-editor-list p:first-child {
margin-top: 0;
}