lq64
bb6355d9ed
Started with Lobby Component Co-authored-by: LQ63 <lkhermann@web.de> Co-authored-by: Janis <janis-e@gmx.de> Reviewed-on: #21 Reviewed-by: Janis <janis-e@gmx.de> Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type {Round} from "@/types/GameSubTypes.ts";
|
|
import {computed, type ComputedRef} from "vue";
|
|
|
|
interface PlayerScore { name: string; tricks: number }
|
|
const props = defineProps<{ currentRound: Round }>()
|
|
const playerScores: ComputedRef<PlayerScore[]> = computed(() => {
|
|
return props.currentRound.playersIn.map(player => {
|
|
return {
|
|
name: player.name,
|
|
tricks: props.currentRound.trickList.filter(trick => {
|
|
return trick.winner?.id === player.id
|
|
}).length
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-card class="score-card q-mt-md" id="score-table-container">
|
|
<q-card-section class="row items-center q-px-md q-pt-md">
|
|
<div class="col">
|
|
<div class="text-h6 fw-bold">Tricks Won</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-list dense class="q-pa-sm">
|
|
<q-item class="score-header">
|
|
<q-item-section style="width:50%">PLAYER</q-item-section>
|
|
<q-item-section side style="width:50%" class="text-right">TRICKS</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator inset />
|
|
|
|
<div v-if="playerScores.length">
|
|
<q-item v-for="player in playerScores" :key="player.name" class="score-row">
|
|
<q-item-section style="width:50%" class="text-truncate">{{ player.name }}</q-item-section>
|
|
<q-item-section side style="width:50%" class="text-right">{{ player.tricks }}</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<q-item>
|
|
<q-item-section class="text-grey">No scores yet</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
</q-list>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.score-card {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border-radius: 8px;
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.score-header {
|
|
font-weight: 700;
|
|
color: #000000;
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.score-row {
|
|
color: #000000;
|
|
}
|
|
|
|
.text-right { text-align: right; }
|
|
</style>
|