From 5d878a16e662dc9addd69226b979c57cc74a1f35 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 12 Jun 2021 10:29:34 +0200
Subject: [PATCH] pause menu; better keyboard handling

---
 src/App.svelte             |  8 +++-
 src/game/gameScene.js      | 18 ++++++--
 src/game/input.js          |  3 +-
 src/pages/dialog.svelte    |  9 ++--
 src/pages/menu.svelte      | 89 ++++++++++++++++++++++++++++++++++++++
 src/stores/gameActive.js   |  3 +-
 src/stores/keypress.svelte | 18 ++++++++
 7 files changed, 137 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/menu.svelte
 create mode 100644 src/stores/keypress.svelte

diff --git a/src/App.svelte b/src/App.svelte
index ccb021e..a286106 100644
--- a/src/App.svelte
+++ b/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>
 
diff --git a/src/game/gameScene.js b/src/game/gameScene.js
index f167742..17be201 100644
--- a/src/game/gameScene.js
+++ b/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);
diff --git a/src/game/input.js b/src/game/input.js
index a786505..6d3f79f 100644
--- a/src/game/input.js
+++ b/src/game/input.js
@@ -5,7 +5,8 @@ const keybinds = {
     "left": "ArrowLeft",
     "up": "ArrowUp",
     "down": "ArrowDown",
-    "debug": "f3"
+    "debug": "f3",
+    "pause": "Escape"
 };
 
 class KeyHandler {
diff --git a/src/pages/dialog.svelte b/src/pages/dialog.svelte
index b59ea9d..08586c3 100644
--- a/src/pages/dialog.svelte
+++ b/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">
diff --git a/src/pages/menu.svelte b/src/pages/menu.svelte
new file mode 100644
index 0000000..11b8584
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/stores/gameActive.js b/src/stores/gameActive.js
index 7baff09..4fc229f 100644
--- a/src/stores/gameActive.js
+++ b/src/stores/gameActive.js
@@ -4,4 +4,5 @@ export const gameActive = writable(!!parseInt(localStorage.getItem("game-active"
 gameActive.subscribe(t => {
     localStorage.setItem("game-active", t ? 1 : 0);
 });
-export const page = writable(parseInt(localStorage.getItem("dialog-page")) || 0);
\ No newline at end of file
+export const page = writable(parseInt(localStorage.getItem("dialog-page")) || 0);
+export const menuActive = writable(false);
\ No newline at end of file
diff --git a/src/stores/keypress.svelte b/src/stores/keypress.svelte
new file mode 100644
index 0000000..25ed888
--- /dev/null
+++ b/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} />
\ No newline at end of file