diff --git a/index.html b/index.html
index 6f581eb..b200171 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
diff --git a/text_horror/app.js b/text_horror/app.js
index dcd8d7b..bcee6a1 100644
--- a/text_horror/app.js
+++ b/text_horror/app.js
@@ -9,8 +9,7 @@ function load() {
.then(Response => Response.json())
.then(data => {
dlgFile = data;
- dlgLines = dlgFile;
- typeWriter();
+ changeDlg("start");
})
}
@@ -30,9 +29,17 @@ function nextDlg() {
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 - 1) { //check if dlgPointer is not at the array end
- do
+ do {
+ if (String(dlgLines[dlgPointer]).startsWith("_")) {
+ switch (dlgLines[dlgPointer].split(":")[0]) {
+ case "_title":
+ document.getElementById("title").innerHTML = dlgLines[dlgPointer].split(':')[1];
+ break;
+ }
+ }
dlgPointer++;
- while (!(typeof dlgLines[dlgPointer] === 'string')) //again if it's not string
+ }
+ while (typeof dlgLines[dlgPointer] !== 'string' || String(dlgLines[dlgPointer]).startsWith("_")) //again if it's not string
typeindex = 0;
document.getElementById("dlg-text").innerHTML = "";
typeWriter();
@@ -40,4 +47,10 @@ function nextDlg() {
document.getElementById("bubble").hidden = true;
}
}
+}
+
+function changeDlg(dlgKey = "") {
+ var dlgPointer = 0;
+ dlgLines = dlgFile[dlgKey];
+ typeWriter();
}
\ No newline at end of file
diff --git a/text_horror/dialogue.json b/text_horror/dialogue.json
index 8d953d8..e8a76fb 100644
--- a/text_horror/dialogue.json
+++ b/text_horror/dialogue.json
@@ -1,7 +1,10 @@
-[
- "Hello welcome to TextHorror!",
- "This is the second line",
- 1,
- 2,
- "Aand a third line"
-]
\ No newline at end of file
+{
+ "start": [
+ "Hello welcome to TextHorror!",
+ "_title:NPC Name",
+ 1,
+ "This is the second line",
+ 2,
+ "Aand a third line"
+ ]
+}
\ No newline at end of file
diff --git a/text_horror/style.css b/text_horror/style.css
index 61c1a12..82e4a74 100644
--- a/text_horror/style.css
+++ b/text_horror/style.css
@@ -7,7 +7,6 @@ body {
color-scheme: dark;
background-color: black;
color: white;
- text-align: center;
font-family: pixel-font;
}
@@ -20,6 +19,13 @@ body {
transform: translate(-50%, -50%);
}
+#title {
+ font-size: 30px;
+ text-decoration: underline;
+ margin: 0;
+ position: absolute;
+}
+
#dlg-text {
text-align: left;
font-size: 40px;