File size: 2,730 Bytes
7428b13 190d7a5 4c208f2 74f8c2c 190d7a5 7428b13 190d7a5 4c208f2 7428b13 190d7a5 7428b13 190d7a5 7428b13 74f8c2c 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 7428b13 190d7a5 74f8c2c 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 108 109 110 111 |
<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> |