Replace hand-drawn devil animation with sprite-based demon animation and sound effects

objects/LossAnimation.js

@@ -1,84 +1,44 @@
 export class LossAnimation {
   // sinBoxCenter: { x, y } screen position of the Sin fund box
   play(scene, originX, originY, sinBoxCenter, onComplete) {
-    // Draw devil: red triangle body + horns
-    const devilGfx = scene.add.graphics();
-
-    // Body — red triangle
-    devilGfx.fillStyle(0xcc1111, 1);
-    devilGfx.fillTriangle(-24, 20, 24, 20, 0, -20);
-
-    // Head — red circle
-    devilGfx.fillStyle(0xdd2222, 1);
-    devilGfx.fillCircle(0, -30, 16);
-
-    // Horns
-    devilGfx.fillStyle(0x880000, 1);
-    devilGfx.fillTriangle(-14, -42, -8, -42, -11, -56);
-    devilGfx.fillTriangle(8, -42, 14, -42, 11, -56);
-
-    // Eyes
-    devilGfx.fillStyle(0xffff00, 1);
-    devilGfx.fillCircle(-6, -32, 4);
-    devilGfx.fillCircle(6, -32, 4);
-    devilGfx.fillStyle(0x000000, 1);
-    devilGfx.fillCircle(-6, -32, 2);
-    devilGfx.fillCircle(6, -32, 2);
-
-    // Tail
-    devilGfx.lineStyle(3, 0x880000, 1);
-    devilGfx.beginPath();
-    devilGfx.moveTo(16, 10);
-    devilGfx.lineTo(30, 0);
-    devilGfx.lineTo(36, 14);
-    devilGfx.strokePath();
-    // Tail tip arrowhead
-    devilGfx.fillStyle(0x880000, 1);
-    devilGfx.fillTriangle(30, 10, 36, 14, 40, 6);
-
-    devilGfx.setPosition(originX, originY);
-
-    // Money bag label
-    const moneyText = scene.add.text(originX + 10, originY - 60, '💰', {
-      fontSize: '28px'
-    }).setOrigin(0.5, 0.5);
+    // Pick a random demon sprite (frames 0–5)
+    const frame = Phaser.Math.Between(0, 5);
+    const demon = scene.add.sprite(originX, originY, 'demon_sprites', frame)
+      .setOrigin(0.5, 0.5);
 
     // Screen tint to dark red briefly
     scene.cameras.main.flash(800, 150, 0, 0, true);
 
     // Play a random no-match voice line
-    const pick = Phaser.Math.Between(1, 6);
-    scene.sound.play(`sfx-nomatch-${pick}`);
+    scene.sound.play(`sfx-nomatch-${Phaser.Math.Between(1, 6)}`);
 
-    // Tween devil + money up to sin box
+    // Travel from slot machine to sin box
     scene.tweens.add({
-      targets: [devilGfx, moneyText],
-      x: `+=${sinBoxCenter.x - originX}`,
-      y: `+=${sinBoxCenter.y - originY}`,
+      targets: demon,
+      x: sinBoxCenter.x,
+      y: sinBoxCenter.y,
       duration: 2800,
       ease: 'Cubic.easeInOut',
       onComplete: () => {
-        // Fade out
         scene.tweens.add({
-          targets: [devilGfx, moneyText],
+          targets: demon,
           alpha: 0,
           duration: 600,
           onComplete: () => {
-            devilGfx.destroy();
-            moneyText.destroy();
+            demon.destroy();
             if (onComplete) onComplete();
           }
         });
       }
     });
 
-    // Wobble
+    // Rock counter-clockwise and clockwise while travelling
     scene.tweens.add({
-      targets: devilGfx,
+      targets: demon,
       angle: { from: -8, to: 8 },
       duration: 400,
-      repeat: 6,
-      yoyo: true
+      yoyo: true,
+      repeat: 6
     });
   }
 }

scenes/BootScene.js

@@ -4,7 +4,8 @@ export default class BootScene extends Phaser.Scene {
   }
 
   preload() {
-    this.load.spritesheet('symbols', 'assets/symbol_sprites.png', { frameWidth: 200, frameHeight: 100 });
+    this.load.spritesheet('symbols',       'assets/symbol_sprites.png', { frameWidth: 200, frameHeight: 100 });
+    this.load.spritesheet('demon_sprites', 'assets/demon_sprites.png',  { frameWidth: 100, frameHeight: 100 });
     this.load.image('bg-gates', 'assets/gates.png');
 
     // Stage loop videos (stages 1–6)