File size: 2,236 Bytes
7428b13 4c208f2 7428b13 01069ac 7428b13 190d7a5 c61508c 4c208f2 7428b13 c61508c 7428b13 01069ac 7428b13 190d7a5 4c208f2 7428b13 190d7a5 7428b13 05cd711 7428b13 05cd711 7428b13 05cd711 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 |
<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> |