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">
{
"imports": {
"lib": "./lib.js"
"lib": "./js/lib.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="./js/index.js" type="module"></script>
</head>
<body>
<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" />
import { Debounce } from "./debounce.js";
async function runCode(code, consoleCode) {
consoleCode.textContent += `\nRunning code....\n`;
try {
const module = await import(
`data:text/javascript;charset=utf-8,${encodeURIComponent(code)}`
window.libInternalAbortController?.abort();
window.libInternalAbortController = new AbortController();
await import(
`data:text/javascript;charset=utf-8,${
encodeURIComponent(code + `/*(tph): ${Math.random()}*/`)
}`
);
module.default?.();
} catch (error) {
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");
editor.setTheme("ace/theme/gruvbox");
editor.session.setMode("ace/mode/javascript");
@ -93,7 +71,6 @@ function minifyJs(code) {
saveButton.onclick = (ev) => {
if (saveButton.classList.contains("active")) {
saveButton.classList.remove("active");
saveDropdown.style.display = "none";
} else {
saveButton.classList.add("active");
@ -107,9 +84,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);

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

@ -33,10 +33,21 @@ export function println(msg) {
export function startGameLoop(loopFunction) {
let before = Date.now();
setInterval(() => {
const loopInterval = setInterval(() => {
const now = Date.now();
const deltaT = (now - before) / 1000;
before = now;
loopFunction(deltaT);
}, 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;
color-scheme: light dark;
color-scheme: dark;
}
body {
@ -163,7 +163,7 @@ div#buttons > * > button {
}
button {
background-color: #4fc3f7;
background-color: #087aaf;
border: none;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
padding: 8px 16px;
@ -173,7 +173,7 @@ button {
}
button.active {
background-color: #0288d1;
background-color: #065275;
}
button:hover {