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
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"></script>
<script src="./js/index.js" type="module"></script>
</head>
<body>
@ -114,6 +112,58 @@ lib.startGameLoop(loop);
</div>
</section>
</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>
<footer>

9
js/code-runner.js
View File

@ -32,10 +32,15 @@ export class CodeRunner {
this.isRunning = false;
globalThis.libInternalAbortController?.abort();
this.console.log("Stopping code...");
}
toggle() {
if (this.isRunning) this.stop();
else this.run();
if (this.isRunning) {
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");
element.href = `data:${mime};charset=utf-8,${encodeURIComponent(content)}`;
element.download = filename.endsWith(extension)
? filename
: filename + extension;
element.download = filename.endsWith(extension) ? filename : filename + extension;
element.style.display = "none";
document.body.appendChild(element);

48
style.css
View File

@ -9,7 +9,7 @@
body {
margin: 0;
height: 100vh;
background-color: light-dark(#eee, #333);
background-color: #333;
}
main {
@ -24,7 +24,7 @@ main {
background-color: #bdbdbd;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border: 1px solid light-dark(#bdbdbd, #222);
border: 1px solid #222;
padding: 4px;
padding-left: 8px;
font-family: sans-serif;
@ -141,6 +141,11 @@ div#buttons button {
font-size: 16px;
}
#editor * {
border-radius: 0;
box-shadow: none;
}
.dropdown-wrapper {
position: relative;
}
@ -178,7 +183,8 @@ button {
transition-duration: 200ms;
}
button.active {
.dropdown-wrapper:has(.active) button,
button:active {
background-color: #065275;
}
@ -191,3 +197,39 @@ footer {
bottom: 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;
}