From 95c1bf77c44a94765aaf6e6b4982f2d2b9ec94f0 Mon Sep 17 00:00:00 2001
From: Yannik <80621863+vaporvee@users.noreply.github.com>
Date: Sat, 27 May 2023 20:10:18 +0200
Subject: [PATCH] answer box now gets correctly generated

---
 index.html                |  8 ++++----
 text_horror/app.js        | 32 +++++++++++++++++++++-----------
 text_horror/dialogue.json | 11 +++++++----
 text_horror/style.css     |  2 +-
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index ff6d7f0..08bc1be 100644
--- a/index.html
+++ b/index.html
@@ -16,10 +16,10 @@
         <p id="dlg-text"></p>
     </div>
     <div hidden="true" id="answer-box">
-        <p id="answer"></p>
-        <p id="answer"></p>
-        <p id="answer"></p>
-        <p id="answer"></p>
+        <p class="answer"></p>
+        <p class="answer"></p>
+        <p class="answer"></p>
+        <p class="answer"></p>
     </div>
     <img draggable="false" hidden="true" id="triangle" src="text_horror/assets/triangle.png">
     <p class="thx-for-playing">Thanks for playing</p>
diff --git a/text_horror/app.js b/text_horror/app.js
index 6da4896..7e3c42c 100644
--- a/text_horror/app.js
+++ b/text_horror/app.js
@@ -14,8 +14,8 @@ function load() {
 }
 
 function typeWriter() {
-  if (document.getElementById("dlg-text").innerHTML.length < dlgLines[dlgPointer].toString().length) {
-    document.getElementById("dlg-text").innerHTML += dlgLines[dlgPointer].toString().charAt(typeindex);
+  if (document.getElementById("dlg-text").innerHTML.length < 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); //loops because of running "typeWriter" after waiting
@@ -25,22 +25,32 @@ function typeWriter() {
 function nextDlg() {
   document.getElementById("triangle").hidden = true;
   if (document.getElementById("dlg-text").innerHTML.length == dlgLines[dlgPointer].length) { //check if text is typed out
-    document.getElementById("triangle").hidden = true;
-    if (dlgPointer < dlgLines.length - 2) { //check if dlgPointer is not at the array end
+    if (dlgPointer < dlgLines.length - 1) { //check if dlgPointer is not at the array end
       do {
-        dlgPointer++;
         if (typeof dlgLines[dlgPointer] === 'number')
           speed = 50 / dlgLines[dlgPointer];
-        else if (typeof dlgLines[dlgPointer] === 'object') { }
-        else if (typeof dlgLines[dlgPointer] === 'string' && String(dlgLines[dlgPointer]).startsWith("_")) {
+        else if (typeof dlgLines[dlgPointer] === 'object') {
+          document.getElementById("answer-box").hidden = false;
+          document.getElementById("bubble").onclick = null;
+          const answers = document.getElementsByClassName("answer");
+          const 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?
+            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];
         }
+        dlgPointer++;
+      }
+      while (!(typeof dlgLines[dlgPointer] === 'string') || dlgLines[dlgPointer].startsWith("_")) //again if it's not string
+      if (typeof dlgLines[dlgPointer] === 'string') {
+        typeindex = 0;
+        document.getElementById("dlg-text").innerHTML = "";
+        typeWriter();
       }
-      while (typeof dlgLines[dlgPointer] !== 'string' || String(dlgLines[dlgPointer]).startsWith("_")) //again if it's not string
-      typeindex = 0;
-      document.getElementById("dlg-text").innerHTML = "";
-      typeWriter();
     } else {
       document.getElementById("bubble").hidden = true;
       document.getElementById("answer-box").hidden = true;
diff --git a/text_horror/dialogue.json b/text_horror/dialogue.json
index ef70eba..a9244f7 100644
--- a/text_horror/dialogue.json
+++ b/text_horror/dialogue.json
@@ -3,14 +3,17 @@
         "Hello welcome to TextHorror!",
         "_title:NPC Name",
         "This is the second line",
-        "Aand a third line",
         0.3,
         "This text is slow",
         1,
-        "And again normal text",
+        "Can you answer?",
         {
-            "Yes": "CoooooooolllSADVwqavedWSDV",
-            "Also Yes": "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMGGHWhudujwd"
+            "Yes": [
+                "CoooooooolllSADVwqavedWSDV"
+            ],
+            "Also Yes": [
+                "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMGGHWhudujwd"
+            ]
         }
     ]
 }
\ No newline at end of file
diff --git a/text_horror/style.css b/text_horror/style.css
index 7aa8ecf..117681d 100644
--- a/text_horror/style.css
+++ b/text_horror/style.css
@@ -69,7 +69,7 @@ body {
     bottom: 68%;
 }
 
-#answer {
+.answer {
     text-decoration: underline;
     font-size: 30px;
 }