Vue rewrite
This commit is contained in:
196
src/components/maumau/game/Card.vue
Normal file
196
src/components/maumau/game/Card.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user