Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
027095f874 | ||
| df61db2730 | |||
|
|
8758f95fcd | ||
| ecb38510de |
10
CHANGELOG.md
10
CHANGELOG.md
@@ -68,3 +68,13 @@
|
|||||||
### Features
|
### 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))
|
* 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))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.6.0...0.0.0) (2025-12-10)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **api:** FRO-14 Create Game ([#14](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/14)) ([df61db2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/df61db2730b5e6b2796cbe58d1d224f1d5d6f085))
|
||||||
|
|||||||
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>
|
||||||
@@ -2,7 +2,9 @@
|
|||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const api = window?.__RUNTIME_CONFIG__?.API_URL;
|
||||||
const lobbyName = ref('');
|
const lobbyName = ref('');
|
||||||
const isPublic = ref(false);
|
const isPublic = ref(false);
|
||||||
const playerAmount = ref(2);
|
const playerAmount = ref(2);
|
||||||
@@ -16,16 +18,21 @@ const createGameQuasar = async () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
//TODO: Implement Logic to Create the Game and Redirect to Lobby
|
axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then((response) => {
|
||||||
await delay(3000)
|
const responseData = response.data
|
||||||
isLoading.value = false;
|
console.log("Response" + responseData.status)
|
||||||
$q.notify({
|
$q.notify({
|
||||||
message: `Lobby "${lobbyName.value}" erfolgreich erstellt!`,
|
message: `Lobby "${lobbyName.value}" erfolgreich erstellt mit gameId ${responseData.gameId}!`,
|
||||||
color: 'green-6',
|
color: 'green-6',
|
||||||
icon: 'check_circle',
|
icon: 'check_circle',
|
||||||
position: 'top'
|
position: 'top'
|
||||||
});
|
});
|
||||||
router.push({ name: 'mainmenu'});
|
router.push("/lobby")
|
||||||
|
}).catch((err) => {
|
||||||
|
console.log("ERROR:" + err)
|
||||||
|
}).finally(() =>
|
||||||
|
isLoading.value = false
|
||||||
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -80,7 +80,7 @@ const onSubmit = () => {
|
|||||||
loginError.value = ''
|
loginError.value = ''
|
||||||
axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
|
axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
|
||||||
uInfo.setUserInfo(response.data.user.username, response.data.user.id)
|
uInfo.setUserInfo(response.data.user.username, response.data.user.id)
|
||||||
router.push("/")
|
router.push("/mainmenu")
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
loginError.value = 'Invalid username or password'
|
loginError.value = 'Invalid username or password'
|
||||||
}).finally(() =>
|
}).finally(() =>
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
MAJOR=0
|
MAJOR=0
|
||||||
MINOR=5
|
MINOR=7
|
||||||
PATCH=0
|
PATCH=0
|
||||||
|
|||||||
Reference in New Issue
Block a user