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

refactor, fix start button not restarting

Browse Source
This commit is contained in:
Theis Pieter Hollebeek 2025-10-10 12:14:28 +02:00
parent f37bd3b7bd
commit dc5eef5279
5 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -10,14 +10,14 @@
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"lib": "./lib.js" "lib": "./js/lib.js"
} }
} }
</script> </script>
<script <script
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"
></script> ></script>
<script src="./index.js" type="module"></script> <script src="./js/index.js" type="module"></script>
</head> </head>
<body> <body>
<main> <main>

26
js/debounce.js Normal file
View File

@ -0,0 +1,26 @@
export class Debounce {
timer = null;
lastCall = 0;
constructor(timeout) {
this.timeout = timeout;
}
run(fn) {
const now = Date.now();
if (this.timer === null && now - this.lastCall > this.timeout) {
fn();
this.lastCall = now;
return;
}
if (this.timer !== null) {
clearTimeout(this.timer);
this.timer = null;
}
this.timer = setTimeout(() => {
fn();
this.lastCall = Date.now();
this.timer = null;
}, this.timeout);
}
}

45
index.js → js/index.js
View File

@ -1,44 +1,22 @@
/// <reference types="ace" /> /// <reference types="ace" />
import { Debounce } from "./debounce.js";
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( window.libInternalAbortController?.abort();
`data:text/javascript;charset=utf-8,${encodeURIComponent(code)}` window.libInternalAbortController = new AbortController();
await import(
`data:text/javascript;charset=utf-8,${
encodeURIComponent(code + `/*(tph): ${Math.random()}*/`)
}`
); );
module.default?.();
} catch (error) { } catch (error) {
consoleCode.textContent += `${error}\n`; consoleCode.textContent += `${error}\n`;
} }
} }
class Debounce {
timer = null;
lastCall = 0;
constructor(timeout) {
this.timeout = timeout;
}
run(fn) {
const now = Date.now();
if (this.timer === null && now - this.lastCall > this.timeout) {
fn();
this.lastCall = now;
return;
}
if (this.timer !== null) {
clearTimeout(this.timer);
this.timer = null;
}
this.timer = setTimeout(() => {
fn();
this.lastCall = Date.now();
this.timer = null;
}, 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");
@ -93,7 +71,6 @@ function minifyJs(code) {
saveButton.onclick = (ev) => { saveButton.onclick = (ev) => {
if (saveButton.classList.contains("active")) { if (saveButton.classList.contains("active")) {
saveButton.classList.remove("active"); saveButton.classList.remove("active");
saveDropdown.style.display = "none"; saveDropdown.style.display = "none";
} else { } else {
saveButton.classList.add("active"); saveButton.classList.add("active");
@ -107,9 +84,9 @@ saveJsButton.onclick = (ev) => {
}; };
saveHtmlButton.onclick = async (ev) => { saveHtmlButton.onclick = async (ev) => {
const js = editor.getValue().split("\n").map((line) => const js = editor.getValue()
" ".repeat(12) + line .split("\n")
).join("\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);

13
lib.js → js/lib.js
View File

@ -33,10 +33,21 @@ export function println(msg) {
export function startGameLoop(loopFunction) { export function startGameLoop(loopFunction) {
let before = Date.now(); let before = Date.now();
setInterval(() => { const loopInterval = setInterval(() => {
const now = Date.now(); const now = Date.now();
const deltaT = (now - before) / 1000; const deltaT = (now - before) / 1000;
before = now; before = now;
loopFunction(deltaT); loopFunction(deltaT);
}, 16); }, 16);
const abortSignal = window.libInternalAbortController.signal;
if (abortSignal) {
if (abortSignal.aborted) {
clearInterval(loopInterval);
}
abortSignal.addEventListener("abort", () => {
clearInterval(loopInterval);
});
}
} }

6
style.css
View File

@ -1,6 +1,6 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
color-scheme: light dark; color-scheme: dark;
} }
body { body {
@ -163,7 +163,7 @@ div#buttons > * > button {
} }
button { button {
background-color: #4fc3f7; background-color: #087aaf;
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;
@ -173,7 +173,7 @@ button {
} }
button.active { button.active {
background-color: #0288d1; background-color: #065275;
} }
button:hover { button:hover {