pause menu; better keyboard handling

src/App.svelte

@@ -5,7 +5,8 @@
 	import { characters } from "./stores/characters.js";
 	import { dialog } from "./stores/dialog.js";
 	import Game from "./pages/game.svelte";
-	import { gameActive, page } from "./stores/gameActive";
+	import { gameActive, menuActive, page } from "./stores/gameActive";
+import Menu from "./pages/menu.svelte";
 
 	var preloads = new Map;
 	function preload(url) {
@@ -71,8 +72,11 @@
 {#if dialog[$page].map}
 	<Game bind:current={$page} />
 {/if}
+{#if $menuActive}
+	<Menu />
+{/if}
 
-<Overlay active={!$gameActive}>
+<Overlay active={!dialog[$page].map || !$gameActive}>
 	<Dialog bind:current={$page} />
 </Overlay>
 

src/game/gameScene.js

@@ -1,5 +1,5 @@
 import Phaser, { Animations } from "phaser";
-import { gameActive, page } from "../stores/gameActive";
+import { gameActive, menuActive, page } from "../stores/gameActive";
 import { steps } from "../stores/step";
 import { keys } from "./input";
 import { dialog } from "../stores/dialog.js";
@@ -10,6 +10,10 @@ var stepNum;
 steps.subscribe(t => {
     stepNum = t;
 });
+var paused;
+menuActive.subscribe(t => {
+    paused = t;
+});
 
 export class GameScene extends Phaser.Scene {
     constructor(map) {
@@ -311,6 +315,15 @@ export class GameScene extends Phaser.Scene {
     canMove = true;
 
     update() {
+        this.container.x = this.cameras.main.width / 2 - this.container.width / 2;
+        this.container.y = this.cameras.main.height / 2 - this.container.height / 2;
+        if(keys.wasKeyPressed("pause")) {
+            console.log("Paused");
+            menuActive.set(!paused);
+        }
+
+        if(paused) return;
+
         // debug mode
         if(keys.wasKeyPressed("debug")) {
             console.log("Toggled debug mode");
@@ -320,9 +333,6 @@ export class GameScene extends Phaser.Scene {
             if(!this.physics.config.debug) this.physics.world.debugGraphic.destroy();
         }
 
-        this.container.x = this.cameras.main.width / 2 - this.container.width / 2;
-        this.container.y = this.cameras.main.height / 2 - this.container.height / 2;
-
 
         if(this.isWindActive(this.player.x, this.player.y)) {
             var movement = this.getMovementFromDirection(this.winds[this.player.x][this.player.y].direction);

src/game/input.js

@@ -5,7 +5,8 @@ const keybinds = {
     "left": "ArrowLeft",
     "up": "ArrowUp",
     "down": "ArrowDown",
-    "debug": "f3"
+    "debug": "f3",
+    "pause": "Escape"
 };
 
 class KeyHandler {

src/pages/dialog.svelte

@@ -3,8 +3,9 @@
     import { Howl } from "howler";
 	import { chapters, dialog } from "../stores/dialog.js";
     import { characters } from "../stores/characters.js";
-    import { gameActive } from "../stores/gameActive";
+    import { gameActive, menuActive } from "../stores/gameActive";
     import { toRoman } from "../utils";
+import Keypress from "../stores/keypress.svelte";
 
     export var current;
     export var page;
@@ -90,7 +91,8 @@
     var chaptersDone = JSON.parse(localStorage.getItem("chapters") || "[]");
 
     function keydown(e) {
-        switch(e.key) {
+        if($menuActive || $gameActive) return;
+        switch(e.detail.key) {
             case "ArrowUp":
             case "ArrowLeft":
                 activeButton--;
@@ -150,7 +152,8 @@
     }
 </script>
 
-<svelte:window on:keydown={keydown} on:mousemove={reset} on:click={next} />
+<Keypress on:keypress={keydown} />
+<svelte:window on:mousemove={reset} on:click={next} />
 
 <div class="dialog" class:failure>
     <div class="background">

src/pages/menu.svelte

@@ -0,0 +1,89 @@
+<script>
+    import { dialog } from "../stores/dialog";
+    import { gameActive, menuActive, page } from "../stores/gameActive";
+import Keypress from "../stores/keypress.svelte";
+    import Button from "./button.svelte";
+
+    const buttons = [
+        {
+            text: "Resume",
+            click: () => {
+                $menuActive = false;
+            }
+        }, {
+            text: "Back to main menu",
+            click: () => {
+                const i = dialog.findIndex(d => d.name === "menu");
+                $page = i;
+                $menuActive = false;
+            }
+        }, {
+            text: "Skip puzzle",
+            click: () => {
+                $gameActive = false;
+                $menuActive = false;
+            }
+        }
+    ];
+
+    function select(i) {
+        buttons[i].click();
+    }
+
+    var activeButton = -1;
+    function keydown(e) {
+        switch(e.detail.key) {
+            case "ArrowUp":
+            case "ArrowLeft":
+                activeButton--;
+                if(activeButton < 0) activeButton = 0;
+                break;
+            case "ArrowRight":
+            case "ArrowDown":
+                activeButton++;
+                if(!activeButton) activeButton = 0;
+                if(buttons && activeButton > buttons.length - 1) {
+                    activeButton = buttons.length - 1;
+                }
+                break;
+            case "Enter":
+            case " ":
+                select(activeButton);
+                reset();
+                break;
+        }
+    }
+    function reset() {
+        activeButton = -1;
+    }
+</script>
+
+<Keypress on:keypress={keydown} />
+<svelte:window on:mousemove={reset} />
+
+<div class="menu">
+    <div class="options">
+        <h2>Paused</h2>
+        <p>Angels are waiting - don't spend too much time here</p>
+        {#each buttons as button, i}
+            <Button active={activeButton === i} on:click={() => select(i)}>
+                {button.text}
+            </Button>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .menu {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0,0,0,0.8);
+        color: white;
+    }
+    .options {
+        text-align: center;
+    }
+</style>

src/stores/gameActive.js

@@ -5,3 +5,4 @@ gameActive.subscribe(t => {
     localStorage.setItem("game-active", t ? 1 : 0);
 });
 export const page = writable(parseInt(localStorage.getItem("dialog-page")) || 0);
+export const menuActive = writable(false);

src/stores/keypress.svelte

@@ -0,0 +1,18 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+
+    const keys = new Set();
+    const dispatch = createEventDispatcher();
+    function keydown(e) {
+        if(!keys.has(e.key)) {
+            dispatch("keypress", e);
+            console.log("keypress");
+            keys.add(e.key);
+        }
+    }
+    function keyup(e) {
+        keys.delete(e.key);
+    }
+</script>
+
+<svelte:window on:keydown={keydown} on:keyup={keyup} />