src/lib/components/Battle/BattleControls.svelte

<script lang="ts">
  import type { PicletInstance } from '$lib/db/schema';
  import type { BattleState } from '$lib/battle-engine/types';
  import ActionButtons from './ActionButtons.svelte';
  import TypewriterText from './TypewriterText.svelte';
  
  export let currentMessage: string;
  export let battlePhase: 'intro' | 'main' | 'moveSelect' | 'picletSelect' | 'ended';
  export let processingTurn: boolean;
  export let battleEnded: boolean;
  export let isWildBattle: boolean;
  export let playerPiclet: PicletInstance;
  export let enemyPiclet: PicletInstance;
  export let rosterPiclets: PicletInstance[] = [];
  export let battleState: BattleState | undefined = undefined;
  export let onAction: (action: string) => void;
  export let onMoveSelect: (move: any) => void;
  export let onPicletSelect: (piclet: PicletInstance) => void;
  
  // Use the roster passed from parent instead of loading it here
  $: availablePiclets = rosterPiclets;
</script>

<div class="battle-controls">
  <!-- Message Bar -->
  <div class="message-bar {battleEnded ? 'special' : ''}">
    <p><TypewriterText text={currentMessage} speed={25} /></p>
  </div>
  
  <!-- Action Area -->
  <div class="action-area">
    {#if battlePhase === 'main' && !processingTurn && !battleEnded}
      <ActionButtons 
        {isWildBattle}
        {playerPiclet}
        {enemyPiclet}
        {availablePiclets}
        {processingTurn}
        {battleState}
        {onAction}
        {onMoveSelect}
        {onPicletSelect}
      />
    {/if}
  </div>
</div>

<style>
  .battle-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-top: 1px solid #e0e0e0;
  }
  
  .message-bar {
    min-height: 60px;
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .message-bar.special {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.3);
  }
  
  .message-bar p {
    margin: 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.4;
  }
  
  .action-area {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }
</style>