src/lib/components/Pages/Pictuary.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { getAllMonsters } from '$lib/db/monsters';
  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 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 {
      // 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 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">
    <h1>Pictuary</h1>
    <p class="piclet-count">
      {rosterPiclets.length + storagePiclets.length} Piclets collected
    </p>
  </header>
  
  {#if isLoading}
    <div class="loading-state">
      <div class="spinner"></div>
      <p>Loading collection...</p>
    </div>
  {:else if rosterPiclets.length === 0 && storagePiclets.length === 0 && discoveredMonsters.length === 0}
    <div class="empty-state">
      <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>Take photos to discover new Piclets!</p>
    </div>
  {:else}
    <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>
      </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>

<style>
  .pictuary-page {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
  }
  
  .page-header {
    padding: 1rem;
    padding-top: 0.5rem;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  .page-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: bold;
    color: #333;
  }
  
  .piclet-count {
    margin: 0.25rem 0 0;
    color: #666;
    font-size: 0.9rem;
  }
  
  .loading-state,
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 100px);
    padding: 2rem;
    text-align: center;
  }
  
  .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
  }
  
  .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;
  }
  
  .empty-state p {
    margin: 0;
    color: #666;
  }
  
  .content {
    padding: 0 1rem 100px;
  }
  
  section {
    margin-bottom: 2rem;
  }
  
  section h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #8e8e93;
    margin: 0 0 0.75rem;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .section-header h2 {
    margin: 0;
  }
  
  .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 {
    to { transform: rotate(360deg); }
  }
</style>