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

fmt

Browse Source
This commit is contained in:
Theis Pieter Hollebeek 2025-10-10 11:20:19 +02:00
parent 61050f58d9
commit bd689c285c
8 changed files with 267 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
deno.jsonc Normal file
View File

@ -0,0 +1,3 @@
{
"fmt": { "indentWidth": 4 }
}

73
index.html
View File

@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Karlkoder Playground</title>
@ -14,24 +17,43 @@
}
}
</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="./index.js" type="module"></script>
</head>
<body>
<main>
<div class="column" style="flex: 1">
<div id="buttons">
<a href="docs/index.html" target="_blank">
<a
href="docs/index.html"
target="_blank"
>
<button>🤓 Docs</button>
</a>
<div class="dropdown-wrapper">
<button id="save-button">💾 Save/Export</button>
<button id="save-button">
💾 Save/Export
</button>
<div id="save-dropdown" class="dropdown-content">
<div id="save-js" class="dropdown-option">Save JavaScript</div>
<div id="save-html" class="dropdown-option">Export as HTML</div>
<div
id="save-dropdown"
class="dropdown-content"
>
<div
id="save-js"
class="dropdown-option"
>
Save JavaScript
</div>
<div
id="save-html"
class="dropdown-option"
>
Export as HTML
</div>
</div>
</div>
@ -41,27 +63,35 @@
<section>
<div class="section-header">Output</div>
<canvas id="canvas-area">
</canvas>
<canvas id="canvas-area"> </canvas>
</section>
<section>
<div class="section-header">Console</div>
<div class="section-header">
Console
</div>
<div id="console">
<pre><code id="console-code">Karlkode 1.0</code></pre>
<input type="text" placeholder=">">
<input
type="text"
placeholder=">"
>
</div>
</section>
</div>
<div class="column" style="flex: 3">
<section>
<div class="section-header">Code editor</div>
<div class="section-header">
Code editor
</div>
<div id="editor-area">
<pre id="editor">import * as lib from "lib";
<pre
id="editor"
>
import * as lib from "lib";
lib.clear("green");
@ -80,17 +110,20 @@ function loop(deltaT) {
lib.startGameLoop(loop);
</pre>
</pre
>
</div>
</section>
</div>
</main>
<footer>Copyright © 2025 S. F. Jakobsen (do whatever idc)</footer>
<footer>
Copyright © 2025 S. F. Jakobsen (do whatever idc)
</footer>
<!-- fix flash bug in furry browser -->
<script>0</script>
<script>
0;
</script>
</body>
</html>

24
index.js
View File

@ -3,7 +3,9 @@
async function runCode(code, consoleCode) {
consoleCode.textContent += `\nRunning code....\n`;
try {
const module = await import(`data:text/javascript;charset=utf-8,${encodeURIComponent(code)}`);
const module = await import(
`data:text/javascript;charset=utf-8,${encodeURIComponent(code)}`
);
module.default?.();
} catch (error) {
consoleCode.textContent += `${error}\n`;
@ -11,7 +13,7 @@ async function runCode(code, consoleCode) {
}
class Debounce {
timer = null
timer = null;
lastCall = 0;
constructor(timeout) {
@ -33,11 +35,10 @@ class Debounce {
fn();
this.lastCall = Date.now();
this.timer = null;
}, this.timeout)
}, this.timeout);
}
}
const editor = ace.edit("editor");
editor.setTheme("ace/theme/gruvbox");
editor.session.setMode("ace/mode/javascript");
@ -54,9 +55,9 @@ const consoleCode = document.querySelector("#console-code");
const sessionSaveDebounce = new Debounce(1000);
editor.addEventListener("change", (ev) => {
sessionSaveDebounce.run(() => {
sessionStorage.setItem("code", editor.getValue())
})
})
sessionStorage.setItem("code", editor.getValue());
});
});
runButton.onclick = (ev) => {
const code = editor.getValue();
@ -70,7 +71,9 @@ 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);
@ -103,7 +106,9 @@ saveJsButton.onclick = (ev) => {
};
saveHtmlButton.onclick = async (ev) => {
const js = editor.getValue().split("\n").map(line => " ".repeat(12) + line).join("\n");
const js = editor.getValue().split("\n").map((line) =>
" ".repeat(12) + line
).join("\n");
let lib = await (await fetch("./lib.js")).text();
lib = minifyJs(lib);
@ -141,4 +146,3 @@ ${js}
downloadFile(html, "text/html", ".html");
};

5
lib.js
View File

@ -24,11 +24,12 @@ export function drawRect(x, y, width, height, color) {
}
export function println(msg) {
if (consoleCode)
if (consoleCode) {
consoleCode.textContent += `${msg}\n`;
else
} else {
console.log(msg);
}
}
export function startGameLoop(loopFunction) {
let before = Date.now();

10
style.css
View File

@ -6,7 +6,7 @@
body {
margin: 0;
height: 100vh;
background-color: light-dark(#EEE, #333);
background-color: light-dark(#eee, #333);
}
main {
@ -20,7 +20,7 @@ main {
background-color: white;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border: 1px solid light-dark(#BDBDBD, #222);
border: 1px solid light-dark(#bdbdbd, #222);
padding: 4px;
padding-left: 8px;
font-family: sans-serif;
@ -154,11 +154,11 @@ div#buttons > * > button {
}
.dropdown-option:hover {
background-color: #EEE;
background-color: #eee;
}
button {
background-color: #4FC3F7;
background-color: #4fc3f7;
border: none;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
padding: 8px 16px;
@ -168,7 +168,7 @@ button {
}
button.active {
background-color: #0288D1;
background-color: #0288d1;
}
button:hover {