basic block stuff
This commit is contained in:
parent
d172d38e5e
commit
e62e897d8d
5 changed files with 68 additions and 11 deletions
34
css/main.css
Normal file
34
css/main.css
Normal file
|
@ -0,0 +1,34 @@
|
|||
:root {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 250px;
|
||||
align-items: center;
|
||||
border: solid rgba(32,32,32,0.5) 2px;
|
||||
background: rgb(200,200,200);
|
||||
}
|
||||
|
||||
.op-40 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.op-91 {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.op-123 {
|
||||
display: block;
|
||||
background: rgb(225,225,225);
|
||||
}
|
||||
|
||||
.op-nil {
|
||||
font-family: monospace;
|
||||
background: rgb(255,255,255);
|
||||
max-width: none;
|
||||
}
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src='/js/index.mjs' type='module'></script>
|
||||
<link rel='stylesheet' href='/css/main.css'>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
34
js/index.mjs
34
js/index.mjs
|
@ -1,5 +1,6 @@
|
|||
import { unparser } from "./unparser.mjs";
|
||||
import { parser, runner } from "./parser.mjs";
|
||||
import { parser, runner, openers } from "./parser.mjs";
|
||||
import objs from "./objs.mjs";
|
||||
|
||||
let data = parser(`
|
||||
on(
|
||||
|
@ -13,16 +14,35 @@ let data = parser(`
|
|||
)
|
||||
`);
|
||||
|
||||
console.log(unparser(data));
|
||||
console.log(unparser(parser(unparser(data))));
|
||||
|
||||
(async function () {
|
||||
await runner(data, objs);
|
||||
let ev = new Event('start');
|
||||
let ev = new Event('start'); // TODO: more events
|
||||
|
||||
objs.events.dispatchEvent(ev);
|
||||
|
||||
createBlocks(data);
|
||||
})()
|
||||
|
||||
function createBlock() {
|
||||
async function createBlocks(dat) {
|
||||
let args = dat.args;
|
||||
if (!args || !args[0]) args = [dat.args];
|
||||
if (!args || !args[0]) args = [];
|
||||
for (let i in args) {
|
||||
args[i] = await createBlocks(args[i])
|
||||
}
|
||||
|
||||
}
|
||||
let o = dat.op ? dat.op.charCodeAt() : 'nil';
|
||||
|
||||
let div = document.createElement('div');
|
||||
div.classList.add(`op-${o}`)
|
||||
div.classList.add(`block-${dat.context}`)
|
||||
div.classList.add(`block`)
|
||||
div.textContent = dat.str || dat.context;
|
||||
document.body.appendChild(div);
|
||||
|
||||
for (let arg of args) {
|
||||
if (arg) div.appendChild(arg);
|
||||
}
|
||||
|
||||
return div;
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@ let add = async function (input, objects) {
|
|||
|
||||
let events = new EventTarget();
|
||||
|
||||
export {
|
||||
export default {
|
||||
on,
|
||||
events,
|
||||
echo,
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
//import objs from './objs.mjs';
|
||||
|
||||
let openers = {
|
||||
'{': '}',
|
||||
'[': ']',
|
||||
'(': ')'
|
||||
'{': '}', // function
|
||||
'[': ']', // string
|
||||
'(': ')', // group
|
||||
|
||||
// TODO: dropdowns, custom blocks
|
||||
};
|
||||
|
||||
function parser(str, context = '(') {
|
||||
|
|
Loading…
Reference in a new issue