fmt
This commit is contained in:
parent
61050f58d9
commit
bd689c285c
3
deno.jsonc
Normal file
3
deno.jsonc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"fmt": { "indentWidth": 4 }
|
||||
}
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Karlkoder Docs</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Docs</h1>
|
||||
</body>
|
||||
</html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Karlkoder Docs</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Docs</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
159
index.html
159
index.html
@ -1,67 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Karlkoder Playground</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"lib": "./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>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
>
|
||||
|
||||
<div class="column" style="flex: 1">
|
||||
<div id="buttons">
|
||||
<a href="docs/index.html" target="_blank">
|
||||
<button>🤓 Docs</button>
|
||||
</a>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Karlkoder Playground</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"lib": "./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>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="column" style="flex: 1">
|
||||
<div id="buttons">
|
||||
<a
|
||||
href="docs/index.html"
|
||||
target="_blank"
|
||||
>
|
||||
<button>🤓 Docs</button>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-wrapper">
|
||||
<button id="save-button">💾 Save/Export</button>
|
||||
<div class="dropdown-wrapper">
|
||||
<button id="save-button">
|
||||
💾 Save/Export
|
||||
</button>
|
||||
|
||||
<div id="save-dropdown" class="dropdown-content">
|
||||
<div id="save-js" class="dropdown-option">Save JavaScript</div>
|
||||
<div id="save-html" class="dropdown-option">Export as HTML</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="save-dropdown"
|
||||
class="dropdown-content"
|
||||
>
|
||||
<div
|
||||
id="save-js"
|
||||
class="dropdown-option"
|
||||
>
|
||||
Save JavaScript
|
||||
</div>
|
||||
<div
|
||||
id="save-html"
|
||||
class="dropdown-option"
|
||||
>
|
||||
Export as HTML
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="run-button">▶️ Run</button>
|
||||
</div>
|
||||
<button id="run-button">▶️ Run</button>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="section-header">Output</div>
|
||||
<section>
|
||||
<div class="section-header">Output</div>
|
||||
|
||||
<canvas id="canvas-area">
|
||||
</canvas>
|
||||
</section>
|
||||
<canvas id="canvas-area"> </canvas>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-header">Console</div>
|
||||
<section>
|
||||
<div class="section-header">
|
||||
Console
|
||||
</div>
|
||||
|
||||
<div id="console">
|
||||
<pre><code id="console-code">Karlkode 1.0</code></pre>
|
||||
<input type="text" placeholder=">">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="console">
|
||||
<pre><code id="console-code">Karlkode 1.0</code></pre>
|
||||
<input
|
||||
type="text"
|
||||
placeholder=">"
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="column" style="flex: 3">
|
||||
<div class="column" style="flex: 3">
|
||||
<section>
|
||||
<div class="section-header">
|
||||
Code editor
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="section-header">Code editor</div>
|
||||
|
||||
<div id="editor-area">
|
||||
<pre id="editor">import * as lib from "lib";
|
||||
<div id="editor-area">
|
||||
<pre
|
||||
id="editor"
|
||||
>
|
||||
import * as lib from "lib";
|
||||
|
||||
lib.clear("green");
|
||||
|
||||
@ -80,17 +110,20 @@ function loop(deltaT) {
|
||||
|
||||
lib.startGameLoop(loop);
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
Copyright © 2025 S. F. Jakobsen (do whatever idc)
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright © 2025 S. F. Jakobsen (do whatever idc)</footer>
|
||||
|
||||
<!-- fix flash bug in furry browser -->
|
||||
<script>0</script>
|
||||
</body>
|
||||
<!-- fix flash bug in furry browser -->
|
||||
<script>
|
||||
0;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
56
index.js
56
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 = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -139,6 +144,5 @@ ${js}
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
downloadFile(html, "text/html", ".html");
|
||||
downloadFile(html, "text/html", ".html");
|
||||
};
|
||||
|
||||
|
||||
9
lib.js
9
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) {
|
||||
|
||||
32
package-lock.json
generated
32
package-lock.json
generated
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"@types/ace": "^0.0.52"
|
||||
}
|
||||
"devDependencies": {
|
||||
"@types/ace": "^0.0.52"
|
||||
}
|
||||
}
|
||||
|
||||
210
style.css
210
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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user