push and pop

css/main.css

@@ -32,3 +32,11 @@
     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

@@ -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);

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 {