KnockOutWhist/KnockOutWhist-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 21 Wiki Activity

feat: Update routing and websocket configuration for game state management

Browse Source
This commit is contained in:
Janis
2025-12-11 10:24:51 +01:00
parent 4463144d1b
commit 76258b3ca8
22 changed files with 173 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/Ingame.vue
View File

@@ -13,38 +13,45 @@ const ig = useIngame()
</script>
<template>
<q-page class="game-field-background vh-100 ingame-side-shadow">
<div class="py-5 container-xxl">
<q-layout>
<q-page-container>
<q-page class="game-field-background vh-100 ingame-side-shadow">
<div class="py-5 container-xxl">
<q-row class="q-gutter-md q-mx-md">
<q-col cols="4" class="mt-5 text-start">
<TurnC v-if="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
</q-col>
<div class="fit row wrap justify-center items-center content-start">
<div class="mt-5 ml-4 self-start col-2">
<TurnC v-if="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
</div>
<q-col cols="4" class="text-center">
<ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
<div class="text-center col-6">
<ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
</div>
<div class="d-flex justify-content-center g-3 mb-5">
<PlayedCardsC v-if="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data as GameInfo).currentTrick!" />
<div class="mt-5 ml-4 self-end col-2" style="margin-left: 6em">
<GameInfoC v-if="(ig.data as GameInfo)?.currentRound"
:first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
:trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
</div>
</div>
</q-col>
<div class="fit row wrap justify-center items-center content-start">
<div class="mt-4 ml-4 col-3 justify-content-center">
<div class="d-flex justify-content-center g-3 mb-5">
<PlayedCardsC v-if="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data as GameInfo).currentTrick!" />
</div>
</div>
</div>
<div class="q-gutter-sm mt-4 bottom-div justify-content-center row" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
<div class="flex justify-center col-12">
<HandC v-if="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self"/>
</div>
</div>
<q-col cols="4" class="mt-5 text-end">
<GameInfoC v-if="(ig.data as GameInfo)?.currentRound"
:first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
:trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
</q-col>
</q-row>
<q-row justify="center" class="q-gutter-sm mt-4 bottom-div" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
<q-col cols="12" class="flex justify-center">
<HandC v-if="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self" :hand="(ig.data as GameInfo).hand!" :self="(ig.data as GameInfo).self"/>
</q-col>
</q-row>
</div>
</q-page>
</div>
</q-page>
</q-page-container>
</q-layout>
</template>
<style scoped>
@@ -59,4 +66,15 @@ const ig = useIngame()
.ingame-side-shadow {
box-shadow: 0 1px 15px 0 #000000
}
.bottom-div {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-width: 1400px;
width: 100%;
margin: 0;
text-align: center;
padding: 10px;
}
</style>