Sprite editor
-
+
+ 
- + cattttttttttttttttttttttttttttttttttttttttttttttttttttttt.png +
-
-
+
+
+
hrrmimimi
hrrmimimi
hrrmimimi
diff --git a/js/index.js b/js/index.js
index 8527265..d65c298 100644
--- a/js/index.js
+++ b/js/index.js
@@ -3,11 +3,13 @@
import { Debounce } from "./debounce.js";
import { PlaygroundConsole } from "./playground-console.js";
import { CodeRunner } from "./code-runner.js";
+import { SpriteEditor } from "./sprite-editor.js";
const playgroundConsole = new PlaygroundConsole(
document.querySelector("#console-code"),
);
const codeRunner = new CodeRunner(playgroundConsole);
+new SpriteEditor(document.querySelector("#sprite-editor"), []);
const editor = ace.edit("editor");
editor.setTheme("ace/theme/gruvbox");
diff --git a/js/sprite-editor.js b/js/sprite-editor.js
new file mode 100644
index 0000000..16c4500
--- /dev/null
+++ b/js/sprite-editor.js
@@ -0,0 +1,72 @@
+export class SpriteEditor {
+ constructor(rootEl, sprites) {
+ this.list = rootEl.querySelector("#sprite-editor-sprite-list");
+ this.preview = {};
+ this.preview.title = rootEl.querySelector("#sprite-editor-preview-title");
+ this.preview.image = rootEl.querySelector("#sprite-editor-preview-image");
+ this.sprites = sprites;
+
+ rootEl.querySelector("#sprite-editor-upload-button").addEventListener("click", () => {
+ this.promptUpload();
+ });
+
+ this.renderList();
+ }
+
+ promptUpload() {
+ const input = document.createElement("input");
+ input.type = "file";
+ input.accept = "image/*";
+ input.multiple = true;
+ input.style = "display: none;";
+ input.addEventListener("cancel", () => {
+ input.remove();
+ });
+ input.addEventListener("change", async () => {
+ for (const file of input.files) {
+ this.addSprite({
+ name: file.name,
+ mime: file.type,
+ bytes: await fetch(URL.createObjectURL(file)).then((x) => x.bytes()),
+ });
+ }
+ input.remove();
+ });
+ document.body.append(input);
+ input.click();
+ }
+
+ addSprite({ name, bytes, mime }) {
+ const id = Math.round(Math.random() * 1e6);
+ this.sprites.push({ id, bytes, name, mime });
+ this.renderList();
+ }
+
+ deleteSprite(id) {
+ this.sprites = this.sprites.filter((x) => x.id !== id);
+ this.renderList();
+ }
+
+ setPreview(id) {
+ const sprite = this.sprites.find((x) => x.id === id);
+ this.preview.title.textContent = sprite.name;
+ this.preview.image.src = `data:${sprite.mime};base64,${sprite.bytes.toBase64()}`;
+ }
+
+ renderList() {
+ const children = this.sprites
+ .map((sprite) => {
+ const listItem = document.createElement("li");
+ listItem.classList.add("sprite-editor-list-item");
+ const name = document.createElement("span");
+ name.textContent = sprite.name;
+ name.addEventListener("click", () => {
+ this.setPreview(sprite.id);
+ });
+ listItem.append(name);
+ return listItem;
+ });
+
+ this.list.replaceChildren(...children);
+ }
+}
diff --git a/style.css b/style.css
index 11f4e49..cd05a9c 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,10 @@
color-scheme: dark;
}
+body {
+ font-family: system-ui;
+}
+
* {
box-sizing: border-box;
}
@@ -16,24 +20,23 @@ main {
display: flex;
flex-direction: row;
height: 100vh;
- padding: 32px;
- gap: 32px;
+ padding: 2rem;
+ gap: 2rem;
}
.section-header {
background-color: #bdbdbd;
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
border: 1px solid #222;
- padding: 4px;
- padding-left: 8px;
- font-family: sans-serif;
+ padding: 0.25rem;
+ padding-left: 0.5rem;
color: #424242;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
section {
- border-radius: 8px;
+ border-radius: 0.5rem;
width: 100%;
flex: 1;
display: flex;
@@ -47,8 +50,8 @@ section canvas {
}
section *:last-child {
- border-bottom-left-radius: 8px;
- border-bottom-right-radius: 8px;
+ border-bottom-left-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
flex: 1;
}
@@ -58,7 +61,7 @@ div#buttons {
display: flex;
flex-wrap: wrap;
flex: row;
- gap: 5px;
+ gap: 0.3rem;
}
div#buttons > * {
@@ -73,10 +76,10 @@ div#buttons button {
.column {
display: flex;
flex-direction: column;
- gap: 5px;
+ gap: 0.3rem;
justify-content: space-evenly;
align-items: flex-start;
- gap: 32px;
+ gap: 2rem;
flex: 1;
min-width: 0;
}
@@ -123,7 +126,7 @@ div#buttons button {
color: white;
border: none;
background-color: #222;
- padding: 4px 8px;
+ padding: 0.25rem 0.5rem;
font-family: monospace;
font-size: 1rem;
flex-grow: 0;
@@ -138,7 +141,7 @@ div#buttons button {
margin: 0;
width: 100%;
height: 100%;
- font-size: 16px;
+ font-size: 1rem;
}
#editor * {
@@ -157,13 +160,12 @@ div#buttons button {
top: 100%;
left: 0;
right: 0;
- border-radius: 4px;
+ border-radius: 0.25rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.dropdown-option {
- padding: 5px 10px;
- font-family: sans-serif;
+ padding: 0.3rem 0.6rem;
color: #424242;
font-size: 0.8rem;
cursor: pointer;
@@ -177,8 +179,8 @@ button {
background-color: #087aaf;
border: none;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
- padding: 8px 16px;
- border-radius: 8px;
+ padding: 0.5rem 1rem;
+ border-radius: 0.5rem;
cursor: pointer;
transition-duration: 200ms;
}
@@ -203,33 +205,48 @@ footer {
}
#sprite-editor-preview {
- background-color: #1d2021;
- max-height: 450px;
- object-fit: contain;
- width: 100%;
- border-radius: 0px;
- padding-block: 32px;
+ display: flex;
+ flex-direction: column;
}
-#sprite-editor-list {
- list-style: none;
- padding: 1rem;
+#sprite-editor-preview-title {
+ margin: 1rem;
+ overflow-wrap: break-word;
+ font-weight: bold;
+}
+#sprite-editor-preview-image {
+ background-color: #1d2021;
+ object-fit: contain;
+ width: 100%;
+ border-radius: 0;
+ max-height: min(40vh, 400px);
+}
+
+#sprite-editor-sprite-list {
margin: 0;
}
-#sprite-editor-list .delete-button {
+#sprite-editor-sprite-list li span {
+ cursor: pointer;
+}
+
+#sprite-editor-sprite-list li span:hover {
+ text-decoration: 1px solid underline;
+}
+
+#sprite-editor-sprite-list .delete-button {
background-color: #c83e4d;
padding: 0.25rem 0.75rem;
}
-#sprite-editor-list .delete-button:hover {
+#sprite-editor-sprite-list .delete-button:hover {
background-color: #9f2d3a;
}
-#sprite-editor-list .delete-button:active {
+#sprite-editor-sprite-list .delete-button:active {
background-color: #7f242f;
}
-#sprite-editor-list p:first-child {
- margin-top: 0;
+#sprite-editor-upload-button {
+ margin: 1rem;
}