Janis
b20ec0a363
Reviewed-on: #15 Reviewed-by: lq64 <lq@blackhole.local> Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>
111 lines
2.2 KiB
Vue
111 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import {toRefs} from 'vue'
|
|
import type {Hand, Player} from "@/types/GameSubTypes.ts";
|
|
|
|
const props = defineProps<{
|
|
hand: Hand
|
|
isHandInactive?: boolean
|
|
self: Player | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'play-card', idx: number): void
|
|
(e: 'skip-dog'): void
|
|
}>()
|
|
|
|
const { hand, isHandInactive, self } = toRefs(props)
|
|
|
|
function handlePlayCard(idx: number | null) {
|
|
if (idx === null) return
|
|
if (isHandInactive?.value) return
|
|
emit('play-card', idx)
|
|
}
|
|
|
|
function handleSkipDogLife() {
|
|
emit('skip-dog')
|
|
}
|
|
|
|
function getCardImagePath(cardPath: string) {
|
|
if (!cardPath) return ''
|
|
if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
|
|
return `/${cardPath}`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bottom-div hand-container">
|
|
<div id="card-slide" :class="'ingame-cards-slide ' + (isHandInactive ? 'inactive' : '' )">
|
|
<div class="cards-row">
|
|
<div v-for="card in hand.cards" :key="card.identifier" class="handcard">
|
|
<div class="card-btn" @click="handlePlayCard(card.idx)" aria-label="Play card">
|
|
<q-img :src="getCardImagePath(card.path)" :alt="card.identifier" class="card" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="self?.dogLife" class="dog-actions">
|
|
<q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bottom-div {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
max-width: 1400px;
|
|
width: 100%;
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 10px;
|
|
}
|
|
.hand-container {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
.ingame-cards-slide {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.cards-row {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 8px;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
.handcard {
|
|
border-radius: 6px;
|
|
}
|
|
.card-btn {
|
|
padding: 0;
|
|
min-width: 0;
|
|
border-radius: 6px;
|
|
}
|
|
.inactive {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
.dog-actions {
|
|
margin-top: 8px;
|
|
}
|
|
.handcard :hover {
|
|
box-shadow: 3px 3px 3px #000000;
|
|
}
|
|
.card {
|
|
width:120px;
|
|
border-radius:6px
|
|
}
|
|
|
|
@media (max-height: 500px) {
|
|
.card {
|
|
width: 80px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
</style>
|