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 }
}

8
docs/index.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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">
<title>Karlkoder Docs</title> <title>Karlkoder Docs</title>
</head> </head>
<body> <body>
<h1>Docs</h1> <h1>Docs</h1>
</body> </body>
</html> </html>

81
index.html
View File

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

24
index.js
View File

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

5
lib.js
View File

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

10
style.css
View File

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