Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8758f95fcd | ||
| ecb38510de | |||
|
|
e2f8dc23ab | ||
| 97a9f85758 |
10
CHANGELOG.md
10
CHANGELOG.md
@@ -63,3 +63,13 @@
|
|||||||
### Features
|
### Features
|
||||||
|
|
||||||
* FRO-17 Added Rule Component and changed Mainmenu structure ([#11](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/11)) ([adbe2be](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/adbe2be5345b95cd3bcd9deba936614b489268fd))
|
* FRO-17 Added Rule Component and changed Mainmenu structure ([#11](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/11)) ([adbe2be](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/adbe2be5345b95cd3bcd9deba936614b489268fd))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.4.0...0.0.0) (2025-12-10)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* FRO-20 Create scoreboard component ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/12)) ([97a9f85](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/97a9f857586eb41feb056d7af0a5d8553d2bcf80))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.5.0...0.0.0) (2025-12-10)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* FRO-21 Create Turn Component ([#13](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/13)) ([ecb3851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/ecb38510de53b811eaaee2a39fc1ae423aed71c6))
|
||||||
|
|||||||
69
src/components/ingame/Scoreboard.vue
Normal file
69
src/components/ingame/Scoreboard.vue
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type {Round} from "@/types/GameSubTypes.ts";
|
||||||
|
|
||||||
|
interface PlayerScore { name: string; tricks: number }
|
||||||
|
const props = defineProps<{ currentRound: Round }>()
|
||||||
|
const playerScores: PlayerScore[] = 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>
|
||||||
38
src/components/ingame/Turn.vue
Normal file
38
src/components/ingame/Turn.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import type {PlayerQueue} from "@/types/GameSubTypes.ts";
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
queue: PlayerQueue
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const safeNextPlayers = computed(() => props.queue.players ?? [])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-card flat class="turn-tracker-container q-pa-md">
|
||||||
|
<q-card-section>
|
||||||
|
<div class="text-subtitle2 q-mb-xs">Current Player</div>
|
||||||
|
<div id="current-player-name" class="text-h6 text-weight-bold text-positive">{{
|
||||||
|
props.queue.currentPlayer?.name
|
||||||
|
}}</div>
|
||||||
|
|
||||||
|
<div v-if="safeNextPlayers.length > 0" class="q-mt-md">
|
||||||
|
<div id="next-players-text" class="text-subtitle2 q-mb-xs">Next Players</div>
|
||||||
|
<q-list id="next-players-container" dense>
|
||||||
|
<q-item v-for="player in safeNextPlayers" :key="player.id">
|
||||||
|
<q-item-section>
|
||||||
|
<div class="text-body1 text-primary">{{ player.name }}</div>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.turn-tracker-container {
|
||||||
|
max-width: 320px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -28,6 +28,7 @@ type PodiumPlayer = {
|
|||||||
|
|
||||||
type Round = {
|
type Round = {
|
||||||
trumpSuit: Card
|
trumpSuit: Card
|
||||||
|
playersIn: Player[]
|
||||||
firstRound: boolean
|
firstRound: boolean
|
||||||
trickList: Trick[]
|
trickList: Trick[]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
MAJOR=0
|
MAJOR=0
|
||||||
MINOR=4
|
MINOR=6
|
||||||
PATCH=0
|
PATCH=0
|
||||||
|
|||||||
Reference in New Issue
Block a user