push and pop

css/main.css

@@ -31,4 +31,12 @@
     font-family: monospace;
     background: rgb(255,255,255);
     max-width: none;
+}
+
+.block-push {
+    background: rgb(135, 250, 154);
+}
+
+.block-pop {
+    background: rgb(250, 135, 135);
 }

js/index.mjs

@@ -15,7 +15,7 @@ let data = parser(`
 `);
 
 async function runWrap() {
-    let objs = Object.assign({},objsI);
+    let objs = Object.assign({}, objsI);
     objs.events = new EventTarget();
     await runner(data, objs);
     let ev = new Event('compile'); // TODO: more events
@@ -25,8 +25,9 @@ async function runWrap() {
 
 let clickedBlock = false;
 let clickedArea = false;
+let bodyThing = document.body;
 
-async function createBlocks(dat) {
+async function createBlocks(dat, parent = bodyThing) {
     let args = Object.assign([], dat.args);
     if (!args || !args[0]) args = [dat.args];
     if (!args || !args[0]) args = [];
@@ -41,7 +42,37 @@ async function createBlocks(dat) {
     div.classList.add(`block-${dat.context}`)
     div.classList.add(`block`)
     div.textContent = dat.str || dat.context;
-    document.body.appendChild(div);
+    parent.appendChild(div);
+
+    if (dat.op == '{') {
+        //todo: clean
+        let button = document.createElement('div');
+        button.classList.add(`block`)
+        button.classList.add(`block-push`)
+        button.textContent = 'push a block';
+        div.appendChild(button)
+
+        button.onclick = function() {
+            dat.args.push(parser(`comment([placeholder])`));
+            bodyThing.innerHTML = '';
+
+            createBlocks(data);
+        }
+
+        button = document.createElement('div');
+        button.classList.add(`block`)
+        button.classList.add(`block-pop`)
+        button.textContent = 'pop a block';
+        div.appendChild(button)
+
+        button.onclick = function() {
+            dat.args.pop();
+
+            bodyThing.innerHTML = '';
+
+            createBlocks(data);
+        }
+    }
 
     for (let arg of args) {
         if (arg) div.appendChild(arg);
@@ -54,8 +85,8 @@ async function createBlocks(dat) {
                 let next2 = div.nextSibling;
 
                 let p = clickedBlock.parentElement;
-                div.parentElement.insertBefore(clickedBlock,next2);
-                p.insertBefore(div,next1);
+                div.parentElement.insertBefore(clickedBlock, next2);
+                p.insertBefore(div, next1);
 
                 let swap = {};
                 console.log(clickedArea, dat)

js/objs.mjs

@@ -11,6 +11,8 @@ let add = async function (input, objects) {
     return input[0] * 1 + input[1] * 1;
 }
 
+let comment = async function() { }
+
 let events = new EventTarget();
 
 export default {