generative js

call.js

@@ -9,15 +9,7 @@ function choice (arr) {
   return ret;
 }
 
-fetch("terms.json")
-  .then(response => response.json())
-  .then(terms => {
-    console.log("terms", terms);
-    let call = document.querySelector("#call");
-    let template = call.querySelector(".phrase");
-    for (var i=0; i<20; i++) {
-      let nn = template.cloneNode(true);
-      call.appendChild(nn);   
+function make_phrase (nn, terms) {
   nn.querySelector(".actor").innerHTML = choice(terms['actor']);
   nn.querySelector(".action").innerHTML = choice(terms['action']);
   if (randint(0, 2) == 0) {
@@ -28,5 +20,25 @@ fetch("terms.json")
   nn.querySelector(".sort").innerHTML = choice(terms['sort']);
   nn.querySelector(".media").innerHTML = choice(terms['media']);  
 }
-    template.style.visibility = "hidden";
-  });
+
+const sleep = delaysecs => new Promise(resolve => setTimeout(resolve, delaysecs*1000));
+
+async function make_phrases () {
+  let terms = await (await fetch("terms.json")).json();
+  // console.log("terms", terms);
+  let call = document.querySelector("#call");
+  let template = call.querySelector(".phrase");
+  template.remove();
+  while (true) {
+    let nn = template.cloneNode(true);
+    call.appendChild(nn);
+    make_phrase(nn, terms);
+    if (terms['actor'].length == 0 || terms['action'].length == 0 || terms['prefix'].length == 0 || terms['sort'].length == 0 || terms['media'].length == 0) {
+      console.log("out of terms, stopping");
+      break;
+    }
+    await (sleep(0.1));
+  }
+}
+
+make_phrases();