vaporvee/destruction-of-legacy
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improved clikc area triangle hiding and text wrapping

Browse Source
This commit is contained in:
Yannik
2023-05-27 11:35:42 +02:00
parent d192958849
commit bfadafa86f
3 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -10,9 +10,11 @@
<title>TextHorror</title>
</head>
<body onpageshow="load()" onmouseup="mouseUp()" onmousedown="mouseDown()">
<div id="bubble"></div>
<img id="triangle" src="text_horror/assets/triangle.png">
<body onpageshow="load()">
<div id="bubble">
<p id="dlg-text"></p>
</div>
<img hidden="true" id="triangle" src="text_horror/assets/triangle.png">
<p class="thx-for-playing">Thanks for playing</p>
</body>

16
text_horror/app.js
View File

@@ -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;
}
}
}

11
text_horror/style.css
View File

@@ -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%;