diff --git a/index.html b/index.html
index 4c923ab..d12c00b 100644
--- a/index.html
+++ b/index.html
@@ -10,14 +10,14 @@
-
+
diff --git a/js/debounce.js b/js/debounce.js
new file mode 100644
index 0000000..dd94f53
--- /dev/null
+++ b/js/debounce.js
@@ -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);
+ }
+}
diff --git a/index.js b/js/index.js
similarity index 77%
rename from index.js
rename to js/index.js
index 89feece..8ff47a2 100644
--- a/index.js
+++ b/js/index.js
@@ -1,44 +1,22 @@
///
+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);
diff --git a/lib.js b/js/lib.js
similarity index 74%
rename from lib.js
rename to js/lib.js
index 179bc9c..9ede8e6 100644
--- a/lib.js
+++ b/js/lib.js
@@ -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);
+ });
+ }
}
diff --git a/style.css b/style.css
index 5002b36..010600c 100644
--- a/style.css
+++ b/style.css
@@ -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 {