File size: 1,794 Bytes
00d1c08 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 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> |