Fraser commited on
Commit
366ca7a
·
1 Parent(s): b1c7f35

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" style="--type-logo: url('{typeLogoPath}')">
25
- <!-- Type Logo Background -->
26
- <div class="type-logo-background"></div>
27
-
28
- <!-- Name Row -->
29
- <div class="name-row">
30
- <span class="piclet-name">{piclet.nickname}</span>
31
- <span class="level-badge">Lv.{piclet.level}</span>
32
  </div>
33
 
34
- <!-- HP Section -->
35
- <div class="stat-row">
36
- <div class="stat-label">HP</div>
37
- <div class="hp-bar">
38
- <div
39
- class="hp-fill"
40
- style="width: {hpPercentage * 100}%; background-color: {hpColor}"
41
- ></div>
42
  </div>
43
- </div>
44
-
45
- <!-- XP Section (Player only) -->
46
- {#if isPlayer}
47
  <div class="stat-row">
48
- <div class="stat-label">XP</div>
49
- <div class="xp-bar">
50
  <div
51
- class="xp-fill"
52
- style="width: {xpTowardsNext.percentage}%"
53
  ></div>
54
  </div>
55
  </div>
56
- {/if}
 
 
 
 
 
 
 
 
 
 
 
 
 
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: 12px;
86
  min-width: 160px;
87
- position: relative;
88
- overflow: hidden;
 
89
  }
90
 
91
- /* Type Logo Background */
92
- .type-logo-background {
93
- position: absolute;
94
- bottom: -4px;
95
- right: 0px;
 
 
96
  width: 35px;
97
  height: 35px;
98
- background-image: var(--type-logo);
99
- background-size: contain;
100
- background-repeat: no-repeat;
101
- background-position: center;
102
- opacity: 0.12;
103
- pointer-events: none;
104
- z-index: 1;
105
  }
106
 
107
- /* Name Row */
108
- .name-row {
 
 
 
 
 
 
109
  display: flex;
110
- align-items: center;
111
  justify-content: space-between;
112
- margin-bottom: 8px;
113
- position: relative;
114
- z-index: 2;
115
  }
116
 
117
  .piclet-name {
118
  font-weight: 600;
119
  font-size: 14px;
120
  color: #1a1a1a;
 
 
 
 
 
121
  }
122
 
123
- .level-badge {
124
- background: rgba(142, 142, 147, 0.3);
125
- padding: 2px 6px;
126
- border-radius: 12px;
127
  font-size: 11px;
128
- font-weight: 700;
129
- color: #333;
 
130
  }
131
 
132
  /* Stat Rows */
133
  .stat-row {
134
  display: flex;
135
  align-items: center;
136
- gap: 8px;
137
- margin-bottom: 4px;
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: 10px;
148
  font-weight: 600;
149
  color: #666;
150
  text-transform: uppercase;
151
- letter-spacing: 0.5px;
152
- width: 18px;
153
  flex-shrink: 0;
154
  }
155
 
156
  /* HP Bar */
157
  .hp-bar {
158
- width: 120px;
159
- height: 8px;
160
  background: #e0e0e0;
161
- border-radius: 4px;
162
  overflow: hidden;
163
  flex: 1;
 
164
  }
165
 
166
  .hp-fill {
@@ -170,12 +186,12 @@
170
 
171
  /* XP Bar */
172
  .xp-bar {
173
- width: 120px;
174
- height: 6px;
175
  background: #e0e0e0;
176
- border-radius: 3px;
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: 100px;
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
- // Get log entries before action to track new messages
413
- const logBefore = battleEngine.getLog();
414
-
415
- // Execute the turn - switching vs enemy move
416
- battleEngine.executeActions(switchAction, enemyAction);
417
- battleState = battleEngine.getState();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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();