Added: Typewriter + change map animation

prakharjain3 · Feb 7, 2022 · df27df4 · df27df4
1 parent cb1ec4b
commit df27df4
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
 
     <link rel="stylesheet" href="./styles/global.css" type="text/css">
     <link rel="stylesheet" href="./styles/TextMessage.css" type="text/css">
+    <link rel="stylesheet" href="./styles/SceneTransition.css">
 
 </head>
 <body>
@@ -26,6 +27,8 @@
     <script src="./js/OverworldEvent.js"></script>
     <script src="./js/TextMessage.js"></script>
     <script src="./js/KeyPressListener.js"></script>
+    <script src="./js/RevealingText.js"></script>
+    <script src="./js/SceneTransition.js"></script>
     <script src="./js/init.js"></script>
 </body>
 </html>
diff --git a/js/Overworld.js b/js/Overworld.js
@@ -20,21 +20,11 @@ class Overworld {
         this.startGameLoop();
         // game loop fires at 60 fps
 
-
-
-
-
-
-
+
         // this.map.startCutscene([
-
-        //     {who: "hero", type: "walk", direction: "down"},
-        //     {who: "hero", type: "walk", direction: "down"},
-        //     {who: "npcA", type: "walk", direction: "up"},
-        //     {who: "npcA", type: "walk", direction: "left"},
-        //     {who: "hero", type: "stand", direction: "right", time: 200},
-        //     {type: "textMessage", text: "Why hello there!"},
-        // ])
+        //     {type: "changeMap", map: "DemoRoom"},
+        //     {type: "textMessage", text: "Why hello there! Welcome to ACM-RPG..."},
+        // ]);
 
     }
 

diff --git a/js/OverworldEvent.js b/js/OverworldEvent.js
@@ -70,7 +70,13 @@ class OverworldEvent {
     }
 
     changeMap(resolve) {
-        this.map.overworld.startMap(window.OverworldMaps[this.event.map]); // the value this.event.map is referencing {type: "changeMap", map: "Kitchen"}  in OverworldMap
-        resolve();
+        const sceneTransition = new SceneTransition();
+
+        sceneTransition.init(document.querySelector('.game-container'), () => {
+            this.map.overworld.startMap(window.OverworldMaps[this.event.map]); // the value this.event.map is referencing {type: "changeMap", map: "Kitchen"}  in OverworldMap
+            resolve(); 
+
+            sceneTransition.fadeOut();
+        });
     }
 }
diff --git a/js/RevealingText.js b/js/RevealingText.js
@@ -0,0 +1,54 @@
+class RevealingText {
+    constructor(config) {
+        this.element = config.element;
+        this.text = config.text;
+        this.speed = config.speed || 60; // larger value = slower typing speed
+
+        this.timeout = null;
+        this.isDone = false;
+    }
+
+    // recursively reveal all characters in the list
+    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;
+        }
+    }
+
+    // Reveal all the spans if the user hits Enter
+    warpToDone() {
+        clearTimeout(this.timeout);
+        this.isDone = true;
+        this.element.querySelectorAll("span").forEach(s => { // NOTE! This might mess with the front end css
+            s.classList.add("revealed");
+        });
+    }
+
+    init() {
+        let characters = [];
+        // "abc" -> ["a", "b", "c"]
+        this.text.split("").forEach(character => {
+
+            // create each span, and add to element in DOM
+            let span = document.createElement("span");
+            span.textContent = character;
+            this.element.appendChild(span);
+
+            // Add span to internal state array
+            characters.push({
+                span,
+                delayAfter: character === " " ? 0 : this.speed // don't add a timeout for spaces (better presentation this way)
+            });
+
+        });
+
+        this.revealOneCharacter(characters);
+    }
+}
diff --git a/js/SceneTransition.js b/js/SceneTransition.js
@@ -0,0 +1,29 @@
+class SceneTransition {
+    constructor() {
+        this.element = null;
+
+    }
+
+    createElement() {
+        this.element = document.createElement("div");
+        this.element.classList.add("SceneTransition");
+    }
+
+    fadeOut() {
+        this.element.classList.add("fade-out");
+        this.element.addEventListener("animationend", () => {
+            this.element.remove();
+        }, {once: true});
+    }
+
+    init(container, callback) {
+        this.createElement();
+        container.appendChild(this.element);
+
+        // to know if the animation is done, (so that we can callback)
+        this.element.addEventListener("animationend", () => {
+            callback();
+        }, {once: true}); // shouldn't fire again, when we have the fade out
+
+    }
+}
diff --git a/js/TextMessage.js b/js/TextMessage.js
@@ -9,30 +9,46 @@ 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>
         `);
 
+        // init the typewriter effect
+        this.revealingText = new RevealingText({
+            element: this.element.querySelector(".TextMessage_p"),
+            text: this.text,
+
+        })
+
         this.element.querySelector("button").addEventListener("click", () => {
             // close the text message
             this.done();
         });
 
         this.actionListener = new KeyPressListener("Enter", () => {
             this.done();
-            this.actionListener.unbind();
+
         })
     }
 
+    // if the user hits enter
     done() {
-        this.element.remove();
-        this.onComplete();
+
+        if(this.revealingText.isDone) {
+            this.element.remove();
+            this.actionListener.unbind(); // NOTE, might have to put this outside the if block
+            this.onComplete();
+        } else {
+            this.revealingText.warpToDone();
+        }
+
     }
 
 
     init(container) {
         // Add text message to DOM
         this.createElement();
         container.appendChild(this.element);
+        this.revealingText.init();
     }
 }
diff --git a/styles/SceneTransition.css b/styles/SceneTransition.css
@@ -0,0 +1,30 @@
+/* 
+How the change map transition works:
+old map fades to white
+from a white bg, the new map fades into existence 
+*/
+
+.SceneTransition {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    opacity: 0;
+    animation: scene-transition-fade-in 0.3s forwards;
+}
+
+.SceneTransition.fade-out {
+    animation: scene-transition-fade-out 0.3s forwards;
+}
+
+@keyframes scene-transition-fade-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes scene-transition-fade-out {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
diff --git a/styles/TextMessage.css b/styles/TextMessage.css
@@ -15,7 +15,15 @@
 .TextMessage_p {
     margin: 0;
     font-size: 12px;
+}
+
+/* for typewriter effect */
+.TextMessage span{
+    opacity: 0;
+}
 
+.TextMessage span.revealed {
+    opacity: 1;
 }
 
 .TextMessage_button {
@@ -32,3 +40,5 @@
     right: 2px;
     bottom: 0;
 }
+
+