diff --git a/index.html b/index.html
index 451596f..d477f9c 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,10 @@
TextHorror
-
+
- 
+
+ Thanks for playing
\ No newline at end of file
diff --git a/text_horror/app.js b/text_horror/app.js
index 517709f..70a4f70 100644
--- a/text_horror/app.js
+++ b/text_horror/app.js
@@ -1,11 +1,26 @@
-var i = 0;
-var txt = 'Hello welcome to TextHorror!';
var speed = 50;
+var dlgLines = ["Hello welcome to TextHorror", "This is the second line"];
+var dlgPointer = 0;
+var i = 0;
function typeWriter() {
- if (i < txt.length) {
- document.getElementById("bubble").innerHTML += txt.charAt(i);
+ if (document.getElementById("bubble").innerHTML.length - 1 < dlgLines[dlgPointer].length) {
+ document.getElementById("bubble").innerHTML += dlgLines[dlgPointer].charAt(i);
i++;
- setTimeout(typeWriter, speed);
+ setTimeout(typeWriter, speed);//loops because of running "typeWriter" after waiting
+ }
+}
+
+function mouseClick() {
+ if (document.getElementById("bubble").innerHTML.length == dlgLines[dlgPointer].length) {
+ if (dlgPointer < dlgLines.length - 1) {
+ dlgPointer++;
+ i = 0;
+ document.getElementById("bubble").innerHTML = "";
+ typeWriter();
+ } else {
+ document.getElementById("bubble").hidden = true;
+ document.getElementById("triangle").hidden = true;
+ }
}
}
\ No newline at end of file
diff --git a/text_horror/style.css b/text_horror/style.css
index 4ea0608..07d709b 100644
--- a/text_horror/style.css
+++ b/text_horror/style.css
@@ -8,16 +8,25 @@ body {
background-color: black;
color: white;
text-align: center;
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-family: pixel-font;
+}
+
+.thx-for-playing {
+ z-index: -1;
+ font-size: 50px;
+ top: 45%;
+ left: 50%;
+ position: absolute;
+ transform: translate(-50%, -50%);
}
#bubble {
- font-family: pixel-font;
text-align: left;
font-size: 30px;
border-width: 5px;
border-style: solid;
border-color: white;
+ background-color: black;
padding: 30px;
margin: 0;
position: absolute;
@@ -28,7 +37,7 @@ body {
transform: translate(-50%, -50%);
}
-.triangle {
+#triangle {
fill: #fff;
position: absolute;
right: 17%;