battle ui

src/lib/components/Battle/ActionButtons.svelte

@@ -1,148 +1,105 @@
 <script lang="ts">
+  import ActionViewSelector, { type ActionView } from './ActionViewSelector.svelte';
+  import type { PicletInstance, BattleMove } from '$lib/db/schema';
+  
   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 onAction: (action: string) => void;
-</script>
-
-<div class="action-grid">
-  <button class="action-button fight" on:click={() => onAction('fight')}>
-    <span class="action-icon">⚔️</span>
-    <span class="action-label">Fight</span>
-  </button>
-  
-  <button class="action-button piclet" on:click={() => onAction('piclet')}>
-    <span class="action-icon">🔄</span>
-    <span class="action-label">Piclet</span>
-  </button>
-  
-  {#if isWildBattle}
-    <button class="action-button catch" on:click={() => onAction('catch')}>
-      <span class="action-icon">🎯</span>
-      <span class="action-label">Catch</span>
-    </button>
-  {:else}
-    <button class="action-button items" disabled>
-      <span class="action-icon">🎒</span>
-      <span class="action-label">Items</span>
-    </button>
-  {/if}
-  
-  <button class="action-button run" on:click={() => onAction('run')}>
-    <span class="action-icon">🏃</span>
-    <span class="action-label">Run</span>
-  </button>
-</div>
-
-<style>
-  .action-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1rem;
-    max-width: 400px;
-    margin: 0 auto;
-    width: 100%;
-  }
-  
-  .action-button {
-    padding: 2rem 1rem;
-    background: #f8f9fa;
-    border: 2px solid #e0e0e0;
-    border-radius: 12px;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .action-button:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  }
-  
-  .action-button:active:not(:disabled) {
-    transform: translateY(0);
-  }
+  export let onMoveSelect: (move: BattleMove) => void = () => {};
+  export let onPicletSelect: (piclet: PicletInstance) => void = () => {};
   
-  .action-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  
-  .action-icon {
-    font-size: 2rem;
-  }
-  
-  .action-label {
-    font-weight: 600;
-    font-size: 1rem;
-    color: #333;
-  }
-  
-  /* Action specific colors */
-  .fight {
-    background: #ffebee;
-    border-color: #ef5350;
-  }
+  let currentView: ActionView = 'main';
   
-  .fight:hover:not(:disabled) {
-    background: #ffcdd2;
-    border-color: #e53935;
+  function handleViewChange(view: ActionView) {
+    currentView = view;
   }
   
-  .piclet {
-    background: #e3f2fd;
-    border-color: #42a5f5;
+  function handleMoveSelected(move: BattleMove) {
+    currentView = 'main';
+    onMoveSelect(move);
   }
   
-  .piclet:hover:not(:disabled) {
-    background: #bbdefb;
-    border-color: #2196f3;
+  function handlePicletSelected(piclet: PicletInstance) {
+    currentView = 'main';
+    onPicletSelect(piclet);
   }
   
-  .catch {
-    background: #e8f5e9;
-    border-color: #66bb6a;
+  function handleCaptureAttempt() {
+    currentView = 'main';
+    onAction('catch');
   }
   
-  .catch:hover:not(:disabled) {
-    background: #c8e6c9;
-    border-color: #4caf50;
+  // Add Run button outside of the action selector
+  function handleRun() {
+    onAction('run');
   }
-  
-  .items {
-    background: #fff3e0;
-    border-color: #ffa726;
+</script>
+
+<div class="battle-actions">
+  <ActionViewSelector 
+    {currentView}
+    onViewChange={handleViewChange}
+    moves={playerPiclet.moves}
+    {availablePiclets}
+    {playerPiclet}
+    {enemyPiclet}
+    {isWildBattle}
+    onMoveSelected={handleMoveSelected}
+    onPicletSelected={handlePicletSelected}
+    onCaptureAttempt={handleCaptureAttempt}
+    currentPicletId={playerPiclet.id}
+    {processingTurn}
+  />
+  
+  <!-- Run button (always visible) -->
+  <button 
+    class="run-button" 
+    on:click={handleRun}
+    disabled={processingTurn}
+  >
+    <span class="run-icon">🏃</span>
+    <span>Run</span>
+  </button>
+</div>
+
+<style>
+  .battle-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    height: 100%;
   }
   
-  .items:hover:not(:disabled) {
-    background: #ffe0b2;
-    border-color: #ff9800;
+  .run-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 24px;
+    background: #ff3b30;
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-size: 17px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
   }
   
-  .run {
-    background: #f3e5f5;
-    border-color: #ab47bc;
+  .run-button:active:not(:disabled) {
+    transform: scale(0.95);
+    background: #d70015;
   }
   
-  .run:hover:not(:disabled) {
-    background: #e1bee7;
-    border-color: #9c27b0;
+  .run-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
   
-  @media (max-width: 480px) {
-    .action-button {
-      padding: 1.5rem 0.75rem;
-    }
-    
-    .action-icon {
-      font-size: 1.5rem;
-    }
-    
-    .action-label {
-      font-size: 0.875rem;
-    }
+  .run-icon {
+    font-size: 20px;
   }
 </style>

src/lib/components/Battle/ActionViewSelector.svelte

@@ -0,0 +1,466 @@
+<script lang="ts">
+  import type { PicletInstance, BattleMove } from '$lib/db/schema';
+  
+  export type ActionView = 'main' | 'moves' | 'piclets' | 'items' | 'stats' | 'forcedSwap';
+  
+  export let currentView: ActionView = 'main';
+  export let onViewChange: (view: ActionView) => void;
+  export let moves: BattleMove[] = [];
+  export let availablePiclets: PicletInstance[] = [];
+  export let playerPiclet: PicletInstance;
+  export let enemyPiclet: PicletInstance | null = null;
+  export let isWildBattle: boolean = false;
+  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;
+  
+  // Main action items
+  const actions = [
+    { title: 'Act', icon: '⚔️', view: 'moves' as ActionView },
+    { title: 'Piclets', icon: '🔄', view: 'piclets' as ActionView },
+    { title: 'Items', icon: '🎒', view: 'items' as ActionView },
+    // { title: 'Stats', icon: '📊', view: 'stats' as ActionView }, // Debug only
+  ];
+  
+  function handleActionClick(targetView: ActionView) {
+    if (currentView === targetView) {
+      onViewChange('main');
+    } else {
+      onViewChange(targetView);
+    }
+  }
+</script>
+
+<div class="action-view-container">
+  <!-- Main action list -->
+  {#if currentView !== 'forcedSwap'}
+    <div class="action-list main-actions">
+      {#each actions as action}
+        <button 
+          class="action-item"
+          class:active={currentView === action.view}
+          on:click={() => handleActionClick(action.view)}
+          disabled={processingTurn}
+        >
+          <span class="action-icon" class:active={currentView === action.view}>
+            {action.icon}
+          </span>
+          <span class="action-title">{action.title}</span>
+          <span class="chevron">›</span>
+        </button>
+      {/each}
+    </div>
+  {/if}
+  
+  <!-- Overlay sub-views -->
+  {#if currentView !== 'main'}
+    <div class="sub-view-overlay" class:forced={currentView === 'forcedSwap'}>
+      <div class="sub-view-content">
+        {#if currentView === 'moves'}
+          <div class="sub-view-list">
+            {#each moves as move}
+              {@const isDisabled = move.currentPp <= 0}
+              <button 
+                class="sub-item move-item"
+                on:click={() => !isDisabled && onMoveSelected(move)}
+                disabled={isDisabled || processingTurn}
+              >
+                <span class="type-emoji" class:disabled={isDisabled}>
+                  {move.type === 'normal' ? '⚪' : 
+                   move.type === 'status' ? '🔮' :
+                   move.type === 'special' ? '✨' : '❓'}
+                </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>
+                <div class="move-pp" class:disabled={isDisabled}>
+                  PP: {move.currentPp}/{move.pp}
+                </div>
+              </button>
+            {/each}
+          </div>
+        {:else if currentView === 'piclets'}
+          <div class="sub-view-list">
+            {@const availableHealthyPiclets = availablePiclets.filter(p => 
+              p.currentHp > 0 && p.id !== currentPicletId
+            )}
+            {#if availableHealthyPiclets.length === 0}
+              <div class="empty-message">
+                No other healthy piclets available
+              </div>
+            {:else}
+              {#each availableHealthyPiclets as piclet}
+                <button 
+                  class="sub-item piclet-item"
+                  on:click={() => onPicletSelected(piclet)}
+                  disabled={processingTurn}
+                >
+                  <img 
+                    src={piclet.imageData || piclet.imageUrl} 
+                    alt={piclet.nickname}
+                    class="piclet-thumb"
+                  />
+                  <div class="piclet-info">
+                    <div class="piclet-header">
+                      <span class="piclet-name">{piclet.nickname}</span>
+                      <span class="type-emoji">🔥</span>
+                      <span class="level-badge">Lv.{piclet.level}</span>
+                    </div>
+                    <div class="hp-row">
+                      <div class="hp-bar-small">
+                        <div 
+                          class="hp-fill-small" 
+                          style="width: {(piclet.currentHp / piclet.maxHp) * 100}%"
+                        ></div>
+                      </div>
+                      <span class="hp-text-small">{piclet.currentHp}/{piclet.maxHp}</span>
+                    </div>
+                  </div>
+                </button>
+              {/each}
+            {/if}
+          </div>
+        {:else if currentView === 'items'}
+          <div class="sub-view-list">
+            {#if isWildBattle && enemyPiclet}
+              <button 
+                class="sub-item item-item"
+                on:click={onCaptureAttempt}
+                disabled={processingTurn}
+              >
+                <span class="item-icon">📸</span>
+                <div class="item-info">
+                  <div class="item-name">Capture</div>
+                  <div class="item-desc">Snap to capture {enemyPiclet.nickname}</div>
+                </div>
+              </button>
+            {:else}
+              <div class="empty-message">
+                <span class="empty-icon">🎒</span>
+                <div>Items coming soon!</div>
+                <div class="empty-subtitle">This feature is currently under development.</div>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+  
+  <!-- Processing overlay -->
+  {#if processingTurn}
+    <div class="processing-overlay"></div>
+  {/if}
+</div>
+
+<style>
+  .action-view-container {
+    position: relative;
+    height: 100%;
+  }
+  
+  /* Main action list */
+  .action-list {
+    background: white;
+    border-radius: 12px;
+    border: 0.5px solid #c6c6c8;
+    overflow: hidden;
+  }
+  
+  .action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 12px 16px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 0.2s;
+    position: relative;
+  }
+  
+  .action-item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 16px;
+    right: 0;
+    height: 0.5px;
+    background: #c6c6c8;
+  }
+  
+  .action-item:active:not(:disabled) {
+    background: #f2f2f7;
+  }
+  
+  .action-item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .action-icon {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    border-radius: 8px;
+    margin-right: 12px;
+  }
+  
+  .action-icon.active {
+    background: #e5f3ff;
+  }
+  
+  .action-title {
+    flex: 1;
+    font-size: 17px;
+    font-weight: 400;
+    color: #000;
+  }
+  
+  .chevron {
+    color: #8e8e93;
+    font-size: 16px;
+  }
+  
+  /* Sub-view overlay */
+  .sub-view-overlay {
+    position: absolute;
+    top: 0;
+    left: 64px; /* Icon width + padding */
+    right: 0;
+    bottom: 0;
+    background: white;
+    border-radius: 12px;
+    border: 0.5px solid #c6c6c8;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+    animation: slideIn 0.2s ease-out;
+  }
+  
+  .sub-view-overlay.forced {
+    left: 0;
+  }
+  
+  @keyframes slideIn {
+    from {
+      transform: translateX(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  
+  .sub-view-content {
+    height: 100%;
+    overflow-y: auto;
+  }
+  
+  .sub-view-list {
+    padding: 0;
+  }
+  
+  /* Sub-items */
+  .sub-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 12px 16px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 0.2s;
+    position: relative;
+  }
+  
+  .sub-item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 16px;
+    right: 0;
+    height: 0.5px;
+    background: #c6c6c8;
+  }
+  
+  .sub-item:active:not(:disabled) {
+    background: #f2f2f7;
+  }
+  
+  .sub-item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  /* Move items */
+  .type-emoji {
+    font-size: 20px;
+    margin-right: 12px;
+    width: 32px;
+    text-align: center;
+  }
+  
+  .type-emoji.disabled {
+    opacity: 0.3;
+  }
+  
+  .move-info {
+    flex: 1;
+  }
+  
+  .move-name {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000;
+    margin-bottom: 2px;
+  }
+  
+  .move-name.disabled {
+    color: #8e8e93;
+  }
+  
+  .move-desc {
+    font-size: 13px;
+    color: #8e8e93;
+  }
+  
+  .move-desc.disabled {
+    color: #c7c7cc;
+  }
+  
+  .move-pp {
+    font-size: 12px;
+    padding: 4px 8px;
+    background: #f2f2f7;
+    border-radius: 12px;
+    color: #000;
+    white-space: nowrap;
+  }
+  
+  .move-pp.disabled {
+    background: #f2f2f7;
+    color: #8e8e93;
+  }
+  
+  /* Piclet items */
+  .piclet-thumb {
+    width: 48px;
+    height: 48px;
+    object-fit: contain;
+    border-radius: 8px;
+    margin-right: 12px;
+  }
+  
+  .piclet-info {
+    flex: 1;
+  }
+  
+  .piclet-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 4px;
+  }
+  
+  .piclet-name {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000;
+  }
+  
+  .level-badge {
+    font-size: 11px;
+    font-weight: 700;
+    padding: 2px 6px;
+    background: #e5e5ea;
+    border-radius: 12px;
+    margin-left: auto;
+  }
+  
+  .hp-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .hp-bar-small {
+    flex: 1;
+    height: 6px;
+    background: #e5e5ea;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  
+  .hp-fill-small {
+    height: 100%;
+    background: #4cd964;
+    transition: width 0.3s ease;
+  }
+  
+  .hp-text-small {
+    font-size: 11px;
+    color: #8e8e93;
+    white-space: nowrap;
+  }
+  
+  /* Item items */
+  .item-icon {
+    font-size: 24px;
+    margin-right: 12px;
+    width: 32px;
+    text-align: center;
+  }
+  
+  .item-info {
+    flex: 1;
+  }
+  
+  .item-name {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000;
+    margin-bottom: 2px;
+  }
+  
+  .item-desc {
+    font-size: 13px;
+    color: #8e8e93;
+  }
+  
+  /* Empty states */
+  .empty-message {
+    padding: 24px;
+    text-align: center;
+    color: #8e8e93;
+    font-size: 16px;
+  }
+  
+  .empty-icon {
+    font-size: 32px;
+    display: block;
+    margin-bottom: 8px;
+    opacity: 0.5;
+  }
+  
+  .empty-subtitle {
+    font-size: 14px;
+    color: #c7c7cc;
+    margin-top: 4px;
+  }
+  
+  /* Processing overlay */
+  .processing-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 12px;
+  }
+</style>

src/lib/components/Battle/BattleControls.svelte

@@ -10,6 +10,7 @@
   export let battleEnded: boolean;
   export let isWildBattle: boolean;
   export let playerPiclet: PicletInstance;
+  export let enemyPiclet: PicletInstance;
   export let onAction: (action: string) => void;
   export let onMoveSelect: (move: any) => void;
   export let onPicletSelect: (piclet: PicletInstance) => void;
@@ -42,65 +43,14 @@
     {#if battlePhase === 'main' && !processingTurn && !battleEnded}
       <ActionButtons 
         {isWildBattle}
+        {playerPiclet}
+        {enemyPiclet}
+        {availablePiclets}
+        {processingTurn}
         {onAction}
+        {onMoveSelect}
+        {onPicletSelect}
       />
-    {:else if battlePhase === 'moveSelect'}
-      <div class="move-select">
-        <div class="section-header">
-          <h3>Select a move</h3>
-          <button class="back-btn" on:click={onBack}>← Back</button>
-        </div>
-        <div class="moves-grid">
-          {#each playerPiclet.moves as move}
-            <button 
-              class="move-button"
-              on:click={() => onMoveSelect(move)}
-              disabled={move.currentPp <= 0}
-            >
-              <span class="move-name">{move.name}</span>
-              <span class="move-type">{move.type}</span>
-              <span class="move-pp">PP: {move.currentPp}/{move.pp}</span>
-            </button>
-          {/each}
-        </div>
-      </div>
-    {:else if battlePhase === 'picletSelect'}
-      <div class="piclet-select">
-        <div class="section-header">
-          <h3>Select a Piclet</h3>
-          <button class="back-btn" on:click={onBack}>← Back</button>
-        </div>
-        <div class="piclets-list">
-          {#if availablePiclets.length === 0}
-            <p class="no-piclets">No other healthy Piclets available!</p>
-          {:else}
-            {#each availablePiclets as piclet}
-              <button 
-                class="piclet-option"
-                on:click={() => onPicletSelect(piclet)}
-              >
-                <img 
-                  src={piclet.imageUrl} 
-                  alt={piclet.nickname}
-                  on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/50x50?text=P'}
-                />
-                <div class="piclet-details">
-                  <span class="piclet-name">{piclet.nickname}</span>
-                  <span class="piclet-stats">Lv.{piclet.level} - HP: {piclet.currentHp}/{piclet.maxHp}</span>
-                </div>
-                <div class="hp-preview">
-                  <div class="hp-preview-bar">
-                    <div 
-                      class="hp-preview-fill" 
-                      style="width: {(piclet.currentHp / piclet.maxHp) * 100}%"
-                    ></div>
-                  </div>
-                </div>
-              </button>
-            {/each}
-          {/if}
-        </div>
-      </div>
     {:else if battleEnded}
       <div class="battle-end">
         <button class="continue-btn" on:click={() => window.history.back()}>

src/lib/components/Battle/BattleField.svelte

@@ -179,11 +179,12 @@
   
   .enemy-platform {
     width: 140px;
-    height: 80px;
+    height: 140px;
     position: absolute;
-    bottom: -20px;
+    bottom: -60px;
     left: -20px;
     z-index: 0;
+    object-fit: cover;
   }
   
   /* Player Row */
@@ -213,11 +214,12 @@
   
   .player-platform {
     width: 160px;
-    height: 80px;
+    height: 160px;
     position: absolute;
-    bottom: -40px;
+    bottom: -80px;
     left: -20px;
     z-index: 0;
+    object-fit: cover;
   }
   
   /* Platform fallbacks */
@@ -229,15 +231,15 @@
   
   .enemy-platform-fallback {
     width: 140px;
-    height: 80px;
-    bottom: -20px;
+    height: 140px;
+    bottom: -60px;
     left: -20px;
   }
   
   .player-platform-fallback {
     width: 160px;
-    height: 80px;
-    bottom: -40px;
+    height: 160px;
+    bottom: -80px;
     left: -20px;
   }
   

src/lib/components/Pages/Battle.svelte

@@ -37,12 +37,6 @@
     if (processingTurn || battleEnded) return;
     
     switch (action) {
-      case 'fight':
-        battlePhase = 'moveSelect';
-        break;
-      case 'piclet':
-        battlePhase = 'picletSelect';
-        break;
       case 'catch':
         if (isWildBattle) {
           processingTurn = true;