kgames

commit 25797180e663f3f0a2236f8f35ee7e46df0f8f12
parent d758800ace6fe2c86af546e3c23f573bed724738
Author: Kyle Barlow <kb@kylebarlow.com>
Date:   Mon,  4 May 2026 13:41:08 -0700

fire-truck: endgame dolphins with Twemoji SVG, depth layering, page reload on Play Again

- Replace plain ellipses with Twemoji dolphin SVG (1f42c) from CDN
- Set dolphin depth to 5 so they appear in front of ocean/waves/truck
- Make dolphins ~9% screen height and nose-first jumping animation
- Change "Play Again" button to reload page for clean game reset
  (avoids stale state: fire counter not reset, truck not moving)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Diffstat:
M
games/fire-truck/game.js
 | 
29
+++++++++++++++++++++--------

1 file changed, 21 insertions(+), 8 deletions(-)
diff --git a/games/fire-truck/game.js b/games/fire-truck/game.js
@@ -1022,6 +1022,11 @@ class FireTruckEndScene extends Phaser.Scene {
     this._H = 0;
   }
 
+  preload() {
+    const CDN = 'https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/';
+    this.load.svg('dolphin-emoji', CDN + '1f42c.svg', { width: 128, height: 128 });
+  }
+
   create() {
     const W = this._W = this.scale.width;
     const H = this._H = this.scale.height;
@@ -1107,22 +1112,30 @@ class FireTruckEndScene extends Phaser.Scene {
     this._truckFrontX = truckX + tw * 0.5;
     this._truckFrontY = truckY;
 
-    // Dolphins (3) — ellipses, start below ocean line
+    // Dolphins (3) — Twemoji SVG, jump above ocean surface
     this._dolphins = [];
+    const dolphinSize = Math.round(H * 0.09);
     for (let i = 0; i < 3; i++) {
       const dx = W * (0.55 + i * 0.14);
-      const d = this.add.ellipse(dx, H * 0.88, W * 0.035, H * 0.025, 0x1a7a7a);
+      const waterY = H * 0.70;
+      const peakY  = H * 0.50;
+      const d = this.add.image(dx, waterY, 'dolphin-emoji')
+        .setOrigin(0.5)
+        .setDisplaySize(dolphinSize, dolphinSize)
+        .setDepth(5);
       d.setAlpha(0);
       this._dolphins.push(d);
       const launchDolphin = (dol) => {
-        dol.setAlpha(1).setAngle(-25);
+        dol.y = waterY;
+        dol.setAlpha(1).setAngle(-55);
         this.tweens.add({
-          targets: dol, y: H * 0.72, angle: 0,
-          duration: 550, ease: 'Sine.easeOut',
+          targets: dol, y: peakY, angle: -88,
+          duration: 600, ease: 'Sine.easeOut',
           onComplete: () => {
+            dol.setAngle(88);
             this.tweens.add({
-              targets: dol, y: H * 0.88, angle: 25,
-              duration: 550, ease: 'Sine.easeIn',
+              targets: dol, y: waterY, angle: 55,
+              duration: 600, ease: 'Sine.easeIn',
               onComplete: () => {
                 dol.setAlpha(0);
                 this.time.delayedCall(900 + i * 300, () => launchDolphin(dol));
@@ -1207,7 +1220,7 @@ class FireTruckEndScene extends Phaser.Scene {
 
     btnBg.on('pointerover', () => btnBg.setFillStyle(0xff6b6b));
     btnBg.on('pointerout', () => btnBg.setFillStyle(0xe63946));
-    btnBg.on('pointerdown', () => this.scene.start('FireTruckScene'));
+    btnBg.on('pointerdown', () => window.location.reload());
 
     // Celebration music — starts immediately since user has already been playing
     try {