File size: 2,548 Bytes
7428b13 190d7a5 4c208f2 190d7a5 7428b13 190d7a5 4c208f2 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 4c208f2 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<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';
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';
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={playerPiclet.moves}
{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> |