feat(sts-viewer): improve card and effect visual indicators

- Update `CardContainer` to use descriptive emojis for different target
  types
- Use emoji icons for combat unit status effects instead of keys
- Update `CardSpawner` default target type to 'player'
- Fix target type check in `CombatTestScene` to use 'enemy' instead of
  'single'

packages/sts-like-viewer/src/gameobjects/CardContainer.ts

@@ -86,8 +86,18 @@ export class CardContainer extends Phaser.GameObjects.Container {
     this.add(this.descText);
 
     // Target indicator
-    const targetLabel =
+    const targetLabel = (() => {
-      cardData.targetType === "single" ? "🎯 Single" : "✨ Self";
+      switch (cardData.targetType) {
+        case "enemy":
+          return "⚔️ Enemy";
+        case "enemies":
+          return "⚔️ Enemies";
+        case "player":
+          return "🛡️ Player";
+        default:
+          return "❓ Unknown";
+      }
+    })();
     const targetText = this.scene.add
       .text(0, CARD_HEIGHT / 2 - 20, targetLabel, {
         fontSize: "10px",

packages/sts-like-viewer/src/gameobjects/CardSpawner.ts

@@ -95,7 +95,7 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
         type: "item",
         costType: "none",
         costCount: 0,
-        targetType: "none",
+        targetType: "player",
         effects: [],
       },
       itemId: "",

packages/sts-like-viewer/src/gameobjects/CombatUnitContainer.ts

@@ -153,6 +153,7 @@ export class CombatUnitContainer extends Phaser.GameObjects.Container {
     entries.forEach(([key, entry], index) => {
       const x = startX + index * (BUFF_ICON_SIZE + BUFF_ICON_GAP);
       const stacks = entry.stacks;
+      const emoji = entry.data.emoji;
 
       const isPositive = this.isPositiveEffect(key);
       const iconColor = isPositive ? 0x44aa44 : 0xaa4444;
@@ -162,7 +163,7 @@ export class CombatUnitContainer extends Phaser.GameObjects.Container {
         .setStrokeStyle(1, 0xffffff);
 
       const text = this.scene.add
-        .text(x, 0, `${key} ${stacks}`, {
+        .text(x, 0, `${emoji} ${stacks}`, {
           fontSize: "12px",
           color: "#ffffff",
           fontStyle: "bold",

packages/sts-like-viewer/src/scenes/CombatTestScene.ts

@@ -129,7 +129,7 @@ export class CombatTestScene extends GameHostScene<CombatState> {
 
     const targetType = card.cardData.targetType;
 
-    if (targetType === "single") {
+    if (targetType === "enemy") {
       this.selectedCardId = cardId;
       this.isTargeting = true;
       this.targetingText.setText("Select a target!");