added typewriter effect

Overworld.js

@@ -76,7 +76,7 @@ class Overworld {
 			{ who: "hero", type: "walk", direction: "down" },
 			{ who: "npc1", type: "walk", direction: "right" },
 			{ who: "hero", type: "stand", direction: "left", time: 200 },
-			{ type: "textMessage", text: "Hi!" },
+			{ type: "textMessage", text: "Hi! Lorem ipsum" },
 		])
 	}
 }

RevealingText.js

@@ -0,0 +1,47 @@
+class RevealingText {
+	constructor(config) {
+		this.element = config.element;
+		this.text = config.text;
+		this.speed = config.speed || 60;
+
+		this.timeout = null;
+		this.isDone = false;
+	}
+
+	revealOneCharacter(list) {
+		const next = list.splice(0,1)[0];
+		next.span.classList.add("revealed");
+
+		if (list.length > 0) {
+			this.timeout = setTimeout(() => {
+				this.revealOneCharacter(list)
+			}, next.delayAfter)
+		} else {
+			this.isDone = true;
+		}
+	}
+
+	warpToDone() {
+		clearTimeout(this.timeout);
+		this.isDone = true;
+		this.element.querySelectorAll("span").forEach(s => {
+			s.classList.add("revealed");
+		})
+	}
+
+	init() {
+		let characters = [];
+		this.text.split("").forEach(character => {
+			let span = document.createElement("span");
+			span.textContent = character;
+			this.element.appendChild(span);
+
+			characters.push({
+				span,
+				delayAfter: character === " " ? 0 : this.speed 
+			})
+		});
+
+		this.revealOneCharacter(characters);
+	}
+}

TextMessage.js

@@ -10,27 +10,38 @@ class TextMessage {
 		this.element.classList.add("TextMessage");
 
 		this.element.innerHTML = (`
-			<p class="TextMessage_p">${this.text}</p>
+			<p class="TextMessage_p"></p>
 			<button class="TextMessage_button">Next</button>
 		`);
 
+		// typewriter effect
+		this.revealingText = new RevealingText({
+			element: this.element.querySelector(".TextMessage_p"),
+			text: this.text
+		})
+
 		this.element.querySelector("button").addEventListener("click", () => {
 			this.done();
 		});
 
 		this.actionListener = new KeyPressListener("Enter", () => {
-			this.actionListener.unbind();
 			this.done();
 		})
 	}
 
 	done() {
-		this.element.remove();
-		this.onComplete();
+		if (this.revealingText.isDone) {
+			this.element.remove();
+			this.actionListener.unbind();
+			this.onComplete();
+		} else {
+			this.revealingText.warpToDone();
+		}
 	}
 
 	init(container) {
 		this.createElement();
 		container.appendChild(this.element);
+		this.revealingText.init();
 	}
 }

index.html

@@ -22,6 +22,7 @@
 	<script src="/OverworldEvent.js"></script>
 	<script src="/TextMessage.js"></script>
 	<script src="/KeyPressListener.js"></script>
+	<script src="/RevealingText.js"></script>
 	<script src="/init.js"></script>
 </body>
 </html>

styles/TextMessage.css

@@ -10,6 +10,12 @@
 	border-top: 1px solid var(--menu-border-color);
 	color: var(--menu-font-color);
 }
+.TextMessage span {
+	opacity: 0;
+}
+.TextMessage span.revealed {
+	opacity: 1;
+}
 
 .TextMessage_p {
 	margin: 0;