Add character video panel with animated transitions and video assets

This commit introduces a character video panel on the left side of the game scene with the following features:
- Added loading of multiple video assets (god-idle, god-sin-enters, sin-idle) in BootScene
- Implemented a video panel with gradient background and border at the left side of the screen
- Added character state management with automatic transitions based on game funds
- Created _checkCharacterState() method that triggers video transitions when sin total exceeds lord funds by 200
- Implemented smooth video transitions from god-idle to sin-entering to sin-idle states
- Maintained existing game functionality while adding dynamic character animations

scenes/BootScene.js

@@ -6,6 +6,9 @@ export default class BootScene extends Phaser.Scene {
   preload() {
     this.load.spritesheet('symbols', 'assets/symbol_sprites.png', { frameWidth: 200, frameHeight: 100 });
     this.load.image('bg-gates', 'assets/gates.png');
+    this.load.video('god-idle-01', 'assets/video/god-idle-01.mp4', true);
+    this.load.video('god-sin-enters-01', 'assets/video/god-sin-enters-01.mp4', true);
+    this.load.video('sin-idle-02', 'assets/video/sin-idle-02.mp4', true);
   }
 
   create() {

scenes/GameScene.js

@@ -13,6 +13,26 @@ export default class GameScene extends Phaser.Scene {
     // Background image — stretched to fill the canvas
     this.add.image(800, 450, 'bg-gates').setDisplaySize(1600, 900);
 
+    // ── Left section: Character video panel ──────────────────────────────────
+    // Centered at x=160 (within the 360px left of the slot machine), y=490
+    // (below the title gradient which ends at y=230). Size: 300x480.
+    this._vidX = 160;
+    this._vidY = 490;
+    const vidX = this._vidX;
+    const vidY = this._vidY;
+    const vidW = 300;
+    const vidH = 480;
+    this._characterState = 'god-idle';
+
+    const vidFrame = this.add.graphics();
+    vidFrame.fillStyle(0x0c0620, 0.65);
+    vidFrame.fillRoundedRect(vidX - vidW / 2 - 8, vidY - vidH / 2 - 8, vidW + 16, vidH + 16, 14);
+    vidFrame.lineStyle(1, 0xffd700, 0.3);
+    vidFrame.strokeRoundedRect(vidX - vidW / 2 - 8, vidY - vidH / 2 - 8, vidW + 16, vidH + 16, 14);
+
+    this.characterVideo = this.add.video(vidX, vidY, 'god-idle-01');
+    this.characterVideo.play(true);
+
     // Gradient backdrop behind title — opaque on left, fades to transparent
     const titleBg = this.add.graphics();
     titleBg.fillGradientStyle(0x000000, 0x000000, 0x000000, 0x000000, 0.62, 0, 0.62, 0);
@@ -112,6 +132,7 @@ export default class GameScene extends Phaser.Scene {
           GameState.lordFunds += lordGain;
           this.game.events.emit('funds-updated');
           this.lordVial.animateUpdate(GameState.lordFunds, lordBox.x, 115, () => {
+            this._checkCharacterState();
             GameState.spinning = false;
             this.game.events.emit('spin-complete');
           });
@@ -132,6 +153,7 @@ export default class GameScene extends Phaser.Scene {
           GameState.sinTotal += GameState.spinCost;
           this.game.events.emit('funds-updated');
           this.sinVial.animateUpdate(GameState.sinTotal, sinBox.x, 115, () => {
+            this._checkCharacterState();
             GameState.spinning = false;
             this.game.events.emit('spin-complete');
           });
@@ -139,4 +161,22 @@ export default class GameScene extends Phaser.Scene {
       );
     }
   }
+
+  _checkCharacterState() {
+    if (this._characterState !== 'god-idle') return;
+    if (GameState.sinTotal < GameState.lordFunds + 200) return;
+
+    this._characterState = 'sin-entering';
+    this.characterVideo.stop();
+    this.characterVideo.destroy();
+
+    this.characterVideo = this.add.video(this._vidX, this._vidY, 'god-sin-enters-01');
+    this.characterVideo.play(false);
+    this.characterVideo.once('complete', () => {
+      this._characterState = 'sin-idle';
+      this.characterVideo.destroy();
+      this.characterVideo = this.add.video(this._vidX, this._vidY, 'sin-idle-02');
+      this.characterVideo.play(true);
+    });
+  }
 }