130 lines
3.5 KiB
HTML
130 lines
3.5 KiB
HTML
<!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>
|
|
<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
|
|
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>
|
|
|
|
<section>
|
|
<div class="section-header">Output</div>
|
|
|
|
<canvas id="canvas-area"> </canvas>
|
|
</section>
|
|
|
|
<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 class="column" style="flex: 3">
|
|
<section>
|
|
<div class="section-header">
|
|
Code editor
|
|
</div>
|
|
|
|
<div id="editor-area">
|
|
<pre
|
|
id="editor"
|
|
>
|
|
import * as lib from "lib";
|
|
|
|
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);
|
|
|
|
</pre
|
|
>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
Copyright © 2025 S. F. Jakobsen (do whatever idc)
|
|
</footer>
|
|
|
|
<!-- fix flash bug in furry browser -->
|
|
<script>
|
|
0;
|
|
</script>
|
|
</body>
|
|
</html>
|