transition into dialog

src/App.svelte

@@ -5,9 +5,7 @@
 	import { characters } from "./stores/characters.js";
 	import { dialog } from "./stores/dialog.js";
 	import Game from "./pages/game.svelte";
-	import { gameActive } from "./stores/gameActive";
-
-	var current = localStorage.getItem("dialog-page") || 0;
+	import { gameActive, page } from "./stores/gameActive";
 
 	var preloads = new Map;
 	function preload(url) {
@@ -33,7 +31,7 @@
 		if(!music.playing()) music.play();
 	}
 
-	console.log(dialog[current]);
+	$: console.log(dialog[$page]);
 	console.log("Pancake recipe at https://github.com/danbulant/heaventaker");
 </script>
 
@@ -43,10 +41,10 @@
 	<title>Heaventaker</title>
 </svelte:head>
 
-{#if dialog[current].map}
-	<Game bind:current />
+{#if dialog[$page].map}
+	<Game bind:current={$page} />
 {/if}
 
-<Overlay active={$gameActive}>
-	<Dialog bind:current />
+<Overlay active={!$gameActive}>
+	<Dialog bind:current={$page} />
 </Overlay>

src/game/gameScene.js

@@ -1,6 +1,8 @@
 import Phaser, { Animations } from "phaser";
+import { gameActive, page } from "../stores/gameActive";
 import { steps } from "../stores/step";
 import { keys } from "./input";
+import { dialog } from "../stores/dialog.js";
 
 const textureWidth = 100;
 
@@ -16,6 +18,7 @@ export class GameScene extends Phaser.Scene {
         /** @type {{
             background: string,
             sprite: string,
+            next: string,
             offset: { x: number, y: nunber },
             size: { x: number, y: number },
             px: number,
@@ -119,6 +122,11 @@ export class GameScene extends Phaser.Scene {
                         this.player.x = x;
                         this.player.y = y;
                     }
+                    if(item.type === "angel") {
+                        this.angel = item;
+                        this.angel.x = x;
+                        this.angel.y = y;
+                    }
                     if(item.type !== "wind") {
                         item.sprite.setDepth(1);
                     } else {
@@ -189,10 +197,22 @@ export class GameScene extends Phaser.Scene {
             if(this.winds[toX][toY]) {
                 var movement = this.getMovementFromDirection(this.winds[toX][toY].direction);
                 this.movePlayer(movement.x, movement.y, true);
+            } else {
+                this.checkAngel();
             }
         });
     }
 
+    checkAngel() {
+        var xdiff = Math.abs(this.player.x - this.angel.x);
+        var ydiff = Math.abs(this.player.y - this.angel.y);
+        if((xdiff === 0 && ydiff === 1) || (xdiff === 1 && ydiff === 0)) {
+            var next = dialog.findIndex(t => t.name === this.map.next);
+            page.set(next);
+            gameActive.set(false);
+        }
+    }
+
     canMove = true;
 
     update() {

src/game/maps.js

@@ -26,6 +26,7 @@ export const maps = {
     uriel: {
         background: "level1",
         sprite: "uriel",
+        next: "uriel_entrance",
         offset: { // map offset for alignment
             x: 60,
             y: 100

src/stores/gameActive.js

@@ -1,3 +1,4 @@
 import { writable } from "svelte/store";
 
-export const gameActive = writable(false);
+export const gameActive = writable(true);
+export const page = writable(parseInt(localStorage.getItem("dialog-page")) || 0);