fb/witchday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added scene transitions

Browse Source
This commit is contained in:
Felix Baumgärtner 2024-08-06 19:39:18 +02:00
parent 686608ba9f
commit 6e5e9947a4
3 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
OverworldEvent.js
View File

@ -60,8 +60,13 @@ class OverworldEvent {
} }
changeMap(resolve) { changeMap(resolve) {
this.map.overworld.startMap(window.OverworldMaps[this.event.map]); const sceneTransition = new SceneTransition();
resolve(); sceneTransition.init(document.querySelector(".game-container"), () => {
this.map.overworld.startMap(window.OverworldMaps[this.event.map]);
resolve();
sceneTransition.fadeOut();
});
} }
init() { init() {

26
SceneTransition.js Normal file
View File

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

2
index.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/global.css"> <link rel="stylesheet" href="styles/global.css">
<link rel="stylesheet" href="styles/TextMessage.css"> <link rel="stylesheet" href="styles/TextMessage.css">
<link rel="stylesheet" href="styles/SceneTransition.css">
<title>witchday</title> <title>witchday</title>
</head> </head>
<body> <body>
@ -23,6 +24,7 @@
<script src="/TextMessage.js"></script> <script src="/TextMessage.js"></script>
<script src="/KeyPressListener.js"></script> <script src="/KeyPressListener.js"></script>
<script src="/RevealingText.js"></script> <script src="/RevealingText.js"></script>
<script src="/SceneTransition.js"></script>
<script src="/init.js"></script> <script src="/init.js"></script>
</body> </body>
</html> </html>