Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
97b7df2a75 | ||
| 06f27d6813 |
@@ -98,3 +98,8 @@
|
||||
### Features
|
||||
|
||||
* **ui:** FRO-13 User Component ([#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/18)) ([f05f10e](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/f05f10ea56b21f15cefbc76277ead5806eb1cf18))
|
||||
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.11.0...0.0.0) (2025-12-10)
|
||||
|
||||
### Features
|
||||
|
||||
* FRO-25 Create Game Info Component ([#19](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/19)) ([06f27d6](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/06f27d6813f625af25e734de3dcbcf07b10f3a1a))
|
||||
|
||||
57
src/components/ingame/GameInfo.vue
Normal file
57
src/components/ingame/GameInfo.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script lang="ts" setup>
|
||||
import type {Card} from "@/types/GameSubTypes.ts";
|
||||
import {computed, toRefs} from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
trumpsuit: Card
|
||||
firstCard: Card | null
|
||||
}>()
|
||||
const {trumpsuit, firstCard} = toRefs(props)
|
||||
|
||||
|
||||
|
||||
const trumpName = computed(() => {
|
||||
switch (trumpsuit.value.path.charAt(trumpsuit.value.path.length - 1)) {
|
||||
case 'S':
|
||||
return 'Spades'
|
||||
case 'H':
|
||||
return 'Hearts'
|
||||
case 'D':
|
||||
return 'Diamonds'
|
||||
case 'C':
|
||||
return 'Clubs'
|
||||
default:
|
||||
return 'Unknown'
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="q-mb-sm">
|
||||
<div class="text-h6 q-mb-xs q-font-medium">Trumpsuit</div>
|
||||
<div id="trumpsuit" class="text-h5 text-primary">{{ trumpName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="q-mt-md">
|
||||
<div class="text-subtitle1 q-mb-xs q-font-medium">First Card</div>
|
||||
<div id="first-card-container" class="q-pa-sm bg-grey-2 rounded shadow-2"
|
||||
style="display:inline-block;">
|
||||
<q-img v-if="firstCard" :src="firstCard.path" alt="First Card" class="firstbox"
|
||||
style="width: 80px; border-radius: 6px;"/>
|
||||
<div v-else class="q-pa-sm"
|
||||
style="width: 80px; height: 120px; display:flex; align-items:center; justify-content:center; border-radius:6px; background: #ffffff; color: #666;">
|
||||
No image
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.firstbox {
|
||||
width: 80px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,3 +1,3 @@
|
||||
MAJOR=0
|
||||
MINOR=11
|
||||
MINOR=12
|
||||
PATCH=0
|
||||
|
||||
Reference in New Issue
Block a user