From 41ec0814f7b976396d9b7a24a464f9006c6ca1ca Mon Sep 17 00:00:00 2001 From: sfja Date: Wed, 20 Aug 2025 20:10:44 +0200 Subject: [PATCH] init --- favicon.ico | Bin 0 -> 16958 bytes index.html | 64 ++++++++++++++++++++++++++++++++++++ index.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 236 insertions(+) create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..4a61c86e18bc601596b2098ac908231c5ca39df7 GIT binary patch literal 16958 zcmeHNJx>EM3{59k5F0CuUD()*koX%&to#Ys_$3I59VRwLMg}T%sQNjx(E%Eq!U+?S zb8@++M|p>?$=QzW_v}lLwo0|=@9z-;KDYc`NYST#~bwQ_*;{XF-01SWuFaQR? zKrRMGqmkyP6qjsYxqZLi-;~xgSocZ#t zTTc00h2)gmrf!@*e}wCaW1CDS$FxuH + + + + + + + Document + + + + + + + +
+ + +
+ +
+ +
+ + + + +
+ 
Karlkode 1.0
+ +
+
+ +
+ 
+
+lib.clear("green");
+
+lib.drawRect(100, 100, 100, 100, "blue");
+
+lib.println("hello world!");
+
+let playerX = 0;
+
+function loop(deltaT) {
+
+    playerX += 100 * deltaT;
+
+    lib.drawRect(playerX, 200, 50, 50, "red");
+}
+
+lib.startGameLoop(loop);
+
+return 5;
+
+
+ + +
+ + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..1716e81 --- /dev/null +++ b/index.js @@ -0,0 +1,91 @@ +"use strict"; + +let _gameLoopTimeout = undefined; + +(function () { + const editor = ace.edit("editor"); + editor.setTheme("ace/theme/gruvbox"); + editor.session.setMode("ace/mode/javascript"); + + if (editor.getValue() === "") { + editor.setValue( + ``, + ); + } + + let running = false; + + const startStopButton = document.querySelector("#start-stop"); + const saveButton = document.querySelector("#save"); + const consoleCode = document.querySelector("#console-code"); + + startStopButton.onclick = (ev) => { + if (running) { + if (_gameLoopTimeout) { + clearTimeout(_gameLoopTimeout); + _gameLoopTimeout = undefined; + } + startStopButton.textContent = "Start"; + running = false; + } else { + const code = editor.getValue(); + runCode(code, consoleCode); + startStopButton.textContent = "Stop"; + running = true; + } + }; +})(); + +const lib = (() => { + const consoleCode = document.querySelector("#console-code"); + + const width = 480; + const height = 360; + + const canvas = document.querySelector("canvas"); + canvas.width = width; + canvas.height = height; + const cx = canvas.getContext("2d"); + cx.imageSmoothingEnabled = false; + + function rgb(red, green, blue) { + return `rgb(${red}, ${green}, ${blue})`; + } + + function clear(color) { + cx.fillStyle = color; + cx.fillRect(0, 0, width, height); + } + + function drawRect(x, y, width, height, color) { + cx.fillStyle = color; + cx.fillRect(x, y, width, height); + } + + function println(msg) { + consoleCode.textContent += `${msg}\n`; + } + + function startGameLoop(loopFunction) { + let before = Date.now(); + _gameLoopTimeout = setInterval(() => { + const now = Date.now(); + const deltaT = (now - before) / 1000; + before = now; + loopFunction(deltaT); + }, 16); + } + + return { width, height, rgb, clear, drawRect, println, startGameLoop }; +})(); + +async function runCode(code, consoleCode) { + lib; + consoleCode.textContent += `\nRunning code....\n`; + try { + const result = await eval(`(async function () {${code}})()`); + consoleCode.textContent += `Code returned ${result}\n`; + } catch (error) { + consoleCode.textContent += `${error}\n`; + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..033cdc0 --- /dev/null +++ b/style.css @@ -0,0 +1,81 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + height: 100vh; +} + +main { + display: flex; + flex-direction: row; + height: 100vh; +} + +#buttons { + width: 100%; + display: flex; + flex-direction: row; + justify-content: end; + align-items: center; + gap: 10px; +} + +#buttons button { + margin: 5px; + padding: 10px; + min-width: 100px; +} + +#dashboard { + display: flex; + flex-direction: column; + gap: 5px; + width: 40vw; + justify-content: space-evenly; + align-items: center; +} + +canvas { + background-color: black; + width: 100%; +} + +#console { + width: 100%; + padding: 5px; +} + +#console pre { + color: white; + background-color: black; + margin: 0; + width: 100%; + font-size: 1rem; + height: 24rem; +} + +#console input { + width: 100%; + margin: 0; + outline: none; + border: 2px solid white; + padding: none; + color: white; + background-color: black; + font-family: monospace; + font-size: 1rem; +} + +#editor-area { + width: 100%; + height: 100%; +} + +#editor { + margin: 0; + width: 100%; + height: 100%; + font-size: 16px; +}