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> <title>TextHorror</title>
</head> </head>
<body onpageshow="load()" onmouseup="mouseUp()" onmousedown="mouseDown()"> <body onpageshow="load()">
<div id="bubble"></div> <div id="bubble">
<img id="triangle" src="text_horror/assets/triangle.png"> <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> <p class="thx-for-playing">Thanks for playing</p>
</body> </body>

16
text_horror/app.js
View File

@@ -15,31 +15,33 @@ function load() {
} }
function typeWriter() { function typeWriter() {
if (document.getElementById("bubble").innerHTML.length < dlgLines[dlgPointer].toString().length) { if (document.getElementById("dlg-text").innerHTML.length < dlgLines[dlgPointer].toString().length) {
document.getElementById("bubble").innerHTML += dlgLines[dlgPointer].toString().charAt(typeindex); document.getElementById("dlg-text").innerHTML += dlgLines[dlgPointer].toString().charAt(typeindex);
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 setTimeout(typeWriter, speed); //loops because of running "typeWriter" after waiting
} }
} }
document.addEventListener('mousedown', mouseDown, false)
document.addEventListener('mouseup', mouseUp, false)
function mouseDown() { function mouseDown() {
document.getElementById("triangle").hidden = true; document.getElementById("triangle").hidden = true;
} }
function mouseUp() { 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 if (dlgPointer < dlgLines.length - 1) { //check if dlgPointer is not at the array end
do do
dlgPointer++; dlgPointer++;
while (!(typeof dlgLines[dlgPointer] === 'string')) //again if it's not string while (!(typeof dlgLines[dlgPointer] === 'string')) //again if it's not string
typeindex = 0; typeindex = 0;
document.getElementById("bubble").innerHTML = ""; document.getElementById("dlg-text").innerHTML = "";
document.getElementById("triangle").hidden = true;
typeWriter(); typeWriter();
} else { } else {
document.getElementById("bubble").hidden = true; 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%); transform: translate(-50%, -50%);
} }
#bubble { #dlg-text {
text-align: left; text-align: left;
font-size: 30px; font-size: 40px;
white-space: break-spaces;
}
#bubble {
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
border-color: white; border-color: white;
background-color: black; background-color: black;
padding: 30px; padding: 20px;
padding-left: 50px;
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 50%; top: 50%;