Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
43920b25f3 | ||
| 21db939d34 | |||
|
|
0b05cba25f | ||
| 14e001cae6 |
10
CHANGELOG.md
10
CHANGELOG.md
@@ -83,3 +83,13 @@
|
|||||||
### Features
|
### Features
|
||||||
|
|
||||||
* FRO-23 Create Player Hand Component ([#15](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/15)) ([b20ec0a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/b20ec0a3638649155f2f9c5984014d75eb2ba618))
|
* FRO-23 Create Player Hand Component ([#15](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/15)) ([b20ec0a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/b20ec0a3638649155f2f9c5984014d75eb2ba618))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.8.0...0.0.0) (2025-12-10)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **api:** FRO-15 Join Game ([#16](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/16)) ([14e001c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/14e001cae67592c5ea15786905aa3574df9a9e6c))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.9.0...0.0.0) (2025-12-10)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* FRO-24 Create Played Cards Component ([#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/17)) ([21db939](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/21db939d342c72f5ad5fad3b4f873e902d1e5a0f))
|
||||||
|
|||||||
43
src/components/ingame/PlayedCards.vue
Normal file
43
src/components/ingame/PlayedCards.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import {computed, defineProps, toRefs} from 'vue'
|
||||||
|
import type {Trick} from "@/types/GameSubTypes.ts";
|
||||||
|
const props = defineProps<{ trick: Trick }>()
|
||||||
|
|
||||||
|
const {trick } = toRefs(props)
|
||||||
|
|
||||||
|
const playedCards = computed(() => {
|
||||||
|
return [...trick.value.cards].map(card => {
|
||||||
|
return {
|
||||||
|
cardId: card[1].path,
|
||||||
|
player: card[0].name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function getCardImagePath(cardPath: string) {
|
||||||
|
if (!cardPath) return ''
|
||||||
|
if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
|
||||||
|
return `/${cardPath}`
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="row items-center justify-center q-gutter-sm" id="trick-cards-content">
|
||||||
|
<div v-for="(play, index) in playedCards" :key="index" class="col-auto">
|
||||||
|
<q-card flat class="bg-transparent trick-card" style="width: 7rem; backdrop-filter: blur(4px);">
|
||||||
|
<q-card-section class="q-pa-sm q-pb-xs">
|
||||||
|
<q-img :src="getCardImagePath(play.cardId)" alt="card" style="border-radius: 6px; width:100%" />
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section class="q-pa-sm q-pt-xs text-center bg-transparent">
|
||||||
|
<div class="text-subtitle2 text-grey-7">{{ play.player }}</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.trick-card {
|
||||||
|
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -34,7 +34,7 @@ type Round = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type Trick = {
|
type Trick = {
|
||||||
cards: { [player: string]: Card }
|
cards: Map<Player, Card>
|
||||||
firstCard: Card | null
|
firstCard: Card | null
|
||||||
winner: Player | null
|
winner: Player | null
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,27 +2,37 @@
|
|||||||
import {ref} from "vue";
|
import {ref} from "vue";
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import {useQuasar} from "quasar";
|
import {useQuasar} from "quasar";
|
||||||
|
import axios from "axios";
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const lobbyCode = ref('');
|
const lobbyCode = ref('');
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
const api = window?.__RUNTIME_CONFIG__?.API_URL;
|
||||||
const startGameQuasar = async() => {
|
const startGameQuasar = async() => {
|
||||||
if (!lobbyCode.value) {
|
if (!lobbyCode.value) {
|
||||||
$q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
|
$q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
//TODO: Implement Logic to Start the Game and Redirect to Ingame
|
axios.post(`${api}/joinGame`, {gameId: lobbyCode.value.toString()}, {withCredentials: true}).then(response => {
|
||||||
await delay(3000)
|
const responseData = response.data
|
||||||
isLoading.value = false;
|
|
||||||
$q.notify({
|
$q.notify({
|
||||||
message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
|
message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
|
||||||
color: 'green-6',
|
color: 'green-6',
|
||||||
icon: 'check_circle',
|
icon: 'check_circle',
|
||||||
position: 'top'
|
position: 'top'
|
||||||
});
|
});
|
||||||
router.push({ name: 'mainmenu'});
|
router.push("/lobby")
|
||||||
|
}).catch(() => {
|
||||||
|
$q.notify({
|
||||||
|
message: `Lobby "${lobbyCode.value}" nicht gefunden`,
|
||||||
|
color: 'red-6',
|
||||||
|
icon: 'cancel',
|
||||||
|
position: 'top'
|
||||||
|
})
|
||||||
|
}).finally(() =>
|
||||||
|
isLoading.value = false
|
||||||
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
MAJOR=0
|
MAJOR=0
|
||||||
MINOR=8
|
MINOR=10
|
||||||
PATCH=0
|
PATCH=0
|
||||||
|
|||||||
Reference in New Issue
Block a user