|
|
<script lang="ts"> |
|
|
import type { PicletInstance } from '$lib/db/schema'; |
|
|
import { TYPE_DATA } from '$lib/types/picletTypes'; |
|
|
import { picletInstanceToBattleDefinition } from '$lib/utils/battleConversion'; |
|
|
|
|
|
interface Props { |
|
|
piclet: PicletInstance; |
|
|
size?: number; |
|
|
onClick?: () => void; |
|
|
} |
|
|
|
|
|
let { piclet, size = 100, onClick }: Props = $props(); |
|
|
|
|
|
const hpPercentage = $derived(piclet.currentHp / piclet.maxHp); |
|
|
const hpColor = $derived( |
|
|
hpPercentage > 0.5 ? '#34c759' : |
|
|
hpPercentage > 0.25 ? '#ffcc00' : |
|
|
'#ff3b30' |
|
|
); |
|
|
|
|
|
const typeColor = $derived(TYPE_DATA[piclet.primaryType].color); |
|
|
const softTypeColor = $derived(`${typeColor}20`); |
|
|
|
|
|
|
|
|
const battleDefinition = $derived(picletInstanceToBattleDefinition(piclet)); |
|
|
const ability = $derived(battleDefinition.specialAbility); |
|
|
</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.nickname || 'Piclet'} |
|
|
class="piclet-image" |
|
|
style="width: {size * 0.8}px; height: {size * 0.8}px;" |
|
|
/> |
|
|
<div class="level-badge"> |
|
|
Lv.{piclet.level} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="details-section"> |
|
|
<p class="nickname">{piclet.nickname || 'Unknown'}</p> |
|
|
<div class="hp-section"> |
|
|
<span class="hp-text">HP: {piclet.currentHp}/{piclet.maxHp}</span> |
|
|
<div class="hp-bar"> |
|
|
<div |
|
|
class="hp-fill" |
|
|
style="width: {hpPercentage * 100}%; background-color: {hpColor};" |
|
|
></div> |
|
|
</div> |
|
|
</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; |
|
|
} |
|
|
|
|
|
.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; |
|
|
color: black; |
|
|
} |
|
|
|
|
|
.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 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; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hp-fill { |
|
|
height: 100%; |
|
|
border-radius: 1.5px; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
</style> |
