File size: 3,436 Bytes
7428b13 4c208f2 7428b13 01069ac 7428b13 190d7a5 c61508c 4c208f2 7428b13 0cf8fa8 7428b13 c61508c 7428b13 01069ac 7428b13 0cf8fa8 8db63ba 0cf8fa8 7428b13 190d7a5 4c208f2 7428b13 190d7a5 0cf8fa8 7428b13 05cd711 7428b13 b1c7f35 05cd711 b1c7f35 7428b13 05cd711 7428b13 566cdc0 94e4b64 566cdc0 94e4b64 566cdc0 94e4b64 566cdc0 94e4b64 566cdc0 94e4b64 566cdc0 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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<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" role="button" tabindex="0" onclick={onContinueTap} onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? onContinueTap() : null}>
<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;
position: relative;
}
.tap-continue-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 8px;
}
.tap-indicator {
background: rgba(0, 0, 0, 0.15);
color: #666;
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 400;
border: 1px solid rgba(0, 0, 0, 0.1);
animation: subtlePulse 3s infinite;
}
@keyframes subtlePulse {
0%, 100% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.02);
}
}
</style> |