update display

src/lib/components/Pages/Pictuary.svelte

@@ -200,7 +200,7 @@
             <RosterSlot
               {position}
               piclet={rosterMap().get(position)}
-              size={100}
+              size={110}
               onDrop={handleRosterDrop}
               onPicletClick={(piclet) => handleRosterClick(position)}
               onEmptyClick={handleRosterClick}
@@ -224,8 +224,7 @@
             {#each storagePiclets.slice(0, 10) as piclet}
               <DraggablePicletCard
                 instance={piclet}
-                size={100}
-                showDetails={true}
+                size={110}
                 onClick={() => handleStorageClick(piclet)}
                 onDragStart={handleDragStart}
                 onDragEnd={handleDragEnd}

src/lib/components/Piclets/DraggablePicletCard.svelte

@@ -5,13 +5,12 @@
   interface Props {
     instance: PicletInstance;
     size?: number;
-    showDetails?: boolean;
     onDragStart?: (instance: PicletInstance) => void;
     onDragEnd?: () => void;
     onClick?: () => void;
   }
   
-  let { instance, size = 100, showDetails = true, onDragStart, onDragEnd, onClick }: Props = $props();
+  let { instance, size = 100, onDragStart, onDragEnd, onClick }: Props = $props();
   
   let isDragging = $state(false);
   
@@ -53,7 +52,7 @@
   role="button"
   tabindex="0"
 >
-  <PicletCard {instance} {size} {showDetails} {onClick} />
+  <PicletCard {instance} {size} {onClick} />
 </div>
 
 <style>

src/lib/components/Piclets/PicletCard.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
   import type { PicletInstance } from '$lib/db/schema';
   import { TYPE_DATA } from '$lib/types/picletTypes';
-  import TypeBadge from '$lib/components/UI/TypeBadge.svelte';
   
   interface Props {
     instance: PicletInstance;
     size?: number;
-    showDetails?: boolean;
     onClick?: () => void;
   }
   
-  let { instance, size = 100, showDetails = true, onClick }: Props = $props();
+  let { instance, size = 100, onClick }: Props = $props();
   
   const hpPercentage = $derived(instance.currentHp / instance.maxHp);
   const hpColor = $derived(
@@ -20,35 +18,31 @@
   );
   
   const typeColor = $derived(TYPE_DATA[instance.primaryType].color);
+  const softTypeColor = $derived(`${typeColor}20`); // Add 20% opacity for soft background
 </script>
 
 <button 
   class="piclet-card" 
-  style="width: {size}px; height: {size + 30}px; --type-color: {typeColor};"
+  style="width: {size}px; height: {size + 40}px; --type-color: {typeColor}; --soft-type-color: {softTypeColor};"
   onclick={onClick}
   type="button"
 >
-  <div class="image-container" style="background-color: {typeColor}10;">
+  <div class="image-container">
     <img 
       src={instance.imageData || instance.imageUrl} 
       alt={instance.nickname || 'Piclet'}
       class="piclet-image"
-      style="width: {size * 0.9}px; height: {size * 0.9}px;"
+      style="width: {size * 0.8}px; height: {size * 0.8}px;"
     />
     <div class="level-badge">
       Lv.{instance.level}
     </div>
-    <div class="type-badge-container">
-      <TypeBadge type={instance.primaryType} size="small" />
-      {#if instance.secondaryType}
-        <TypeBadge type={instance.secondaryType} size="small" />
-      {/if}
-    </div>
   </div>
   
-  {#if showDetails}
-    <div class="details-section">
-      <p class="nickname">{instance.nickname || 'Unknown'}</p>
+  <div class="details-section">
+    <p class="nickname">{instance.nickname || 'Unknown'}</p>
+    <div class="hp-section">
+      <span class="hp-text">HP: {instance.currentHp}/{instance.maxHp}</span>
       <div class="hp-bar">
         <div 
           class="hp-fill" 
@@ -56,14 +50,14 @@
         ></div>
       </div>
     </div>
-  {/if}
+  </div>
 </button>
 
 <style>
   .piclet-card {
     display: flex;
     flex-direction: column;
-    background: white;
+    background: var(--soft-type-color, #f0f0f0);
     border-radius: 12px;
     border: 2px solid;
     border-color: var(--type-color, #007bff);
@@ -86,6 +80,7 @@
     justify-content: center;
     border-radius: 10px 10px 0 0;
     overflow: hidden;
+    background: rgba(255, 255, 255, 0.7);
   }
   
   .piclet-image {
@@ -103,37 +98,44 @@
     font-weight: bold;
   }
   
-  .type-badge-container {
-    position: absolute;
-    bottom: 4px;
-    left: 4px;
-    display: flex;
-    gap: 2px;
-  }
-  
   .details-section {
-    height: 40px;
-    padding: 4px 6px;
+    height: 50px;
+    padding: 6px 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 0 0 10px 10px;
   }
   
   .nickname {
-    margin: 0;
-    font-size: 11px;
+    margin: 0 0 2px 0;
+    font-size: 10px;
     font-weight: 600;
     text-align: center;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: #333;
+  }
+  
+  .hp-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+  
+  .hp-text {
+    font-size: 8px;
+    font-weight: 500;
+    text-align: center;
+    color: #666;
   }
   
   .hp-bar {
     height: 3px;
     background: #f0f0f0;
     border-radius: 1.5px;
-    margin-top: 2px;
     overflow: hidden;
   }
   

src/lib/components/Piclets/RosterSlot.svelte

@@ -79,7 +79,6 @@
     <DraggablePicletCard 
       instance={piclet}
       {size}
-      showDetails={false}
       onClick={handleClick}
       {onDragStart}
       {onDragEnd}

src/lib/components/UI/TypeBadge.svelte

@@ -1,125 +0,0 @@
-<script lang="ts">
-  import type { PicletType } from '$lib/types/picletTypes';
-  import { TYPE_DATA, PicletType as PicletTypeEnum } from '$lib/types/picletTypes';
-  
-  interface Props {
-    type: PicletType | string | undefined;
-    size?: 'small' | 'medium' | 'large';
-    showIcon?: boolean;
-    showLabel?: boolean;
-  }
-  
-  let { type, size = 'medium', showIcon = true, showLabel = false }: Props = $props();
-  
-  // Safely get type info with fallback for invalid types
-  const typeInfo = $derived(() => {
-    // Handle undefined or null
-    if (!type) {
-      return TYPE_DATA[PicletTypeEnum.BEAST]; // Default fallback
-    }
-    
-    // Check if type exists in TYPE_DATA
-    const typeData = TYPE_DATA[type as PicletType];
-    if (typeData) {
-      return typeData;
-    }
-    
-    // Handle legacy string types by mapping them
-    const legacyTypeMap: Record<string, PicletType> = {
-      'normal': PicletTypeEnum.BEAST,
-      'fire': PicletTypeEnum.BEAST,
-      'water': PicletTypeEnum.AQUATIC,
-      'electric': PicletTypeEnum.MACHINA,
-      'grass': PicletTypeEnum.FLORA,
-      'ice': PicletTypeEnum.MINERAL,
-      'fighting': PicletTypeEnum.BEAST,
-      'poison': PicletTypeEnum.FLORA,
-      'ground': PicletTypeEnum.MINERAL,
-      'flying': PicletTypeEnum.BEAST,
-      'psychic': PicletTypeEnum.SPACE,
-      'bug': PicletTypeEnum.BUG,
-      'rock': PicletTypeEnum.MINERAL,
-      'ghost': PicletTypeEnum.SPACE,
-      'dragon': PicletTypeEnum.BEAST,
-      'dark': PicletTypeEnum.SPACE,
-      'steel': PicletTypeEnum.MACHINA,
-      'fairy': PicletTypeEnum.CULTURE
-    };
-    
-    const mappedType = legacyTypeMap[type as string];
-    if (mappedType) {
-      return TYPE_DATA[mappedType];
-    }
-    
-    // Final fallback
-    return TYPE_DATA[PicletTypeEnum.BEAST];
-  });
-  
-  const sizeClass = $derived(`size-${size}`);
-</script>
-
-<div class="type-badge {sizeClass}" style="--type-color: {typeInfo().color}">
-  {#if showIcon}
-    <span class="type-icon">{typeInfo().icon}</span>
-  {/if}
-  {#if showLabel}
-    <span class="type-label">{typeInfo().name}</span>
-  {/if}
-</div>
-
-<style>
-  .type-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    background-color: var(--type-color);
-    color: white;
-    border-radius: 12px;
-    font-weight: 600;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    border: 1px solid color-mix(in srgb, var(--type-color) 80%, black);
-  }
-  
-  .size-small {
-    padding: 2px 4px;
-    font-size: 10px;
-    border-radius: 8px;
-  }
-  
-  .size-medium {
-    padding: 3px 6px;
-    font-size: 11px;
-    border-radius: 10px;
-  }
-  
-  .size-large {
-    padding: 4px 8px;
-    font-size: 12px;
-    border-radius: 12px;
-  }
-  
-  .type-icon {
-    line-height: 1;
-    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
-  }
-  
-  .type-label {
-    line-height: 1;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-  
-  .size-small .type-icon {
-    font-size: 8px;
-  }
-  
-  .size-medium .type-icon {
-    font-size: 10px;
-  }
-  
-  .size-large .type-icon {
-    font-size: 12px;
-  }
-</style>