From ff37f5b6f9e1499d3403a17c7a97c8f785c13cd1 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Wed, 9 Jun 2021 18:18:57 +0200
Subject: [PATCH] main menu

---
 src/App.svelte           |  8 +++--
 src/game/gameScene.js    |  1 +
 src/pages/dialog.svelte  | 62 +++++++++++++++++++++++++++++++----
 src/pages/game.svelte    | 15 +--------
 src/stores/characters.js |  3 ++
 src/stores/dialog.js     | 71 +++++++++++++++++++++++++++++++++++++++-
 src/utils.js             | 19 +++++++++++
 7 files changed, 155 insertions(+), 24 deletions(-)
 create mode 100644 src/utils.js

diff --git a/src/App.svelte b/src/App.svelte
index 6ca77fc..ccb021e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -14,10 +14,14 @@
 		preloads.get(url).src = url;
 	}
 	for(let character of characters) {
-		preload(character.art); // preload art
+		if(character.art) {
+			preload(character.art); // preload art
+		}
 	}
 	for(let d of dialog) {
-		preload(d.background); // preload art
+		if(d.background) {
+			preload(d.background); // preload art
+		}
 	}
 
 	var music = new Howl({
diff --git a/src/game/gameScene.js b/src/game/gameScene.js
index e834618..880370d 100644
--- a/src/game/gameScene.js
+++ b/src/game/gameScene.js
@@ -47,6 +47,7 @@ export class GameScene extends Phaser.Scene {
         this.load.setBaseURL();
         this.load.image("level1", "/sprite/level1.webp");
         this.load.image("level2", "/sprite/level2.webp");
+        this.load.image("level3", "/sprite/level3.webp");
         this.load.image("lyre", "/sprite/lyre.webp");
         this.load.image("cloud", "/sprite/clouds.webp");
         this.load.image("pillar", "/sprite/pillar.webp");
diff --git a/src/pages/dialog.svelte b/src/pages/dialog.svelte
index 0eec84e..cde089c 100644
--- a/src/pages/dialog.svelte
+++ b/src/pages/dialog.svelte
@@ -1,9 +1,10 @@
 <script>
     import Button from "./button.svelte";
     import { Howl } from "howler";
-	import { dialog } from "../stores/dialog.js";
+	import { chapters, dialog } from "../stores/dialog.js";
     import { characters } from "../stores/characters.js";
-import { gameActive } from "../stores/gameActive";
+    import { gameActive } from "../stores/gameActive";
+    import { toRoman } from "../utils";
 
     export var current;
     export var page;
@@ -28,6 +29,7 @@ import { gameActive } from "../stores/gameActive";
 
     var activeButton = -1;
     function select(i) {
+        console.log("Switching", i);
         if(!allowSwitch) return;
         var next;
         if(d.buttons) {
@@ -61,20 +63,33 @@ import { gameActive } from "../stores/gameActive";
         failure = false;
         current = next;
         d = dialog[current];
-        art = !character ? null : d.character_art || d.pose ? character.poses[d.pose] : character.art;
+        art = !character ? null : (d.character_art || d.pose && character.poses ? character.poses[d.pose] : character.art);
         background = d.background;
         if(d.map) {
-            $gameActive = true;
+            setTimeout(() => {
+                $gameActive = true;
+            }, 300);
+        }
+        console.log("selected", d);
+        if(!d.flags || !d.flags.includes("nosave")) localStorage.setItem("dialog-page", next);
+        if(d.chapter) {
+            if(!chaptersDone.includes(d.chapter)) {
+                chaptersDone.push(d.chapter);
+                localStorage.setItem("chapters", JSON.stringify(chaptersDone));
+            }
         }
-        localStorage.setItem("dialog-page", next);
     }
 
+    var chaptersDone = JSON.parse(localStorage.getItem("chapters") || "[]");
+
     function keydown(e) {
         switch(e.key) {
             case "ArrowUp":
+            case "ArrowLeft":
                 activeButton--;
                 if(activeButton < 0) activeButton = 0;
                 break;
+            case "ArrowRight":
             case "ArrowDown":
                 activeButton++;
                 if(d.buttons && activeButton > d.buttons.length - 1) activeButton = d.buttons.length - 1;
@@ -94,7 +109,7 @@ import { gameActive } from "../stores/gameActive";
     */
     function next(e) {
         var path = e.composedPath();
-        if(path.includes(buttons)) return;
+        if(buttons && path.includes(buttons)) return;
         reset();
         select();
     }
@@ -142,7 +157,15 @@ import { gameActive } from "../stores/gameActive";
                 {:else}
                     <h1>???</h1>
                 {/if}
-                <p class="animate" bind:this={textElement}>{d.text}</p>
+                {#if d.text}
+                    <p class="animate" bind:this={textElement}>
+                        {#if d.flags && d.flags.includes("chapters") && chaptersDone.length === 0}
+                            {d.alt}
+                        {:else}
+                           {d.text}
+                        {/if}
+                    </p>
+                {/if}
             </div>
             <div class="buttons" bind:this={buttons}>
                 {#if d.buttons}
@@ -150,6 +173,15 @@ import { gameActive } from "../stores/gameActive";
                         <Button active={i === activeButton} on:click={() => select(i)}>{button.text}</Button>
                     {/each}
                 {/if}
+                {#if d && d.flags && d.flags.includes("chapters") && chaptersDone.length}
+                    <div class="chapters">
+                        {#each Object.keys(chapters) as chapter}
+                            <div class="chapter" class:active={chaptersDone && chaptersDone.includes(chapter)}>
+                                {toRoman(chapters[chapter])}
+                            </div>
+                        {/each}
+                    </div>
+                {/if}
             </div>
             {#if success}
                 <h2>SUCCESS</h2>
@@ -159,6 +191,22 @@ import { gameActive } from "../stores/gameActive";
 </div>
 
 <style>
+    .chapters {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+    .chapter {
+        border: 2px solid rgb(155, 0, 0);
+        padding: 4px;
+        margin: 3px;
+        cursor: not-allowed;
+    }
+    .chapter.active {
+        cursor: pointer;
+        border-color: red;
+    }
     .dialog {
         background: #02021A;
         color: white;
diff --git a/src/pages/game.svelte b/src/pages/game.svelte
index fbf5c54..50ec1b7 100644
--- a/src/pages/game.svelte
+++ b/src/pages/game.svelte
@@ -5,6 +5,7 @@
     import { onMount } from "svelte";
     import { setCanvas, setMap, resize, stop } from "../game";
     import { steps } from "../stores/step";
+    import { toRoman } from "../utils";
 
     export var current;
 
@@ -16,20 +17,6 @@
     var character;
     $: character = characters[characterIndex];
 
-    function toRoman(num) {
-    if (isNaN(num))
-        return NaN;
-        var digits = String(+num).split(""),
-            key = ["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM",
-                "","X","XX","XXX","XL","L","LX","LXX","LXXX","XC",
-                "","I","II","III","IV","V","VI","VII","VIII","IX"],
-            roman = "",
-            i = 3;
-        while (i--)
-            roman = (key[+digits.pop() + (i * 10)] || "") + roman;
-        return Array(+digits.join("") + 1).join("M") + roman;
-    }
-
     var canvas;
 
     onMount(() => {
diff --git a/src/stores/characters.js b/src/stores/characters.js
index bd3edb7..bb410c8 100644
--- a/src/stores/characters.js
+++ b/src/stores/characters.js
@@ -41,4 +41,7 @@ export const characters = [{
         happy: "/sprite/azrael_happy.webp",
         angry: "/sprite/azrael_angry.webp"
     }
+}, {
+    name: "Hadraniel",
+    title: "the seraphim"
 }];
\ No newline at end of file
diff --git a/src/stores/dialog.js b/src/stores/dialog.js
index 6fe345a..b791d20 100644
--- a/src/stores/dialog.js
+++ b/src/stores/dialog.js
@@ -1,4 +1,68 @@
+export const chapters = {
+    uriel: 1,
+    michael: 2,
+    uziel: 3,
+    gabriel: 4,
+    azrael: 5
+};
+
+/**
+ * @type {{
+ *  name: string,
+ * background: string,
+ * character: string,
+ * text: string,
+ * next?: string,
+ * pose?: string,
+ * map?: string,
+ * chapter?: keyof typeof chapters,
+ * buttons: { text: string, next: string }[],
+ * flags?: string[]
+ * }[]}
+ */
 export const dialog = [{
+    name: "start",
+    background: "/sprite/menu.webp",
+    text: "Hello and welcome on your way to heaven. My name is Hadraniel, and I'm the one appointed to you at the moment.",
+    next: "start2",
+    buttons: [{
+        text: "I'd like to go to the heaven's gate.",
+        next: "start2"
+    }]
+}, {
+    name: "start2",
+    background: "/sprite/menu.webp",
+    character: "Hadraniel",
+    text: "Sure. Oh and before you go there, just a warning: don't even think about trying to seduce the angels. It doesn't work here the same as down there.",
+    next: "start3"
+}, {
+    name: "start3",
+    background: "/sprite/menu.webp",
+    character: "Hadraniel",
+    text: "Wait where are you going? That's not the way to the main gate-",
+    next: "uriel_entrance"
+}, {
+    name: "menu",
+    background: "/sprite/menu.webp",
+    character: "Hadraniel",
+    text: "",
+    buttons: [{
+        text: "Start",
+        next: "uriel_entrance"
+    }, {
+        text: "Chapter select",
+        next: "chapters"
+    }],
+    flags: ["menu", "nosave"]
+}, {
+    name: "chapters",
+    background: "/sprite/menu.webp",
+    character: "Hadraniel",
+    text: "Which chapter would you like to solve?",
+    alt: "You must first complete a chapter to be able to solve it.",
+    next: "menu",
+    flags: ["chapters", "nosave"]
+}, {
     name: "uriel_entrance",
     background: "/sprite/backg.webp",
     character: "Uriel",
@@ -28,6 +92,7 @@ export const dialog = [{
     pose: "bat"
 }, {
     name: "uriel_success",
+    chapter: "uriel",
     background: "/sprite/backg.webp",
     character: "Uriel",
     text: "Well since it already got boring around here, and how can I say no to pancakes.",
@@ -49,6 +114,7 @@ export const dialog = [{
     }]
 }, {
     name: "michael_success",
+    chapter: "michael",
     background: "/sprite/backg.webp",
     character: "Michael",
     pose: "happy",
@@ -85,6 +151,7 @@ export const dialog = [{
     pose: "dead"
 }, {
     name: "uziel_success",
+    chapter: "uziel",
     background: "/sprite/backg.webp",
     character: "Uziel",
     pose: "happy",
@@ -105,6 +172,7 @@ export const dialog = [{
     }]
 }, {
     name: "gabriel_success",
+    chapter: "gabriel",
     background: "/sprite/backg.webp",
     character: "Gabriel",
     text: "That... That would be lovely actually. Could you buy me some coffee? After my department got defund I can't even afford it.",
@@ -152,7 +220,8 @@ export const dialog = [{
     pose: "angry"
 }, {
     name: "azrael_win",
-    next: "uriel_entrance",
+    chapter: "azrael",
+    next: "menu",
     background: "/sprite/backg.webp",
     character: "Azrael",
     pose: "happy",
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..8b57cea
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,19 @@
+
+/**
+ * Converts given number to string roman numeral
+ * @param {number} num 
+ * @returns {string}
+ */
+export function toRoman(num) {
+    if (isNaN(num))
+        return NaN;
+    var digits = String(+num).split(""),
+        key = ["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM",
+            "","X","XX","XXX","XL","L","LX","LXX","LXXX","XC",
+            "","I","II","III","IV","V","VI","VII","VIII","IX"],
+        roman = "",
+        i = 3;
+    while (i--)
+        roman = (key[+digits.pop() + (i * 10)] || "") + roman;
+    return Array(+digits.join("") + 1).join("M") + roman;
+}
\ No newline at end of file