better trainer intro
Browse files
src/lib/components/Battle/BattleField.svelte
CHANGED
@@ -32,7 +32,6 @@
|
|
32 |
// Animation states
|
33 |
let playerVisible = false;
|
34 |
let enemyVisible = false;
|
35 |
-
let trainerVisible = true;
|
36 |
|
37 |
// Trainer animation states
|
38 |
let playerTrainerSliding = false;
|
@@ -43,15 +42,14 @@
|
|
43 |
|
44 |
onMount(() => {
|
45 |
if (showIntro) {
|
46 |
-
// Intro animation sequence - show
|
47 |
setTimeout(() => {
|
48 |
-
trainerVisible = false;
|
49 |
if (!isWildBattle) {
|
50 |
enemyTrainerVisible = true;
|
51 |
} else {
|
52 |
enemyVisible = true;
|
53 |
}
|
54 |
-
},
|
55 |
|
56 |
setTimeout(() => {
|
57 |
if (!isWildBattle) {
|
@@ -59,12 +57,11 @@
|
|
59 |
} else {
|
60 |
playerTrainerVisible = true; // Show player trainer even in wild battles
|
61 |
}
|
62 |
-
},
|
63 |
} else {
|
64 |
// Skip intro
|
65 |
playerVisible = true;
|
66 |
enemyVisible = true;
|
67 |
-
trainerVisible = false;
|
68 |
}
|
69 |
});
|
70 |
|
@@ -102,12 +99,6 @@
|
|
102 |
<div class="white-flash" transition:fade={{ duration: 300 }}></div>
|
103 |
{/if}
|
104 |
|
105 |
-
<!-- Trainer intro image -->
|
106 |
-
{#if showIntro && trainerVisible}
|
107 |
-
<div class="trainer-intro" transition:fade={{ duration: 300 }}>
|
108 |
-
<img src="/assets/default_trainer.png" alt="Trainer" />
|
109 |
-
</div>
|
110 |
-
{/if}
|
111 |
|
112 |
<!-- Player Trainer -->
|
113 |
{#if playerTrainerVisible}
|
@@ -255,19 +246,6 @@
|
|
255 |
z-index: 50;
|
256 |
}
|
257 |
|
258 |
-
.trainer-intro {
|
259 |
-
position: absolute;
|
260 |
-
top: 50%;
|
261 |
-
left: 50%;
|
262 |
-
transform: translate(-50%, -50%);
|
263 |
-
z-index: 10;
|
264 |
-
}
|
265 |
-
|
266 |
-
.trainer-intro img {
|
267 |
-
width: 200px;
|
268 |
-
height: auto;
|
269 |
-
animation: trainerPulse 0.5s ease-in-out;
|
270 |
-
}
|
271 |
|
272 |
.player-trainer {
|
273 |
position: absolute;
|
@@ -304,17 +282,6 @@
|
|
304 |
transform: translateX(200px);
|
305 |
}
|
306 |
|
307 |
-
@keyframes trainerPulse {
|
308 |
-
0% {
|
309 |
-
transform: scale(1);
|
310 |
-
}
|
311 |
-
50% {
|
312 |
-
transform: scale(1.05);
|
313 |
-
}
|
314 |
-
100% {
|
315 |
-
transform: scale(1);
|
316 |
-
}
|
317 |
-
}
|
318 |
|
319 |
.battle-content {
|
320 |
display: flex;
|
|
|
32 |
// Animation states
|
33 |
let playerVisible = false;
|
34 |
let enemyVisible = false;
|
|
|
35 |
|
36 |
// Trainer animation states
|
37 |
let playerTrainerSliding = false;
|
|
|
42 |
|
43 |
onMount(() => {
|
44 |
if (showIntro) {
|
45 |
+
// Intro animation sequence - show battle participants directly
|
46 |
setTimeout(() => {
|
|
|
47 |
if (!isWildBattle) {
|
48 |
enemyTrainerVisible = true;
|
49 |
} else {
|
50 |
enemyVisible = true;
|
51 |
}
|
52 |
+
}, 100);
|
53 |
|
54 |
setTimeout(() => {
|
55 |
if (!isWildBattle) {
|
|
|
57 |
} else {
|
58 |
playerTrainerVisible = true; // Show player trainer even in wild battles
|
59 |
}
|
60 |
+
}, 200);
|
61 |
} else {
|
62 |
// Skip intro
|
63 |
playerVisible = true;
|
64 |
enemyVisible = true;
|
|
|
65 |
}
|
66 |
});
|
67 |
|
|
|
99 |
<div class="white-flash" transition:fade={{ duration: 300 }}></div>
|
100 |
{/if}
|
101 |
|
|
|
|
|
|
|
|
|
|
|
|
|
102 |
|
103 |
<!-- Player Trainer -->
|
104 |
{#if playerTrainerVisible}
|
|
|
246 |
z-index: 50;
|
247 |
}
|
248 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
249 |
|
250 |
.player-trainer {
|
251 |
position: absolute;
|
|
|
282 |
transform: translateX(200px);
|
283 |
}
|
284 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
285 |
|
286 |
.battle-content {
|
287 |
display: flex;
|