update pictuary

src/lib/components/Pages/Pictuary.svelte

@@ -1,26 +1,81 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { getAllMonsters } from '$lib/db/monsters';
-  import type { Monster } from '$lib/db/schema';
+  import { getAllPicletInstances, getRosterPiclets } from '$lib/db/piclets';
+  import type { Monster, PicletInstance } from '$lib/db/schema';
+  import PicletCard from '../Piclets/PicletCard.svelte';
+  import EmptySlotCard from '../Piclets/EmptySlotCard.svelte';
+  import DiscoveredCard from '../Piclets/DiscoveredCard.svelte';
   
-  let monsters: Monster[] = $state([]);
+  let rosterPiclets: PicletInstance[] = $state([]);
+  let storagePiclets: PicletInstance[] = $state([]);
+  let discoveredMonsters: Monster[] = $state([]);
   let isLoading = $state(true);
   
+  // Map roster positions for easy access
+  let rosterMap = $derived(() => {
+    const map = new Map<number, PicletInstance>();
+    rosterPiclets.forEach(piclet => {
+      if (piclet.rosterPosition !== undefined) {
+        map.set(piclet.rosterPosition, piclet);
+      }
+    });
+    return map;
+  });
+  
   onMount(async () => {
     try {
-      monsters = await getAllMonsters();
+      // Load all piclet instances
+      const allInstances = await getAllPicletInstances();
+      
+      // Separate roster and storage
+      rosterPiclets = allInstances.filter(p => p.isInRoster);
+      storagePiclets = allInstances.filter(p => !p.isInRoster);
+      
+      // Load all discovered monsters (for now, all generated monsters)
+      // In a real game, this would track which monsters have been encountered
+      const allMonsters = await getAllMonsters();
+      
+      // Filter out monsters that have been caught (have instances)
+      const caughtTypeIds = new Set(allInstances.map(p => p.typeId));
+      discoveredMonsters = allMonsters.filter(m => 
+        !caughtTypeIds.has(m.name.toLowerCase().replace(/\s+/g, '-'))
+      );
     } catch (err) {
-      console.error('Failed to load monsters:', err);
+      console.error('Failed to load piclets:', err);
     } finally {
       isLoading = false;
     }
   });
+  
+  function handleRosterClick(position: number) {
+    const piclet = rosterMap().get(position);
+    if (piclet) {
+      // TODO: Navigate to piclet detail page
+      console.log('View piclet:', piclet);
+    } else {
+      // TODO: Show add to roster dialog
+      console.log('Add piclet to position:', position);
+    }
+  }
+  
+  function handleStorageClick(piclet: PicletInstance) {
+    // TODO: Navigate to piclet detail page
+    console.log('View storage piclet:', piclet);
+  }
+  
+  function handleDiscoveredClick(monster: Monster) {
+    // TODO: Navigate to discovered piclet detail page
+    console.log('View discovered monster:', monster);
+  }
 </script>
 
 <div class="pictuary-page">
   <header class="page-header">
-    <h2>Your Pictuary</h2>
-    <p class="monster-count">{monsters.length} Piclets collected</p>
+    <h1>Pictuary</h1>
+    <p class="piclet-count">
+      {rosterPiclets.length + storagePiclets.length} Piclets collected
+    </p>
   </header>
   
   {#if isLoading}
@@ -28,31 +83,79 @@
       <div class="spinner"></div>
       <p>Loading collection...</p>
     </div>
-  {:else if monsters.length === 0}
+  {:else if rosterPiclets.length === 0 && storagePiclets.length === 0 && discoveredMonsters.length === 0}
     <div class="empty-state">
-      <img 
-        src="https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/pictuary_logo.png" 
-        alt="Pictuary" 
-        class="empty-icon"
-      />
+      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
+        <circle cx="12" cy="13" r="4"></circle>
+      </svg>
       <h3>No Piclets Yet</h3>
-      <p>Start scanning photos to build your collection!</p>
+      <p>Take photos to discover new Piclets!</p>
     </div>
   {:else}
-    <div class="monster-grid">
-      {#each monsters as monster}
-        <div class="monster-card">
-          <img 
-            src={monster.imageData || monster.imageUrl} 
-            alt={monster.name}
-            class="monster-image"
-          />
-          <h4 class="monster-name">{monster.name}</h4>
-          <p class="monster-date">
-            {new Date(monster.createdAt).toLocaleDateString()}
-          </p>
+    <div class="content">
+      <!-- Roster Section -->
+      <section class="roster-section">
+        <h2>Roster</h2>
+        <div class="roster-grid">
+          {#each Array(6) as _, position}
+            {#if rosterMap().has(position)}
+              <PicletCard 
+                instance={rosterMap().get(position)!}
+                size={100}
+                onClick={() => handleRosterClick(position)}
+              />
+            {:else}
+              <EmptySlotCard 
+                size={100}
+                onClick={() => handleRosterClick(position)}
+              />
+            {/if}
+          {/each}
         </div>
-      {/each}
+      </section>
+      
+      <!-- Storage Section -->
+      {#if storagePiclets.length > 0}
+        <section class="storage-section">
+          <div class="section-header">
+            <h2>Storage ({storagePiclets.length})</h2>
+            {#if storagePiclets.length > 10}
+              <button class="view-all-btn">View All</button>
+            {/if}
+          </div>
+          <div class="horizontal-scroll">
+            {#each storagePiclets.slice(0, 10) as piclet}
+              <PicletCard 
+                instance={piclet}
+                size={100}
+                onClick={() => handleStorageClick(piclet)}
+              />
+            {/each}
+          </div>
+        </section>
+      {/if}
+      
+      <!-- Discovered Section -->
+      {#if discoveredMonsters.length > 0}
+        <section class="discovered-section">
+          <div class="section-header">
+            <h2>Discovered ({discoveredMonsters.length})</h2>
+            {#if discoveredMonsters.length > 10}
+              <button class="view-all-btn">View All</button>
+            {/if}
+          </div>
+          <div class="horizontal-scroll">
+            {#each discoveredMonsters.slice(0, 10) as monster}
+              <DiscoveredCard 
+                {monster}
+                size={100}
+                onClick={() => handleDiscoveredClick(monster)}
+              />
+            {/each}
+          </div>
+        </section>
+      {/if}
     </div>
   {/if}
 </div>
@@ -62,24 +165,26 @@
     height: 100%;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    background: white;
   }
   
   .page-header {
-    padding: 1.5rem 1rem;
+    padding: 1rem;
+    padding-top: 0.5rem;
     background: white;
-    border-bottom: 1px solid #eee;
     position: sticky;
     top: 0;
     z-index: 10;
   }
   
-  .page-header h2 {
+  .page-header h1 {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: 1.75rem;
+    font-weight: bold;
     color: #333;
   }
   
-  .monster-count {
+  .piclet-count {
     margin: 0.25rem 0 0;
     color: #666;
     font-size: 0.9rem;
@@ -106,14 +211,15 @@
     margin-bottom: 1rem;
   }
   
-  .empty-icon {
-    width: 80px;
-    opacity: 0.5;
+  .empty-state svg {
+    color: #8e8e93;
     margin-bottom: 1rem;
   }
   
   .empty-state h3 {
     margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
     color: #333;
   }
   
@@ -122,45 +228,68 @@
     color: #666;
   }
   
-  .monster-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 1rem;
-    padding: 1rem;
+  .content {
+    padding: 0 1rem 100px;
   }
   
-  .monster-card {
-    background: white;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s;
+  section {
+    margin-bottom: 2rem;
   }
   
-  .monster-card:active {
-    transform: scale(0.95);
+  section h2 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #8e8e93;
+    margin: 0 0 0.75rem;
   }
   
-  .monster-image {
-    width: 100%;
-    aspect-ratio: 1;
-    object-fit: contain;
-    background: #f0f0f0;
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
   }
   
-  .monster-name {
+  .section-header h2 {
     margin: 0;
-    padding: 0.75rem;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: #333;
   }
   
-  .monster-date {
-    margin: 0;
-    padding: 0 0.75rem 0.75rem;
-    font-size: 0.75rem;
-    color: #999;
+  .view-all-btn {
+    background: none;
+    border: none;
+    color: #007bff;
+    font-size: 1rem;
+    cursor: pointer;
+    padding: 0;
+  }
+  
+  .roster-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 12px;
+  }
+  
+  .horizontal-scroll {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 8px;
+  }
+  
+  .horizontal-scroll::-webkit-scrollbar {
+    height: 4px;
+  }
+  
+  .horizontal-scroll::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 2px;
+  }
+  
+  .horizontal-scroll::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 2px;
   }
   
   @keyframes spin {

src/lib/components/Piclets/DiscoveredCard.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { Monster } from '$lib/db/schema';
+  
+  interface Props {
+    monster: Monster;
+    size?: number;
+    onClick?: () => void;
+  }
+  
+  let { monster, size = 100, onClick }: Props = $props();
+  
+  // Default type color
+  const typeColor = '#007bff';
+</script>
+
+<button 
+  class="discovered-card" 
+  style="width: {size}px; height: {size + 30}px;"
+  onclick={onClick}
+  type="button"
+>
+  <div class="image-container" style="background-color: {typeColor}10;">
+    <img 
+      src={monster.imageData || monster.imageUrl} 
+      alt={monster.name}
+      class="piclet-image"
+      style="width: {size * 0.9}px; height: {size * 0.9}px;"
+    />
+  </div>
+  
+  <div class="name-section">
+    <p class="name">{monster.name}</p>
+  </div>
+</button>
+
+<style>
+  .discovered-card {
+    display: flex;
+    flex-direction: column;
+    background: white;
+    border-radius: 12px;
+    border: 2px solid;
+    border-color: color-mix(in srgb, var(--type-color, #007bff) 30%, transparent);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 0;
+    cursor: pointer;
+    transition: transform 0.2s;
+    opacity: 0.8;
+  }
+  
+  .discovered-card:active {
+    transform: scale(0.95);
+  }
+  
+  .image-container {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px 10px 0 0;
+    overflow: hidden;
+  }
+  
+  .piclet-image {
+    object-fit: contain;
+    filter: brightness(0.9);
+  }
+  
+  .name-section {
+    height: 30px;
+    padding: 4px 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .name {
+    margin: 0;
+    font-size: 11px;
+    font-weight: 600;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

src/lib/components/Piclets/EmptySlotCard.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  interface Props {
+    size?: number;
+    isHighlighted?: boolean;
+    onClick?: () => void;
+  }
+  
+  let { size = 100, isHighlighted = false, onClick }: Props = $props();
+</script>
+
+<button 
+  class="empty-slot"
+  class:highlighted={isHighlighted}
+  style="width: {size}px; height: {size}px;"
+  onclick={onClick}
+  type="button"
+>
+  <svg 
+    width="32" 
+    height="32" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    stroke-width="2"
+  >
+    {#if isHighlighted}
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 8v8m-4-4h8" />
+    {:else}
+      <path d="M12 5v14m-7-7h14" />
+    {/if}
+  </svg>
+</button>
+
+<style>
+  .empty-slot {
+    background: #f5f5f5;
+    border: 2px dashed #d1d1d6;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #8e8e93;
+    transition: all 0.2s;
+  }
+  
+  .empty-slot:hover {
+    background: #e5e5ea;
+  }
+  
+  .empty-slot:active {
+    transform: scale(0.95);
+  }
+  
+  .empty-slot.highlighted {
+    background: rgba(0, 123, 255, 0.1);
+    border-color: #007bff;
+    color: #007bff;
+  }
+</style>

src/lib/components/Piclets/PicletCard.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { PicletInstance } from '$lib/db/schema';
+  
+  interface Props {
+    instance: PicletInstance;
+    size?: number;
+    showDetails?: boolean;
+    onClick?: () => void;
+  }
+  
+  let { instance, size = 100, showDetails = true, onClick }: Props = $props();
+  
+  const hpPercentage = $derived(instance.currentHp / instance.maxHp);
+  const hpColor = $derived(
+    hpPercentage > 0.5 ? '#34c759' : 
+    hpPercentage > 0.25 ? '#ffcc00' : 
+    '#ff3b30'
+  );
+  
+  // Default type color - we'll enhance this later with a proper type system
+  const typeColor = '#007bff';
+</script>
+
+<button 
+  class="piclet-card" 
+  style="width: {size}px; height: {size + (showDetails ? 40 : 0)}px;"
+  onclick={onClick}
+  type="button"
+>
+  <div class="image-container" style="background-color: {typeColor}10;">
+    <img 
+      src={instance.imageData || instance.imageUrl} 
+      alt={instance.nickname || 'Piclet'}
+      class="piclet-image"
+      style="width: {size * 0.9}px; height: {size * 0.9}px;"
+    />
+    <div class="level-badge">
+      Lv.{instance.level}
+    </div>
+  </div>
+  
+  {#if showDetails}
+    <div class="details-section">
+      <p class="nickname">{instance.nickname || 'Unknown'}</p>
+      <div class="hp-bar">
+        <div 
+          class="hp-fill" 
+          style="width: {hpPercentage * 100}%; background-color: {hpColor};"
+        ></div>
+      </div>
+    </div>
+  {/if}
+</button>
+
+<style>
+  .piclet-card {
+    display: flex;
+    flex-direction: column;
+    background: white;
+    border-radius: 12px;
+    border: 2px solid;
+    border-color: color-mix(in srgb, var(--type-color, #007bff) 30%, transparent);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 0;
+    cursor: pointer;
+    transition: transform 0.2s;
+  }
+  
+  .piclet-card:active {
+    transform: scale(0.95);
+  }
+  
+  .image-container {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px 10px 0 0;
+    overflow: hidden;
+  }
+  
+  .piclet-image {
+    object-fit: contain;
+  }
+  
+  .level-badge {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 2px 6px;
+    border-radius: 8px;
+    font-size: 10px;
+    font-weight: bold;
+  }
+  
+  .details-section {
+    height: 40px;
+    padding: 4px 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .nickname {
+    margin: 0;
+    font-size: 11px;
+    font-weight: 600;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .hp-bar {
+    height: 3px;
+    background: #f0f0f0;
+    border-radius: 1.5px;
+    margin-top: 2px;
+    overflow: hidden;
+  }
+  
+  .hp-fill {
+    height: 100%;
+    border-radius: 1.5px;
+    transition: width 0.3s ease;
+  }
+</style>