count steps

src/game/gameScene.js

@@ -1,4 +1,5 @@
 import Phaser, { Animations } from "phaser";
+import { steps } from "../stores/step";
 import { keys } from "./input";
 
 const textureWidth = 100;
@@ -18,12 +19,14 @@ export class GameScene extends Phaser.Scene {
             offset: { x: number, y: nunber },
             size: { x: number, y: number },
             px: number,
+            steps: number,
             map: (string | null | {
                 type: string,
                 direction?: number
             })[][]
         }} */
         this.map = map;
+        steps.set(map.steps);
     }
 
     preload() {
@@ -87,7 +90,6 @@ export class GameScene extends Phaser.Scene {
                     var type = item.type;
                     if(type === "angel") type = this.map.sprite;
                     if(this.textures.get(type).frameTotal > 1) {
-                        console.log("Generating animation for", item);
                         var sprite = this.add.sprite(x * this.map.px, y * this.map.px);
                         item.animated = true;
                         if(!this.anims.exists(type)) {
@@ -117,6 +119,12 @@ export class GameScene extends Phaser.Scene {
                         this.player.x = x;
                         this.player.y = y;
                     }
+                    if(item.type !== "wind") {
+                        item.sprite.setDepth(1);
+                    } else {
+                        item.sprite.setDepth(0);
+                    }
+                    this.children.queueDepthSort();
                 } else {
                     item.sprite = null;
                 }
@@ -159,7 +167,7 @@ export class GameScene extends Phaser.Scene {
         }
     }
 
-    movePlayer(moveX, moveY) {
+    movePlayer(moveX, moveY, fromWind = false) {
         if(!this.canMove) return;
         var toX = this.player.x + moveX;
         var toY = this.player.y + moveY;
@@ -171,13 +179,16 @@ export class GameScene extends Phaser.Scene {
                 this.move(toX, toY, toX + moveX, toY + moveY);
         }
         this.canMove = false;
+        if(!fromWind) {
+            steps.update(t => --t);
+        }
         this.move(this.player.x, this.player.y, toX, toY, () => {
             this.canMove = true;
             this.player.x = toX;
             this.player.y = toY;
             if(this.winds[toX][toY]) {
                 var movement = this.getMovementFromDirection(this.winds[toX][toY].direction);
-                this.movePlayer(movement.x, movement.y);
+                this.movePlayer(movement.x, movement.y, true);
             }
         });
     }

src/game/maps.js

@@ -13,6 +13,7 @@ function wind(direction) {
             offset: { x: number, y: nunber },
             size: { x: number, y: number },
             px: number,
+            steps: number,
             map: {
                 x: number,
                 y: number,
@@ -33,6 +34,7 @@ export const maps = {
             x: 5,
             y: 7
         },
+        steps: 11,
         px: 100, // block size
         map: [
             ["barrier", "barrier", "angel"  , "barrier", "barrier"],

src/pages/game.svelte

@@ -4,6 +4,7 @@
     import { characters } from "../stores/characters.js";
     import { onMount } from "svelte";
     import { setCanvas, setMap, resize, stop } from "../game";
+    import { steps } from "../stores/step";
 
     export var current;
 
@@ -29,7 +30,6 @@
         return Array(+digits.join("") + 1).join("M") + roman;
     }
 
-    var steps = 11;
     var canvas;
 
     onMount(() => {
@@ -46,6 +46,6 @@
 
 <svelte:window on:resize={resize} />
 
-<GameOverlay {steps} chapter={toRoman(characterIndex + 1)} />
+<GameOverlay steps={$steps} chapter={toRoman(characterIndex + 1)} />
 
 <canvas bind:this={canvas} />

src/stores/step.js

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const steps = writable(0);