|
|
<script lang="ts"> |
|
|
import type { PicletInstance } from '$lib/db/schema'; |
|
|
import { TYPE_DATA } from '$lib/types/picletTypes'; |
|
|
|
|
|
interface Props { |
|
|
piclet: PicletInstance; |
|
|
size?: number; |
|
|
onClick?: () => void; |
|
|
} |
|
|
|
|
|
let { piclet, size = 100, onClick }: Props = $props(); |
|
|
|
|
|
const typeColor = $derived(TYPE_DATA[piclet.primaryType]?.color || '#6c757d'); |
|
|
const softTypeColor = $derived(`${typeColor}20`); |
|
|
</script> |
|
|
|
|
|
<button |
|
|
class="piclet-card" |
|
|
style="width: {size}px; height: {size + 40}px; --type-color: {typeColor}; --soft-type-color: {softTypeColor};" |
|
|
onclick={onClick} |
|
|
type="button" |
|
|
> |
|
|
<div class="image-container"> |
|
|
<img |
|
|
src={piclet.imageData || piclet.imageUrl} |
|
|
alt={piclet.typeId || 'Piclet'} |
|
|
class="piclet-image" |
|
|
style="width: {size * 0.8}px; height: {size * 0.8}px;" |
|
|
/> |
|
|
<div class="tier-badge tier-{piclet.tier}"> |
|
|
{piclet.tier} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="details-section"> |
|
|
<p class="nickname">{piclet.typeId}</p> |
|
|
<div class="types-section"> |
|
|
<span class="type primary">{piclet.primaryType}</span> |
|
|
</div> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
<style> |
|
|
.piclet-card { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
background: var(--type-color, #007bff); |
|
|
border-radius: 12px; |
|
|
border: 2px solid; |
|
|
border-color: var(--type-color, #007bff); |
|
|
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 { |
|
|
width: 100%; |
|
|
flex: 1; |
|
|
position: relative; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 10px 10px 0 0; |
|
|
overflow: hidden; |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
} |
|
|
|
|
|
.piclet-image { |
|
|
object-fit: contain; |
|
|
} |
|
|
|
|
|
.tier-badge { |
|
|
position: absolute; |
|
|
top: 4px; |
|
|
right: 4px; |
|
|
padding: 2px 6px; |
|
|
border-radius: 8px; |
|
|
font-size: 9px; |
|
|
font-weight: bold; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.tier-low { background: #6c757d; color: white; } |
|
|
.tier-medium { background: #28a745; color: white; } |
|
|
.tier-high { background: #fd7e14; color: white; } |
|
|
.tier-legendary { background: #dc3545; color: white; } |
|
|
|
|
|
.details-section { |
|
|
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; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.nickname { |
|
|
margin: 0 0 4px 0; |
|
|
font-size: 11px; |
|
|
font-weight: 600; |
|
|
text-align: center; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.types-section { |
|
|
display: flex; |
|
|
gap: 4px; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.type { |
|
|
font-size: 8px; |
|
|
padding: 1px 4px; |
|
|
border-radius: 4px; |
|
|
font-weight: 500; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.type.primary { |
|
|
background: var(--type-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.type.secondary { |
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
color: #666; |
|
|
} |
|
|
</style> |
