170 lines
5.6 KiB
HTML
170 lines
5.6 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 src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ext-language_tools.js"
|
|
></script>
|
|
<script src="https://www.unpkg.com/ace-linters@latest/build/ace-linters.js"></script>
|
|
<script src="./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 class="icon-button secondary">
|
|
🤓 Docs
|
|
</button>
|
|
</a>
|
|
|
|
<div>
|
|
<button id="run-button">🏃 Run</button>
|
|
</div>
|
|
</div>
|
|
|
|
<section>
|
|
<div class="section-header">Output</div>
|
|
|
|
<canvas id="canvas-area" width="480" height="360"></canvas>
|
|
</section>
|
|
|
|
<section id="console-section">
|
|
<div class="section-header">
|
|
Console
|
|
</div>
|
|
|
|
<div id="console">
|
|
<pre id="console-code"></pre>
|
|
<input
|
|
id="console-input"
|
|
type="text"
|
|
placeholder=">"
|
|
>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="column" style="flex: 3">
|
|
<div id="project-header">
|
|
<div id="project-header-left">
|
|
<input
|
|
id="project-name"
|
|
type="text"
|
|
placeholder="Project name"
|
|
aria-label="Project name"
|
|
>
|
|
|
|
<button id="save-button">
|
|
💾 Save
|
|
</button>
|
|
|
|
<button id="load-button" class="secondary">
|
|
📄 Load
|
|
</button>
|
|
|
|
<span id="save-status"></span>
|
|
</div>
|
|
|
|
<button id="export-button">
|
|
↗️ Export
|
|
</button>
|
|
</div>
|
|
|
|
<section>
|
|
<div class="section-header">
|
|
Code editor
|
|
</div>
|
|
|
|
<div id="editor-area">
|
|
<pre
|
|
id="editor"
|
|
>
|
|
export const lib = karlkoder.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>
|
|
|
|
<div class="column" id="asset-editor-container" style="flex-grow: 0">
|
|
<div id="toggle-asset-editor-button">
|
|
‹
|
|
</div>
|
|
|
|
<section id="asset-editor">
|
|
<div class="section-header">
|
|
Asset editor
|
|
</div>
|
|
|
|
<div id="asset-editor-preview">
|
|
<p id="asset-editor-preview-title"></p>
|
|
<img id="asset-editor-preview-image" src="">
|
|
<code id="asset-editor-preview-snippet"></code>
|
|
</div>
|
|
|
|
<p id="asset-editor-asset-list-title">Uploaded assets</p>
|
|
<ul id="asset-editor-asset-list"></ul>
|
|
<button id="asset-editor-upload-button">Upload new asset</button>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
Copyright © 2025 S. J. Fakobsen (do whatever idc)
|
|
</footer>
|
|
|
|
<div id="persistent-storage-overlay">
|
|
<h1>Allow persistent storage to avoid data loss</h1>
|
|
<p>
|
|
Your code is saved only in your browser, not on our servers. To provide an optimal
|
|
experience, we would like permission to use <a
|
|
href="https://developer.mozilla.org/en-US/docs/Web/API/StorageManager/persist"
|
|
>persistent storage</a>, otherwise, your browser may clear your Karlkoder data at
|
|
any point it wants to.
|
|
</p>
|
|
<p>
|
|
If you deny permission, you can still save and load your code manually with the
|
|
"save" and "load" buttons, you will just have to vigilant to save and load yourself,
|
|
as otherwise your data might get randomly cleared between sessions.
|
|
</p>
|
|
<p>
|
|
Even if you enable persistent storage, your browser can still choose to clear your
|
|
data, i.e. if you clear your browser history, so we would still recommend to save it
|
|
to your hard drive every now and then.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- fix flash bug in furry browser -->
|
|
<script>
|
|
0;
|
|
</script>
|
|
</body>
|
|
</html>
|