-
+
+
+
+
+
+
+
+
+
+
+
+
Code editor
diff --git a/src/index.js b/src/index.js
index 223dfc1..eb46431 100644
--- a/src/index.js
+++ b/src/index.js
@@ -70,15 +70,12 @@ langTools.setCompleters([new GamelibCompleter(), new TextCompleter()]);
editor.setValue(sessionStorage.getItem("code") ?? editor.getValue(), -1);
-const importButton = document.querySelector("#import-button");
const runButton = document.querySelector("#run-button");
-const saveButton = document.querySelector("#save-button");
-const saveDropdown = document.querySelector("#save-dropdown");
-const saveJsButton = document.querySelector("#save-js");
-const saveHtmlButton = document.querySelector("#save-html");
-const saveKarlkoderButton = document.querySelector("#save-karlkoder");
const toggleSpriteEditorButton = document.querySelector("#toggle-sprite-editor-button");
const projectName = document.querySelector("#project-name");
+const saveButton = document.querySelector("#save-button");
+const loadButton = document.querySelector("#load-button");
+const exportButton = document.querySelector("#export-button");
const sessionSaveDebounce = new Debounce(1000);
editor.addEventListener("change", () => {
@@ -87,7 +84,7 @@ editor.addEventListener("change", () => {
});
});
-importButton.onclick = async () => {
+loadButton.onclick = async () => {
const files = await promptUpload(".karlkode", false);
if (files.length === 0) {
return;
@@ -130,28 +127,13 @@ runButton.onclick = () => {
}
};
-saveButton.onclick = () => {
- if (saveButton.classList.contains("active")) {
- saveButton.classList.remove("active");
- saveDropdown.style.display = "none";
- } else {
- saveButton.classList.add("active");
-
- saveDropdown.style.display = "block";
- }
-};
-
-saveJsButton.onclick = () => {
- downloadFile(editor.getValue(), ".js", "text/javascript");
-};
-
-saveHtmlButton.onclick = async () => {
+exportButton.onclick = async () => {
const html = await htmlExporter.export(projectName.value, editor.getValue());
downloadFile(html, ".html", "text/html");
};
-function saveKarlKoder() {
+saveButton.onclick = () => {
downloadFile(
Vermiparous.en(
editor.getValue(),
@@ -159,10 +141,6 @@ function saveKarlKoder() {
),
".karlkode",
);
-}
-
-saveKarlkoderButton.onclick = () => {
- saveKarlKoder();
};
toggleSpriteEditorButton.addEventListener("click", () => spriteEditor.toggleEditor());
diff --git a/style.css b/style.css
index 25832e6..aa1cef1 100644
--- a/style.css
+++ b/style.css
@@ -205,6 +205,7 @@ button {
border-radius: 0.5rem;
cursor: pointer;
transition-duration: 200ms;
+ white-space: nowrap;
}
.dropdown-wrapper:has(.active) button,
@@ -342,6 +343,19 @@ footer {
display: none;
}
+#project-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ align-self: stretch;
+ gap: 0.5rem;
+}
+
+#project-header-left {
+ display: flex;
+ gap: 0.5rem;
+}
+
#project-name {
background-color: inherit;
border: none;
@@ -349,6 +363,9 @@ footer {
font-weight: bold;
border-bottom: 1px solid #bdbdbd;
transition: border-color 200ms ease-in-out;
+ margin-right: 1rem;
+ width: 100%;
+ max-width: 400px;
}
#project-name:hover, #project-name:focus {
@@ -356,6 +373,10 @@ footer {
outline: none;
}
+#export-button {
+ justify-self: flex-end;
+}
+
#buttons > a:has(button) {
text-decoration: none;
}