QR code & clickable URL on TV lobby, BOOST card-only, remove METEOR_STRIKE/TELEPORT, fix vite base paths for production, Dockerfile with frontend builds, Makefile with podman

tv/src/objects/ShipSprite.ts

@@ -1,9 +1,12 @@
 import Phaser from 'phaser';
 import { Ship as ShipType } from '@spacerace/shared';
+import { FONTS } from '@spacerace/shared';
 
 export class ShipSprite extends Phaser.GameObjects.Container {
   private shipData: ShipType;
   private label: Phaser.GameObjects.Text;
+  private glow: Phaser.GameObjects.Arc;
+  private body: Phaser.GameObjects.Sprite;
 
   constructor(
     scene: Phaser.Scene,
@@ -18,25 +21,42 @@ export class ShipSprite extends Phaser.GameObjects.Container {
     const angles: Record<string, number> = { N: 0, E: 90, S: 180, W: 270 };
     const baseAngle = angles[ship.direction] || 0;
 
-    // Ship body
-    const body = scene.add.rectangle(0, 0, 40, 36, color);
-    body.setStrokeStyle(2, 0xffffff);
+    // Glow halo behind the ship (uses player's color)
+    this.glow = scene.add.circle(0, 0, 28, color, 0.35);
+    this.glow.setBlendMode(Phaser.BlendModes.ADD);
+    this.glow.setDepth(-1);
 
-    // Direction indicator (small triangle)
-    const indicator = scene.add.triangle(0, -22, 0, 8, 5, 0, 10, 8, 0xffffff);
+    // Ship body — uses the procedurally generated 'ship' texture
+    this.body = scene.add.sprite(0, 0, 'ship');
+    // Recolor the cyan body to the player's color via tint (preserves the white outline)
+    this.body.setTint(color);
 
-    this.add([body, indicator]);
+    this.add([this.glow, this.body]);
+
+    // Player name label in a pill below
+    const name = ship.playerName || ship.playerId.substring(0, 6);
+    const labelBg = scene.add.rectangle(0, 30, Math.max(48, name.length * 7 + 14), 18, 0x000000, 0.7);
+    labelBg.setStrokeStyle(1, color, 0.9);
+    this.label = scene.add.text(0, 30, name, {
+      fontFamily: FONTS.body,
+      fontSize: '12px',
+      color: '#ffffff',
+      fontStyle: 'bold',
+    }).setOrigin(0.5);
+
+    this.add([labelBg, this.label]);
     this.setAngle(baseAngle);
 
-    // Player name label
-    this.label = scene.add.text(0, 28, ship.playerName || ship.playerId.substring(0, 6), {
-      fontSize: '11px',
-      color: '#ffffff',
-      fontFamily: 'monospace',
-      backgroundColor: '#00000088',
-      padding: { x: 2, y: 1 },
-    }).setOrigin(0.5);
-    this.add(this.label);
+    // Gentle pulse on the halo
+    scene.tweens.add({
+      targets: this.glow,
+      scaleX: { from: 0.85, to: 1.15 },
+      scaleY: { from: 0.85, to: 1.15 },
+      alpha: { from: 0.25, to: 0.5 },
+      duration: 1400,
+      yoyo: true,
+      repeat: -1,
+    });
 
     scene.add.existing(this);
     this.setDepth(10);