From bfadafa86f2a4632c04251f04bd1b9d364e136ac Mon Sep 17 00:00:00 2001
From: Yannik <80621863+vaporvee@users.noreply.github.com>
Date: Sat, 27 May 2023 11:35:42 +0200
Subject: [PATCH] improved clikc area triangle hiding and text wrapping
---
index.html | 8 +++++---
text_horror/app.js | 16 +++++++++-------
text_horror/style.css | 11 ++++++++---
3 files changed, 22 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index 0c78142..6f581eb 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,11 @@
TextHorror
-
-
- 
+
+
+
Thanks for playing
diff --git a/text_horror/app.js b/text_horror/app.js
index eec1ef6..25ca363 100644
--- a/text_horror/app.js
+++ b/text_horror/app.js
@@ -15,31 +15,33 @@ function load() {
}
function typeWriter() {
- if (document.getElementById("bubble").innerHTML.length < dlgLines[dlgPointer].toString().length) {
- document.getElementById("bubble").innerHTML += dlgLines[dlgPointer].toString().charAt(typeindex);
+ if (document.getElementById("dlg-text").innerHTML.length < dlgLines[dlgPointer].toString().length) {
+ document.getElementById("dlg-text").innerHTML += dlgLines[dlgPointer].toString().charAt(typeindex);
typeindex++;
- document.getElementById("triangle").hidden = document.getElementById("bubble").innerHTML.length != dlgLines[dlgPointer].length
+ document.getElementById("triangle").hidden = document.getElementById("dlg-text").innerHTML.length != dlgLines[dlgPointer].length
setTimeout(typeWriter, speed); //loops because of running "typeWriter" after waiting
}
}
+document.addEventListener('mousedown', mouseDown, false)
+document.addEventListener('mouseup', mouseUp, false)
+
function mouseDown() {
document.getElementById("triangle").hidden = true;
}
function mouseUp() {
- if (document.getElementById("bubble").innerHTML.length == dlgLines[dlgPointer].length) { //check if text is typed out
+ 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
dlgPointer++;
while (!(typeof dlgLines[dlgPointer] === 'string')) //again if it's not string
typeindex = 0;
- document.getElementById("bubble").innerHTML = "";
- document.getElementById("triangle").hidden = true;
+ document.getElementById("dlg-text").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 07d709b..61c1a12 100644
--- a/text_horror/style.css
+++ b/text_horror/style.css
@@ -20,14 +20,19 @@ body {
transform: translate(-50%, -50%);
}
-#bubble {
+#dlg-text {
text-align: left;
- font-size: 30px;
+ font-size: 40px;
+ white-space: break-spaces;
+}
+
+#bubble {
border-width: 5px;
border-style: solid;
border-color: white;
background-color: black;
- padding: 30px;
+ padding: 20px;
+ padding-left: 50px;
margin: 0;
position: absolute;
top: 50%;