83 lines
1.4 KiB
Vue
83 lines
1.4 KiB
Vue
<template>
|
|
<div class="player-card">
|
|
<img :src="player?.headshot" alt="Player Headshot" class="headshot" />
|
|
|
|
<h2 class="name">{{ player?.name }}</h2>
|
|
|
|
<p class="franchise">{{ player?.franchise }}</p>
|
|
|
|
<img :src="player?.image" alt="Player Card Image" class="card-image" />
|
|
|
|
<div class="rarity" :style="{ backgroundColor: '#' + player.rarity.color }">
|
|
{{ player.rarity.name }}
|
|
</div>
|
|
|
|
<p class="description">Description: {{ player?.description }}</p>
|
|
|
|
<p class="cost">Cost: {{ player?.cost }}₼</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Player } from '~/types/Player';
|
|
|
|
const props = defineProps<{
|
|
player: Player
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.player-card {
|
|
max-width: 400px;
|
|
background: var(--pico-card-background-color);
|
|
border-radius: var(--pico-border-radius);
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.headshot {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
margin: 0 auto 8px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 1.5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.franchise {
|
|
color: #666;
|
|
font-size: 1rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.card-image {
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.rarity {
|
|
color: white;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.description {
|
|
font-size: 0.9rem;
|
|
color: #555;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.cost {
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
}
|
|
</style>
|