File size: 2,620 Bytes
7428b13 4c208f2 7428b13 01069ac 7428b13 190d7a5 c61508c 4c208f2 7428b13 0cf8fa8 7428b13 c61508c 7428b13 01069ac 7428b13 0cf8fa8 7428b13 190d7a5 4c208f2 7428b13 190d7a5 0cf8fa8 7428b13 05cd711 7428b13 b1c7f35 05cd711 b1c7f35 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 87 88 89 90 91 92 93 94 95 96 97 |
<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;
export let onBack: () => void;
export let waitingForContinue: boolean = false;
export let onContinueTap: () => 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 waitingForContinue}
<!-- Tap to continue overlay -->
<div class="tap-continue-overlay" on:click={onContinueTap}>
<div class="tap-indicator">
<span>Tap to continue</span>
</div>
</div>
{:else if battlePhase === 'main' && !processingTurn && !battleEnded}
<ActionButtons
{isWildBattle}
{playerPiclet}
{enemyPiclet}
{availablePiclets}
{processingTurn}
{battleState}
{onAction}
{onMoveSelect}
{onPicletSelect}
{onBack}
/>
{/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: left;
display: flex;
align-items: center;
justify-content: flex-start;
}
.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> |