src/lib/components/Battle/ActionButtons.svelte

<script lang="ts">
  import ActionViewSelector, { type ActionView } from './ActionViewSelector.svelte';
  import type { PicletInstance, BattleMove } from '$lib/db/schema';
  import type { BattleState } from '$lib/battle-engine/types';
  import { getUnlockedMoves } from '$lib/services/unlockLevels';
  
  export let isWildBattle: boolean;
  export let playerPiclet: PicletInstance;
  export let enemyPiclet: PicletInstance | null = null;
  export let availablePiclets: PicletInstance[] = [];
  export let processingTurn: boolean = false;
  export let battleState: BattleState | undefined = undefined;
  export let onAction: (action: string) => void;
  export let onMoveSelect: (move: BattleMove) => void = () => {};
  export let onPicletSelect: (piclet: PicletInstance) => void = () => {};
  
  let currentView: ActionView = 'main';
  
  // Only show unlocked moves in battle
  $: unlockedMoves = getUnlockedMoves(playerPiclet.moves, playerPiclet.level);
  
  function handleViewChange(view: ActionView) {
    currentView = view;
  }
  
  function handleMoveSelected(move: BattleMove) {
    currentView = 'main';
    onMoveSelect(move);
  }
  
  function handlePicletSelected(piclet: PicletInstance) {
    currentView = 'main';
    onPicletSelect(piclet);
  }
  
  function handleCaptureAttempt() {
    currentView = 'main';
    onAction('catch');
  }
  
  // Add Run button outside of the action selector
  function handleRun() {
    onAction('run');
  }
</script>

<div class="battle-actions">
  <ActionViewSelector 
    {currentView}
    onViewChange={handleViewChange}
    moves={unlockedMoves}
    {availablePiclets}
    {enemyPiclet}
    {isWildBattle}
    {battleState}
    onMoveSelected={handleMoveSelected}
    onPicletSelected={handlePicletSelected}
    onCaptureAttempt={handleCaptureAttempt}
    currentPicletId={playerPiclet.id}
    {processingTurn}
  />
  
  <!-- Run button (always visible) -->
  <button 
    class="run-button" 
    on:click={handleRun}
    disabled={processingTurn}
  >
    <span class="run-icon">🏃</span>
    <span>Run</span>
  </button>
</div>

<style>
  .battle-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
  }
  
  .run-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: #ff3b30;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .run-button:active:not(:disabled) {
    transform: scale(0.95);
    background: #d70015;
  }
  
  .run-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .run-icon {
    font-size: 20px;
  }
</style>