closer to battle running

src/lib/battle-engine/types.ts

@@ -3,9 +3,10 @@
  * Based on battle_system_design.md specification
  */
 
-import { PicletType, AttackType, TypeEffectiveness } from '../types/picletTypes';
+import { PicletType, AttackType, type TypeEffectiveness } from '../types/picletTypes';
 
-export { PicletType, AttackType, TypeEffectiveness };
+export { PicletType, AttackType };
+export type { TypeEffectiveness };
 
 export type Tier = 'low' | 'medium' | 'high' | 'legendary';
 

src/lib/components/Battle/ActionButtons.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import ActionViewSelector, { type ActionView } from './ActionViewSelector.svelte';
   import type { PicletInstance, BattleMove } from '$lib/db/schema';
+  import type { BattleState } from '$lib/battle-engine/types';
   
   export let isWildBattle: boolean;
   export let playerPiclet: PicletInstance;
   export let enemyPiclet: PicletInstance | null = null;
   export let availablePiclets: PicletInstance[] = [];
   export let processingTurn: boolean = false;
+  export let battleState: BattleState | undefined = undefined;
   export let onAction: (action: string) => void;
   export let onMoveSelect: (move: BattleMove) => void = () => {};
   export let onPicletSelect: (piclet: PicletInstance) => void = () => {};
@@ -46,6 +48,7 @@
     {availablePiclets}
     {enemyPiclet}
     {isWildBattle}
+    {battleState}
     onMoveSelected={handleMoveSelected}
     onPicletSelected={handlePicletSelected}
     onCaptureAttempt={handleCaptureAttempt}

src/lib/components/Battle/ActionViewSelector.svelte

@@ -1,7 +1,10 @@
+<script context="module" lang="ts">
+  export type ActionView = 'main' | 'moves' | 'piclets' | 'items' | 'stats' | 'forcedSwap';
+</script>
+
 <script lang="ts">
   import type { PicletInstance, BattleMove } from '$lib/db/schema';
-  
-  export type ActionView = 'main' | 'moves' | 'piclets' | 'items' | 'stats' | 'forcedSwap';
+  import type { BattleState } from '$lib/battle-engine/types';
   
   export let currentView: ActionView = 'main';
   export let onViewChange: (view: ActionView) => void;
@@ -9,12 +12,16 @@
   export let availablePiclets: PicletInstance[] = [];
   export let enemyPiclet: PicletInstance | null = null;
   export let isWildBattle: boolean = false;
+  export let battleState: BattleState | undefined = undefined;
   export let onMoveSelected: (move: BattleMove) => void = () => {};
   export let onPicletSelected: (piclet: PicletInstance) => void = () => {};
   export let onCaptureAttempt: () => void = () => {};
   export let currentPicletId: number | null = null;
   export let processingTurn: boolean = false;
   
+  // Enhanced move information from battle state
+  $: enhancedMoves = battleState?.playerPiclet?.moves || [];
+  
   // Main action items
   const actions = [
     { title: 'Act', icon: '⚔️', view: 'moves' as ActionView },
@@ -59,8 +66,10 @@
       <div class="sub-view-content">
         {#if currentView === 'moves'}
           <div class="sub-view-list">
-            {#each moves as move}
+            {#each moves as move, index}
               {@const isDisabled = move.currentPp <= 0}
+              {@const enhancedMove = enhancedMoves[index]}
+              {@const battleMove = enhancedMove?.move}
               <button 
                 class="sub-item move-item"
                 on:click={() => !isDisabled && onMoveSelected(move)}
@@ -68,15 +77,44 @@
               >
                 <span class="type-emoji" class:disabled={isDisabled}>
                   {move.type === 'normal' ? '⚪' : 
-                   move.type === 'status' ? '🔮' :
-                   move.type === 'special' ? '✨' : '❓'}
+                   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>
                 <div class="move-info">
-                  <div class="move-name" class:disabled={isDisabled}>{move.name}</div>
-                  <div class="move-desc" class:disabled={isDisabled}>{move.description}</div>
+                  <div class="move-name" class:disabled={isDisabled}>
+                    {move.name}
+                    {#if battleMove?.power > 0}
+                      <span class="move-power">⚡{battleMove.power}</span>
+                    {/if}
+                  </div>
+                  <div class="move-desc" class:disabled={isDisabled}>
+                    {#if battleMove?.effects && battleMove.effects.length > 0}
+                      {battleMove.effects.length} effects • {move.description}
+                    {:else}
+                      {move.description}
+                    {/if}
+                  </div>
+                  {#if battleMove?.flags && battleMove.flags.length > 0}
+                    <div class="move-flags">
+                      {#each battleMove.flags as flag}
+                        <span class="flag-badge">{flag}</span>
+                      {/each}
+                    </div>
+                  {/if}
                 </div>
-                <div class="move-pp" class:disabled={isDisabled}>
-                  PP: {move.currentPp}/{move.pp}
+                <div class="move-stats" class:disabled={isDisabled}>
+                  <div class="move-pp">PP: {move.currentPp}/{move.pp}</div>
+                  {#if battleMove}
+                    <div class="move-accuracy">Acc: {battleMove.accuracy}%</div>
+                  {/if}
                 </div>
               </button>
             {/each}
@@ -335,6 +373,42 @@
     color: #c7c7cc;
   }
   
+  .move-power {
+    font-size: 11px;
+    color: #ff6b35;
+    font-weight: bold;
+    margin-left: 6px;
+  }
+  
+  .move-flags {
+    display: flex;
+    gap: 4px;
+    margin-top: 4px;
+    flex-wrap: wrap;
+  }
+  
+  .flag-badge {
+    font-size: 10px;
+    padding: 2px 6px;
+    background: #e3f2fd;
+    color: #1976d2;
+    border-radius: 8px;
+    font-weight: 500;
+  }
+  
+  .move-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    align-items: flex-end;
+  }
+  
+  .move-stats.disabled .move-pp,
+  .move-stats.disabled .move-accuracy {
+    background: #f2f2f7;
+    color: #8e8e93;
+  }
+  
   .move-pp {
     font-size: 12px;
     padding: 4px 8px;
@@ -344,9 +418,13 @@
     white-space: nowrap;
   }
   
-  .move-pp.disabled {
-    background: #f2f2f7;
-    color: #8e8e93;
+  .move-accuracy {
+    font-size: 11px;
+    padding: 2px 6px;
+    background: #e8f5e8;
+    color: #2e7d32;
+    border-radius: 8px;
+    white-space: nowrap;
   }
   
   /* Piclet items */

src/lib/components/Battle/BattleControls.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PicletInstance } from '$lib/db/schema';
+  import type { BattleState } from '$lib/battle-engine/types';
   import ActionButtons from './ActionButtons.svelte';
   import TypewriterText from './TypewriterText.svelte';
   
@@ -11,6 +12,7 @@
   export let playerPiclet: PicletInstance;
   export let enemyPiclet: PicletInstance;
   export let rosterPiclets: PicletInstance[] = [];
+  export let battleState: BattleState | undefined = undefined;
   export let onAction: (action: string) => void;
   export let onMoveSelect: (move: any) => void;
   export let onPicletSelect: (piclet: PicletInstance) => void;
@@ -34,6 +36,7 @@
         {enemyPiclet}
         {availablePiclets}
         {processingTurn}
+        {battleState}
         {onAction}
         {onMoveSelect}
         {onPicletSelect}

src/lib/components/Battle/BattleField.svelte

@@ -2,13 +2,17 @@
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { PicletInstance } from '$lib/db/schema';
+  import type { BattleState } from '$lib/battle-engine/types';
   import PicletInfo from './PicletInfo.svelte';
+  import StatusEffectIndicator from './StatusEffectIndicator.svelte';
+  import FieldEffectIndicator from './FieldEffectIndicator.svelte';
   
   export let playerPiclet: PicletInstance;
   export let enemyPiclet: PicletInstance;
   export let playerHpPercentage: number;
   export let enemyHpPercentage: number;
   export let showIntro: boolean = false;
+  export let battleState: BattleState | undefined = undefined;
   
   // Animation states
   let playerVisible = false;
@@ -47,6 +51,11 @@
   {/if}
   
   <div class="battle-content">
+    <!-- Field Effects Display -->
+    {#if battleState?.fieldEffects}
+      <FieldEffectIndicator fieldEffects={battleState.fieldEffects} />
+    {/if}
+    
     <!-- Enemy Row -->
     <div class="enemy-row">
       <div class="enemy-stack" class:intro-animations={showIntro}>
@@ -63,18 +72,30 @@
               class="piclet-image enemy-image"
               src={enemyPiclet.imageData || enemyPiclet.imageUrl} 
               alt={enemyPiclet.nickname}
-              on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
+              on:error={(e) => {
+                const target = e.currentTarget as HTMLImageElement;
+                target.src = 'https://via.placeholder.com/120x120?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';
+                const target = e.currentTarget as HTMLImageElement;
+                const nextSibling = target.nextElementSibling as HTMLElement;
+                target.style.display = 'none';
+                if (nextSibling) nextSibling.style.display = 'block';
               }}
             />
             <div class="platform-fallback enemy-platform-fallback" style="display: none;"></div>
+            
+            <!-- Enemy Status Effects -->
+            {#if battleState?.opponentPiclet?.statusEffects}
+              <div class="enemy-status-effects">
+                <StatusEffectIndicator statusEffects={battleState.opponentPiclet.statusEffects.map(effect => ({ type: effect, turnsLeft: 3 }))} />
+              </div>
+            {/if}
           </div>
         {/if}
       </div>
@@ -91,18 +112,30 @@
               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'}
+              on:error={(e) => {
+                const target = e.currentTarget as HTMLImageElement;
+                target.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';
+                const target = e.currentTarget as HTMLImageElement;
+                const nextSibling = target.nextElementSibling as HTMLElement;
+                target.style.display = 'none';
+                if (nextSibling) nextSibling.style.display = 'block';
               }}
             />
             <div class="platform-fallback player-platform-fallback" style="display: none;"></div>
+            
+            <!-- Player Status Effects -->
+            {#if battleState?.playerPiclet?.statusEffects}
+              <div class="player-status-effects">
+                <StatusEffectIndicator statusEffects={battleState.playerPiclet.statusEffects.map(effect => ({ type: effect, turnsLeft: 3 }))} />
+              </div>
+            {/if}
           </div>
         {/if}
         
@@ -269,6 +302,21 @@
     flex: 1;
   }
   
+  /* Status Effects Positioning */
+  .enemy-status-effects {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    z-index: 5;
+  }
+  
+  .player-status-effects {
+    position: absolute;
+    bottom: -10px;
+    left: -10px;
+    z-index: 5;
+  }
+
   /* Animations */
   .enemy-piclet-wrapper {
     animation-fill-mode: both;

src/lib/components/Battle/FieldEffectIndicator.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  export let fieldEffects: Array<{ effect: string; turnsRemaining?: number; side?: string }> = [];
+  
+  function getFieldEffectColor(effect: string): string {
+    if (effect.includes('weather')) return '#4dabf7';
+    if (effect.includes('terrain')) return '#51cf66';
+    if (effect.includes('hazard')) return '#ff6b6b';
+    return '#868e96';
+  }
+  
+  function getFieldEffectIcon(effect: string): string {
+    if (effect.includes('storm')) return '⛈️';
+    if (effect.includes('rain')) return '🌧️';
+    if (effect.includes('sun')) return '☀️';
+    if (effect.includes('snow')) return '🌨️';
+    if (effect.includes('spikes')) return '⚡';
+    if (effect.includes('reflect')) return '🛡️';
+    return '🌀';
+  }
+</script>
+
+{#if fieldEffects.length > 0}
+  <div class="field-effects">
+    <div class="field-effects-header">Field Effects</div>
+    {#each fieldEffects as effect}
+      <div 
+        class="field-effect" 
+        style="background-color: {getFieldEffectColor(effect.effect)}"
+        title="{effect.effect}{effect.turnsRemaining ? ` (${effect.turnsRemaining} turns)` : ''}"
+      >
+        <span class="effect-icon">{getFieldEffectIcon(effect.effect)}</span>
+        <span class="effect-name">{effect.effect}</span>
+        {#if effect.turnsRemaining}
+          <span class="turns-remaining">{effect.turnsRemaining}</span>
+        {/if}
+        {#if effect.side}
+          <span class="effect-side">({effect.side})</span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .field-effects {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    z-index: 10;
+  }
+  
+  .field-effects-header {
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.7rem;
+    font-weight: bold;
+  }
+  
+  .field-effect {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    border-radius: 12px;
+    color: white;
+    font-size: 0.7rem;
+    font-weight: bold;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+    animation: shimmer 2s infinite;
+  }
+  
+  .effect-icon {
+    font-size: 0.8rem;
+  }
+  
+  .effect-name {
+    font-size: 0.6rem;
+    text-transform: capitalize;
+  }
+  
+  .turns-remaining {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 8px;
+    padding: 1px 4px;
+    font-size: 0.6rem;
+  }
+  
+  .effect-side {
+    font-size: 0.6rem;
+    opacity: 0.8;
+  }
+  
+  @keyframes shimmer {
+    0%, 100% { background-position: -100% 0; }
+    50% { background-position: 100% 0; }
+  }
+</style>

src/lib/components/Battle/StatusEffectIndicator.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { StatusEffect } from '$lib/battle-engine/types';
+  
+  export let statusEffects: { type: StatusEffect; turnsLeft?: number }[] = [];
+  
+  function getStatusColor(status: StatusEffect): string {
+    switch (status) {
+      case 'burn': return '#ff6b6b';
+      case 'freeze': return '#74c0fc';
+      case 'paralyze': return '#ffd43b';
+      case 'poison': return '#9775fa';
+      case 'sleep': return '#868e96';
+      case 'confuse': return '#ff8cc8';
+      default: return '#495057';
+    }
+  }
+  
+  function getStatusIcon(status: StatusEffect): string {
+    switch (status) {
+      case 'burn': return '🔥';
+      case 'freeze': return '❄️';
+      case 'paralyze': return '⚡';
+      case 'poison': return '☠️';
+      case 'sleep': return '💤';
+      case 'confuse': return '😵';
+      default: return '?';
+    }
+  }
+</script>
+
+{#if statusEffects.length > 0}
+  <div class="status-effects">
+    {#each statusEffects as effect}
+      <div 
+        class="status-effect" 
+        style="background-color: {getStatusColor(effect.type)}"
+        title="{effect.type}{effect.turnsLeft ? ` (${effect.turnsLeft} turns)` : ''}"
+      >
+        <span class="status-icon">{getStatusIcon(effect.type)}</span>
+        <span class="status-name">{effect.type.toUpperCase()}</span>
+        {#if effect.turnsLeft}
+          <span class="turns-left">{effect.turnsLeft}</span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .status-effects {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    margin: 4px 0;
+  }
+  
+  .status-effect {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 2px 6px;
+    border-radius: 12px;
+    color: white;
+    font-size: 0.7rem;
+    font-weight: bold;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    animation: pulse 1.5s infinite;
+  }
+  
+  .status-icon {
+    font-size: 0.8rem;
+  }
+  
+  .status-name {
+    font-size: 0.6rem;
+  }
+  
+  .turns-left {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 8px;
+    padding: 1px 4px;
+    font-size: 0.6rem;
+    margin-left: 2px;
+  }
+  
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+  }
+</style>

src/lib/components/Pages/Battle.svelte

@@ -4,7 +4,9 @@
   import type { PicletInstance, BattleMove } from '$lib/db/schema';
   import BattleField from '../Battle/BattleField.svelte';
   import BattleControls from '../Battle/BattleControls.svelte';
-  import { BattleService } from '$lib/db/battleService';
+  import { BattleEngine } from '$lib/battle-engine/BattleEngine';
+  import type { BattleState, MoveAction } from '$lib/battle-engine/types';
+  import { picletInstanceToBattleDefinition, battlePicletToInstance } from '$lib/utils/battleConversion';
   import { getEffectivenessText, getEffectivenessColor } from '$lib/types/picletTypes';
   
   export let playerPiclet: PicletInstance;
@@ -13,19 +15,32 @@
   export let onBattleEnd: (result: any) => void = () => {};
   export let rosterPiclets: PicletInstance[] = []; // All roster piclets passed from parent
   
+  // Initialize battle engine
+  let battleEngine: BattleEngine;
+  let battleState: BattleState;
+  let currentPlayerPiclet = playerPiclet;
+  let currentEnemyPiclet = enemyPiclet;
+  
   // Battle state
   let currentMessage = isWildBattle 
     ? `A wild ${enemyPiclet.nickname} appeared!` 
     : `Trainer wants to battle!`;
-  let battlePhase: 'intro' | 'main' | 'moveSelect' | 'picletSelect' | 'ended' = 'intro';
+  let battlePhase: 'intro' | 'main' | 'moveSelect' | 'picletSelect' | 'ended' = 'intro';  
   let processingTurn = false;
   let battleEnded = false;
   
-  // HP animation states
+  // HP animation states  
   let playerHpPercentage = playerPiclet.currentHp / playerPiclet.maxHp;
   let enemyHpPercentage = enemyPiclet.currentHp / enemyPiclet.maxHp;
   
   onMount(() => {
+    // Initialize battle engine with converted piclet definitions
+    const playerDefinition = picletInstanceToBattleDefinition(playerPiclet);
+    const enemyDefinition = picletInstanceToBattleDefinition(enemyPiclet);
+    
+    battleEngine = new BattleEngine(playerDefinition, enemyDefinition, playerPiclet.level, enemyPiclet.level);
+    battleState = battleEngine.getState();
+    
     // Start intro sequence
     setTimeout(() => {
       currentMessage = `Go, ${playerPiclet.nickname}!`;
@@ -63,97 +78,123 @@
   }
   
   function handleMoveSelect(move: BattleMove) {
+    if (!battleEngine) return;
+    
     battlePhase = 'main';
     processingTurn = true;
-    currentMessage = `${playerPiclet.nickname} used ${move.name}!`;
     
-    setTimeout(() => {
-      if (!BattleService.doesMoveHit(move.accuracy)) {
-        currentMessage = `${playerPiclet.nickname}'s attack missed!`;
-        setTimeout(() => enemyTurn(), 1500);
+    // Find the corresponding move in the battle engine
+    const battleMove = battleState.playerPiclet.moves.find(m => m.move.name === move.name);
+    if (!battleMove) return;
+    
+    const moveAction: MoveAction = {
+      type: 'move',
+      moveIndex: battleState.playerPiclet.moves.indexOf(battleMove)
+    };
+    
+    try {
+      // Choose random enemy move (could be improved with AI)
+      const availableEnemyMoves = battleState.opponentPiclet.moves.filter(m => m.currentPP > 0);
+      if (availableEnemyMoves.length === 0) {
+        currentMessage = `${currentEnemyPiclet.nickname} has no moves left!`;
+        processingTurn = false;
         return;
       }
       
-      // Calculate damage with type effectiveness
-      const { damage, effectiveness } = BattleService.calculateDamage(playerPiclet, enemyPiclet, move);
+      const randomEnemyMove = availableEnemyMoves[Math.floor(Math.random() * availableEnemyMoves.length)];
+      const enemyMoveIndex = battleState.opponentPiclet.moves.indexOf(randomEnemyMove);
+      const enemyAction: MoveAction = {
+        type: 'move', 
+        moveIndex: enemyMoveIndex
+      };
       
-      // Update enemy HP
-      const newHp = Math.max(0, enemyPiclet.currentHp - damage);
-      enemyPiclet.currentHp = newHp;
-      enemyHpPercentage = newHp / enemyPiclet.maxHp;
+      // Execute the turn - battle engine handles priority automatically
+      const result = battleEngine.executeTurn(moveAction, enemyAction);
+      battleState = battleEngine.getState();
       
-      // Show effectiveness message if applicable
-      const effectivenessMessage = getEffectivenessText(effectiveness);
-      if (effectivenessMessage) {
-        setTimeout(() => {
-          currentMessage = effectivenessMessage;
-        }, 1000);
+      // Show battle messages with timing
+      if (result.log && result.log.length > 0) {
+        let messageIndex = 0;
+        function showNextBattleMessage() {
+          if (messageIndex < result.log.length) {
+            currentMessage = result.log[messageIndex];
+            messageIndex++;
+            setTimeout(showNextBattleMessage, 1500);
+          } else {
+            // After all messages, check battle end or continue
+            finalizeTurn();
+          }
+        }
+        showNextBattleMessage();
+      } else {
+        finalizeTurn();
       }
       
-      setTimeout(() => {
-        if (enemyHpPercentage <= 0) {
-          currentMessage = `${enemyPiclet.nickname} fainted!`;
+      function finalizeTurn() {
+        // Update UI state from battle engine
+        updateUIFromBattleState();
+        
+        // Check for battle end
+        if (battleState.winner) {
           battleEnded = true;
-          setTimeout(() => onBattleEnd(true), 2000);
+          const winMessage = battleState.winner === 'player' 
+            ? `${currentEnemyPiclet.nickname} fainted! You won!`
+            : `${currentPlayerPiclet.nickname} fainted! You lost!`;
+          currentMessage = winMessage;
+          setTimeout(() => {
+            onBattleEnd(battleState.winner === 'player');
+          }, 2000);
         } else {
-          enemyTurn();
+          setTimeout(() => {
+            currentMessage = `What will ${currentPlayerPiclet.nickname} do?`;
+            processingTurn = false;
+          }, 1000);
         }
-      }, effectivenessMessage ? 2500 : 1500);
-    }, 1500);
+      }
+    } catch (error) {
+      console.error('Battle engine error:', error);
+      currentMessage = 'Something went wrong in battle!';
+      processingTurn = false;
+    }
   }
   
-  function enemyTurn() {
-    const enemyMove = enemyPiclet.moves[Math.floor(Math.random() * enemyPiclet.moves.length)];
-    currentMessage = `${enemyPiclet.nickname} used ${enemyMove.name}!`;
+  
+  function updateUIFromBattleState() {
+    if (!battleState) return;
     
-    setTimeout(() => {
-      if (!BattleService.doesMoveHit(enemyMove.accuracy)) {
-        currentMessage = `${enemyPiclet.nickname}'s attack missed!`;
-        setTimeout(() => {
-          currentMessage = `What will ${playerPiclet.nickname} do?`;
-          processingTurn = false;
-        }, 1500);
-        return;
-      }
-      
-      const { damage, effectiveness } = BattleService.calculateDamage(enemyPiclet, playerPiclet, enemyMove);
-      
-      // Update player HP
-      const newHp = Math.max(0, playerPiclet.currentHp - damage);
-      playerPiclet.currentHp = newHp;
-      playerHpPercentage = newHp / playerPiclet.maxHp;
-      
-      // Show effectiveness message if applicable
-      const effectivenessMessage = getEffectivenessText(effectiveness);
-      if (effectivenessMessage) {
-        setTimeout(() => {
-          currentMessage = effectivenessMessage;
-        }, 1000);
-      }
-      
-      setTimeout(() => {
-        if (playerHpPercentage <= 0) {
-          currentMessage = `${playerPiclet.nickname} fainted!`;
-          battleEnded = true;
-          setTimeout(() => onBattleEnd(false), 2000);
-        } else {
-          currentMessage = `What will ${playerPiclet.nickname} do?`;
-          processingTurn = false;
-        }
-      }, effectivenessMessage ? 2500 : 1500);
-    }, 1500);
+    // Update player piclet state
+    currentPlayerPiclet = battlePicletToInstance(battleState.playerPiclet, currentPlayerPiclet);
+    playerHpPercentage = battleState.playerPiclet.currentHp / battleState.playerPiclet.maxHp;
+    
+    // Update enemy piclet state  
+    currentEnemyPiclet = battlePicletToInstance(battleState.opponentPiclet, currentEnemyPiclet);
+    enemyHpPercentage = battleState.opponentPiclet.currentHp / battleState.opponentPiclet.maxHp;
   }
   
   function handlePicletSelect(piclet: PicletInstance) {
+    if (!battleEngine) return;
+    
     battlePhase = 'main';
-    currentMessage = `Come back, ${playerPiclet.nickname}!`;
+    currentMessage = `Come back, ${currentPlayerPiclet.nickname}!`;
+    
     setTimeout(() => {
-      playerPiclet = piclet;
-      playerHpPercentage = piclet.currentHp / piclet.maxHp;
-      currentMessage = `Go, ${piclet.nickname}!`;
-      setTimeout(() => {
-        currentMessage = `What will ${piclet.nickname} do?`;
-      }, 1500);
+      // Convert the selected piclet to battle definition and switch
+      const newPicletDefinition = picletInstanceToBattleDefinition(piclet);
+      
+      try {
+        // TODO: Implement switching in battle engine
+        // For now, just update the UI
+        currentPlayerPiclet = piclet;
+        playerHpPercentage = piclet.currentHp / piclet.maxHp;
+        currentMessage = `Go, ${piclet.nickname}!`;
+        
+        setTimeout(() => {
+          currentMessage = `What will ${piclet.nickname} do?`;
+        }, 1500);
+      } catch (error) {
+        console.error('Switch error:', error);
+        currentMessage = 'Unable to switch Piclets!';
+      }
     }, 1500);
   }
   
@@ -173,11 +214,12 @@
   
   <div class="battle-content">
     <BattleField 
-      {playerPiclet}
-      {enemyPiclet}
+      playerPiclet={currentPlayerPiclet}
+      enemyPiclet={currentEnemyPiclet}
       {playerHpPercentage}
       {enemyHpPercentage}
       showIntro={battlePhase === 'intro'}
+      {battleState}
     />
     
     <BattleControls
@@ -186,9 +228,10 @@
       {processingTurn}
       {battleEnded}
       {isWildBattle}
-      {playerPiclet}
-      {enemyPiclet}
+      playerPiclet={currentPlayerPiclet}
+      enemyPiclet={currentEnemyPiclet}
       {rosterPiclets}
+      {battleState}
       onAction={handleAction}
       onMoveSelect={handleMoveSelect}
       onPicletSelect={handlePicletSelect}

src/lib/components/PicletGenerator/PicletGenerator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PicletGeneratorProps, PicletWorkflowState, CaptionType, CaptionLength, PicletStats } from '$lib/types';
+  import { Nature } from '$lib/types';
   import type { PicletInstance } from '$lib/db/schema';
   import UploadStep from './UploadStep.svelte';
   import WorkflowProgress from './WorkflowProgress.svelte';
@@ -568,7 +569,11 @@ The output should be formatted as a JSON instance that conforms to the schema be
       "required": ["hp", "attack", "defense", "speed"],
       "additionalProperties": false
     },
-    "nature": {"type": "string", "description": "Personality trait affecting behavior (e.g., 'bold', 'timid', 'hasty')"},
+    "nature": {
+      "type": "string", 
+      "enum": ["hardy", "docile", "serious", "bashful", "quirky", "lonely", "brave", "adamant", "naughty", "bold", "relaxed", "impish", "lax", "timid", "hasty", "jolly", "naive", "modest", "mild", "quiet", "gentle", "sassy", "careful", "calm", "reckless"],
+      "description": "Personality trait affecting behavior and battle style"
+    },
     "specialAbility": {
       "type": "object",
       "properties": {

src/lib/db/piclets.ts

@@ -2,6 +2,7 @@ import { db } from './index';
 import type { PicletInstance, Monster, BattleMove } from './schema';
 import { PicletType, AttackType, getTypeFromConcept } from '../types/picletTypes';
 import type { PicletStats } from '../types';
+import { Nature } from '../types';
 
 // Convert a generated Monster to a PicletInstance
 export async function monsterToPicletInstance(monster: Monster, level: number = 5): Promise<Omit<PicletInstance, 'id'>> {
@@ -9,13 +10,97 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
     throw new Error('Monster must have stats to create PicletInstance');
   }
 
-  const stats = monster.stats as PicletStats;
+  // Check if this is a new battle-ready monster or legacy format
+  const isBattleReady = 'baseStats' in monster.stats;
   
-  // Calculate base stats from battle-ready format
-  const baseHp = Math.floor(stats.baseStats.hp * 2 + 50);
-  const baseAttack = Math.floor(stats.baseStats.attack * 1.5 + 30);
-  const baseDefense = Math.floor(stats.baseStats.defense * 1.5 + 30);
-  const baseSpeed = Math.floor(stats.baseStats.speed * 1.5 + 30);
+  let baseHp: number, baseAttack: number, baseDefense: number, baseSpeed: number;
+  let moves: BattleMove[];
+  let primaryType: PicletType;
+  let tier: string;
+  
+  if (isBattleReady) {
+    const stats = monster.stats as PicletStats;
+    
+    // Calculate base stats from battle-ready format
+    baseHp = Math.floor(stats.baseStats.hp * 2 + 50);
+    baseAttack = Math.floor(stats.baseStats.attack * 1.5 + 30);
+    baseDefense = Math.floor(stats.baseStats.defense * 1.5 + 30);
+    baseSpeed = Math.floor(stats.baseStats.speed * 1.5 + 30);
+    
+    // Determine primary type from battle stats
+    const normalizedType = stats.primaryType.toLowerCase();
+    const validType = Object.values(PicletType).find(type => type === normalizedType);
+    primaryType = validType || getTypeFromConcept(monster.concept, monster.imageCaption);
+    
+    if (!validType) {
+      console.warn(`Invalid primaryType "${stats.primaryType}" from stats, falling back to concept detection`);
+    }
+    
+    // Create moves from battle-ready format
+    moves = stats.movepool.map(move => ({
+      name: move.name,
+      type: move.type as unknown as AttackType,
+      power: move.power,
+      accuracy: move.accuracy,
+      pp: move.pp,
+      currentPp: move.pp,
+      description: `${move.effects.length} effects` // Simplified description for now
+    }));
+    
+    tier = stats.tier;
+  } else {
+    // Legacy format
+    const legacyStats = monster.stats as any;
+    baseHp = Math.floor(legacyStats.HP * 2 + 50);
+    baseAttack = Math.floor(legacyStats.attack * 1.5 + 30);
+    baseDefense = Math.floor(legacyStats.defence * 1.5 + 30);
+    baseSpeed = Math.floor(legacyStats.speed * 1.5 + 30);
+    
+    // Auto-detect type for legacy monsters
+    primaryType = getTypeFromConcept(monster.concept, monster.imageCaption);
+    
+    // Create legacy moves
+    moves = [
+      {
+        name: legacyStats.attackActionName,
+        type: primaryType as unknown as AttackType,
+        power: 50,
+        accuracy: 95,
+        pp: 20,
+        currentPp: 20,
+        description: legacyStats.attackActionDescription
+      },
+      {
+        name: legacyStats.buffActionName,
+        type: AttackType.NORMAL,
+        power: 0,
+        accuracy: 100,
+        pp: 15,
+        currentPp: 15,
+        description: legacyStats.buffActionDescription
+      },
+      {
+        name: legacyStats.debuffActionName,
+        type: AttackType.NORMAL,
+        power: 0,
+        accuracy: 85,
+        pp: 15,
+        currentPp: 15,
+        description: legacyStats.debuffActionDescription
+      },
+      {
+        name: legacyStats.specialActionName,
+        type: primaryType as unknown as AttackType,
+        power: 80,
+        accuracy: 90,
+        pp: 5,
+        currentPp: 5,
+        description: legacyStats.specialActionDescription
+      }
+    ];
+    
+    tier = legacyStats.tier || 'medium';
+  }
   
   // Field stats are variations of regular stats
   const baseFieldAttack = Math.floor(baseAttack * 0.8);
@@ -27,27 +112,6 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
   
   const maxHp = calculateHp(baseHp, level);
   
-  // Determine primary type from battle stats
-  const normalizedType = stats.primaryType.toLowerCase();
-  
-  // Validate that the type exists in our enum
-  const validType = Object.values(PicletType).find(type => type === normalizedType);
-  const primaryType = validType || getTypeFromConcept(monster.concept, monster.imageCaption);
-  
-  if (!validType) {
-    console.warn(`Invalid primaryType "${stats.primaryType}" from stats, falling back to concept detection`);
-  }
-  
-  // Create moves from battle-ready format
-  const moves: BattleMove[] = stats.movepool.map(move => ({
-    name: move.name,
-    type: move.type as unknown as AttackType,
-    power: move.power,
-    accuracy: move.accuracy,
-    pp: move.pp,
-    currentPp: move.pp,
-    description: `${move.effects.length} effects` // Simplified description for now
-  }));
   
   const bst = baseHp + baseAttack + baseDefense + baseFieldAttack + baseFieldDefense + baseSpeed;
   
@@ -79,7 +143,7 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
     
     // Battle
     moves,
-    nature: 'hardy', // Default nature
+    nature: Nature.HARDY, // Default nature
     
     // Roster
     isInRoster: false,
@@ -88,7 +152,7 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
     // Metadata
     caughtAt: new Date(),
     bst,
-    tier: stats.tier, // Use tier from battle-ready stats
+    tier: tier, // Use tier from stats
     role: 'balanced', // Could be enhanced based on stat distribution
     variance: 0,
     
@@ -96,7 +160,7 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
     imageUrl: monster.imageUrl,
     imageData: monster.imageData,
     imageCaption: monster.imageCaption,
-    concept: stats.description || monster.concept, // Use the Monster Lore description
+    concept: monster.concept, // Use the original concept
     imagePrompt: monster.imagePrompt
   };
 }

src/lib/types/index.ts

@@ -104,6 +104,44 @@ export interface PicletGeneratorProps {
 }
 
 // Piclet Stats Types - now compatible with battle engine
+// Nature enum defining personality traits that affect Piclet behavior
+export enum Nature {
+  // Balanced natures (no stat modification)
+  HARDY = 'hardy',
+  DOCILE = 'docile', 
+  SERIOUS = 'serious',
+  BASHFUL = 'bashful',
+  QUIRKY = 'quirky',
+  
+  // Attack-focused natures
+  LONELY = 'lonely',     // +Attack, -Defense
+  BRAVE = 'brave',       // +Attack, -Speed
+  ADAMANT = 'adamant',   // +Attack, -Special Attack (represented as general attack boost)
+  NAUGHTY = 'naughty',   // +Attack, -Special Defense (represented as general attack boost)
+  
+  // Defense-focused natures  
+  BOLD = 'bold',         // +Defense, -Attack
+  RELAXED = 'relaxed',   // +Defense, -Speed
+  IMPISH = 'impish',     // +Defense, -Special Attack
+  LAX = 'lax',          // +Defense, -Special Defense
+  
+  // Speed-focused natures
+  TIMID = 'timid',       // +Speed, -Attack
+  HASTY = 'hasty',       // +Speed, -Defense
+  JOLLY = 'jolly',       // +Speed, -Special Attack
+  NAIVE = 'naive',       // +Speed, -Special Defense
+  
+  // Special natures (creative/tactical)
+  MODEST = 'modest',     // Tactical, prefers status moves
+  MILD = 'mild',         // Gentle but determined
+  QUIET = 'quiet',       // Observant, defensive style
+  GENTLE = 'gentle',     // Supportive, healing-focused
+  SASSY = 'sassy',       // Unpredictable, varied moves
+  CAREFUL = 'careful',   // Cautious, defensive
+  CALM = 'calm',         // Composed, balanced approach
+  RECKLESS = 'reckless'  // High-risk, high-reward style
+}
+
 export interface PicletStats {
   name: string;
   description: string;
@@ -116,7 +154,7 @@ export interface PicletStats {
     defense: number;
     speed: number;
   };
-  nature: string;
+  nature: Nature;
   specialAbility: {
     name: string;
     description: string;

src/lib/utils/battleConversion.ts

@@ -0,0 +1,179 @@
+/**
+ * Conversion utilities for transforming database types to battle engine types
+ */
+
+import type { PicletInstance, BattleMove } from '$lib/db/schema';
+import type { PicletDefinition, Move, BaseStats, SpecialAbility } from '$lib/battle-engine/types';
+import type { PicletStats, BattleEffect, AbilityTrigger } from '$lib/types';
+import { PicletType, AttackType } from '$lib/types/picletTypes';
+
+/**
+ * Convert PicletInstance to PicletDefinition for battle engine use
+ */
+export function picletInstanceToBattleDefinition(instance: PicletInstance): PicletDefinition {
+  // Convert base stats from instance level to definition level
+  const baseStats: BaseStats = {
+    hp: Math.floor(instance.baseHp / 2 - 25), // Reverse the conversion from monsterToPicletInstance
+    attack: Math.floor((instance.baseAttack - 30) / 1.5), 
+    defense: Math.floor((instance.baseDefense - 30) / 1.5),
+    speed: Math.floor((instance.baseSpeed - 30) / 1.5)
+  };
+
+  // Convert simple moves to full battle moves
+  const movepool: Move[] = instance.moves.map(move => convertBattleMoveToMove(move, instance.primaryType));
+
+  // Create a basic special ability if none exists
+  const specialAbility: SpecialAbility = {
+    name: "Adaptive",
+    description: "A basic ability that adapts to combat situations",
+    triggers: [{
+      event: "endOfTurn",
+      effects: [{
+        type: 'heal',
+        target: 'self',
+        amount: 'small',
+        condition: 'ifLowHp'
+      }]
+    }]
+  };
+
+  // Determine tier based on BST (Base Stat Total)
+  const bst = baseStats.hp + baseStats.attack + baseStats.defense + baseStats.speed;
+  let tier: 'low' | 'medium' | 'high' | 'legendary';
+  if (bst <= 300) tier = 'low';
+  else if (bst <= 400) tier = 'medium';
+  else if (bst <= 500) tier = 'high';
+  else tier = 'legendary';
+
+  return {
+    name: instance.nickname || instance.typeId,
+    description: instance.concept,
+    tier,
+    primaryType: convertPicletTypeToType(instance.primaryType),
+    secondaryType: instance.secondaryType ? convertPicletTypeToType(instance.secondaryType) : undefined,
+    baseStats,
+    nature: instance.nature,
+    specialAbility,
+    movepool
+  };
+}
+
+/**
+ * Convert BattleMove to full Move for battle engine
+ */
+function convertBattleMoveToMove(battleMove: BattleMove, primaryType: PicletType): Move {
+  // Create basic effects based on move properties
+  const effects: any[] = [];
+  
+  if (battleMove.power > 0) {
+    effects.push({
+      type: 'damage',
+      target: 'opponent',
+      amount: battleMove.power >= 80 ? 'strong' : 
+              battleMove.power >= 60 ? 'normal' : 'weak'
+    });
+  }
+
+  // Add status or stat effects for non-damaging moves
+  if (battleMove.power === 0) {
+    effects.push({
+      type: 'modifyStats',
+      target: 'self',
+      stats: { attack: 'increase' }
+    });
+  }
+
+  return {
+    name: battleMove.name,
+    type: convertAttackTypeToType(battleMove.type),
+    power: battleMove.power,
+    accuracy: battleMove.accuracy,
+    pp: battleMove.pp,
+    priority: 0,
+    flags: battleMove.power > 0 && battleMove.name.toLowerCase().includes('tackle') ? ['contact'] : [],
+    effects
+  };
+}
+
+/**
+ * Convert PicletType to battle engine type
+ */
+function convertPicletTypeToType(picletType: PicletType): 'beast' | 'bug' | 'aquatic' | 'flora' | 'mineral' | 'space' | 'machina' | 'structure' | 'culture' | 'cuisine' {
+  const typeMap: Record<PicletType, any> = {
+    [PicletType.BEAST]: 'beast',
+    [PicletType.BUG]: 'bug', 
+    [PicletType.AQUATIC]: 'aquatic',
+    [PicletType.FLORA]: 'flora',
+    [PicletType.MINERAL]: 'mineral',
+    [PicletType.SPACE]: 'space',
+    [PicletType.MACHINA]: 'machina',
+    [PicletType.STRUCTURE]: 'structure',
+    [PicletType.CULTURE]: 'culture',
+    [PicletType.CUISINE]: 'cuisine'
+  };
+  
+  return typeMap[picletType] || 'beast';
+}
+
+/**
+ * Convert AttackType to battle engine type
+ */
+function convertAttackTypeToType(attackType: AttackType): 'beast' | 'bug' | 'aquatic' | 'flora' | 'mineral' | 'space' | 'machina' | 'structure' | 'culture' | 'cuisine' | 'normal' {
+  // AttackType and PicletType should align, but handle the NORMAL case
+  if (attackType === AttackType.NORMAL) {
+    return 'normal';
+  }
+  
+  // Map other attack types to piclet types
+  const typeMap: Record<string, any> = {
+    'beast': 'beast',
+    'bug': 'bug',
+    'aquatic': 'aquatic', 
+    'flora': 'flora',
+    'mineral': 'mineral',
+    'space': 'space',
+    'machina': 'machina',
+    'structure': 'structure',
+    'culture': 'culture',
+    'cuisine': 'cuisine'
+  };
+  
+  return typeMap[attackType.toString()] || 'normal';
+}
+
+/**
+ * Convert battle engine BattlePiclet back to PicletInstance for state updates
+ */
+export function battlePicletToInstance(battlePiclet: any, originalInstance: PicletInstance): PicletInstance {
+  return {
+    ...originalInstance,
+    currentHp: battlePiclet.currentHp,
+    maxHp: battlePiclet.maxHp,
+    level: battlePiclet.level,
+    attack: battlePiclet.attack,
+    defense: battlePiclet.defense,
+    speed: battlePiclet.speed,
+    // Update moves with current PP
+    moves: battlePiclet.moves.map((moveData: any, index: number) => ({
+      ...originalInstance.moves[index],
+      currentPp: moveData.currentPP
+    }))
+  };
+}
+
+/**
+ * Convert PicletStats (from generation) to PicletDefinition for battle engine
+ */
+export function picletStatsToBattleDefinition(stats: PicletStats, name: string, concept: string): PicletDefinition {
+  return {
+    name: stats.name || name,
+    description: stats.description || concept,
+    tier: stats.tier,
+    primaryType: stats.primaryType,
+    secondaryType: stats.secondaryType || undefined,
+    baseStats: stats.baseStats,
+    nature: stats.nature,
+    specialAbility: stats.specialAbility,
+    movepool: stats.movepool
+  };
+}