From 6e5e9947a441b5bee10816e63330bb8bdafe12d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20Baumg=C3=A4rtner?= Date: Tue, 6 Aug 2024 19:39:18 +0200 Subject: [PATCH] added scene transitions --- OverworldEvent.js | 9 +++++++-- SceneTransition.js | 26 ++++++++++++++++++++++++++ index.html | 2 ++ 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 SceneTransition.js diff --git a/OverworldEvent.js b/OverworldEvent.js index 9580e43..5193224 100644 --- a/OverworldEvent.js +++ b/OverworldEvent.js @@ -60,8 +60,13 @@ class OverworldEvent { } changeMap(resolve) { - this.map.overworld.startMap(window.OverworldMaps[this.event.map]); - resolve(); + const sceneTransition = new SceneTransition(); + sceneTransition.init(document.querySelector(".game-container"), () => { + this.map.overworld.startMap(window.OverworldMaps[this.event.map]); + resolve(); + + sceneTransition.fadeOut(); + }); } init() { diff --git a/SceneTransition.js b/SceneTransition.js new file mode 100644 index 0000000..c68292f --- /dev/null +++ b/SceneTransition.js @@ -0,0 +1,26 @@ +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); + + this.element.addEventListener("animationend", () => { + callback(); + }, { once: true }); + } +} \ No newline at end of file diff --git a/index.html b/index.html index d6ba1d1..b90cf74 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + witchday @@ -23,6 +24,7 @@ + \ No newline at end of file