MORE

src/lib/components/Piclets/AbilityDisplay.svelte

@@ -0,0 +1,397 @@
+<script lang="ts">
+  import type { BattleEffect, AbilityTrigger } from '$lib/types';
+  
+  interface Props {
+    ability: {
+      name: string;
+      description: string;
+      effects?: BattleEffect[];
+      triggers?: AbilityTrigger[];
+    };
+    expanded?: boolean;
+  }
+  
+  let { ability, expanded = false }: Props = $props();
+  
+  function getEffectIcon(effectType: string): string {
+    switch (effectType) {
+      case 'damage': return '⚔️';
+      case 'modifyStats': return '📊';
+      case 'applyStatus': return '💫';
+      case 'heal': return '💚';
+      case 'manipulatePP': return '⚡';
+      case 'fieldEffect': return '🌍';
+      case 'counter': return '🔄';
+      case 'priority': return '⚡';
+      case 'removeStatus': return '✨';
+      case 'mechanicOverride': return '⚙️';
+      default: return '❓';
+    }
+  }
+  
+  function getEffectColor(effectType: string): string {
+    switch (effectType) {
+      case 'damage': return '#ff6b6b';
+      case 'modifyStats': return '#4dabf7';
+      case 'applyStatus': return '#9775fa';
+      case 'heal': return '#51cf66';
+      case 'manipulatePP': return '#ffd43b';
+      case 'fieldEffect': return '#495057';
+      case 'counter': return '#fd7e14';
+      case 'priority': return '#20c997';
+      case 'removeStatus': return '#74c0fc';
+      case 'mechanicOverride': return '#868e96';
+      default: return '#adb5bd';
+    }
+  }
+  
+  function getTriggerIcon(event: string): string {
+    switch (event) {
+      case 'onDamageTaken': return '🛡️';
+      case 'onDamageDealt': return '⚔️';
+      case 'onContactDamage': return '👊';
+      case 'onCriticalHit': return '💥';
+      case 'endOfTurn': return '🔄';
+      case 'onLowHP': return '❤️';
+      case 'onStatusInflicted': return '💫';
+      case 'onHPDrained': return '🩸';
+      case 'onKO': return '💀';
+      case 'onSwitchIn': return '➡️';
+      case 'onSwitchOut': return '⬅️';
+      case 'beforeMoveUse': return '⏰';
+      case 'afterMoveUse': return '✅';
+      case 'onFullHP': return '💚';
+      case 'onOpponentContactMove': return '🤜';
+      case 'onStatChange': return '📈';
+      case 'onTypeChange': return '🔄';
+      default: return '⚡';
+    }
+  }
+  
+  function formatEffectDescription(effect: BattleEffect): string {
+    let desc = effect.type.charAt(0).toUpperCase() + effect.type.slice(1);
+    
+    if (effect.target !== 'self') {
+      desc += ` (${effect.target})`;
+    }
+    
+    if (effect.condition) {
+      desc += ` when ${effect.condition}`;
+    }
+    
+    if (effect.amount) {
+      desc += ` - ${effect.amount}`;
+    }
+    
+    if (effect.stats) {
+      const statChanges = Object.entries(effect.stats).map(([stat, change]) => 
+        `${stat}: ${change}`
+      ).join(', ');
+      desc += ` (${statChanges})`;
+    }
+    
+    if (effect.status) {
+      desc += ` - ${effect.status}`;
+    }
+    
+    return desc;
+  }
+</script>
+
+<div class="ability-display">
+  <div class="ability-header">
+    <div class="ability-name-section">
+      <span class="ability-icon">✨</span>
+      <div class="ability-info">
+        <h3 class="ability-name">{ability.name}</h3>
+        <p class="ability-description">{ability.description}</p>
+      </div>
+    </div>
+    
+    {#if (ability.effects?.length || 0) + (ability.triggers?.length || 0) > 0}
+      <div class="ability-counts">
+        {#if ability.effects?.length}
+          <span class="count-badge effects">
+            {ability.effects.length} effect{ability.effects.length !== 1 ? 's' : ''}
+          </span>
+        {/if}
+        {#if ability.triggers?.length}
+          <span class="count-badge triggers">
+            {ability.triggers.length} trigger{ability.triggers.length !== 1 ? 's' : ''}
+          </span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+  
+  {#if expanded && (ability.effects?.length || ability.triggers?.length)}
+    <div class="ability-details">
+      {#if ability.effects?.length}
+        <div class="effects-section">
+          <h4 class="section-title">
+            <span class="section-icon">🎯</span>
+            Passive Effects
+          </h4>
+          <div class="effects-list">
+            {#each ability.effects as effect}
+              <div class="effect-item">
+                <span 
+                  class="effect-icon" 
+                  style="color: {getEffectColor(effect.type)}"
+                >
+                  {getEffectIcon(effect.type)}
+                </span>
+                <div class="effect-details">
+                  <span class="effect-type">{effect.type}</span>
+                  <span class="effect-description">{formatEffectDescription(effect)}</span>
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+      
+      {#if ability.triggers?.length}
+        <div class="triggers-section">
+          <h4 class="section-title">
+            <span class="section-icon">⚡</span>
+            Triggered Effects
+          </h4>
+          <div class="triggers-list">
+            {#each ability.triggers as trigger}
+              <div class="trigger-item">
+                <div class="trigger-header">
+                  <span class="trigger-icon">{getTriggerIcon(trigger.event)}</span>
+                  <div class="trigger-info">
+                    <span class="trigger-event">{trigger.event}</span>
+                    {#if trigger.condition}
+                      <span class="trigger-condition">when {trigger.condition}</span>
+                    {/if}
+                  </div>
+                </div>
+                
+                {#if trigger.effects?.length}
+                  <div class="trigger-effects">
+                    {#each trigger.effects as effect}
+                      <div class="trigger-effect">
+                        <span 
+                          class="effect-icon small" 
+                          style="color: {getEffectColor(effect.type)}"
+                        >
+                          {getEffectIcon(effect.type)}
+                        </span>
+                        <span class="effect-summary">{formatEffectDescription(effect)}</span>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ability-display {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border: 1px solid #dee2e6;
+    border-radius: 12px;
+    padding: 16px;
+    margin: 8px 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+  
+  .ability-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .ability-name-section {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    flex: 1;
+  }
+  
+  .ability-icon {
+    font-size: 24px;
+    margin-top: 2px;
+  }
+  
+  .ability-info {
+    flex: 1;
+  }
+  
+  .ability-name {
+    font-size: 18px;
+    font-weight: 600;
+    color: #495057;
+    margin: 0 0 4px 0;
+  }
+  
+  .ability-description {
+    font-size: 14px;
+    color: #6c757d;
+    margin: 0;
+    line-height: 1.4;
+  }
+  
+  .ability-counts {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-end;
+  }
+  
+  .count-badge {
+    font-size: 11px;
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  
+  .count-badge.effects {
+    background: #e3f2fd;
+    color: #1976d2;
+  }
+  
+  .count-badge.triggers {
+    background: #fff3e0;
+    color: #f57c00;
+  }
+  
+  .ability-details {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #e9ecef;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #495057;
+    margin: 0 0 12px 0;
+  }
+  
+  .section-icon {
+    font-size: 16px;
+  }
+  
+  .effects-section,
+  .triggers-section {
+    margin-bottom: 16px;
+  }
+  
+  .effects-list,
+  .triggers-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .effect-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+  }
+  
+  .effect-icon {
+    font-size: 16px;
+    margin-top: 1px;
+  }
+  
+  .effect-icon.small {
+    font-size: 14px;
+  }
+  
+  .effect-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  
+  .effect-type {
+    font-size: 12px;
+    font-weight: 600;
+    color: #495057;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
+  .effect-description {
+    font-size: 13px;
+    color: #6c757d;
+    line-height: 1.3;
+  }
+  
+  .trigger-item {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    padding: 12px;
+  }
+  
+  .trigger-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    margin-bottom: 8px;
+  }
+  
+  .trigger-icon {
+    font-size: 16px;
+    margin-top: 1px;
+  }
+  
+  .trigger-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  
+  .trigger-event {
+    font-size: 13px;
+    font-weight: 600;
+    color: #495057;
+  }
+  
+  .trigger-condition {
+    font-size: 12px;
+    color: #868e96;
+    font-style: italic;
+  }
+  
+  .trigger-effects {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-left: 26px;
+  }
+  
+  .trigger-effect {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .effect-summary {
+    font-size: 12px;
+    color: #6c757d;
+    line-height: 1.3;
+  }
+</style>

src/lib/components/Piclets/MoveDisplay.svelte

@@ -0,0 +1,426 @@
+<script lang="ts">
+  import type { BattleMove as DBBattleMove } from '$lib/db/schema';
+  import type { BattleMove, BattleEffect } from '$lib/types';
+  
+  interface Props {
+    move: DBBattleMove;
+    enhancedMove?: { move: BattleMove; currentPP: number };
+    expanded?: boolean;
+    showPP?: boolean;
+  }
+  
+  let { move, enhancedMove, expanded = false, showPP = true }: Props = $props();
+  
+  // Use enhanced move data if available, otherwise fall back to basic move
+  $: battleMove = enhancedMove?.move;
+  $: currentPP = 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 '❓';
+    }
+  }
+  
+  function getTypeColor(type: string): string {
+    switch (type) {
+      case 'normal': return '#a8a878';
+      case 'beast': return '#c03028';
+      case 'bug': return '#a8b820';
+      case 'aquatic': return '#6890f0';
+      case 'flora': return '#78c850';
+      case 'mineral': return '#b8a038';
+      case 'space': return '#705898';
+      case 'machina': return '#b8b8d0';
+      case 'structure': return '#b8a058';
+      case 'culture': return '#f85888';
+      case 'cuisine': return '#f08030';
+      default: return '#68a090';
+    }
+  }
+  
+  function getEffectIcon(effectType: string): string {
+    switch (effectType) {
+      case 'damage': return '⚔️';
+      case 'modifyStats': return '📊';
+      case 'applyStatus': return '💫';
+      case 'heal': return '💚';
+      case 'manipulatePP': return '⚡';
+      case 'fieldEffect': return '🌍';
+      case 'counter': return '🔄';
+      case 'priority': return '⚡';
+      case 'removeStatus': return '✨';
+      case 'mechanicOverride': return '⚙️';
+      default: return '❓';
+    }
+  }
+  
+  function getEffectColor(effectType: string): string {
+    switch (effectType) {
+      case 'damage': return '#ff6b6b';
+      case 'modifyStats': return '#4dabf7';
+      case 'applyStatus': return '#9775fa';
+      case 'heal': return '#51cf66';
+      case 'manipulatePP': return '#ffd43b';
+      case 'fieldEffect': return '#495057';
+      case 'counter': return '#fd7e14';
+      case 'priority': return '#20c997';
+      case 'removeStatus': return '#74c0fc';
+      case 'mechanicOverride': return '#868e96';
+      default: return '#adb5bd';
+    }
+  }
+  
+  function formatEffectDescription(effect: BattleEffect): string {
+    let desc = effect.type.charAt(0).toUpperCase() + effect.type.slice(1);
+    
+    if (effect.target !== 'self') {
+      desc += ` (${effect.target})`;
+    }
+    
+    if (effect.condition) {
+      desc += ` when ${effect.condition}`;
+    }
+    
+    if (effect.amount) {
+      desc += ` - ${effect.amount}`;
+    }
+    
+    if (effect.stats) {
+      const statChanges = Object.entries(effect.stats).map(([stat, change]) => 
+        `${stat}: ${change}`
+      ).join(', ');
+      desc += ` (${statChanges})`;
+    }
+    
+    if (effect.status) {
+      desc += ` - ${effect.status}`;
+    }
+    
+    return desc;
+  }
+  
+  $: isOutOfPP = currentPP <= 0;
+  $: typeColor = getTypeColor(move.type);
+</script>
+
+<div class="move-display" class:disabled={isOutOfPP}>
+  <div class="move-header">
+    <div class="move-title-section">
+      <span class="type-emoji">{getTypeEmoji(move.type)}</span>
+      <div class="move-info">
+        <div class="move-name-row">
+          <span class="move-name">{move.name}</span>
+          {#if battleMove?.power && battleMove.power > 0}
+            <span class="power-badge">⚡{battleMove.power}</span>
+          {:else if move.power > 0}
+            <span class="power-badge">⚡{move.power}</span>
+          {/if}
+        </div>
+        <div class="move-type-badge" style="background-color: {typeColor}">
+          {move.type.toUpperCase()}
+        </div>
+      </div>
+    </div>
+    
+    <div class="move-stats">
+      {#if showPP}
+        <div class="pp-display" class:out-of-pp={isOutOfPP}>
+          <span class="pp-label">PP</span>
+          <span class="pp-value">{currentPP}/{move.pp}</span>
+        </div>
+      {/if}
+      
+      {#if battleMove?.accuracy}
+        <div class="accuracy-display">
+          <span class="accuracy-label">ACC</span>
+          <span class="accuracy-value">{battleMove.accuracy}%</span>
+        </div>
+      {:else if move.accuracy}
+        <div class="accuracy-display">
+          <span class="accuracy-label">ACC</span>
+          <span class="accuracy-value">{move.accuracy}%</span>
+        </div>
+      {/if}
+    </div>
+  </div>
+  
+  <div class="move-description">
+    {move.description}
+  </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}
+  
+  {#if expanded && battleMove?.effects && battleMove.effects.length > 0}
+    <div class="move-effects">
+      <h4 class="effects-title">
+        <span class="effects-icon">🎯</span>
+        Move Effects ({battleMove.effects.length})
+      </h4>
+      <div class="effects-list">
+        {#each battleMove.effects as effect}
+          <div class="effect-item">
+            <span 
+              class="effect-icon" 
+              style="color: {getEffectColor(effect.type)}"
+            >
+              {getEffectIcon(effect.type)}
+            </span>
+            <div class="effect-details">
+              <span class="effect-type">{effect.type}</span>
+              <span class="effect-description">{formatEffectDescription(effect)}</span>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+  
+  {#if battleMove?.priority && battleMove.priority !== 0}
+    <div class="priority-indicator">
+      <span class="priority-icon">
+        {battleMove.priority > 0 ? '⏫' : '⏬'}
+      </span>
+      <span class="priority-text">
+        Priority: {battleMove.priority > 0 ? '+' : ''}{battleMove.priority}
+      </span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .move-display {
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border: 1px solid #dee2e6;
+    border-radius: 12px;
+    padding: 14px;
+    margin: 8px 0;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  }
+  
+  .move-display:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+  }
+  
+  .move-display.disabled {
+    opacity: 0.6;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  }
+  
+  .move-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 8px;
+  }
+  
+  .move-title-section {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    flex: 1;
+  }
+  
+  .type-emoji {
+    font-size: 20px;
+    margin-top: 2px;
+  }
+  
+  .move-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .move-name-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .move-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: #495057;
+  }
+  
+  .power-badge {
+    font-size: 12px;
+    padding: 2px 6px;
+    background: #ff6b35;
+    color: white;
+    border-radius: 8px;
+    font-weight: 600;
+  }
+  
+  .move-type-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 12px;
+    color: white;
+    font-size: 10px;
+    font-weight: 600;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    align-self: flex-start;
+  }
+  
+  .move-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-end;
+  }
+  
+  .pp-display,
+  .accuracy-display {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    padding: 3px 8px;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.05);
+  }
+  
+  .pp-display.out-of-pp {
+    background: #fee;
+    color: #d63031;
+  }
+  
+  .pp-label,
+  .accuracy-label {
+    font-weight: 600;
+    color: #6c757d;
+  }
+  
+  .pp-value,
+  .accuracy-value {
+    font-weight: 500;
+    color: #495057;
+  }
+  
+  .move-description {
+    font-size: 14px;
+    color: #6c757d;
+    line-height: 1.4;
+    margin-bottom: 8px;
+  }
+  
+  .move-flags {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+  
+  .flag-badge {
+    font-size: 10px;
+    padding: 2px 6px;
+    background: #e3f2fd;
+    color: #1976d2;
+    border-radius: 8px;
+    font-weight: 500;
+  }
+  
+  .move-effects {
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid #e9ecef;
+  }
+  
+  .effects-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #495057;
+    margin: 0 0 8px 0;
+  }
+  
+  .effects-icon {
+    font-size: 14px;
+  }
+  
+  .effects-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  
+  .effect-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 6px 10px;
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 6px;
+  }
+  
+  .effect-icon {
+    font-size: 14px;
+    margin-top: 1px;
+  }
+  
+  .effect-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+  
+  .effect-type {
+    font-size: 11px;
+    font-weight: 600;
+    color: #495057;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
+  .effect-description {
+    font-size: 12px;
+    color: #6c757d;
+    line-height: 1.3;
+  }
+  
+  .priority-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 8px;
+    padding: 4px 8px;
+    background: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 6px;
+    font-size: 12px;
+  }
+  
+  .priority-icon {
+    font-size: 14px;
+  }
+  
+  .priority-text {
+    font-weight: 500;
+    color: #856404;
+  }
+</style>

src/lib/components/Piclets/PicletCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { PicletInstance } from '$lib/db/schema';
   import { TYPE_DATA } from '$lib/types/picletTypes';
+  import { picletInstanceToBattleDefinition } from '$lib/utils/battleConversion';
   
   interface Props {
     instance: PicletInstance;
@@ -19,6 +20,10 @@
   
   const typeColor = $derived(TYPE_DATA[instance.primaryType].color);
   const softTypeColor = $derived(`${typeColor}20`); // Add 20% opacity for soft background
+  
+  // Get battle definition for enhanced ability info
+  $: battleDefinition = picletInstanceToBattleDefinition(instance);
+  $: ability = battleDefinition.specialAbility;
 </script>
 
 <button 
@@ -50,6 +55,23 @@
         ></div>
       </div>
     </div>
+    
+    <!-- Ability Preview -->
+    <div class="ability-preview">
+      <div class="ability-info">
+        <span class="ability-icon">✨</span>
+        <div class="ability-text">
+          <span class="ability-name">{ability.name}</span>
+          <div class="ability-counts">
+            {#if ability.effects?.length || ability.triggers?.length}
+              <span class="ability-count">
+                {(ability.effects?.length || 0) + (ability.triggers?.length || 0)} effects
+              </span>
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </button>
 
@@ -146,4 +168,57 @@
     border-radius: 1.5px;
     transition: width 0.3s ease;
   }
+  
+  /* Ability Preview Styles */
+  .ability-preview {
+    margin-top: 4px;
+    padding: 4px 6px;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  .ability-info {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  
+  .ability-icon {
+    font-size: 10px;
+    line-height: 1;
+  }
+  
+  .ability-text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+  
+  .ability-name {
+    font-size: 8px;
+    font-weight: 600;
+    color: #495057;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .ability-counts {
+    display: flex;
+    justify-content: flex-end;
+  }
+  
+  .ability-count {
+    font-size: 7px;
+    padding: 1px 3px;
+    background: rgba(0, 123, 255, 0.1);
+    color: #0066cc;
+    border-radius: 4px;
+    font-weight: 500;
+    line-height: 1;
+  }
 </style>

src/lib/components/Piclets/PicletDetail.svelte

@@ -5,6 +5,9 @@
   import { uiStore } from '$lib/stores/ui';
   import { downloadPicletCard } from '$lib/services/picletExport';
   import { TYPE_DATA } from '$lib/types/picletTypes';
+  import AbilityDisplay from './AbilityDisplay.svelte';
+  import MoveDisplay from './MoveDisplay.svelte';
+  import { picletInstanceToBattleDefinition } from '$lib/utils/battleConversion';
   
   interface Props {
     instance: PicletInstance;
@@ -14,10 +17,14 @@
   
   let { instance, onClose, onDeleted }: Props = $props();
   let showDeleteConfirm = $state(false);
-  let selectedTab = $state<'about' | 'stats' | 'actions'>('about');
+  let selectedTab = $state<'about' | 'stats' | 'abilities' | 'moves'>('about');
   let expandedMoves = $state(new Set<number>());
+  let expandedAbility = $state(false);
   let isSharing = $state(false);
   
+  // Convert to battle definition to get enhanced ability data
+  $: battleDefinition = picletInstanceToBattleDefinition(instance);
+  
   // Type-based styling
   const typeData = $derived(TYPE_DATA[instance.primaryType]);
   const typeColor = $derived(typeData.color);
@@ -142,10 +149,17 @@
         </button>
         <button 
           class="tab-button" 
-          class:active={selectedTab === 'actions'}
-          onclick={() => selectedTab = 'actions'}
+          class:active={selectedTab === 'abilities'}
+          onclick={() => selectedTab = 'abilities'}
+        >
+          Abilities
+        </button>
+        <button 
+          class="tab-button" 
+          class:active={selectedTab === 'moves'}
+          onclick={() => selectedTab = 'moves'}
         >
-          Actions
+          Moves
         </button>
       </div>
       
@@ -193,36 +207,35 @@
               </div>
             </div>
           </div>
-        {:else if selectedTab === 'actions'}
+        {:else if selectedTab === 'abilities'}
           <div class="content-card">
-            {#each instance.moves as move, index}
-              <button 
-                class="move-card"
-                onclick={() => toggleMoveExpanded(index)}
-              >
-                <div class="move-header">
-                  <span class="move-name">{move.name}</span>
-                  <div class="move-badges">
-                    {#if move.power > 0}
-                      <span class="power-badge">PWR {move.power}</span>
-                    {/if}
-                  </div>
-                </div>
-                
-                <p class="move-description">{move.description}</p>
-                
-                <div class="move-stats">
-                  <span>Accuracy: {move.accuracy}%</span>
-                  <span>PP: {move.currentPp}/{move.pp}</span>
-                </div>
-                
-                {#if expandedMoves.has(index)}
-                  <div class="move-details">
-                    <p>Type: {move.type}</p>
-                  </div>
-                {/if}
-              </button>
-            {/each}
+            <AbilityDisplay 
+              ability={battleDefinition.specialAbility}
+              expanded={expandedAbility}
+            />
+            
+            <button 
+              class="expand-toggle"
+              onclick={() => expandedAbility = !expandedAbility}
+            >
+              {expandedAbility ? 'Show Less' : 'Show Details'}
+            </button>
+          </div>
+        {:else if selectedTab === 'moves'}
+          <div class="content-card">
+            <div class="moves-list">
+              {#each instance.moves as move, index}
+                <button 
+                  class="move-item"
+                  onclick={() => toggleMoveExpanded(index)}
+                >
+                  <MoveDisplay 
+                    {move}
+                    expanded={expandedMoves.has(index)}
+                  />
+                </button>
+              {/each}
+            </div>
           </div>
         {/if}
       </div>
@@ -588,6 +601,56 @@
     width: 100%;
   }
   
+  /* Enhanced ability and move display styles */
+  .expand-toggle {
+    width: 100%;
+    padding: 10px;
+    margin-top: 12px;
+    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .expand-toggle:hover {
+    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+  }
+  
+  .expand-toggle:active {
+    transform: translateY(0);
+  }
+  
+  .moves-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .move-item {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    border-radius: 8px;
+    transition: transform 0.2s ease;
+  }
+  
+  .move-item:hover {
+    transform: translateY(-1px);
+  }
+  
+  .move-item:active {
+    transform: translateY(0);
+  }
+  
   @media (min-width: 768px) {
     .detail-page {
       position: relative;