src/lib/components/Battle/StatusEffectIndicator.svelte

<script lang="ts">
  import type { StatusEffect } from '$lib/battle-engine/types';
  
  export let statusEffects: { type: StatusEffect; turnsLeft?: number }[] = [];
  
  function getStatusColor(status: StatusEffect): string {
    switch (status) {
      case 'burn': return '#ff6b6b';
      case 'freeze': return '#74c0fc';
      case 'paralyze': return '#ffd43b';
      case 'poison': return '#9775fa';
      case 'sleep': return '#868e96';
      case 'confuse': return '#ff8cc8';
      default: return '#495057';
    }
  }
  
  function getStatusIcon(status: StatusEffect): string {
    switch (status) {
      case 'burn': return '🔥';
      case 'freeze': return '❄️';
      case 'paralyze': return '⚡';
      case 'poison': return '☠️';
      case 'sleep': return '💤';
      case 'confuse': return '😵';
      default: return '?';
    }
  }
</script>

{#if statusEffects.length > 0}
  <div class="status-effects">
    {#each statusEffects as effect}
      <div 
        class="status-effect" 
        style="background-color: {getStatusColor(effect.type)}"
        title="{effect.type}{effect.turnsLeft ? ` (${effect.turnsLeft} turns)` : ''}"
      >
        <span class="status-icon">{getStatusIcon(effect.type)}</span>
        <span class="status-name">{effect.type.toUpperCase()}</span>
        {#if effect.turnsLeft}
          <span class="turns-left">{effect.turnsLeft}</span>
        {/if}
      </div>
    {/each}
  </div>
{/if}

<style>
  .status-effects {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 4px 0;
  }
  
  .status-effect {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 12px;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    animation: pulse 1.5s infinite;
  }
  
  .status-icon {
    font-size: 0.8rem;
  }
  
  .status-name {
    font-size: 0.6rem;
  }
  
  .turns-left {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 1px 4px;
    font-size: 0.6rem;
    margin-left: 2px;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
</style>