battle fix

src/lib/components/Battle/BattleField.svelte

@@ -10,15 +10,14 @@
   export let enemyHpPercentage: number;
   export let showIntro: boolean = false;
   
-  // Random background selection
-  const backgrounds = ['ruins', 'road', 'dinner', 'cave'];
-  const selectedBackground = backgrounds[Math.floor(Math.random() * backgrounds.length)];
-  
   // Animation states
   let playerVisible = false;
   let enemyVisible = false;
   let trainerVisible = true;
   
+  // Calculate player XP percentage (0-100% of current level)
+  const playerXpPercentage = (playerPiclet.xp / 100) * 100; // Simplified, should use actual XP curve
+  
   onMount(() => {
     if (showIntro) {
       // Intro animation sequence
@@ -39,59 +38,82 @@
   });
 </script>
 
-<div class="battle-field" style="background-image: url('/images/environments/{selectedBackground}.png')">
-  <!-- Striped overlay pattern -->
-  <div class="stripe-pattern"></div>
-  
+<div class="battle-field">
   <!-- Trainer intro image -->
   {#if showIntro && trainerVisible}
     <div class="trainer-intro" transition:fade={{ duration: 300 }}>
-      <img src="/images/default_trainer.png" alt="Trainer" />
+      <img src="/assets/default_trainer.png" alt="Trainer" />
     </div>
   {/if}
   
-  <!-- Enemy area -->
-  <div class="enemy-area">
-    <PicletInfo 
-      piclet={enemyPiclet}
-      hpPercentage={enemyHpPercentage}
-      isPlayer={false}
-    />
-    
-    {#if enemyVisible}
-      <div class="enemy-piclet-container">
-        <div class="piclet-sprite enemy-sprite" transition:fade={{ duration: 300 }}>
-          <img 
-            src={enemyPiclet.imageData || enemyPiclet.imageUrl} 
-            alt={enemyPiclet.nickname}
-            on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
-          />
-        </div>
-        <div class="battle-platform enemy-platform"></div>
-      </div>
-    {/if}
-  </div>
-  
-  <!-- Player area -->
-  <div class="player-area">
-    {#if playerVisible}
-      <div class="player-piclet-container">
-        <div class="piclet-sprite player-sprite" transition:fade={{ duration: 300 }}>
-          <img 
-            src={playerPiclet.imageData || playerPiclet.imageUrl} 
-            alt={playerPiclet.nickname}
-            on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
-          />
-        </div>
-        <div class="battle-platform player-platform"></div>
+  <div class="battle-content">
+    <!-- Enemy Row -->
+    <div class="enemy-row">
+      <div class="enemy-stack">
+        <PicletInfo 
+          piclet={enemyPiclet}
+          hpPercentage={enemyHpPercentage}
+          xpPercentage={0}
+          isPlayer={false}
+        />
+        
+        {#if enemyVisible}
+          <div class="enemy-piclet-wrapper" transition:fade={{ duration: 300 }}>
+            <img 
+              class="piclet-image enemy-image"
+              src={enemyPiclet.imageData || enemyPiclet.imageUrl} 
+              alt={enemyPiclet.nickname}
+              on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/100x100?text=Piclet'}
+            />
+            <img 
+              class="platform enemy-platform" 
+              src="/assets/grass.PNG" 
+              alt="Platform"
+              on:error={(e) => {
+                e.currentTarget.style.display = 'none';
+                e.currentTarget.nextElementSibling.style.display = 'block';
+              }}
+            />
+            <div class="platform-fallback enemy-platform-fallback" style="display: none;"></div>
+          </div>
+        {/if}
       </div>
-    {/if}
+    </div>
     
-    <PicletInfo 
-      piclet={playerPiclet}
-      hpPercentage={playerHpPercentage}
-      isPlayer={true}
-    />
+    <div class="spacer"></div>
+    
+    <!-- Player Row -->
+    <div class="player-row">
+      <div class="player-stack">
+        {#if playerVisible}
+          <div class="player-piclet-wrapper" transition:fade={{ duration: 300 }}>
+            <img 
+              class="piclet-image player-image"
+              src={playerPiclet.imageData || playerPiclet.imageUrl} 
+              alt={playerPiclet.nickname}
+              on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
+            />
+            <img 
+              class="platform player-platform" 
+              src="/assets/grass.PNG" 
+              alt="Platform"
+              on:error={(e) => {
+                e.currentTarget.style.display = 'none';
+                e.currentTarget.nextElementSibling.style.display = 'block';
+              }}
+            />
+            <div class="platform-fallback player-platform-fallback" style="display: none;"></div>
+          </div>
+        {/if}
+        
+        <PicletInfo 
+          piclet={playerPiclet}
+          hpPercentage={playerHpPercentage}
+          xpPercentage={playerXpPercentage}
+          isPlayer={true}
+        />
+      </div>
+    </div>
   </div>
 </div>
 
@@ -99,22 +121,14 @@
   .battle-field {
     height: 280px;
     position: relative;
-    background-color: #e8f4f8;
     overflow: hidden;
-  }
-  
-  .stripe-pattern {
-    position: absolute;
-    inset: 0;
     background: repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 10px,
-      rgba(0, 0, 0, 0.02) 10px,
-      rgba(0, 0, 0, 0.02) 20px
+      to bottom,
+      rgba(76, 175, 80, 0.2) 0px,
+      rgba(76, 175, 80, 0.2) 5px,
+      rgba(76, 175, 80, 0.1) 5px,
+      rgba(76, 175, 80, 0.1) 10px
     );
-    pointer-events: none;
-    z-index: 1;
   }
   
   .trainer-intro {
@@ -128,100 +142,132 @@
   .trainer-intro img {
     width: 200px;
     height: auto;
-    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
   }
   
-  .enemy-area {
-    position: absolute;
-    top: 10%;
-    right: 10%;
+  .battle-content {
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
-    gap: 1rem;
+    height: 100%;
+  }
+  
+  /* Enemy Row */
+  .enemy-row {
+    flex: 1;
+    position: relative;
   }
   
-  .player-area {
+  .enemy-stack {
     position: absolute;
-    bottom: 10%;
-    left: 10%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
   }
   
-  .piclet-sprite {
-    width: 120px;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .enemy-piclet-wrapper {
+    position: absolute;
+    right: 40px;
+    top: 0;
   }
   
-  .piclet-sprite img {
-    width: 100%;
-    height: 100%;
+  .enemy-image {
+    width: 100px;
+    height: 100px;
     object-fit: contain;
-    image-rendering: pixelated;
-    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
+    display: block;
   }
   
-  .enemy-sprite {
-    order: 2;
+  .enemy-platform {
+    width: 140px;
+    height: 80px;
+    position: absolute;
+    bottom: -20px;
+    left: -20px;
+    z-index: -1;
   }
   
-  .player-sprite {
-    order: 1;
-    transform: scaleX(-1); /* Mirror player sprite */
+  /* Player Row */
+  .player-row {
+    height: 140px;
+    position: relative;
   }
   
-  /* Piclet containers with platforms */
-  .enemy-piclet-container,
-  .player-piclet-container {
+  .player-stack {
     position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    width: 100%;
+    height: 100%;
   }
   
-  .battle-platform {
-    width: 140px;
-    height: 20px;
-    background: #90a4ae;
-    border-radius: 50%;
-    margin-top: -10px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    z-index: 2;
+  .player-piclet-wrapper {
+    position: absolute;
+    left: 40px;
+    bottom: 0;
   }
   
-  .enemy-platform {
+  .player-image {
     width: 120px;
+    height: 120px;
+    object-fit: contain;
+    display: block;
   }
   
   .player-platform {
+    width: 160px;
+    height: 80px;
+    position: absolute;
+    bottom: -40px;
+    left: -20px;
+    z-index: -1;
+  }
+  
+  /* Platform fallbacks */
+  .platform-fallback {
+    position: absolute;
+    background: rgba(76, 175, 80, 0.3);
+    border-radius: 50%;
+  }
+  
+  .enemy-platform-fallback {
     width: 140px;
+    height: 80px;
+    bottom: -20px;
+    left: -20px;
+  }
+  
+  .player-platform-fallback {
+    width: 160px;
+    height: 80px;
+    bottom: -40px;
+    left: -20px;
+  }
+  
+  /* Piclet images */
+  .piclet-image {
+    image-rendering: auto;
+    filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.1));
+  }
+  
+  .spacer {
+    flex: 1;
   }
   
   @media (max-width: 768px) {
-    .battle-field {
-      height: 50vh;
-      min-height: 300px;
-    }
-    
-    .piclet-sprite {
+    .enemy-image {
       width: 80px;
       height: 80px;
     }
     
-    .enemy-area {
-      top: 5%;
-      right: 5%;
+    .player-image {
+      width: 100px;
+      height: 100px;
+    }
+    
+    .enemy-piclet-wrapper {
+      right: 20px;
     }
     
-    .player-area {
-      bottom: 5%;
-      left: 5%;
+    .player-piclet-wrapper {
+      left: 20px;
     }
   }
 </style>

src/lib/components/Battle/PicletInfo.svelte

@@ -3,122 +3,180 @@
   
   export let piclet: PicletInstance;
   export let hpPercentage: number;
+  export let xpPercentage: number = 0;
   export let isPlayer: boolean;
   
-  $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.25 ? '#ffc107' : '#f44336';
-  $: displayHp = Math.max(0, Math.round(piclet.currentHp * hpPercentage));
+  $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.2 ? '#ffc107' : '#f44336';
+  $: displayHp = Math.ceil(piclet.currentHp * hpPercentage);
+  
+  // Get type emoji (simplified - should map from actual types)
+  const typeEmoji = '🔥'; // Default fire type
 </script>
 
-<div class="piclet-info {isPlayer ? 'player-info' : 'enemy-info'}">
-  <div class="info-header">
-    <span class="piclet-name">{piclet.nickname}</span>
-    <span class="piclet-level">Lv.{piclet.level}</span>
-  </div>
-  
-  <div class="hp-container">
-    <div class="hp-label">HP</div>
-    <div class="hp-bar-wrapper">
-      <div class="hp-bar-bg">
+<div class="piclet-info-wrapper {isPlayer ? 'player-info-wrapper' : 'enemy-info-wrapper'}">
+  <div class="piclet-info">
+    <!-- Name Row -->
+    <div class="name-row">
+      <span class="piclet-name">{piclet.nickname}</span>
+      <span class="type-emoji">{typeEmoji}</span>
+      <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>
+    </div>
+    
+    <!-- HP Text (Player only) -->
+    {#if isPlayer}
+      <div class="hp-text">
+        {displayHp}/{piclet.maxHp}
+      </div>
+      
+      <!-- XP Bar (Player only) -->
+      <div class="xp-bar">
         <div 
-          class="hp-bar-fill" 
-          style="width: {hpPercentage * 100}%; background-color: {hpColor}"
+          class="xp-fill" 
+          style="width: {xpPercentage}%"
         ></div>
       </div>
-    </div>
+    {/if}
   </div>
   
-  {#if isPlayer}
-    <div class="hp-text">
-      {displayHp} / {piclet.maxHp}
-    </div>
-  {/if}
+  <!-- Triangle Pointer -->
+  <div class="triangle-pointer {isPlayer ? 'player-pointer' : 'enemy-pointer'}"></div>
 </div>
 
 <style>
-  .piclet-info {
-    background: rgba(255, 255, 255, 0.95);
-    border: 2px solid #333;
-    border-radius: 8px;
-    padding: 0.75rem 1rem;
-    min-width: 200px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  .piclet-info-wrapper {
+    position: absolute;
+    display: flex;
+    align-items: center;
+  }
+  
+  .player-info-wrapper {
+    right: 16px;
+    bottom: 20px;
+    flex-direction: row-reverse;
   }
   
-  .player-info {
-    order: 2;
+  .enemy-info-wrapper {
+    left: 16px;
+    top: 20px;
+    flex-direction: row;
   }
   
-  .enemy-info {
-    order: 1;
+  .piclet-info {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
+    padding: 12px;
+    min-width: 160px;
   }
   
-  .info-header {
+  /* Name Row */
+  .name-row {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 0.5rem;
+    gap: 4px;
+    margin-bottom: 8px;
   }
   
   .piclet-name {
     font-weight: 600;
-    font-size: 1rem;
+    font-size: 14px;
     color: #1a1a1a;
+    flex: 1;
   }
   
-  .piclet-level {
-    font-size: 0.875rem;
-    color: #666;
-  }
-  
-  .hp-container {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  
-  .hp-label {
-    font-weight: 600;
-    font-size: 0.75rem;
-    color: #666;
+  .type-emoji {
+    font-size: 12px;
   }
   
-  .hp-bar-wrapper {
-    flex: 1;
+  .level-badge {
+    background: rgba(142, 142, 147, 0.3);
+    padding: 2px 6px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 700;
+    color: #333;
   }
   
-  .hp-bar-bg {
+  /* HP Bar */
+  .hp-bar {
+    width: 120px;
     height: 8px;
     background: #e0e0e0;
     border-radius: 4px;
     overflow: hidden;
-    position: relative;
+    margin-bottom: 4px;
   }
   
-  .hp-bar-fill {
+  .hp-fill {
     height: 100%;
     transition: width 0.5s ease, background-color 0.3s ease;
-    border-radius: 4px;
   }
   
+  /* HP Text */
   .hp-text {
-    text-align: right;
-    font-size: 0.75rem;
+    font-size: 11px;
     color: #666;
-    margin-top: 0.25rem;
+    text-align: right;
+    margin-bottom: 4px;
+  }
+  
+  /* XP Bar */
+  .xp-bar {
+    width: 120px;
+    height: 4px;
+    background: #e0e0e0;
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  
+  .xp-fill {
+    height: 100%;
+    background: #2196f3;
+    transition: width 0.5s ease;
+  }
+  
+  /* Triangle Pointer */
+  .triangle-pointer {
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+  
+  .player-pointer {
+    border-width: 8px 16px 8px 0;
+    border-color: transparent rgba(255, 255, 255, 0.9) transparent transparent;
+    margin-right: -1px;
+  }
+  
+  .enemy-pointer {
+    border-width: 8px 0 8px 16px;
+    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
+    margin-left: -1px;
   }
   
   @media (max-width: 768px) {
     .piclet-info {
-      min-width: 150px;
-      padding: 0.5rem 0.75rem;
+      min-width: 140px;
+      padding: 8px;
     }
     
     .piclet-name {
-      font-size: 0.875rem;
+      font-size: 12px;
+    }
+    
+    .hp-bar {
+      width: 100px;
     }
     
-    .piclet-level {
-      font-size: 0.75rem;
+    .xp-bar {
+      width: 100px;
     }
   }
 </style>

src/lib/components/Pages/Battle.svelte

@@ -166,14 +166,7 @@
   }
   
   .battle-nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem;
-    background: white;
-    border-bottom: 1px solid #e0e0e0;
-    position: relative;
-    z-index: 10;
+    display: none; /* Hide navigation in battle */
   }
   
   .back-button {