Merge pull request #1 from vaporvee/js-rewrite

fixed the first line bug after js rewrite

text_horror/app.js

@@ -3,67 +3,79 @@ var typeindex = 0;
 var dlgPointer = 0;
 var dlgFile;
 let dlgLines;
+var skipDlg = false;
 var answers;
 var keys;
 
-//BUG: You cant put anything other than a string at the beginning of a dialogue array
-
 function load() {
   fetch("text_horror/dialogue.json")
     .then(Response => Response.json())
     .then(data => {
       dlgFile = data;
       changeDlg("start");
-    })
+      skipDlg = true;
+      nextDlg(false);
+    });
 }
 
 function changeDlg(dlgKey) {
   dlgPointer = 0;
+  if (typeof dlgFile[dlgKey] === "string") {
+    var oneline = [dlgFile[dlgKey]]
+    dlgLines = oneline
+  }
+  else if (Array.isArray(dlgFile[dlgKey]))
+    dlgLines = dlgFile[dlgKey]
+
+}
+
+function updateDlg() {
+  console.log(dlgLines[dlgPointer]);
   typeindex = 0;
-  dlgLines = dlgFile[dlgKey];
   document.getElementById("dlg-text").innerHTML = "";
   typeWriter();
 }
 
 function typeWriter() {
-  if (document.getElementById("dlg-text").innerHTML.length < dlgLines[dlgPointer].length) {
+  if (typeindex < dlgLines[dlgPointer].length) {
     document.getElementById("dlg-text").innerHTML += dlgLines[dlgPointer].charAt(typeindex);
     typeindex++;
-    document.getElementById("triangle").hidden = document.getElementById("dlg-text").innerHTML.length != dlgLines[dlgPointer].length
+    setTimeout(typeWriter, speed);
-    setTimeout(typeWriter, speed); //loops because of running "typeWriter" after waiting
   }
 }
 
-function nextDlg() {
+function nextDlg(dlgPointerIncrease = true) {
-  document.getElementById("triangle").hidden = true;
+  if (document.getElementById("dlg-text").innerHTML.length == dlgLines[dlgPointer].length || skipDlg) {
-  if (document.getElementById("dlg-text").innerHTML.length == dlgLines[dlgPointer].length) { //check if text is typed out
+    skipDlg = false;
-    if (dlgPointer < dlgLines.length - 1) { //check if dlgPointer is not at the array end
+    if (dlgPointerIncrease)
-      do {
+      dlgPointer++
-        dlgPointer++;
+    if (dlgPointer < dlgLines.length) {
-        if (typeof dlgLines[dlgPointer] === 'number')
+      if (typeof dlgLines[dlgPointer] === 'number') {
         speed = 50 / dlgLines[dlgPointer];
+        skipDlg = true
+        nextDlg();
+      }
+      else if (typeof dlgLines[dlgPointer] === 'string') {
+        if (dlgLines[dlgPointer].startsWith("_")) {
+          skipDlg = true
+          if (dlgLines[dlgPointer].split(":")[0] === "_title") {
+            document.getElementById("title").innerHTML = dlgLines[dlgPointer].split(':')[1];
+            nextDlg();
+          }
+        } else
+          updateDlg();
+      }
       else if (typeof dlgLines[dlgPointer] === 'object') {
         document.getElementById("answer-box").hidden = false;
         document.getElementById("bubble").onclick = null;
         answers = document.getElementsByClassName("answer");
         keys = Object.keys(dlgLines[dlgPointer]);
-          for (let j = 0; j < keys.length; j++) { //why is the length one smaller? Does javascript make any sense someday?
+        for (let j = 0; j < keys.length; j++) {
           answers.item(j).innerHTML = keys[j];
         }
-          break;
-        }
-        else if (typeof dlgLines[dlgPointer] === 'string' && dlgLines[dlgPointer].startsWith("_")) {
-          if (dlgLines[dlgPointer].split(":")[0] === "_title")
-            document.getElementById("title").innerHTML = dlgLines[dlgPointer].split(':')[1];
       }
     }
-      while (!(typeof dlgLines[dlgPointer] === 'string') || dlgLines[dlgPointer].startsWith("_")) //again if it's not string
+    else {
-      if (typeof dlgLines[dlgPointer] === 'string') {
-        typeindex = 0;
-        document.getElementById("dlg-text").innerHTML = "";
-        typeWriter();
-      }
-    } else {
       document.getElementById("bubble").hidden = true;
       document.getElementById("answer-box").hidden = true;
     }
@@ -75,7 +87,9 @@ function answered(answerId) {
   document.getElementById("bubble").addEventListener("click", nextDlg);
   document.getElementById("answer-box").hidden = true;
   changeDlg(document.getElementById(answerId).innerHTML);
-  for (let j = 0; j < keys.length; j++) { //why is the length one smaller? Does javascript make any sense someday?
+  skipDlg = true;
+  nextDlg(false);
+  for (let j = 0; j < keys.length; j++) {
     answers.item(j).innerHTML = "";
   }
 }

text_horror/dialogue.json

@@ -1,7 +1,6 @@
 {
     "start": [
         "Hello welcome to TextHorror!",
-        "_title:Spitzkopf",
         "This is the second line",
         0.3,
         "This text is slow",
@@ -17,6 +16,7 @@
                 }
             ],
             "Also Yes": [
+                "_title:Spitzkopf",
                 "That was a weird answer... Is anything wrong with you?",
                 {
                     "Yes my name is Peter": [