Compare commits

...

20 Commits

Author SHA1 Message Date
TeamCity
6b8488e7a4 ci: bump version to v0.23.0 2026-01-13 13:36:42 +00:00
6c914b1421 feat(ui): Tie selection (#26)
Added a minimal ui for the tie selection. Tie selection gets sent to the server via websocket and gets response from it.

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #26
2026-01-13 14:33:35 +01:00
TeamCity
8482aa8876 ci: bump version to v0.22.0 2026-01-07 21:37:08 +00:00
c6537467f8 feat: Update LobbyComponent to use icons for player removal buttons 2026-01-07 22:34:23 +01:00
TeamCity
3eb505806c ci: bump version to v0.21.0 2026-01-07 21:05:21 +00:00
058d232d2b feat: Implement PlayDogCard functionality in user session and update Vue component 2026-01-07 22:02:21 +01:00
TeamCity
67dcf6274c ci: bump version to v0.20.0 2026-01-07 20:45:36 +00:00
02869fff8b feat: Enhance user state management with polling and WebSocket connection handling 2026-01-07 21:43:17 +01:00
TeamCity
ef073afd5e ci: bump version to v0.19.0 2026-01-07 16:00:15 +00:00
92a7bc0586 feat: Update joinGame endpoint to accept gameId as a path parameter 2026-01-07 16:56:34 +01:00
TeamCity
352b7fd3ff ci: bump version to v0.18.0 2026-01-07 13:37:03 +00:00
3a62fbc129 Merge remote-tracking branch 'origin/main' 2026-01-07 14:33:44 +01:00
d8b3904cbc feat: Add caching headers for env.js in Nginx configuration 2026-01-07 14:33:34 +01:00
TeamCity
c1960a4e33 ci: bump version to v0.17.0 2026-01-07 13:21:19 +00:00
93e5af7402 feat: Add caching headers for env.js in Nginx configuration 2026-01-07 14:18:32 +01:00
TeamCity
fa900a3b56 ci: bump version to v0.16.2 2026-01-07 11:51:38 +00:00
TeamCity
862be6eaff ci: bump version to v0.16.1 2026-01-06 14:43:07 +00:00
TeamCity
8541af95f2 ci: bump version to v0.16.0 2026-01-06 14:26:03 +00:00
e972f1c432 feat: Update Dockerfile for multi-platform support and add nginx configuration 2026-01-06 15:23:33 +01:00
37b88a108c feat: Update Dockerfile for multi-platform support and add nginx configuration 2026-01-06 15:21:19 +01:00
17 changed files with 361 additions and 37 deletions

View File

@@ -122,3 +122,46 @@
* Enhance win effects and animations in OfflineView component ([db5c70d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/db5c70d02a646b83ba6e4043e28fc0dc9f76fb04)) * Enhance win effects and animations in OfflineView component ([db5c70d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/db5c70d02a646b83ba6e4043e28fc0dc9f76fb04))
* Enhance win effects and animations in OfflineView component ([8aa0738](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/8aa07388ac27fbb13270fde58b1594688ec44fe7)) * Enhance win effects and animations in OfflineView component ([8aa0738](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/8aa07388ac27fbb13270fde58b1594688ec44fe7))
* Enhance win effects and animations in OfflineView component ([6b3eaf2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/6b3eaf2c706b2ea479aa7ba508b05adb4bab2db4)) * Enhance win effects and animations in OfflineView component ([6b3eaf2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/6b3eaf2c706b2ea479aa7ba508b05adb4bab2db4))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.15.0...0.0.0) (2026-01-06)
### Features
* Update Dockerfile for multi-platform support and add nginx configuration ([e972f1c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/e972f1c4321ec2633e2989dbdaa714774632c495))
* Update Dockerfile for multi-platform support and add nginx configuration ([37b88a1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/37b88a108c71e20fc2caee950acd23cf2bb81190))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.16.0...0.0.0) (2026-01-06)
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.16.1...0.0.0) (2026-01-07)
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.16.2...0.0.0) (2026-01-07)
### Features
* Add caching headers for env.js in Nginx configuration ([93e5af7](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/93e5af7402edb9fb9662e37d9b2b8c48d250c36e))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.17.0...0.0.0) (2026-01-07)
### Features
* Add caching headers for env.js in Nginx configuration ([d8b3904](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/d8b3904cbc8b08ed9522d7b9b4fa8af79bc75def))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.18.0...0.0.0) (2026-01-07)
### Features
* Update joinGame endpoint to accept gameId as a path parameter ([92a7bc0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/92a7bc05866b77053ebb1d074ad207be8348f9d6))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.19.0...0.0.0) (2026-01-07)
### Features
* Enhance user state management with polling and WebSocket connection handling ([02869ff](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/02869fff8b448cde73369679c9b38bc99fb771ff))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.20.0...0.0.0) (2026-01-07)
### Features
* Implement PlayDogCard functionality in user session and update Vue component ([058d232](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/058d232d2ba00f33b1e658fc8a793dcd59018fa4))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.21.0...0.0.0) (2026-01-07)
### Features
* Update LobbyComponent to use icons for player removal buttons ([c653746](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/c6537467f87d60aeece18f86f42c839d5437c18b))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.22.0...0.0.0) (2026-01-13)
### Features
* **ui:** Tie selection ([#26](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/26)) ([6c914b1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/6c914b1421030897d47449087dd1694068e84436))

View File

@@ -1,4 +1,4 @@
FROM node:lts-alpine3.23 AS builder FROM --platform=$BUILDPLATFORM node:lts-alpine3.23 AS builder
WORKDIR /app WORKDIR /app
@@ -9,13 +9,15 @@ RUN npm install
COPY . . COPY . .
RUN npm run build RUN npm run build
FROM nginx:stable-alpine AS production FROM --platform=$TARGETPLATFORM nginx:stable-alpine AS production
RUN apk add --no-cache gettext RUN apk add --no-cache gettext
RUN rm -rf /usr/share/nginx/html/* RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app/dist /usr/share/nginx/html COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY public/env.template.js /usr/share/nginx/html/env.template.js COPY public/env.template.js /usr/share/nginx/html/env.template.js
COPY docker-entrypoint.sh /docker-entrypoint.sh COPY docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh RUN chmod +x /docker-entrypoint.sh

View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>Knockout-Whist</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

22
nginx.conf Normal file
View File

@@ -0,0 +1,22 @@
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /env.js {
root /usr/share/nginx/html;
default_type application/javascript;
expires -1;
add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

View File

@@ -1,8 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import { onMounted, onUnmounted } from 'vue'; import { onMounted, onUnmounted, watch } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useUserInfo } from "@/composables/useUserInfo";
import { useIngame } from "@/composables/useIngame";
import { storeToRefs } from "pinia";
import { useWebSocket } from "@/composables/useWebsocket";
import { useQuasar } from "quasar";
const route = useRoute(); const route = useRoute();
const router = useRouter();
const info = useUserInfo();
const handleOnlineStatusChange = () => { const handleOnlineStatusChange = () => {
if (navigator.onLine) { if (navigator.onLine) {
@@ -11,12 +19,84 @@ const handleOnlineStatusChange = () => {
} }
} }
}; };
let interval: number | null = null;
onMounted(() => { onMounted(() => {
window.addEventListener('online', handleOnlineStatusChange); window.addEventListener('online', handleOnlineStatusChange);
// Continuously check user state every 10 seconds
interval = window.setInterval(async () => {
if (navigator.onLine && route.name !== 'login' && route.name !== 'offline') {
await info.requestState();
if (!info.username && route.name !== 'login') {
router.push({ name: 'login' });
}
}
}, 10000);
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('online', handleOnlineStatusChange); window.removeEventListener('online', handleOnlineStatusChange);
if (interval) {
clearInterval(interval);
}
}); });
watch(() => info.gameId, (newGameId) => {
if (newGameId && route.name !== 'game') {
router.push({ name: 'game' });
}
});
const ig = useIngame()
const { isWsConnected } = storeToRefs(ig)
const wb = useWebSocket()
const $q = useQuasar();
watch(isWsConnected, (connected) => {
if (!connected && info.gameId && route.name === 'game') {
showReconnectDialog();
}
});
function showReconnectDialog() {
$q.dialog({
title: 'Connection Lost',
message: 'The connection to the game server was lost. Would you like to reconnect?',
persistent: true,
ok: {
label: 'Reconnect',
color: 'positive'
},
cancel: {
label: 'Quit',
color: 'negative'
}
}).onOk(() => {
reconnect();
}).onCancel(() => {
router.replace("/");
});
}
async function reconnect() {
try {
await wb.connect();
$q.notify({
message: 'Reconnected successfully!',
color: 'positive',
icon: 'check'
});
} catch (err) {
$q.notify({
message: 'Failed to reconnect. Please try again.',
color: 'negative',
icon: 'error'
});
showReconnectDialog();
}
}
</script> </script>
<template> <template>

View File

@@ -10,6 +10,7 @@ import TurnC from "@/components/ingame/TurnC.vue";
import TrumpC from "@/components/ingame/TrumpC.vue"; import TrumpC from "@/components/ingame/TrumpC.vue";
import {storeToRefs} from "pinia"; import {storeToRefs} from "pinia";
import {ref, toRefs, watch} from "vue"; import {ref, toRefs, watch} from "vue";
import TieC from "@/components/ingame/TieC.vue";
const ig = useIngame() const ig = useIngame()
const { state } = toRefs(ig) const { state } = toRefs(ig)
@@ -45,6 +46,22 @@ watch(
<TrumpC /> <TrumpC />
</div> </div>
</transition> </transition>
<transition
appear
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutDown"
>
<div
v-if="state === 'TieBreak'"
class="full-overlay-blur"
style="z-index: 2000;"
>
<TieC />
</div>
</transition>
<div class="fit row wrap justify-center items-center content-start"> <div class="fit row wrap justify-center items-center content-start">
<div class="mt-5 ml-4 self-start col-2"> <div class="mt-5 ml-4 self-start col-2">
<TurnC v-if="(cachedGameInfo as GameInfo)?.playerQueue" :queue="(cachedGameInfo as GameInfo).playerQueue!"/> <TurnC v-if="(cachedGameInfo as GameInfo)?.playerQueue" :queue="(cachedGameInfo as GameInfo).playerQueue!"/>

View File

@@ -25,9 +25,8 @@ function triggerWiggle(index: number) {
function handlePlayCard(index: number | null) { function handlePlayCard(index: number | null) {
if (index === null) return if (index === null) return
wb.sendAndWait("PlayCard", { cardindex: index }).catch((error) => { wb.sendAndWait((<GameInfo>wi.data)?.self?.dogLife ? "PlayDogCard" : "PlayCard", { cardindex: index }).catch((error) => {
triggerWiggle(index) triggerWiggle(index)
$q.notify({ $q.notify({
message: error.message, message: error.message,
color: "negative", color: "negative",
@@ -45,7 +44,13 @@ function onBeforeLeave(el: Element) {
element.style.height = height; element.style.height = height;
} }
function handleSkipDogLife() { function handleSkipDogLife() {
//TODO: Add some animation or feedback for skipping turn wb.sendAndWait("PlayDogCard", { cardindex: 'Skip' }).catch((error) => {
$q.notify({
message: error.message,
color: "negative",
position: "top"
})
})
} }
function getCardImagePath(cardPath: string) { function getCardImagePath(cardPath: string) {

View File

@@ -0,0 +1,98 @@
<script setup lang="ts">
import {useWebSocket} from "@/composables/useWebsocket.ts";
import {useIngame} from "@/composables/useIngame.ts";
import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo} from "@/types/GameTypes.ts";
import {useQuasar} from "quasar";
import { ref } from 'vue';
import { computed } from 'vue'
const wb = useWebSocket()
const wi = useIngame()
const tieInf = computed(() => wi.data as TieInfo)
const tieBlankCard = [
"/images/cards/AS.png"
]
const $q = useQuasar();
function getCardImagePath(cardPath: string) {
if (!cardPath) return ''
if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
return `/${cardPath}`
}
function selectTie(tieIndex: number) {
wb.sendAndWait("PickTie", { cardIndex: tieIndex }).then(
$q.notify({
message: "You've successfully picked your tieCard",
color: "positive",
position: "top"
})
).catch((error) => {
$q.notify({
message: error.message,
color: "negative",
position: "top"
})
})
}
const model = ref(1)
const options = computed(() => {
const list = []
const max = tieInf.value.highestAmount?.valueOf() || 0
for (let i = 1; i <= max; i++) {
list.push(i)
}
return list
})
</script>
<template>
<q-card v-if="tieInf.self?.name === tieInf.currentPlayer?.name" class="player-profile-card" flat bordered>
<q-card-section class="bg-white text-dark text-center q-py-lg">
<div class="text-h3 text-weight-bolder">
{{ tieInf.self?.name || "Loading Player..."}}
</div>
</q-card-section>
<q-card-section class="bg-dark text-dark text-center q-py-lg">
<div class="q-pa-md" style="max-width: 500px">
<div class="q-gutter-md">
<q-select
v-model="model"
:options="options"
label="Select Amount"
filled
bg-color="white"
label-color="primary"
color="primary"
popup-content-class="bg-white text-black"
/>
<q-btn
color="positive"
icon="sports_martial_arts"
@click="selectTie(model)"
class="full-width"
/>
</div>
</div>
</q-card-section>
</q-card>
<q-card
v-else
class="player-profile-card text-center"
flat
bordered
style="min-height: 200px; display: flex; flex-direction: column; justify-content: center;"
>
<q-card-section class="q-pa-lg">
<q-spinner-hourglass color="black" size="3em" class="q-mb-md" />
<div class="text-h5 text-grey-8">
Waiting for {{ tieInf.currentPlayer?.name || 'the other player' }} to select card for the tie...
</div>
</q-card-section>
</q-card>
</template>
<style scoped>
</style>

View File

@@ -103,14 +103,14 @@ const profileIcon = 'person';
<q-btn <q-btn
v-if="player.id !== (<LobbyInfo>ig.data).self.id" v-if="player.id !== (<LobbyInfo>ig.data).self.id"
color="negative" color="negative"
label="Remove" icon="sports_martial_arts"
@click="handleKickPlayer(player)" @click="handleKickPlayer(player)"
class="full-width" class="full-width"
/> />
<q-btn <q-btn
v-else v-else
color="negative" color="negative"
label="Remove (Cannot Kick Self)" icon="sports_martial_arts"
disable disable
class="full-width" class="full-width"
/> />

View File

@@ -9,12 +9,17 @@ const api = window?.__RUNTIME_CONFIG__?.API_URL;
export const useIngame = defineStore('ingame', () => { export const useIngame = defineStore('ingame', () => {
const state: Ref<'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch' | null> = ref(null); const state: Ref<'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch' | null> = ref(null);
const data: Ref<GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo | null> = ref(null); const data: Ref<GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo | null> = ref(null);
const isWsConnected: Ref<boolean> = ref(false);
function setIngame(newState: 'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch', newData: GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo) { function setIngame(newState: 'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch', newData: GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo) {
state.value = newState; state.value = newState;
data.value = newData; data.value = newData;
} }
function setWsConnected(connected: boolean) {
isWsConnected.value = connected;
}
async function requestGame(gameId: string) { async function requestGame(gameId: string) {
await axios.get(`${api}/status/${gameId}`, {withCredentials: true}).then((response) => { await axios.get(`${api}/status/${gameId}`, {withCredentials: true}).then((response) => {
setIngame(response.data.state, response.data.data); setIngame(response.data.state, response.data.data);
@@ -24,7 +29,8 @@ export const useIngame = defineStore('ingame', () => {
function clearIngame() { function clearIngame() {
state.value = null; state.value = null;
data.value = null; data.value = null;
isWsConnected.value = false;
} }
return { state, data, requestGame, setIngame, clearIngame }; return { state, data, isWsConnected, requestGame, setIngame, clearIngame, setWsConnected };
}); });

View File

@@ -21,10 +21,19 @@ export const useUserInfo = defineStore('userInfo', () => {
async function requestState() { async function requestState() {
await axios.get(`${api}/status`, {withCredentials: true}).then((response) => { await axios.get(`${api}/status`, {withCredentials: true}).then((response) => {
console.log("STATUS DATA:" + response.data.status + response.data.inGame) console.log("STATUS DATA:" + response.data.status + response.data.inGame)
username.value = response.data.username; if (response.data.status === 'authenticated') {
if (response.data.gameId) { username.value = response.data.username;
console.log("GAMEID:" + response.data.gameId) userId.value = response.data.userId;
gameId.value = response.data.gameId; if (response.data.gameId) {
console.log("GAMEID:" + response.data.gameId)
gameId.value = response.data.gameId;
} else {
gameId.value = null;
}
} else {
username.value = null;
userId.value = null;
gameId.value = null;
} }
}) })
} }

View File

@@ -73,8 +73,12 @@ router.beforeEach(async (to, from, next) => {
if (isOnline) { if (isOnline) {
try { try {
const response = await axios.get(`${api}/userInfo`, { withCredentials: true }); await info.requestState();
info.setUserInfo(response.data.username, response.data.userId);
if (!info.username) {
info.clearUserInfo();
return next('/login');
}
return next({ name: 'mainmenu' }); return next({ name: 'mainmenu' });
@@ -92,11 +96,17 @@ router.beforeEach(async (to, from, next) => {
if (!to.meta.requiresAuth) return next(); if (!to.meta.requiresAuth) return next();
try { try {
await axios.get(`${api}/userInfo`, { withCredentials: true }).then( await info.requestState();
res => {
info.setUserInfo(res.data.username, res.data.userId); if (!info.username) {
} info.clearUserInfo();
); return next('/login');
}
if (info.gameId && to.name !== 'game') {
return next({ name: 'game' });
}
next(); next();
} catch (err) { } catch (err) {
info.clearUserInfo(); info.clearUserInfo();

View File

@@ -160,14 +160,15 @@ function setupSocketHandlers(socket: WebSocket) {
stopHeartbeat(); stopHeartbeat();
failAllPending("WebSocket closed"); failAllPending("WebSocket closed");
if (uState) {
uState.setWsConnected(false);
}
if (ev.wasClean) { if (ev.wasClean) {
console.log(`[WS] Closed cleanly: code=${ev.code} reason=${ev.reason}`); console.log(`[WS] Closed cleanly: code=${ev.code} reason=${ev.reason}`);
} else { } else {
console.warn("[WS] Connection died"); console.warn("[WS] Connection died");
} }
// You redirect here — if you dont want auto reconnect, keep as is.
router.replace("/");
}; };
} }
@@ -191,6 +192,9 @@ export function connectWebSocket(url?: string): Promise<void> {
const prevOnError = ws!.onerror; const prevOnError = ws!.onerror;
ws!.onopen = (ev) => { ws!.onopen = (ev) => {
if (prevOnOpen) prevOnOpen.call(ws!, ev); if (prevOnOpen) prevOnOpen.call(ws!, ev);
if (uState) {
uState.setWsConnected(true);
}
resolve(); resolve();
}; };
ws!.onerror = (err) => { ws!.onerror = (err) => {
@@ -207,6 +211,9 @@ export function connectWebSocket(url?: string): Promise<void> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
ws!.onopen = () => { ws!.onopen = () => {
console.log("[WS] Connected"); console.log("[WS] Connected");
if (uState) {
uState.setWsConnected(true);
}
startHeartbeat(); startHeartbeat();
resolve(); resolve();
}; };
@@ -224,6 +231,9 @@ export function disconnectWebSocket(code = 1000, reason = "Client disconnect") {
ws.close(code, reason); ws.close(code, reason);
} catch {} } catch {}
ws = null; ws = null;
if (uState) {
uState.setWsConnected(false);
}
} }
} }

View File

@@ -3,6 +3,7 @@ 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"; import axios from "axios";
import {useUserInfo} from "@/composables/useUserInfo";
const api = window?.__RUNTIME_CONFIG__?.API_URL; const api = window?.__RUNTIME_CONFIG__?.API_URL;
const lobbyName = ref(''); const lobbyName = ref('');
@@ -11,13 +12,14 @@ const playerAmount = ref(2);
const $q = useQuasar(); const $q = useQuasar();
const isLoading = ref(false); const isLoading = ref(false);
const router = useRouter(); const router = useRouter();
const info = useUserInfo();
const createGameQuasar = async () => { const createGameQuasar = async () => {
if (!lobbyName.value) { if (!lobbyName.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;
axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then((response) => { axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then(async (response) => {
const responseData = response.data const responseData = response.data
console.log("Response" + responseData.status) console.log("Response" + responseData.status)
$q.notify({ $q.notify({
@@ -26,12 +28,12 @@ const createGameQuasar = async () => {
icon: 'check_circle', icon: 'check_circle',
position: 'top' position: 'top'
}); });
await info.requestState();
router.replace("/game") router.replace("/game")
}).catch((err) => { }).catch((err) => {
console.log("ERROR:" + err) console.log("ERROR:" + err)
}).finally(() =>
isLoading.value = false isLoading.value = false
) })
} }
</script> </script>

View File

@@ -7,6 +7,7 @@ import LobbyComponent from "@/components/lobby/LobbyComponent.vue";
import {storeToRefs} from "pinia"; import {storeToRefs} from "pinia";
import {useQuasar} from "quasar"; import {useQuasar} from "quasar";
import router from "@/router"; import router from "@/router";
import {ref, watch} from "vue";
const wb = useWebSocket() const wb = useWebSocket()
const ig = useIngame() const ig = useIngame()
@@ -20,7 +21,6 @@ ui.requestState().then(() => {
$q.notify({ $q.notify({
message: "You're not in any game!", message: "You're not in any game!",
color: "negative" color: "negative"
}) })
router.replace("/") router.replace("/")
} else { } else {
@@ -33,7 +33,7 @@ ui.requestState().then(() => {
<template> <template>
<div class="lobby-background"> <div class="lobby-background">
<Ingame v-if="state === 'InGame' || state === 'SelectTrump'"/> <Ingame v-if="state === 'InGame' || state === 'SelectTrump' || state === 'TieBreak'"/>
<lobby-component v-if="state === 'Lobby'"/> <lobby-component v-if="state === 'Lobby'"/>
</div> </div>
</template> </template>

View File

@@ -1,28 +1,49 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref} from "vue"; import {ref, onUnmounted} from "vue";
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import {useQuasar} from "quasar"; import {useQuasar} from "quasar";
import axios from "axios"; import axios from "axios";
import {useUserInfo} from "@/composables/useUserInfo";
const router = useRouter(); const router = useRouter();
const info = useUserInfo();
const lobbyCode = ref(''); const lobbyCode = ref('');
const isLoading = ref(false); const isLoading = ref(false);
const $q = useQuasar(); const $q = useQuasar();
const api = window?.__RUNTIME_CONFIG__?.API_URL; const api = window?.__RUNTIME_CONFIG__?.API_URL;
let pollInterval: number | null = null;
onUnmounted(() => {
if (pollInterval) {
clearInterval(pollInterval);
}
});
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;
axios.post(`${api}/joinGame`, {gameId: lobbyCode.value.toString()}, {withCredentials: true}).then(response => { axios.post(`${api}/joinGame/${lobbyCode.value.toString()}`, {}, {withCredentials: true}).then(() => {
const responseData = response.data
$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.replace("/game")
// Start polling until gameId is set
pollInterval = window.setInterval(async () => {
await info.requestState();
if (info.gameId) {
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
}
}, 100);
}).catch(() => { }).catch(() => {
$q.notify({ $q.notify({
message: `Lobby "${lobbyCode.value}" nicht gefunden`, message: `Lobby "${lobbyCode.value}" nicht gefunden`,
@@ -30,9 +51,8 @@ const startGameQuasar = async() => {
icon: 'cancel', icon: 'cancel',
position: 'top' position: 'top'
}) })
}).finally(() =>
isLoading.value = false isLoading.value = false
) })
} }
</script> </script>

View File

@@ -1,3 +1,3 @@
MAJOR=0 MAJOR=0
MINOR=15 MINOR=23
PATCH=0 PATCH=0