btr det

src/lib/components/Piclets/PicletDetail.svelte

@@ -131,7 +131,7 @@
         </div>
       </div>
       
-      <!-- Level and XP Progress -->
+      <!-- Level and Status Progress -->
       <div class="level-xp-section">
         <div class="level-info">
           <span class="level-label">Level {updatedInstance.level}</span>
@@ -142,15 +142,36 @@
           {/if}
         </div>
         
+        <!-- HP Section -->
+        <div class="stat-row">
+          <div class="stat-label">HP</div>
+          <div class="hp-bar">
+            <div 
+              class="hp-fill" 
+              style="width: {(updatedInstance.currentHp / updatedInstance.maxHp) * 100}%; background-color: {getHpColor(updatedInstance.currentHp, updatedInstance.maxHp)}"
+            ></div>
+          </div>
+          <div class="stat-value">{updatedInstance.currentHp}/{updatedInstance.maxHp}</div>
+        </div>
+        
+        <!-- XP Section -->
         {#if updatedInstance.level < 100}
-          <div class="xp-progress-bar">
-            <div class="xp-progress-fill" style="width: {xpTowardsNext.percentage}%"></div>
+          <div class="stat-row">
+            <div class="stat-label">XP</div>
+            <div class="xp-bar">
+              <div 
+                class="xp-fill" 
+                style="width: {xpTowardsNext.percentage}%"
+              ></div>
+            </div>
+            <div class="stat-value">{xpTowardsNext.current}/{xpTowardsNext.needed}</div>
+          </div>
+        {:else}
+          <div class="stat-row">
+            <div class="stat-label">XP</div>
+            <div class="max-level-indicator">MAX LEVEL</div>
           </div>
         {/if}
-        
-        <div class="hp-info">
-          <span class="hp-label">HP: {updatedInstance.currentHp}/{updatedInstance.maxHp}</span>
-        </div>
       </div>
       
       <!-- Tab Bar -->
@@ -526,7 +547,7 @@
     gap: 4px;
   }
   
-  /* Level and XP Section */
+  /* Level and Status Section */
   .level-xp-section {
     background: white;
     margin: 0 16px 16px;
@@ -539,7 +560,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 12px;
+    margin-bottom: 16px;
   }
   
   .level-label {
@@ -554,35 +575,78 @@
     color: #8e8e93;
   }
   
-  .xp-progress-bar {
-    width: 100%;
+  /* Stat Rows (HP and XP bars) */
+  .stat-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+  
+  .stat-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .stat-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    width: 24px;
+    flex-shrink: 0;
+  }
+  
+  /* HP Bar */
+  .hp-bar {
     height: 8px;
-    background: #e5e5ea;
+    background: #e0e0e0;
     border-radius: 4px;
     overflow: hidden;
-    margin-bottom: 12px;
+    flex: 1;
+    min-width: 80px;
   }
   
-  .xp-progress-fill {
+  .hp-fill {
     height: 100%;
-    background: linear-gradient(90deg, #2196f3 0%, #21cbf3 100%);
+    transition: width 0.5s ease, background-color 0.3s ease;
+  }
+  
+  /* XP Bar */
+  .xp-bar {
+    height: 8px;
+    background: #e0e0e0;
     border-radius: 4px;
-    transition: width 0.8s ease;
+    overflow: hidden;
+    flex: 1;
+    min-width: 80px;
   }
   
-  .hp-info {
-    display: flex;
-    justify-content: center;
+  .xp-fill {
+    height: 100%;
+    background: #2196f3;
+    transition: width 1.2s ease-out;
   }
   
-  .hp-label {
-    font-size: 14px;
+  .stat-value {
+    font-size: 12px;
     font-weight: 600;
-    color: #495057;
-    background: rgba(76, 175, 80, 0.1);
-    border: 1px solid #4caf50;
-    border-radius: 16px;
-    padding: 4px 12px;
+    color: #666;
+    min-width: 60px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+  
+  .max-level-indicator {
+    font-size: 12px;
+    font-weight: 600;
+    color: #ff6f00;
+    background: rgba(255, 111, 0, 0.1);
+    border: 1px solid #ff6f00;
+    border-radius: 4px;
+    padding: 2px 8px;
+    flex: 1;
+    text-align: center;
   }
 
   @media (min-width: 768px) {