Uriel dialog, better buttons

src/App.svelte

@@ -8,16 +8,17 @@
 	var page = "game";
 	var current = localStorage.getItem("dialog-page") || 0;
 
-	var preloads = [];
+	var preloads = new Map;
+	function preload(url) {
+		if(preloads.has(url)) return;
+		preloads.set(url, new Image);
+		preloads.get(url).src = url;
+	}
 	for(let character of characters) {
-		var img = new Image();
+		preload(character.art); // preload art
-		img.src = character.art; // preload art
-		preloads.push(img);
 	}
 	for(let d of dialog) {
-		var img = new Image();
+		preload(d.background); // preload art
-		img.src = d.background; // preload art
-		preloads.push(img);
 	}
 
 	var music = new Howl({

src/pages/button.svelte

@@ -9,22 +9,41 @@
 
 <style>
     .button {
-        width: 415px;
+        max-width: 700px;
         position: relative;
-        margin: auto;
         font-size: 25px;
-        background: url("/sprite/button.png");
+        background: url("/sprite/button2.png");
-        background-size: contain;
+        background-size: auto 100%;
-        background-repeat: no-repeat;
+        background-repeat: repeat-x;
         padding: 5px 70px;
         text-align: center;
         background-position-x: center;
         cursor: pointer;
         opacity: 0.8;
-        margin-top: 15px;
+        margin: 15px auto;
-        margin-bottom: 15px;
         transition: opacity .3s, margin .3s, transform .3s;
     }
+    .button:before {
+        content: "";
+        height: 43px;
+        width: 64px;
+        background: url("/sprite/button1.png");
+        background-size: contain;
+        left: -64px;
+        top: 0;
+        position: absolute;
+    }
+    .button:after {
+        content: "";
+        height: 43px;
+        width: 64px;
+        background: url("/sprite/button1.png");
+        background-size: contain;
+        right: -64px;
+        top: 0;
+        position: absolute;
+        transform: scaleX(-1);
+    }
     .button:first-child:hover, .button:first-child:focus, .button:first-child.active {
         margin-top: 15px;
     }
@@ -35,4 +54,7 @@
         margin-bottom: 5px;
         transform: scale(1.2);
     }
+    .button.button:last-child {
+        margin-bottom: 0;
+    }
 </style>

src/pages/dialog.svelte

@@ -86,8 +86,10 @@
         <img src={art} alt="" class="character" draggable={false}>
     </div>
     <div class="text">
-        <h1>{character.name}, {character.title}</h1>
+        <div class="data">
-        <p class="animate" bind:this={textElement}>{d.text}</p>
+            <h1>{character.name}, {character.title}</h1>
+            <p class="animate" bind:this={textElement}>{d.text}</p>
+        </div>
         <div class="buttons" bind:this={buttons}>
             {#if d.buttons}
                 {#each d.buttons as button, i}
@@ -198,13 +200,17 @@
         }
     }
     .text {
-        max-width: 700px;
+        max-width: 900px;
         margin: 0 auto;
     }
+    .data {
+        margin: 0 auto;
+        max-width: 700px;
+    }
     .background {
         position: relative;
-        height: 70%;
+        height: 70vh;
-        width: 100%;
+        width: 100vw;
         overflow: hidden;
     }
     .background img {

src/pages/overlay.svelte

@@ -24,6 +24,7 @@
         width: 100vw;
         height: 100vh;
         transition: top .2s;
+        overflow: auto;
     }
     .main.active {
         height: 100%;

src/stores/characters.js

@@ -6,4 +6,13 @@ export const characters = [{
         wings: "/sprite/michael_wings.png",
         happy: "/sprite/michael_happy.png"
     }
+}, {
+    name: "Uriel",
+    art: "/sprite/uriel_normal.png",
+    title: "the gate guardian",
+    poses: {
+        side_normal: "/sprite/uriel_side_normal.png",
+        side_happy: "/sprite/uriel_side_happy.png",
+        bat: "/sprite/uriel_bat.png"
+    }
 }];

src/stores/dialog.js

@@ -1,4 +1,37 @@
 export const dialog = [{
+    name: "uriel_entrance",
+    background: "/sprite/backg.png",
+    character: "Uriel",
+    pose: "side_normal",
+    text: "Ummm... I don't want to be rude so just leave or go to the main gate.",
+    buttons: [{
+        text: "Step aside, I got heaven to conquer and angels to take.",
+        next: "uriel_restart"
+    }, {
+        text: "Would you like to join my harem? We got puppies and pancakes.",
+        next: "uriel_success"
+    }]
+}, {
+    name: "uriel_restart",
+    background: "/sprite/backg.png",
+    character: "Uriel",
+    text: "Really dude? Well if you insist, let's start from the beggining",
+    next: "uriel_failure"
+}, {
+    name: "uriel_failure", 
+    background: "/sprite/backg.png",
+    character: "Uriel",
+    text: "You picked the wrong gate fool.",
+    next: "uriel_entrance",
+    pose: "bat"
+}, {
+    name: "uriel_success",
+    background: "/sprite/backg.png",
+    character: "Uriel",
+    text: "Well since it already got boring around here, and how can I say no to pancakes.",
+    flags: ["success"],
+    next: "michael_heretic"
+}, {
     name: "michael_heretic",
     background: "/sprite/backg.png",
     character: "Michael",
@@ -17,7 +50,7 @@ export const dialog = [{
     pose: "happy",
     text: "Really? Well, big man: if you survive this whole ordeal, prepare a room and we shall see how into this shit you really are",
     flags: ["success"],
-    next: "michael_heretic"
+    next: "uriel_entrance"
 }, {
     name: "michael_failure",
     background: "/sprite/backg.png",