196 lines
7.5 KiB
Vue
196 lines
7.5 KiB
Vue
<script setup lang="ts">
|
|
import StylessButton from "@/components/button/StylessButton.vue";
|
|
import type {ICard} from "@/types/card.type";
|
|
import {computed} from "vue";
|
|
|
|
const props = withDefaults(defineProps<{
|
|
card?: ICard,
|
|
clickable?: boolean,
|
|
hoverable?: boolean
|
|
}>(), {
|
|
clickable: p => p.card !== undefined
|
|
});
|
|
|
|
const emits = defineEmits<{
|
|
(event: 'click', card?: ICard): void
|
|
}>();
|
|
|
|
const imageUrl = computed(() => {
|
|
if (!props.card) {
|
|
return new URL("@/assets/cards/back.png", import.meta.url).href;
|
|
}
|
|
|
|
// I hate this with a passion, but vite doesn't want to resolve dynamic paths >:(
|
|
switch (props.card.type) {
|
|
case "SPADES":
|
|
switch (props.card.value) {
|
|
case "TWO":
|
|
return new URL("@/assets/cards/spades_two.png", import.meta.url).href;
|
|
case "THREE":
|
|
return new URL("@/assets/cards/spades_three.png", import.meta.url).href;
|
|
case "FOUR":
|
|
return new URL("@/assets/cards/spades_four.png", import.meta.url).href;
|
|
case "FIVE":
|
|
return new URL("@/assets/cards/spades_five.png", import.meta.url).href;
|
|
case "SIX":
|
|
return new URL("@/assets/cards/spades_six.png", import.meta.url).href;
|
|
case "SEVEN":
|
|
return new URL("@/assets/cards/spades_seven.png", import.meta.url).href;
|
|
case "EIGHT":
|
|
return new URL("@/assets/cards/spades_eight.png", import.meta.url).href;
|
|
case "NINE":
|
|
return new URL("@/assets/cards/spades_nine.png", import.meta.url).href;
|
|
case "TEN":
|
|
return new URL("@/assets/cards/spades_ten.png", import.meta.url).href;
|
|
case "JACK":
|
|
return new URL("@/assets/cards/spades_jack.png", import.meta.url).href;
|
|
case "QUEEN":
|
|
return new URL("@/assets/cards/spades_queen.png", import.meta.url).href;
|
|
case "KING":
|
|
return new URL("@/assets/cards/spades_king.png", import.meta.url).href;
|
|
case "ACE":
|
|
return new URL("@/assets/cards/spades_ace.png", import.meta.url).href;
|
|
default:
|
|
return new URL("@/assets/cards/back.png", import.meta.url).href;
|
|
}
|
|
case "HEARTS":
|
|
switch (props.card.value) {
|
|
case "TWO":
|
|
return new URL("@/assets/cards/hearts_two.png", import.meta.url).href;
|
|
case "THREE":
|
|
return new URL("@/assets/cards/hearts_three.png", import.meta.url).href;
|
|
case "FOUR":
|
|
return new URL("@/assets/cards/hearts_four.png", import.meta.url).href;
|
|
case "FIVE":
|
|
return new URL("@/assets/cards/hearts_five.png", import.meta.url).href;
|
|
case "SIX":
|
|
return new URL("@/assets/cards/hearts_six.png", import.meta.url).href;
|
|
case "SEVEN":
|
|
return new URL("@/assets/cards/hearts_seven.png", import.meta.url).href;
|
|
case "EIGHT":
|
|
return new URL("@/assets/cards/hearts_eight.png", import.meta.url).href;
|
|
case "NINE":
|
|
return new URL("@/assets/cards/hearts_nine.png", import.meta.url).href;
|
|
case "TEN":
|
|
return new URL("@/assets/cards/hearts_ten.png", import.meta.url).href;
|
|
case "JACK":
|
|
return new URL("@/assets/cards/hearts_jack.png", import.meta.url).href;
|
|
case "QUEEN":
|
|
return new URL("@/assets/cards/hearts_queen.png", import.meta.url).href;
|
|
case "KING":
|
|
return new URL("@/assets/cards/hearts_king.png", import.meta.url).href;
|
|
case "ACE":
|
|
return new URL("@/assets/cards/hearts_ace.png", import.meta.url).href;
|
|
default:
|
|
return new URL("@/assets/cards/back.png", import.meta.url).href;
|
|
}
|
|
case "DIAMONDS":
|
|
switch (props.card.value) {
|
|
case "TWO":
|
|
return new URL("@/assets/cards/diamonds_two.png", import.meta.url).href;
|
|
case "THREE":
|
|
return new URL("@/assets/cards/diamonds_three.png", import.meta.url).href;
|
|
case "FOUR":
|
|
return new URL("@/assets/cards/diamonds_four.png", import.meta.url).href;
|
|
case "FIVE":
|
|
return new URL("@/assets/cards/diamonds_five.png", import.meta.url).href;
|
|
case "SIX":
|
|
return new URL("@/assets/cards/diamonds_six.png", import.meta.url).href;
|
|
case "SEVEN":
|
|
return new URL("@/assets/cards/diamonds_seven.png", import.meta.url).href;
|
|
case "EIGHT":
|
|
return new URL("@/assets/cards/diamonds_eight.png", import.meta.url).href;
|
|
case "NINE":
|
|
return new URL("@/assets/cards/diamonds_nine.png", import.meta.url).href;
|
|
case "TEN":
|
|
return new URL("@/assets/cards/diamonds_ten.png", import.meta.url).href;
|
|
case "JACK":
|
|
return new URL("@/assets/cards/diamonds_jack.png", import.meta.url).href;
|
|
case "QUEEN":
|
|
return new URL("@/assets/cards/diamonds_queen.png", import.meta.url).href;
|
|
case "KING":
|
|
return new URL("@/assets/cards/diamonds_king.png", import.meta.url).href;
|
|
case "ACE":
|
|
return new URL("@/assets/cards/diamonds_ace.png", import.meta.url).href;
|
|
default:
|
|
return new URL("@/assets/cards/back.png", import.meta.url).href;
|
|
}
|
|
case "CLUBS":
|
|
switch (props.card.value) {
|
|
case "TWO":
|
|
return new URL("@/assets/cards/clubs_two.png", import.meta.url).href;
|
|
case "THREE":
|
|
return new URL("@/assets/cards/clubs_three.png", import.meta.url).href;
|
|
case "FOUR":
|
|
return new URL("@/assets/cards/clubs_four.png", import.meta.url).href;
|
|
case "FIVE":
|
|
return new URL("@/assets/cards/clubs_five.png", import.meta.url).href;
|
|
case "SIX":
|
|
return new URL("@/assets/cards/clubs_six.png", import.meta.url).href;
|
|
case "SEVEN":
|
|
return new URL("@/assets/cards/clubs_seven.png", import.meta.url).href;
|
|
case "EIGHT":
|
|
return new URL("@/assets/cards/clubs_eight.png", import.meta.url).href;
|
|
case "NINE":
|
|
return new URL("@/assets/cards/clubs_nine.png", import.meta.url).href;
|
|
case "TEN":
|
|
return new URL("@/assets/cards/clubs_ten.png", import.meta.url).href;
|
|
case "JACK":
|
|
return new URL("@/assets/cards/clubs_jack.png", import.meta.url).href;
|
|
case "QUEEN":
|
|
return new URL("@/assets/cards/clubs_queen.png", import.meta.url).href;
|
|
case "KING":
|
|
return new URL("@/assets/cards/clubs_king.png", import.meta.url).href;
|
|
case "ACE":
|
|
return new URL("@/assets/cards/clubs_ace.png", import.meta.url).href;
|
|
default:
|
|
return new URL("@/assets/cards/back.png", import.meta.url).href;
|
|
}
|
|
case "JOKER":
|
|
switch (props.card.value) {
|
|
case "RED":
|
|
return new URL("@/assets/cards/joker_red.png", import.meta.url).href;
|
|
case "BLACK":
|
|
return new URL("@/assets/cards/joker_black.png", import.meta.url).href;
|
|
default:
|
|
return new URL("@/assets/cards/back.png", import.meta.url).href;
|
|
}
|
|
default:
|
|
return new URL("@/assets/cards/back.png", import.meta.url).href;
|
|
}
|
|
});
|
|
|
|
const onClick = () => {
|
|
emits('click', props.card);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<StylessButton class="card" :class="hoverable ? 'card__hover' : ''" :disabled="!clickable" @click="onClick">
|
|
<img class="card__texture" :src="imageUrl" :alt="card?.type + ' ' + card?.value"/>
|
|
</StylessButton>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
width: 100px;
|
|
height: 150px;
|
|
min-width: 100px;
|
|
|
|
&__texture {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
&__hover {
|
|
img {
|
|
transition: margin-top 250ms ease-in-out;
|
|
|
|
&:hover {
|
|
margin-top: -1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |