diff --git a/deno.jsonc b/deno.jsonc new file mode 100644 index 0000000..9d2c33f --- /dev/null +++ b/deno.jsonc @@ -0,0 +1,3 @@ +{ + "fmt": { "indentWidth": 4 } +} diff --git a/docs/index.html b/docs/index.html index f04560e..fa8e352 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,11 +1,11 @@ - - - - Karlkoder Docs - - -

Docs

- - \ No newline at end of file + + + + Karlkoder Docs + + +

Docs

+ + diff --git a/index.html b/index.html index 0875d00..f0d7a2f 100644 --- a/index.html +++ b/index.html @@ -1,67 +1,97 @@ - - - - - - Karlkoder Playground - - - - - - -
+ + + -
-
- - - + + Karlkoder Playground + + + + + + +
+
+
+ + + -
- +
+ -
- - -
-
+
+ + +
+
- -
+ +
-
-
Output
+
+
Output
- - -
+ +
-
-
Console
+
+
+ Console +
-
- 
Karlkode 1.0
- -
-
-
+
+ 
Karlkode 1.0
+ +
+ +
-
+
+
+
+ Code editor +
-
-
Code editor
- -
- 
import * as lib from "lib";
+                    

+                        
+import * as lib from "lib";
 
 lib.clear("green");
 
@@ -80,17 +110,20 @@ function loop(deltaT) {
 
 lib.startGameLoop(loop);
 
-

-				

-
-
+ +
+ + +
+ - - - - - - - + + + diff --git a/index.js b/index.js index b2b45d2..3524ca6 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,9 @@ async function runCode(code, consoleCode) { consoleCode.textContent += `\nRunning code....\n`; 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?.(); } catch (error) { consoleCode.textContent += `${error}\n`; @@ -11,7 +13,7 @@ async function runCode(code, consoleCode) { } class Debounce { - timer = null + timer = null; lastCall = 0; constructor(timeout) { @@ -33,11 +35,10 @@ class Debounce { fn(); this.lastCall = Date.now(); this.timer = null; - }, this.timeout) + }, this.timeout); } } - const editor = ace.edit("editor"); editor.setTheme("ace/theme/gruvbox"); editor.session.setMode("ace/mode/javascript"); @@ -54,9 +55,9 @@ const consoleCode = document.querySelector("#console-code"); const sessionSaveDebounce = new Debounce(1000); editor.addEventListener("change", (ev) => { sessionSaveDebounce.run(() => { - sessionStorage.setItem("code", editor.getValue()) - }) -}) + sessionStorage.setItem("code", editor.getValue()); + }); +}); runButton.onclick = (ev) => { const code = editor.getValue(); @@ -70,7 +71,9 @@ function downloadFile(content, mime, extension) { const element = document.createElement("a"); 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"; document.body.appendChild(element); @@ -81,33 +84,35 @@ function downloadFile(content, mime, extension) { } function minifyJs(code) { - return code - .replace(/[\s\n]+/g, " ") - .replace(/;\s+/g, ";"); + return code + .replace(/[\s\n]+/g, " ") + .replace(/;\s+/g, ";"); } saveButton.onclick = (ev) => { - if (saveButton.classList.contains("active")) { - saveButton.classList.remove("active"); - - saveDropdown.style.display = "none"; - } else { - saveButton.classList.add("active"); + if (saveButton.classList.contains("active")) { + saveButton.classList.remove("active"); - saveDropdown.style.display = "block"; - } + saveDropdown.style.display = "none"; + } else { + saveButton.classList.add("active"); + + saveDropdown.style.display = "block"; + } }; saveJsButton.onclick = (ev) => { - downloadFile(editor.getValue(), "text/javascript", ".js"); + downloadFile(editor.getValue(), "text/javascript", ".js"); }; saveHtmlButton.onclick = async (ev) => { - const js = editor.getValue().split("\n").map(line => " ".repeat(12) + line).join("\n"); - let lib = await (await fetch("./lib.js")).text(); - lib = minifyJs(lib); + const js = editor.getValue().split("\n").map((line) => + " ".repeat(12) + line + ).join("\n"); + let lib = await (await fetch("./lib.js")).text(); + lib = minifyJs(lib); - const html = ` + const html = ` @@ -139,6 +144,5 @@ ${js} `; - downloadFile(html, "text/html", ".html"); + downloadFile(html, "text/html", ".html"); }; - diff --git a/lib.js b/lib.js index 1e14ca7..179bc9c 100644 --- a/lib.js +++ b/lib.js @@ -24,10 +24,11 @@ export function drawRect(x, y, width, height, color) { } export function println(msg) { - if (consoleCode) - consoleCode.textContent += `${msg}\n`; - else - console.log(msg); + if (consoleCode) { + consoleCode.textContent += `${msg}\n`; + } else { + console.log(msg); + } } export function startGameLoop(loopFunction) { diff --git a/package-lock.json b/package-lock.json index e3dbb1d..d78b61d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,19 @@ { - "name": "karlkoder-playground", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "devDependencies": { - "@types/ace": "^0.0.52" - } - }, - "node_modules/@types/ace": { - "version": "0.0.52", - "resolved": "https://registry.npmjs.org/@types/ace/-/ace-0.0.52.tgz", - "integrity": "sha512-YPF9S7fzpuyrxru+sG/rrTpZkC6gpHBPF14W3x70kqVOD+ks6jkYLapk4yceh36xej7K4HYxcyz9ZDQ2lTvwgQ==", - "dev": true, - "license": "MIT" + "name": "karlkoder-playground", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "devDependencies": { + "@types/ace": "^0.0.52" + } + }, + "node_modules/@types/ace": { + "version": "0.0.52", + "resolved": "https://registry.npmjs.org/@types/ace/-/ace-0.0.52.tgz", + "integrity": "sha512-YPF9S7fzpuyrxru+sG/rrTpZkC6gpHBPF14W3x70kqVOD+ks6jkYLapk4yceh36xej7K4HYxcyz9ZDQ2lTvwgQ==", + "dev": true, + "license": "MIT" + } } - } } diff --git a/package.json b/package.json index b1a6469..45c9588 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "devDependencies": { - "@types/ace": "^0.0.52" - } + "devDependencies": { + "@types/ace": "^0.0.52" + } } diff --git a/style.css b/style.css index d71954b..6c0375f 100644 --- a/style.css +++ b/style.css @@ -1,182 +1,182 @@ * { - box-sizing: border-box; - color-scheme: light dark; + box-sizing: border-box; + color-scheme: light dark; } body { - margin: 0; - height: 100vh; - background-color: light-dark(#EEE, #333); + margin: 0; + height: 100vh; + background-color: light-dark(#eee, #333); } main { - display: flex; - flex-direction: row; - height: 100vh; - gap: 32px; + display: flex; + flex-direction: row; + height: 100vh; + gap: 32px; } .section-header { - background-color: white; - border-top-left-radius: 8px; - border-top-right-radius: 8px; - border: 1px solid light-dark(#BDBDBD, #222); - padding: 4px; - padding-left: 8px; - font-family: sans-serif; - color: #747474; - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); + background-color: white; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border: 1px solid light-dark(#bdbdbd, #222); + padding: 4px; + padding-left: 8px; + font-family: sans-serif; + color: #747474; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); } section { - border-radius: 8px; - width: 100%; - flex: 1; - display: flex; - flex-direction: column; - background-color: black; + border-radius: 8px; + width: 100%; + flex: 1; + display: flex; + flex-direction: column; + background-color: black; } section canvas { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } section *:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); - flex: 1; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); + flex: 1; } div#buttons { - width: 100%; - display: flex; - flex: row; - justify-content: space-between; - align-items: flex-start; - gap: 5px; + width: 100%; + display: flex; + flex: row; + justify-content: space-between; + align-items: flex-start; + gap: 5px; } div#buttons > * { - width: 100%; + width: 100%; } div#buttons > * > button { - width: 100%; + width: 100%; } .column { - display: flex; - flex-direction: column; - gap: 5px; - justify-content: space-evenly; - align-items: flex-start; - padding: 32px; - gap: 32px; - height: 100vh; - flex: 1; + display: flex; + flex-direction: column; + gap: 5px; + justify-content: space-evenly; + align-items: flex-start; + padding: 32px; + gap: 32px; + height: 100vh; + flex: 1; } #canvas-area { - background-color: black; - width: 480px; - height: 360px; + background-color: black; + width: 480px; + height: 360px; } #console { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } #console pre { - color: white; - background-color: black; - margin: 0; - width: 100%; - overflow-wrap: break-word; + color: white; + background-color: black; + margin: 0; + width: 100%; + overflow-wrap: break-word; word-break: break-all; - font-size: 1rem; - padding: 4px 8px; - flex: 1; + font-size: 1rem; + padding: 4px 8px; + flex: 1; } #console pre { - width: 100%; - white-space: pre-wrap; + width: 100%; + white-space: pre-wrap; } #console input { - width: 100%; - margin: 0; - outline: none; - padding: none; - color: white; - border: none; - background-color: #222; - padding: 4px 8px; - font-family: monospace; - font-size: 1rem; - flex-grow: 0; + width: 100%; + margin: 0; + outline: none; + padding: none; + color: white; + border: none; + background-color: #222; + padding: 4px 8px; + font-family: monospace; + font-size: 1rem; + flex-grow: 0; } #editor-area { - width: 100%; + width: 100%; } #editor { - margin: 0; - width: 100%; - height: 100%; - font-size: 16px; + margin: 0; + width: 100%; + height: 100%; + font-size: 16px; } .dropdown-wrapper { - position: relative; + position: relative; } .dropdown-content { - display: none; - background-color: white; - position: absolute; - top: 100%; - left: 0; - right: 0; - border-radius: 4px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); + display: none; + background-color: white; + position: absolute; + top: 100%; + left: 0; + right: 0; + border-radius: 4px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); } .dropdown-option { - padding: 5px 10px; - font-family: sans-serif; - color: #424242; - font-size: 0.8rem; - cursor: pointer; + padding: 5px 10px; + font-family: sans-serif; + color: #424242; + font-size: 0.8rem; + cursor: pointer; } .dropdown-option:hover { - background-color: #EEE; + background-color: #eee; } button { - background-color: #4FC3F7; - border: none; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); - padding: 8px 16px; - border-radius: 8px; - cursor: pointer; - transition-duration: 200ms; + background-color: #4fc3f7; + border: none; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); + padding: 8px 16px; + border-radius: 8px; + cursor: pointer; + transition-duration: 200ms; } button.active { - background-color: #0288D1; + background-color: #0288d1; } button:hover { - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); } footer { - position: absolute; - bottom: 1px; - left: 1px; + position: absolute; + bottom: 1px; + left: 1px; }