File size: 2,404 Bytes
7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 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 |
<script lang="ts">
import ActionViewSelector, { type ActionView } from './ActionViewSelector.svelte';
import type { PicletInstance, BattleMove } from '$lib/db/schema';
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 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}
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> |