src/lib/components/Battle/FieldEffectIndicator.svelte

<script lang="ts">
  export let fieldEffects: Array<{ effect: string; turnsRemaining?: number; side?: string }> = [];
  
  function getFieldEffectColor(effect: string): string {
    if (effect.includes('weather')) return '#4dabf7';
    if (effect.includes('terrain')) return '#51cf66';
    if (effect.includes('hazard')) return '#ff6b6b';
    return '#868e96';
  }
  
  function getFieldEffectIcon(effect: string): string {
    if (effect.includes('storm')) return '⛈️';
    if (effect.includes('rain')) return '🌧️';
    if (effect.includes('sun')) return '☀️';
    if (effect.includes('snow')) return '🌨️';
    if (effect.includes('spikes')) return '⚡';
    if (effect.includes('reflect')) return '🛡️';
    return '🌀';
  }
</script>

{#if fieldEffects.length > 0}
  <div class="field-effects">
    <div class="field-effects-header">Field Effects</div>
    {#each fieldEffects as effect}
      <div 
        class="field-effect" 
        style="background-color: {getFieldEffectColor(effect.effect)}"
        title="{effect.effect}{effect.turnsRemaining ? ` (${effect.turnsRemaining} turns)` : ''}"
      >
        <span class="effect-icon">{getFieldEffectIcon(effect.effect)}</span>
        <span class="effect-name">{effect.effect}</span>
        {#if effect.turnsRemaining}
          <span class="turns-remaining">{effect.turnsRemaining}</span>
        {/if}
        {#if effect.side}
          <span class="effect-side">({effect.side})</span>
        {/if}
      </div>
    {/each}
  </div>
{/if}

<style>
  .field-effects {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10;
  }
  
  .field-effects-header {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
  }
  
  .field-effect {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shimmer 2s infinite;
  }
  
  .effect-icon {
    font-size: 0.8rem;
  }
  
  .effect-name {
    font-size: 0.6rem;
    text-transform: capitalize;
  }
  
  .turns-remaining {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 1px 4px;
    font-size: 0.6rem;
  }
  
  .effect-side {
    font-size: 0.6rem;
    opacity: 0.8;
  }
  
  @keyframes shimmer {
    0%, 100% { background-position: -100% 0; }
    50% { background-position: 100% 0; }
  }
</style>