new character, level 2, improved gameplay scaling

src/game/gameScene.js

@@ -46,6 +46,7 @@ export class GameScene extends Phaser.Scene {
     preload() {
         this.load.setBaseURL();
         this.load.image("level1", "/sprite/level1.webp");
+        this.load.image("level2", "/sprite/level2.webp");
         this.load.image("lyre", "/sprite/lyre.webp");
         this.load.image("cloud", "/sprite/clouds.webp");
         this.load.image("pillar", "/sprite/pillar.webp");
@@ -62,6 +63,16 @@ export class GameScene extends Phaser.Scene {
             }
         });
         this.createMap();
+        window.addEventListener("resize", () => {
+            this.calculateScale();
+        });
+    }
+
+    calculateScale() {
+        const xScale = (document.body.clientWidth - document.body.clientHeight / 2) / this.originalWidth;
+        const yScale =  this.originalHeight / document.body.clientHeight;
+        const offset = 300 / document.body.clientHeight;
+        this.container.scale = Math.min(xScale, yScale) - offset;
     }
 
     createMap() {
@@ -69,11 +80,10 @@ export class GameScene extends Phaser.Scene {
 
         steps.set(this.map.steps);
         this.container = this.add.container();
-        this.container.width = this.map.size.x * this.map.px + this.map.offset.x * 2;
+        this.originalWidth = this.map.size.x * this.map.px;
-        this.container.height = this.map.size.y * this.map.px + this.map.offset.y * 2;
+        this.originalHeight = this.map.size.y * this.map.px;
-        this.grid = this.add.container(this.map.offset.x, this.map.offset.y);
+        this.grid = this.add.container(this.map.offset.x - this.originalWidth / 2, this.map.offset.y - this.originalHeight / 2);
-        this.container.width = this.map.size.x * this.map.px;
+        this.calculateScale();
-        this.container.height = this.map.size.y * this.map.px;
 
         this.background = this.add.image(this.container.width / 2, this.container.height / 2, this.map.background);
         this.container.add(this.background);

src/game/maps.js

@@ -56,5 +56,30 @@ export const maps = {
             [null     , "lyre"   , null     , null     , pillar   ],
             [null     , "lyre"   , "spawn"  , null     , pillar   ]
         ]
+    },
+    michael: {
+        background: "level2",
+        sprite: "uriel",
+        next: "michael_heretic",
+        size: {
+            x: 11,
+            y: 8
+        },
+        offset: {
+            x: 40,
+            y: 90
+        },
+        px: 100,
+        steps: 177013,
+        map: [
+            ["barrier"  , "barrier" , "barrier" , "cloud"   , "cloud"   , "cloud"   , "cloud"   , "cloud"   , "cloud"   , "cloud"   , "cloud"   ],
+            ["barrier"  , "barrier" , "barrier" , "cloud"   , "barrier" , "barrier" , "barrier" , "barrier" , "barrier" , "pillar"  , "cloud"   ],
+            ["cloud"    , "cloud"   , "cloud"   , "cloud"   , "barrier" , "barrier" , "barrier" , "barrier" , "barrier" , "pillar"  , "cloud"   ],
+            ["cloud"    , "barrier" , "barrier" , "barrier" , "barrier" , "barrier" , "barrier" , "barrier" , null      , "angel"   , "cloud"   ],
+            ["cloud"    , null      , "lyre"    , null      , null      , null      , null      , "lyre"    , null      , null      , "barrier" ],
+            [null       , null      , null      , "lyre"    , "lyre"    , null      , "lyre"    , null      , "lyre"    , "lyre"    , null      ],
+            ["spawn"    , null      , "lyre"    , null      , null      , "lyre"    , null      , "lyre"    , null      , null      , "barrier" ],
+            ["barrier"  , "barrier" , null      , "lyre"    , null      , null      , "lyre"    , "barrier" , "barrier" , "barrier" , "barrier" ]
+        ]
     }
 };

src/stores/characters.js

@@ -33,4 +33,12 @@ export const characters = [{
         happy: "/sprite/gabriel_win.webp",
         sad: "/sprite/gabriel_fail.webp"
     }
+}, {
+    name: "Azrael",
+    art: "/sprite/azrael_idle.webp",
+    title: "the great executioner",
+    poses: {
+        happy: "/sprite/azrael_happy.webp",
+        angry: "/sprite/azrael_angry.webp"
+    }
 }];

src/stores/dialog.js

@@ -39,6 +39,7 @@ export const dialog = [{
     background: "/sprite/backg.webp",
     character: "Michael",
     text: "How did you... You know what I don't even care. Heretic like you needs to be punished.",
+    map: "michael",
     buttons: [{
         text: "Jokes on you I'm into that shit.",
         next: "michael_success"
@@ -107,7 +108,7 @@ export const dialog = [{
     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.",
-    next: "uriel_entrance",
+    next: "azrael_start",
     pose: "happy",
     flags: ["success"]
 }, {
@@ -127,6 +128,34 @@ export const dialog = [{
     name: "helltaker2",
     background: "/sprite/gabriel_background.webp",
     text: "What are you doing here?",
-    next: "uriel_entrance",
+    next: "gabriel_start",
     flags: ["failure"]
+}, {
+    name: "azrael_start",
+    background: "/sprite/backg.webp",
+    character: "Azrael",
+    text: "Oh my my, what do we have here a lost soul wandering around heaven with an intent lust for angel.",
+    buttons: [{
+        text: "You're god damn right.",
+        next: "azrael_fail"
+    }, {
+        text: "Just go with me",
+        next: "azrael_win"
+    }]
+}, {
+    name: "azrael_fail",
+    next: "azrael_start",
+    character: "Azrael",
+    background: "/sprite/backg.webp",
+    flags: ["failure"],
+    text: "And with that another horny soul bite the dust.",
+    pose: "angry"
+}, {
+    name: "azrael_win",
+    next: "uriel_entrance",
+    background: "/sprite/backg.webp",
+    character: "Azrael",
+    pose: "happy",
+    flags: ["success"],
+    text: "I wonder what should I say here."
 }];