| author | Alan Dipert
<alan@dipert.org> 2025-05-09 23:58:15 UTC |
| committer | Alan Dipert
<alan@dipert.org> 2025-05-09 23:58:15 UTC |
| .gitmodules | +6 | -0 |
| JS-Interpreter | +1 | -0 |
| ace-builds | +1 | -0 |
| app.js | +11 | -0 |
| index.html | +47 | -0 |
| style.css | +80 | -0 |
diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..770ace3 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,6 @@ +[submodule "JS-Interpreter"] + path = JS-Interpreter + url = https://github.com/NeilFraser/JS-Interpreter.git +[submodule "ace-builds"] + path = ace-builds + url = https://github.com/ajaxorg/ace-builds.git diff --git a/JS-Interpreter b/JS-Interpreter new file mode 160000 index 0000000..37e73f8 --- /dev/null +++ b/JS-Interpreter @@ -0,0 +1 @@ +Subproject commit 37e73f830051d4bcfdf0e6b466e7bd8dc1d45709 diff --git a/ace-builds b/ace-builds new file mode 160000 index 0000000..c27ad0e --- /dev/null +++ b/ace-builds @@ -0,0 +1 @@ +Subproject commit c27ad0e87592703abec38e5e311db9f33935ed55 diff --git a/app.js b/app.js new file mode 100644 index 0000000..b749300 --- /dev/null +++ b/app.js @@ -0,0 +1,11 @@ +document.addEventListener('DOMContentLoaded', () => { + let editor = ace.edit("editor-pane", { + mode: "ace/mode/javascript", + theme: "ace/theme/monokai", + fontSize: "12px", + tabSize: 2, + useSoftTabs: true, + showPrintMargin: false + }); +}); + diff --git a/index.html b/index.html new file mode 100644 index 0000000..ffe387e --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>bitbop.studio</title> + <link rel="stylesheet" href="style.css"> + <script src="JS-Interpreter/acorn.js"></script> + <script src="JS-Interpreter/interpreter.js"></script> + <script src="ace-builds/src/ace.js"></script> + <script src="ace-builds/src/mode-javascript.js"></script> + <script src="ace-builds/src/theme-monokai.js"></script> + <script src="app.js"></script> +</head> +<body> + <div id="top-bar"> + <button id="play">▶</button> + <button>⏸</button> + <button>⏭</button> + <button>⏹</button> + </div> + + <div id="main-container"> + <div id="editor-pane"> + </div> + + <div id="ui-pane"> + <div id="inputs-panel"> + <!-- Inputs laid out in a VB6-like grid --> + <div class="input-group"> + <label>Slider A</label> + <input type="range" min="0" max="100" /> + </div> + <div class="input-group"> + <label>Button B</label> + <button>Click</button> + </div> + <!-- Add more inputs here --> + </div> + + <div id="graphics-panel"> + <canvas id="turtle-canvas" width="400" height="300"></canvas> + </div> + </div> + </div> +</body> +</html> + diff --git a/style.css b/style.css new file mode 100644 index 0000000..fec039d --- /dev/null +++ b/style.css @@ -0,0 +1,80 @@ +/* style.css */ + +body { + margin: 0; + font-family: sans-serif; + background: #d0d9e0; + height: 100vh; + display: flex; + flex-direction: column; +} + +#top-bar { + background: #3b4a58; + color: white; + padding: 5px; + display: flex; + gap: 5px; +} + +#main-container { + flex: 1; + display: flex; + overflow: hidden; +} + +#editor-pane { + width: 50%; + padding: 8px; + background: #1e1e1e; + color: #d4d4d4; + display: flex; + flex-direction: column; +} + +#editor-pane textarea { + flex: 1; + width: 100%; + background: #1e1e1e; + color: #d4d4d4; + border: none; + font-family: monospace; + font-size: 12px; + resize: none; +} + +#ui-pane { + width: 50%; + display: flex; + flex-direction: column; +} + +#inputs-panel { + flex: 1; + padding: 10px; + background: #f0f4f7; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: 10px; + overflow-y: auto; +} + +.input-group { + background: #fff; + border: 1px solid #ccc; + padding: 8px; + border-radius: 4px; +} + +#graphics-panel { + height: 300px; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; + border-top: 2px solid #ccc; +} + +canvas { + border: 1px solid #888; +}