fix switch out
Browse files
src/lib/components/Battle/PicletInfo.svelte
CHANGED
@@ -21,39 +21,48 @@
|
|
21 |
</script>
|
22 |
|
23 |
<div class="piclet-info-wrapper {isPlayer ? 'player-info-wrapper' : 'enemy-info-wrapper'}">
|
24 |
-
<div class="piclet-info"
|
25 |
-
<!-- Type Logo
|
26 |
-
<div class="type-logo-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
</div>
|
33 |
|
34 |
-
<!--
|
35 |
-
<div class="
|
36 |
-
|
37 |
-
<div class="
|
38 |
-
<div
|
39 |
-
|
40 |
-
style="width: {hpPercentage * 100}%; background-color: {hpColor}"
|
41 |
-
></div>
|
42 |
</div>
|
43 |
-
|
44 |
-
|
45 |
-
<!-- XP Section (Player only) -->
|
46 |
-
{#if isPlayer}
|
47 |
<div class="stat-row">
|
48 |
-
<div class="stat-label">
|
49 |
-
<div class="
|
50 |
<div
|
51 |
-
class="
|
52 |
-
style="width: {
|
53 |
></div>
|
54 |
</div>
|
55 |
</div>
|
56 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
57 |
</div>
|
58 |
|
59 |
<!-- Triangle Pointer -->
|
@@ -82,61 +91,68 @@
|
|
82 |
.piclet-info {
|
83 |
background: rgba(255, 255, 255, 0.9);
|
84 |
border-radius: 8px;
|
85 |
-
padding:
|
86 |
min-width: 160px;
|
87 |
-
|
88 |
-
|
|
|
89 |
}
|
90 |
|
91 |
-
/* Type Logo
|
92 |
-
.type-logo-
|
93 |
-
|
94 |
-
|
95 |
-
|
|
|
|
|
96 |
width: 35px;
|
97 |
height: 35px;
|
98 |
-
|
99 |
-
|
100 |
-
background
|
101 |
-
|
102 |
-
|
103 |
-
pointer-events: none;
|
104 |
-
z-index: 1;
|
105 |
}
|
106 |
|
107 |
-
/*
|
108 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
109 |
display: flex;
|
110 |
-
align-items:
|
111 |
justify-content: space-between;
|
112 |
-
margin-bottom:
|
113 |
-
|
114 |
-
z-index: 2;
|
115 |
}
|
116 |
|
117 |
.piclet-name {
|
118 |
font-weight: 600;
|
119 |
font-size: 14px;
|
120 |
color: #1a1a1a;
|
|
|
|
|
|
|
|
|
|
|
121 |
}
|
122 |
|
123 |
-
.level-
|
124 |
-
background: rgba(142, 142, 147, 0.3);
|
125 |
-
padding: 2px 6px;
|
126 |
-
border-radius: 12px;
|
127 |
font-size: 11px;
|
128 |
-
font-weight:
|
129 |
-
color: #
|
|
|
130 |
}
|
131 |
|
132 |
/* Stat Rows */
|
133 |
.stat-row {
|
134 |
display: flex;
|
135 |
align-items: center;
|
136 |
-
gap:
|
137 |
-
margin-bottom:
|
138 |
-
position: relative;
|
139 |
-
z-index: 2;
|
140 |
}
|
141 |
|
142 |
.stat-row:last-child {
|
@@ -144,23 +160,23 @@
|
|
144 |
}
|
145 |
|
146 |
.stat-label {
|
147 |
-
font-size:
|
148 |
font-weight: 600;
|
149 |
color: #666;
|
150 |
text-transform: uppercase;
|
151 |
-
letter-spacing: 0.
|
152 |
-
width:
|
153 |
flex-shrink: 0;
|
154 |
}
|
155 |
|
156 |
/* HP Bar */
|
157 |
.hp-bar {
|
158 |
-
|
159 |
-
height: 8px;
|
160 |
background: #e0e0e0;
|
161 |
-
border-radius:
|
162 |
overflow: hidden;
|
163 |
flex: 1;
|
|
|
164 |
}
|
165 |
|
166 |
.hp-fill {
|
@@ -170,12 +186,12 @@
|
|
170 |
|
171 |
/* XP Bar */
|
172 |
.xp-bar {
|
173 |
-
|
174 |
-
height: 6px;
|
175 |
background: #e0e0e0;
|
176 |
-
border-radius:
|
177 |
overflow: hidden;
|
178 |
flex: 1;
|
|
|
179 |
}
|
180 |
|
181 |
.xp-fill {
|
@@ -208,14 +224,24 @@
|
|
208 |
.piclet-info {
|
209 |
min-width: 140px;
|
210 |
padding: 8px;
|
|
|
|
|
|
|
|
|
|
|
|
|
211 |
}
|
212 |
|
213 |
.piclet-name {
|
214 |
font-size: 12px;
|
215 |
}
|
216 |
|
|
|
|
|
|
|
|
|
217 |
.hp-bar, .xp-bar {
|
218 |
-
width:
|
219 |
}
|
220 |
}
|
221 |
</style>
|
|
|
21 |
</script>
|
22 |
|
23 |
<div class="piclet-info-wrapper {isPlayer ? 'player-info-wrapper' : 'enemy-info-wrapper'}">
|
24 |
+
<div class="piclet-info">
|
25 |
+
<!-- Type Logo (Foreground) -->
|
26 |
+
<div class="type-logo-container">
|
27 |
+
<img
|
28 |
+
src={typeLogoPath}
|
29 |
+
alt={piclet.primaryType}
|
30 |
+
class="type-logo"
|
31 |
+
/>
|
32 |
</div>
|
33 |
|
34 |
+
<!-- Content Area -->
|
35 |
+
<div class="content-area">
|
36 |
+
<!-- Name and Level Row -->
|
37 |
+
<div class="header-row">
|
38 |
+
<div class="piclet-name">{piclet.nickname}</div>
|
39 |
+
<div class="level-text">Lv.{piclet.level}</div>
|
|
|
|
|
40 |
</div>
|
41 |
+
|
42 |
+
<!-- HP Section -->
|
|
|
|
|
43 |
<div class="stat-row">
|
44 |
+
<div class="stat-label">HP</div>
|
45 |
+
<div class="hp-bar">
|
46 |
<div
|
47 |
+
class="hp-fill"
|
48 |
+
style="width: {hpPercentage * 100}%; background-color: {hpColor}"
|
49 |
></div>
|
50 |
</div>
|
51 |
</div>
|
52 |
+
|
53 |
+
<!-- XP Section (Player only) -->
|
54 |
+
{#if isPlayer}
|
55 |
+
<div class="stat-row">
|
56 |
+
<div class="stat-label">XP</div>
|
57 |
+
<div class="xp-bar">
|
58 |
+
<div
|
59 |
+
class="xp-fill"
|
60 |
+
style="width: {xpTowardsNext.percentage}%"
|
61 |
+
></div>
|
62 |
+
</div>
|
63 |
+
</div>
|
64 |
+
{/if}
|
65 |
+
</div>
|
66 |
</div>
|
67 |
|
68 |
<!-- Triangle Pointer -->
|
|
|
91 |
.piclet-info {
|
92 |
background: rgba(255, 255, 255, 0.9);
|
93 |
border-radius: 8px;
|
94 |
+
padding: 10px;
|
95 |
min-width: 160px;
|
96 |
+
display: flex;
|
97 |
+
align-items: flex-start;
|
98 |
+
gap: 10px;
|
99 |
}
|
100 |
|
101 |
+
/* Type Logo Container */
|
102 |
+
.type-logo-container {
|
103 |
+
flex-shrink: 0;
|
104 |
+
margin-top: 2px;
|
105 |
+
}
|
106 |
+
|
107 |
+
.type-logo {
|
108 |
width: 35px;
|
109 |
height: 35px;
|
110 |
+
object-fit: contain;
|
111 |
+
border-radius: 6px;
|
112 |
+
background: rgba(255, 255, 255, 0.1);
|
113 |
+
backdrop-filter: blur(4px);
|
114 |
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
115 |
}
|
116 |
|
117 |
+
/* Content Area */
|
118 |
+
.content-area {
|
119 |
+
flex: 1;
|
120 |
+
min-width: 0; /* Allows flex item to shrink below content size */
|
121 |
+
}
|
122 |
+
|
123 |
+
/* Header Row */
|
124 |
+
.header-row {
|
125 |
display: flex;
|
126 |
+
align-items: baseline;
|
127 |
justify-content: space-between;
|
128 |
+
margin-bottom: 6px;
|
129 |
+
gap: 8px;
|
|
|
130 |
}
|
131 |
|
132 |
.piclet-name {
|
133 |
font-weight: 600;
|
134 |
font-size: 14px;
|
135 |
color: #1a1a1a;
|
136 |
+
flex: 1;
|
137 |
+
min-width: 0;
|
138 |
+
overflow: hidden;
|
139 |
+
text-overflow: ellipsis;
|
140 |
+
white-space: nowrap;
|
141 |
}
|
142 |
|
143 |
+
.level-text {
|
|
|
|
|
|
|
144 |
font-size: 11px;
|
145 |
+
font-weight: 600;
|
146 |
+
color: #666;
|
147 |
+
flex-shrink: 0;
|
148 |
}
|
149 |
|
150 |
/* Stat Rows */
|
151 |
.stat-row {
|
152 |
display: flex;
|
153 |
align-items: center;
|
154 |
+
gap: 6px;
|
155 |
+
margin-bottom: 3px;
|
|
|
|
|
156 |
}
|
157 |
|
158 |
.stat-row:last-child {
|
|
|
160 |
}
|
161 |
|
162 |
.stat-label {
|
163 |
+
font-size: 9px;
|
164 |
font-weight: 600;
|
165 |
color: #666;
|
166 |
text-transform: uppercase;
|
167 |
+
letter-spacing: 0.3px;
|
168 |
+
width: 16px;
|
169 |
flex-shrink: 0;
|
170 |
}
|
171 |
|
172 |
/* HP Bar */
|
173 |
.hp-bar {
|
174 |
+
height: 6px;
|
|
|
175 |
background: #e0e0e0;
|
176 |
+
border-radius: 3px;
|
177 |
overflow: hidden;
|
178 |
flex: 1;
|
179 |
+
min-width: 80px;
|
180 |
}
|
181 |
|
182 |
.hp-fill {
|
|
|
186 |
|
187 |
/* XP Bar */
|
188 |
.xp-bar {
|
189 |
+
height: 5px;
|
|
|
190 |
background: #e0e0e0;
|
191 |
+
border-radius: 2.5px;
|
192 |
overflow: hidden;
|
193 |
flex: 1;
|
194 |
+
min-width: 80px;
|
195 |
}
|
196 |
|
197 |
.xp-fill {
|
|
|
224 |
.piclet-info {
|
225 |
min-width: 140px;
|
226 |
padding: 8px;
|
227 |
+
gap: 8px;
|
228 |
+
}
|
229 |
+
|
230 |
+
.type-logo {
|
231 |
+
width: 28px;
|
232 |
+
height: 28px;
|
233 |
}
|
234 |
|
235 |
.piclet-name {
|
236 |
font-size: 12px;
|
237 |
}
|
238 |
|
239 |
+
.level-text {
|
240 |
+
font-size: 10px;
|
241 |
+
}
|
242 |
+
|
243 |
.hp-bar, .xp-bar {
|
244 |
+
min-width: 60px;
|
245 |
}
|
246 |
}
|
247 |
</style>
|
src/lib/components/Pages/Battle.svelte
CHANGED
@@ -387,6 +387,11 @@
|
|
387 |
return;
|
388 |
}
|
389 |
|
|
|
|
|
|
|
|
|
|
|
390 |
const switchAction: SwitchAction = {
|
391 |
type: 'switch',
|
392 |
piclet: 'player',
|
@@ -409,12 +414,26 @@
|
|
409 |
moveIndex: enemyMoveIndex
|
410 |
};
|
411 |
|
412 |
-
//
|
413 |
-
|
414 |
-
|
415 |
-
|
416 |
-
|
417 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
418 |
|
419 |
// Get only the new log entries from this turn
|
420 |
const logAfter = battleEngine.getLog();
|
|
|
387 |
return;
|
388 |
}
|
389 |
|
390 |
+
// Update display immediately before processing the turn
|
391 |
+
currentPlayerPiclet = piclet;
|
392 |
+
playerHpPercentage = piclet.currentHp / piclet.maxHp;
|
393 |
+
currentMessage = `Go, ${piclet.nickname}!`;
|
394 |
+
|
395 |
const switchAction: SwitchAction = {
|
396 |
type: 'switch',
|
397 |
piclet: 'player',
|
|
|
414 |
moveIndex: enemyMoveIndex
|
415 |
};
|
416 |
|
417 |
+
// Allow time for the visual switch to be seen before processing the turn
|
418 |
+
setTimeout(() => {
|
419 |
+
// Get log entries before action to track new messages
|
420 |
+
const logBefore = battleEngine.getLog();
|
421 |
+
|
422 |
+
// Execute the turn - switching vs enemy move
|
423 |
+
battleEngine.executeActions(switchAction, enemyAction);
|
424 |
+
battleState = battleEngine.getState();
|
425 |
+
|
426 |
+
processAfterSwitchTurn(logBefore);
|
427 |
+
}, 1000); // 1 second delay to show the switch visually
|
428 |
+
} catch (error) {
|
429 |
+
console.error('Battle engine error:', error);
|
430 |
+
currentMessage = 'Unable to switch Piclets!';
|
431 |
+
processingTurn = false;
|
432 |
+
}
|
433 |
+
}
|
434 |
+
|
435 |
+
function processAfterSwitchTurn(logBefore: string[]) {
|
436 |
+
try {
|
437 |
|
438 |
// Get only the new log entries from this turn
|
439 |
const logAfter = battleEngine.getLog();
|