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

added multiple line support

Browse Source
This commit is contained in:
Yannik
2023-05-26 16:33:18 +02:00
parent 473ebbcc93
commit 2bb288b827
3 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -10,9 +10,10 @@
<title>TextHorror</title>
</head>
<body onpageshow="typeWriter()">
<body onpageshow="typeWriter()" onclick="mouseClick()">
<div id="bubble"></div>
<img class="triangle" src="text_horror/assets/triangle.png">
<img id="triangle" src="text_horror/assets/triangle.png">
<p class="thx-for-playing">Thanks for playing</p>
</body>
</html>

25
text_horror/app.js
View File

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

15
text_horror/style.css
View File

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