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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script src='/js/index.mjs' type='module'></script>
|
<script src='/js/index.mjs' type='module'></script>
|
||||||
|
<link rel='stylesheet' href='/css/main.css'>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
34
js/index.mjs
34
js/index.mjs
|
@ -1,5 +1,6 @@
|
||||||
import { unparser } from "./unparser.mjs";
|
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(`
|
let data = parser(`
|
||||||
on(
|
on(
|
||||||
|
@ -13,16 +14,35 @@ let data = parser(`
|
||||||
)
|
)
|
||||||
`);
|
`);
|
||||||
|
|
||||||
console.log(unparser(data));
|
|
||||||
console.log(unparser(parser(unparser(data))));
|
|
||||||
|
|
||||||
(async function () {
|
(async function () {
|
||||||
await runner(data, objs);
|
await runner(data, objs);
|
||||||
let ev = new Event('start');
|
let ev = new Event('start'); // TODO: more events
|
||||||
|
|
||||||
objs.events.dispatchEvent(ev);
|
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();
|
let events = new EventTarget();
|
||||||
|
|
||||||
export {
|
export default {
|
||||||
on,
|
on,
|
||||||
events,
|
events,
|
||||||
echo,
|
echo,
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
//import objs from './objs.mjs';
|
//import objs from './objs.mjs';
|
||||||
|
|
||||||
let openers = {
|
let openers = {
|
||||||
'{': '}',
|
'{': '}', // function
|
||||||
'[': ']',
|
'[': ']', // string
|
||||||
'(': ')'
|
'(': ')', // group
|
||||||
|
|
||||||
|
// TODO: dropdowns, custom blocks
|
||||||
};
|
};
|
||||||
|
|
||||||
function parser(str, context = '(') {
|
function parser(str, context = '(') {
|
||||||
|
|
Loading…
Reference in a new issue