show act type

src/lib/components/Battle/ActionViewSelector.svelte

@@ -22,6 +22,11 @@
   // Enhanced move information from battle state
   $: enhancedMoves = battleState?.playerPiclet?.moves || [];
   
+  // Helper function to get type logo path
+  function getTypeLogo(type: string): string {
+    return `/classes/${type}.png`;
+  }
+  
   // Main action items
   const actions = [
     { title: 'Act', icon: '⚔️', view: 'moves' as ActionView },
@@ -75,19 +80,12 @@
                 on:click={() => !isDisabled && onMoveSelected(move)}
                 disabled={isDisabled || processingTurn}
               >
-                <span class="type-emoji" class:disabled={isDisabled}>
-                  {move.type === 'normal' ? '⚪' : 
-                   move.type === 'beast' ? '🦁' :
-                   move.type === 'bug' ? '🐛' :
-                   move.type === 'aquatic' ? '🌊' :
-                   move.type === 'flora' ? '🌿' :
-                   move.type === 'mineral' ? '💎' :
-                   move.type === 'space' ? '🌌' :
-                   move.type === 'machina' ? '⚙️' :
-                   move.type === 'structure' ? '🏗️' :
-                   move.type === 'culture' ? '🎭' :
-                   move.type === 'cuisine' ? '🍽️' : '❓'}
-                </span>
+                <img 
+                  src={getTypeLogo(move.type)} 
+                  alt={move.type}
+                  class="type-logo" 
+                  class:disabled={isDisabled}
+                />
                 <div class="move-info">
                   <div class="move-name" class:disabled={isDisabled}>
                     {move.name}
@@ -143,7 +141,11 @@
                   <div class="piclet-info">
                     <div class="piclet-header">
                       <span class="piclet-name">{piclet.nickname}</span>
-                      <span class="type-emoji">🔥</span>
+                      <img 
+                        src={getTypeLogo(piclet.primaryType)} 
+                        alt={piclet.primaryType}
+                        class="type-logo-small"
+                      />
                       <span class="level-badge">Lv.{piclet.level}</span>
                     </div>
                     <div class="hp-row">
@@ -338,17 +340,23 @@
   }
   
   /* Move items */
-  .type-emoji {
-    font-size: 20px;
+  .type-logo {
+    width: 24px;
+    height: 24px;
     margin-right: 12px;
-    width: 32px;
-    text-align: center;
+    object-fit: contain;
   }
   
-  .type-emoji.disabled {
+  .type-logo.disabled {
     opacity: 0.3;
   }
   
+  .type-logo-small {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+  }
+  
   .move-info {
     flex: 1;
   }

src/lib/components/Battle/PicletInfo.svelte

@@ -17,7 +17,7 @@
   $: typeColor = typeData.color;
   $: typeLogoPath = `/classes/${piclet.primaryType}.png`;
   
-  $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.2 ? '#ffc107' : '#f44336';
+  $: hpColor = hpPercentage > 0.5 ? '#34c759' : hpPercentage > 0.25 ? '#ffcc00' : '#ff3b30';
   $: displayHp = Math.ceil(piclet.currentHp);
   
   // Track HP changes for animations
@@ -42,28 +42,33 @@
       <span class="level-badge">Lv.{piclet.level}</span>
     </div>
     
-    <!-- HP Bar -->
-    <div class="hp-bar">
-      <div 
-        class="hp-fill" 
-        style="width: {hpPercentage * 100}%; background-color: {hpColor}"
-      ></div>
+    <!-- HP Section -->
+    <div class="stat-section">
+      <div class="stat-label">HP</div>
+      <div class="hp-bar">
+        <div 
+          class="hp-fill" 
+          style="width: {hpPercentage * 100}%; background-color: {hpColor}"
+        ></div>
+      </div>
+      {#if isPlayer}
+        <div class="hp-text">
+          <span class="hp-values" class:hp-flash={hpFlash}>{displayHp}/{piclet.maxHp}</span>
+        </div>
+      {/if}
     </div>
     
-    <!-- HP Text (Player only) -->
+    <!-- XP Section (Player only) -->
     {#if isPlayer}
-      <div class="hp-text">
-        <span class="hp-values" class:hp-flash={hpFlash}>{displayHp}/{piclet.maxHp} HP</span>
+      <div class="stat-section">
+        <div class="stat-label">XP</div>
+        <div class="xp-bar">
+          <div 
+            class="xp-fill" 
+            style="width: {xpTowardsNext.percentage}%"
+          ></div>
+        </div>
       </div>
-      
-      <!-- XP Bar (Player only) -->
-      <div class="xp-bar">
-        <div 
-          class="xp-fill" 
-          style="width: {xpTowardsNext.percentage}%"
-        ></div>
-      </div>
-      
     {/if}
   </div>
   
@@ -102,8 +107,8 @@
   /* Type Logo Background */
   .type-logo-background {
     position: absolute;
-    bottom: 1px;
-    left: 1px;
+    bottom: -4px;
+    right: 0px;
     width: 35px;
     height: 35px;
     background-image: var(--type-logo);
@@ -140,6 +145,26 @@
     color: #333;
   }
   
+  /* Stat Sections */
+  .stat-section {
+    margin-bottom: 6px;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .stat-section:last-child {
+    margin-bottom: 0;
+  }
+  
+  .stat-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: #666;
+    margin-bottom: 2px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
   /* HP Bar */
   .hp-bar {
     width: 120px;
@@ -147,9 +172,7 @@
     background: #e0e0e0;
     border-radius: 4px;
     overflow: hidden;
-    margin-bottom: 4px;
-    position: relative;
-    z-index: 2;
+    margin-bottom: 2px;
   }
   
   .hp-fill {
@@ -161,9 +184,6 @@
   .hp-text {
     font-size: 11px;
     color: #666;
-    margin-bottom: 4px;
-    position: relative;
-    z-index: 2;
   }
   
   .hp-values {
@@ -186,13 +206,10 @@
   /* XP Bar */
   .xp-bar {
     width: 120px;
-    height: 4px;
+    height: 6px;
     background: #e0e0e0;
-    border-radius: 2px;
+    border-radius: 3px;
     overflow: hidden;
-    margin-bottom: 2px;
-    position: relative;
-    z-index: 2;
   }
   
   .xp-fill {

src/lib/components/Piclets/MoveDisplay.svelte

@@ -15,23 +15,12 @@
   const battleMove = $derived(enhancedMove?.move);
   const currentPp = $derived(enhancedMove?.currentPp ?? move.currentPp);
   
-  function getTypeEmoji(type: string): string {
-    switch (type) {
-      case 'normal': return '⚪';
-      case 'beast': return '🦁';
-      case 'bug': return '🐛';
-      case 'aquatic': return '🌊';
-      case 'flora': return '🌿';
-      case 'mineral': return '💎';
-      case 'space': return '🌌';
-      case 'machina': return '⚙️';
-      case 'structure': return '🏗️';
-      case 'culture': return '🎭';
-      case 'cuisine': return '🍽️';
-      default: return '❓';
-    }
+  // Helper function to get type logo path
+  function getTypeLogo(type: string): string {
+    return `/classes/${type}.png`;
   }
   
+  
   function getTypeColor(type: string): string {
     switch (type) {
       case 'normal': return '#a8a878';
@@ -138,7 +127,11 @@
 <div class="move-display" class:disabled={isOutOfPP}>
   <div class="move-header">
     <div class="move-title-section">
-      <span class="type-emoji">{getTypeEmoji(move.type)}</span>
+      <img 
+        src={getTypeLogo(move.type)} 
+        alt={move.type}
+        class="type-logo"
+      />
       <div class="move-info">
         <div class="move-name-row">
           <span class="move-name">{move.name}</span>
@@ -257,8 +250,10 @@
     flex: 1;
   }
   
-  .type-emoji {
-    font-size: 20px;
+  .type-logo {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
     margin-top: 2px;
   }