src/lib/components/Piclets/DiscoveredCard.svelte

<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>