Compare commits
19 Commits
0.16.0
...
c2dfa0e701
| Author | SHA1 | Date | |
|---|---|---|---|
|
c2dfa0e701 | ||
| d3709ed852 | |||
|
|
6b8488e7a4 | ||
| 6c914b1421 | |||
|
|
8482aa8876 | ||
| c6537467f8 | |||
|
|
3eb505806c | ||
| 058d232d2b | |||
|
|
67dcf6274c | ||
| 02869fff8b | |||
|
|
ef073afd5e | ||
| 92a7bc0586 | |||
|
|
352b7fd3ff | ||
| 3a62fbc129 | |||
| d8b3904cbc | |||
|
|
c1960a4e33 | ||
| 93e5af7402 | |||
|
|
fa900a3b56 | ||
|
|
862be6eaff |
38
CHANGELOG.md
38
CHANGELOG.md
@@ -128,3 +128,41 @@
|
|||||||
|
|
||||||
* 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 ([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))
|
* 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))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.23.0...0.0.0) (2026-01-20)
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -8,6 +8,13 @@ server {
|
|||||||
try_files $uri $uri/ /index.html;
|
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;
|
error_page 500 502 503 504 /50x.html;
|
||||||
location = /50x.html {
|
location = /50x.html {
|
||||||
root /usr/share/nginx/html;
|
root /usr/share/nginx/html;
|
||||||
|
|||||||
45
src/App.vue
45
src/App.vue
@@ -1,8 +1,13 @@
|
|||||||
<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 {Dark } 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,11 +16,45 @@ const handleOnlineStatusChange = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
|
||||||
|
let interval: number | null = null;
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
window.addEventListener('online', handleOnlineStatusChange);
|
window.addEventListener('online', handleOnlineStatusChange);
|
||||||
|
|
||||||
|
// Initialize dark mode based on browser preference
|
||||||
|
Dark.set('auto');
|
||||||
|
|
||||||
|
// Immediately check user state on app load
|
||||||
|
if (navigator.onLine) {
|
||||||
|
await info.requestState();
|
||||||
|
if (!info.username && route.meta.requiresAuth) {
|
||||||
|
router.push({ name: '/' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Continuously check user state every 10 seconds
|
||||||
|
interval = window.setInterval(async () => {
|
||||||
|
if (navigator.onLine) {
|
||||||
|
await info.requestState();
|
||||||
|
if (!info.username && route.meta.requiresAuth) {
|
||||||
|
router.push({ name: '/' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 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' });
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -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!"/>
|
||||||
|
|||||||
@@ -1,40 +1,68 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useUserInfo } from '@/composables/useUserInfo';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const userInfo = useUserInfo();
|
||||||
|
const $q = useQuasar();
|
||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{
|
{
|
||||||
title: 'Create game',
|
title: 'Create game',
|
||||||
description: 'Create a new game and invite your friends to play with you.',
|
description: 'Create a new game and invite your friends to play with you.',
|
||||||
icon: 'add_circle_outline',
|
icon: 'add_circle_outline',
|
||||||
routeName: 'create-Game',
|
routeName: 'create-Game',
|
||||||
color: 'green-9'
|
color: 'green-9',
|
||||||
|
requiresAuth: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Spiel beitreten',
|
title: 'Spiel beitreten',
|
||||||
description: 'Join a game by typing in the game identifier.',
|
description: 'Join a game by typing in the game identifier.',
|
||||||
icon: 'login',
|
icon: 'login',
|
||||||
routeName: 'join-Game',
|
routeName: 'join-Game',
|
||||||
color: 'blue-9'
|
color: 'blue-9',
|
||||||
|
requiresAuth: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Settings',
|
title: 'Settings',
|
||||||
description: 'This area is currently under construction.',
|
description: 'This area is currently under construction.',
|
||||||
icon: 'settings',
|
icon: 'settings',
|
||||||
routeName: 'settings',
|
routeName: 'settings',
|
||||||
color: 'grey-8'
|
color: 'grey-8',
|
||||||
|
requiresAuth: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Rules',
|
title: 'Rules',
|
||||||
description: 'Look at the rules to have a clear understanding for playing the game.',
|
description: 'Look at the rules to have a clear understanding for playing the game.',
|
||||||
icon: 'settings',
|
icon: 'settings',
|
||||||
routeName: 'rules-Game',
|
routeName: 'rule-Game',
|
||||||
color: 'grey-8'
|
color: 'grey-8',
|
||||||
|
requiresAuth: false
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const navigateTo = (routeName: string) => {
|
const navigateTo = (item: any) => {
|
||||||
router.push({ name: routeName });
|
if (item.requiresAuth && !userInfo.username) {
|
||||||
|
$q.dialog({
|
||||||
|
title: 'Authentication Required',
|
||||||
|
message: 'You need to be logged in to create or join a game. Would you like to log in or sign up?',
|
||||||
|
ok: {
|
||||||
|
label: 'Login',
|
||||||
|
color: 'primary'
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
label: 'Sign Up',
|
||||||
|
color: 'secondary'
|
||||||
|
}
|
||||||
|
}).onOk(() => {
|
||||||
|
router.push({ name: 'login' });
|
||||||
|
}).onCancel(() => {
|
||||||
|
router.push({ name: 'register' });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
router.push({ name: item.routeName });
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -57,7 +85,7 @@ const navigateTo = (routeName: string) => {
|
|||||||
<q-card
|
<q-card
|
||||||
class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
|
class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
|
||||||
v-ripple
|
v-ripple
|
||||||
@click="navigateTo(item.routeName)"
|
@click="navigateTo(item)"
|
||||||
>
|
>
|
||||||
<q-card-section class="row items-center no-wrap">
|
<q-card-section class="row items-center no-wrap">
|
||||||
<q-avatar
|
<q-avatar
|
||||||
|
|||||||
@@ -68,8 +68,21 @@ const handleLogoff = () => {
|
|||||||
</q-menu>
|
</q-menu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="text-caption text-grey-4">
|
<div v-else class="row items-center q-gutter-x-sm">
|
||||||
Not Logged In
|
<q-btn
|
||||||
|
flat
|
||||||
|
color="white"
|
||||||
|
label="Login"
|
||||||
|
@click="router.push({ name: 'login' })"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="white"
|
||||||
|
label="Sign Up"
|
||||||
|
@click="router.push({ name: 'register' })"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
98
src/components/ingame/TieC.vue
Normal file
98
src/components/ingame/TieC.vue
Normal 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>
|
||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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 };
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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)
|
||||||
|
if (response.data.status === 'authenticated') {
|
||||||
username.value = response.data.username;
|
username.value = response.data.username;
|
||||||
|
userId.value = response.data.userId;
|
||||||
if (response.data.gameId) {
|
if (response.data.gameId) {
|
||||||
console.log("GAMEID:" + response.data.gameId)
|
console.log("GAMEID:" + response.data.gameId)
|
||||||
gameId.value = response.data.gameId;
|
gameId.value = response.data.gameId;
|
||||||
|
} else {
|
||||||
|
gameId.value = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
username.value = null;
|
||||||
|
userId.value = null;
|
||||||
|
gameId.value = null;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
|
||||||
import {
|
import {
|
||||||
connectWebSocket,
|
connectWebSocket,
|
||||||
disconnectWebSocket,
|
disconnectWebSocket,
|
||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
isWebSocketConnected,
|
isWebSocketConnected,
|
||||||
setDefaultHandler,
|
setDefaultHandler,
|
||||||
} from "@/services/ws";
|
} from "@/services/ws";
|
||||||
|
import { useIngame } from "@/composables/useIngame";
|
||||||
|
|
||||||
function defaultEventHandler<T = any>(data: (data: T) => void) {
|
function defaultEventHandler<T = any>(data: (data: T) => void) {
|
||||||
setDefaultHandler(data);
|
setDefaultHandler(data);
|
||||||
@@ -16,15 +17,28 @@ function defaultEventHandler<T = any>(data: (data: T) => void) {
|
|||||||
export function useWebSocket() {
|
export function useWebSocket() {
|
||||||
const isConnected = ref(isWebSocketConnected());
|
const isConnected = ref(isWebSocketConnected());
|
||||||
const lastMessage = ref<any>(null);
|
const lastMessage = ref<any>(null);
|
||||||
|
|
||||||
const lastError = ref<string | null>(null);
|
const lastError = ref<string | null>(null);
|
||||||
|
|
||||||
|
// Get ingame store to sync connection state
|
||||||
|
const ig = useIngame();
|
||||||
|
|
||||||
|
// Watch the ingame store's connection state and keep this composable in sync
|
||||||
|
watch(() => ig.isWsConnected, (connected) => {
|
||||||
|
isConnected.value = connected;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Also update this composable's state when connecting/disconnecting
|
||||||
|
const updateConnectionState = (connected: boolean) => {
|
||||||
|
isConnected.value = connected;
|
||||||
|
};
|
||||||
|
|
||||||
async function safeConnect(url?: string) {
|
async function safeConnect(url?: string) {
|
||||||
return connectWebSocket(url)
|
return connectWebSocket(url)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
isConnected.value = true;
|
updateConnectionState(true);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
|
updateConnectionState(false);
|
||||||
lastError.value = err?.message ?? "Unknown WS error";
|
lastError.value = err?.message ?? "Unknown WS error";
|
||||||
throw err;
|
throw err;
|
||||||
});
|
});
|
||||||
|
|||||||
10
src/main.ts
10
src/main.ts
@@ -5,8 +5,9 @@ import App from './App.vue'
|
|||||||
import router from './router'
|
import router from './router'
|
||||||
import Particles from "@tsparticles/vue3";
|
import Particles from "@tsparticles/vue3";
|
||||||
import { loadFull } from "tsparticles";
|
import { loadFull } from "tsparticles";
|
||||||
import { Quasar, Notify, QExpansionItem } from 'quasar'
|
import {Quasar, Notify, QExpansionItem, Dialog, Dark} from 'quasar'
|
||||||
import '@quasar/extras/material-icons/material-icons.css'
|
import '@quasar/extras/material-icons/material-icons.css'
|
||||||
|
import '@quasar/extras/bootstrap-icons/bootstrap-icons.css'
|
||||||
import 'quasar/dist/quasar.css'
|
import 'quasar/dist/quasar.css'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
@@ -25,10 +26,9 @@ initWebSocket(ui);
|
|||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(Quasar, {
|
app.use(Quasar, {
|
||||||
plugins: {
|
plugins: {
|
||||||
Notify
|
Notify,
|
||||||
},
|
Dialog,
|
||||||
components: {
|
Dark
|
||||||
QExpansionItem
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
app.use(VueAxios, axios)
|
app.use(VueAxios, axios)
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import LoginView from '../views/LoginView.vue'
|
import LoginView from '../views/LoginView.vue'
|
||||||
|
import RegisterView from '../views/RegisterView.vue'
|
||||||
|
import UsernameSelectionView from '../views/UsernameSelectionView.vue'
|
||||||
import MainMenuView from '../views/MainMenuView.vue'
|
import MainMenuView from '../views/MainMenuView.vue'
|
||||||
import createGameView from '../views/CreateGame.vue'
|
import createGameView from '../views/CreateGame.vue'
|
||||||
import joinGameView from "@/views/JoinGameView.vue";
|
import joinGameView from "@/views/JoinGameView.vue";
|
||||||
@@ -17,13 +19,13 @@ const router = createRouter({
|
|||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: MainMenuView,
|
component: MainMenuView,
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: false },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
name: 'mainmenu',
|
name: 'mainmenu',
|
||||||
component: defaultMenu,
|
component: defaultMenu,
|
||||||
meta: { requiresAuth: true }
|
meta: { requiresAuth: false }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'create',
|
path: 'create',
|
||||||
@@ -41,7 +43,7 @@ const router = createRouter({
|
|||||||
path: 'rules',
|
path: 'rules',
|
||||||
name: 'rules-Game',
|
name: 'rules-Game',
|
||||||
component: rulesView,
|
component: rulesView,
|
||||||
meta: {requiresAuth: true }
|
meta: {requiresAuth: false }
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@@ -51,6 +53,18 @@ const router = createRouter({
|
|||||||
component: LoginView,
|
component: LoginView,
|
||||||
meta: { requiresAuth: false }
|
meta: { requiresAuth: false }
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/register',
|
||||||
|
name: 'register',
|
||||||
|
component: RegisterView,
|
||||||
|
meta: { requiresAuth: false }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/select-username',
|
||||||
|
name: 'select-username',
|
||||||
|
component: UsernameSelectionView,
|
||||||
|
meta: { requiresAuth: false }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/game',
|
path: '/game',
|
||||||
name: 'game',
|
name: 'game',
|
||||||
@@ -69,15 +83,16 @@ const router = createRouter({
|
|||||||
router.beforeEach(async (to, from, next) => {
|
router.beforeEach(async (to, from, next) => {
|
||||||
const info = useUserInfo();
|
const info = useUserInfo();
|
||||||
const isOnline = navigator.onLine;
|
const isOnline = navigator.onLine;
|
||||||
|
|
||||||
if (to.name === 'offline') {
|
if (to.name === 'offline') {
|
||||||
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' });
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
info.clearUserInfo();
|
info.clearUserInfo();
|
||||||
return next('/login');
|
return next('/login');
|
||||||
@@ -86,22 +101,27 @@ router.beforeEach(async (to, from, next) => {
|
|||||||
return next();
|
return next();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isOnline) {
|
if (!isOnline) {
|
||||||
return next({ name: 'offline' });
|
return next({ name: 'offline' });
|
||||||
}
|
}
|
||||||
|
|
||||||
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 => {
|
if (!info.username) {
|
||||||
info.setUserInfo(res.data.username, res.data.userId);
|
info.clearUserInfo();
|
||||||
|
return next('/login');
|
||||||
|
}
|
||||||
|
if (info.gameId && to.name !== 'game') {
|
||||||
|
return next({ name: 'game' });
|
||||||
}
|
}
|
||||||
);
|
|
||||||
next();
|
next();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
console.error("Routing Error", err);
|
||||||
info.clearUserInfo();
|
info.clearUserInfo();
|
||||||
next('/login');
|
next('/login');
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -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 don’t 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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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,12 +21,20 @@ 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 {
|
||||||
ig.requestGame(ui.gameId).then(() => {
|
ig.requestGame(ui.gameId).then(() => {
|
||||||
wb.connect()
|
// Attempt to connect to WebSocket
|
||||||
|
wb.connect().catch((err) => {
|
||||||
|
console.error('[Game] Initial WebSocket connection failed:', err);
|
||||||
|
$q.notify({
|
||||||
|
message: 'Failed to connect to game server. Please try reconnecting.',
|
||||||
|
color: 'negative',
|
||||||
|
icon: 'error',
|
||||||
|
timeout: 5000
|
||||||
|
});
|
||||||
|
});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -33,7 +42,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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -1,59 +1,111 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-box q-col-gutter-sm">
|
<div class="login-container">
|
||||||
<div class="text-h3 text-center row">
|
<div class="login-box">
|
||||||
<img src="/logo.png" alt="Logo" style="height: 60px; margin-right: 10px;" />
|
<div class="logo-section">
|
||||||
|
<div class="logo-container">
|
||||||
|
<img src="/logo.png" alt="Logo" class="logo" />
|
||||||
|
<div class="logo-text">KnockOut Whist</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<q-form @submit.prevent="onSubmit"
|
|
||||||
class="q-gutter-md row justify-center"
|
|
||||||
style="width: 100%">
|
|
||||||
|
|
||||||
<div class="row q-col-gutter-sm" style="width: 100%">
|
<div class="content-section">
|
||||||
|
<h1 class="title">Welcome Back</h1>
|
||||||
|
|
||||||
|
<q-form @submit.prevent="onSubmit" class="form-section">
|
||||||
<q-input
|
<q-input
|
||||||
style="width: 100%"
|
|
||||||
filled
|
|
||||||
dark
|
|
||||||
label-color="white"
|
|
||||||
color="white"
|
|
||||||
v-model="username"
|
v-model="username"
|
||||||
label="Username *"
|
label="Username"
|
||||||
|
filled
|
||||||
|
color="primary"
|
||||||
|
label-color="grey-6"
|
||||||
:error="!!loginError"
|
:error="!!loginError"
|
||||||
:error-message="loginError"
|
:error-message="loginError"
|
||||||
|
class="form-input"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:rules="[ val => val && val.length > 0 || 'Username is required']"
|
:rules="[ val => val && val.length > 0 || 'Username is required']"
|
||||||
/>
|
>
|
||||||
</div>
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="person" color="grey-6" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
<div class="row q-col-gutter-sm" style="width: 100%">
|
|
||||||
<q-input
|
<q-input
|
||||||
style="width: 100%"
|
|
||||||
filled
|
|
||||||
dark
|
|
||||||
type="password"
|
|
||||||
label-color="white"
|
|
||||||
color="white"
|
|
||||||
v-model="password"
|
v-model="password"
|
||||||
label="Password *"
|
label="Password"
|
||||||
|
filled
|
||||||
|
type="password"
|
||||||
|
color="primary"
|
||||||
|
label-color="grey-6"
|
||||||
:error="!!loginError"
|
:error="!!loginError"
|
||||||
:error-message="loginError"
|
:error-message="loginError"
|
||||||
|
class="form-input"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:rules="[
|
:rules="[
|
||||||
val => !!val || 'Password is required'
|
val => !!val || 'Password is required'
|
||||||
]"
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="lock" color="grey-6" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<div class="action-buttons">
|
||||||
|
<q-btn
|
||||||
|
type="submit"
|
||||||
|
label="Sign In"
|
||||||
|
color="primary"
|
||||||
|
class="submit-btn"
|
||||||
|
:loading="inProgress"
|
||||||
|
size="md"
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
|
||||||
|
<div class="divider-section">
|
||||||
|
<div class="divider">
|
||||||
|
<span class="divider-text">Or continue with</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="social-buttons">
|
||||||
|
<q-btn
|
||||||
|
@click="loginWithProvider('discord')"
|
||||||
|
class="social-btn discord-btn"
|
||||||
|
size="md"
|
||||||
|
rounded
|
||||||
|
icon="discord"
|
||||||
|
label="Discord"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
@click="loginWithProvider('keycloak')"
|
||||||
|
class="social-btn keycloak-btn"
|
||||||
|
size="md"
|
||||||
|
rounded
|
||||||
|
icon="emoji_people"
|
||||||
|
label="Keycloak"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row justify-center">
|
<div class="register-link">
|
||||||
<q-btn type="submit" label="Login" push color="dark" />
|
<span class="register-text">Don't have an account?</span>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
label="Register"
|
||||||
|
@click="goToRegister"
|
||||||
|
class="register-btn"
|
||||||
|
size="md"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-form>
|
|
||||||
</div>
|
</div>
|
||||||
<vue-particles
|
<vue-particles
|
||||||
id="particles-js"
|
id="particles-js"
|
||||||
:options='options'
|
:options='options'
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -88,6 +140,14 @@ const onSubmit = () => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const loginWithProvider = (provider: string) => {
|
||||||
|
window.location.href = `${api}/auth/${provider}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const goToRegister = () => {
|
||||||
|
router.push('/register')
|
||||||
|
}
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
"particles": {
|
"particles": {
|
||||||
"number": {
|
"number": {
|
||||||
@@ -200,19 +260,213 @@ const options = {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.login-box {
|
.login-container {
|
||||||
position: fixed;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
top: 50%;
|
overflow: hidden;
|
||||||
left: 50%;
|
padding: 2rem;
|
||||||
transform: translate(-50%, -50%);
|
box-sizing: border-box;
|
||||||
display: flex;
|
}
|
||||||
|
|
||||||
|
.login-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 420px;
|
max-width: 420px;
|
||||||
padding: 1rem;
|
height: 100%;
|
||||||
|
max-height: calc(100vh - 1rem);
|
||||||
|
background: var(--color-background-soft);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-radius: 24px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: var(--color-background);
|
border: 1px solid var(--color-border);
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-section {
|
||||||
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 50px;
|
||||||
|
width: auto;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: var(--color-heading);
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: var(--color-text);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-section {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-text {
|
||||||
|
background: var(--color-background-soft);
|
||||||
|
padding: 0 1rem;
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
position: relative;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 48px;
|
||||||
|
background: var(--color-background-mute);
|
||||||
|
border: 2px solid var(--color-border);
|
||||||
|
color: var(--color-heading);
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-btn:hover {
|
||||||
|
border-color: #5865F2;
|
||||||
|
background: rgba(88, 101, 242, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.keycloak-btn:hover {
|
||||||
|
border-color: #0088CC;
|
||||||
|
background: rgba(0, 136, 204, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.register-link {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-text {
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn {
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#particles-js {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.login-box {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 16px;
|
||||||
|
max-height: calc(100vh - 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
516
src/views/RegisterView.vue
Normal file
516
src/views/RegisterView.vue
Normal file
@@ -0,0 +1,516 @@
|
|||||||
|
<template>
|
||||||
|
<div class="register-container">
|
||||||
|
<div class="register-box">
|
||||||
|
<div class="logo-section">
|
||||||
|
<div class="logo-container">
|
||||||
|
<img src="/logo.png" alt="Logo" class="logo" />
|
||||||
|
<div class="logo-text">KnockOut Whist</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section">
|
||||||
|
<h1 class="title">Create Account</h1>
|
||||||
|
<p class="subtitle">Join the ultimate card game experience</p>
|
||||||
|
|
||||||
|
<q-form @submit.prevent="onSubmit" class="form-section">
|
||||||
|
<q-input
|
||||||
|
v-model="username"
|
||||||
|
label="Username"
|
||||||
|
filled
|
||||||
|
color="primary"
|
||||||
|
label-color="grey-6"
|
||||||
|
:error="!!errorMessage"
|
||||||
|
:error-message="errorMessage"
|
||||||
|
class="form-input"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
val => !!val && val.trim().length > 0 || 'Username is required',
|
||||||
|
val => val && val.trim().length >= 3 || 'Username must be at least 3 characters',
|
||||||
|
val => val && val.trim().length <= 30 || 'Username must be less than 30 characters',
|
||||||
|
val => /^[a-zA-Z0-9_-]+$/.test(val) || 'Username can only contain letters, numbers, underscores, and hyphens'
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="person" color="grey-6" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="password"
|
||||||
|
label="Password"
|
||||||
|
filled
|
||||||
|
type="password"
|
||||||
|
color="primary"
|
||||||
|
label-color="grey-6"
|
||||||
|
:error="!!errorMessage"
|
||||||
|
:error-message="errorMessage"
|
||||||
|
class="form-input"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
val => !!val || 'Password is required',
|
||||||
|
val => val && val.length >= 6 || 'Password must be at least 6 characters'
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="lock" color="grey-6" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="confirmPassword"
|
||||||
|
label="Confirm Password"
|
||||||
|
filled
|
||||||
|
type="password"
|
||||||
|
color="primary"
|
||||||
|
label-color="grey-6"
|
||||||
|
:error="!!errorMessage"
|
||||||
|
:error-message="errorMessage"
|
||||||
|
class="form-input"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
val => !!val || 'Password confirmation is required',
|
||||||
|
val => val === password || 'Passwords do not match'
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="lock_outline" color="grey-6" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<div class="action-buttons">
|
||||||
|
<q-btn
|
||||||
|
type="submit"
|
||||||
|
label="Create Account"
|
||||||
|
color="primary"
|
||||||
|
class="submit-btn"
|
||||||
|
:loading="inProgress"
|
||||||
|
size="md"
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
|
||||||
|
<div class="divider-section">
|
||||||
|
<div class="divider">
|
||||||
|
<span class="divider-text">Or register with</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="social-buttons">
|
||||||
|
<q-btn
|
||||||
|
@click="loginWithProvider('discord')"
|
||||||
|
class="social-btn discord-btn"
|
||||||
|
size="md"
|
||||||
|
rounded
|
||||||
|
icon="discord"
|
||||||
|
label="Discord"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
@click="loginWithProvider('keycloak')"
|
||||||
|
class="social-btn keycloak-btn"
|
||||||
|
size="md"
|
||||||
|
rounded
|
||||||
|
icon="emoji_people"
|
||||||
|
label="Keycloak"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login-link">
|
||||||
|
<span class="login-text">Already have an account?</span>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
label="Login"
|
||||||
|
@click="goToLogin"
|
||||||
|
class="login-btn"
|
||||||
|
size="md"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<vue-particles
|
||||||
|
id="particles-js"
|
||||||
|
:options='options'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import axios from "axios"
|
||||||
|
import router from "@/router"
|
||||||
|
|
||||||
|
const api = window?.__RUNTIME_CONFIG__?.API_URL
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
const username = ref('')
|
||||||
|
const password = ref('')
|
||||||
|
const confirmPassword = ref('')
|
||||||
|
const inProgress = ref(false)
|
||||||
|
const errorMessage = ref('')
|
||||||
|
|
||||||
|
const onSubmit = async () => {
|
||||||
|
if (inProgress.value) return
|
||||||
|
|
||||||
|
inProgress.value = true
|
||||||
|
errorMessage.value = ''
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.post(`${api}/register`, {
|
||||||
|
username: username.value.trim(),
|
||||||
|
password: password.value
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.status === 201) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'positive',
|
||||||
|
message: 'Registration successful! Please login.',
|
||||||
|
position: 'top'
|
||||||
|
})
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error.response?.status === 409) {
|
||||||
|
errorMessage.value = 'Username already taken'
|
||||||
|
} else if (error.response?.status === 400) {
|
||||||
|
errorMessage.value = error.response.data?.message || 'Invalid input'
|
||||||
|
} else {
|
||||||
|
errorMessage.value = 'Registration failed. Please try again.'
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
inProgress.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const goToLogin = () => {
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
const loginWithProvider = (provider: string) => {
|
||||||
|
window.location.href = `${api}/auth/${provider}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"sides": 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"animation": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"minimumValue": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 3,
|
||||||
|
"random": true,
|
||||||
|
"animation": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"minimumValue": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"links": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 1,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"outModes": {
|
||||||
|
"default": "out"
|
||||||
|
},
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotate": {
|
||||||
|
"x": 600,
|
||||||
|
"y": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detectsOn": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onHover": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onClick": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 400,
|
||||||
|
"links": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"quantity": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"quantity": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"detectRetina": true
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.register-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-box {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
max-height: calc(100vh - 1rem);
|
||||||
|
background: var(--color-background-soft);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-section {
|
||||||
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 50px;
|
||||||
|
width: auto;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: var(--color-heading);
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: var(--color-text);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-section {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-text {
|
||||||
|
background: var(--color-background-soft);
|
||||||
|
padding: 0 1rem;
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
position: relative;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 48px;
|
||||||
|
background: var(--color-background-mute);
|
||||||
|
border: 2px solid var(--color-border);
|
||||||
|
color: var(--color-heading);
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-btn:hover {
|
||||||
|
border-color: #5865F2;
|
||||||
|
background: rgba(88, 101, 242, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.keycloak-btn:hover {
|
||||||
|
border-color: #0088CC;
|
||||||
|
background: rgba(0, 136, 204, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-text {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-link {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-text {
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#particles-js {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.register-box {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 16px;
|
||||||
|
max-height: calc(100vh - 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
457
src/views/UsernameSelectionView.vue
Normal file
457
src/views/UsernameSelectionView.vue
Normal file
@@ -0,0 +1,457 @@
|
|||||||
|
<template>
|
||||||
|
<div class="username-selection-container">
|
||||||
|
<div class="username-selection-box">
|
||||||
|
<div class="logo-section">
|
||||||
|
<div class="logo-container">
|
||||||
|
<img src="/logo.png" alt="Logo" class="logo" />
|
||||||
|
<div class="logo-text">KnockOut Whist</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section">
|
||||||
|
<h1 class="title">Choose Your Username</h1>
|
||||||
|
<p class="subtitle">
|
||||||
|
You're signed in with <span class="provider-badge">{{ userInfo.providerName }}</span>. Please choose a username for your account.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="user-info-card">
|
||||||
|
<div class="user-avatar">
|
||||||
|
<img v-if="userInfo.picture" :src="userInfo.picture" alt="Profile" class="avatar-img" />
|
||||||
|
<div v-else class="avatar-text">{{ userInfo.name?.charAt(0)?.toUpperCase() || 'U' }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-details">
|
||||||
|
<div class="user-name">{{ userInfo.name || 'Unknown User' }}</div>
|
||||||
|
<div class="user-provider">Signed in with {{ userInfo.providerName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-form @submit.prevent="onSubmit" class="form-section">
|
||||||
|
<q-input
|
||||||
|
v-model="username"
|
||||||
|
label="Username"
|
||||||
|
filled
|
||||||
|
dark
|
||||||
|
color="primary"
|
||||||
|
label-color="grey-6"
|
||||||
|
:error="!!errorMessage"
|
||||||
|
:error-message="errorMessage"
|
||||||
|
:loading="inProgress"
|
||||||
|
class="username-input"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
val => !!val && val.trim().length > 0 || 'Username is required',
|
||||||
|
val => val && val.trim().length >= 3 || 'Username must be at least 3 characters',
|
||||||
|
val => val && val.trim().length <= 30 || 'Username must be less than 30 characters',
|
||||||
|
val => /^[a-zA-Z0-9_-]+$/.test(val) || 'Username can only contain letters, numbers, underscores, and hyphens'
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="person" color="grey-6" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<div class="action-buttons">
|
||||||
|
<q-btn
|
||||||
|
type="submit"
|
||||||
|
label="Complete Registration"
|
||||||
|
color="primary"
|
||||||
|
class="submit-btn"
|
||||||
|
:loading="inProgress"
|
||||||
|
size="md"
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
color="grey-6"
|
||||||
|
label="Cancel"
|
||||||
|
@click="goToLogin"
|
||||||
|
class="cancel-btn"
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<vue-particles
|
||||||
|
id="particles-js"
|
||||||
|
:options='options'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import axios from "axios"
|
||||||
|
import router from "@/router"
|
||||||
|
import { useUserInfo } from "@/composables/useUserInfo"
|
||||||
|
|
||||||
|
const api = window?.__RUNTIME_CONFIG__?.API_URL
|
||||||
|
const $q = useQuasar()
|
||||||
|
const uInfo = useUserInfo()
|
||||||
|
|
||||||
|
const username = ref('')
|
||||||
|
const inProgress = ref(false)
|
||||||
|
const errorMessage = ref('')
|
||||||
|
const userInfo = ref({
|
||||||
|
id: '',
|
||||||
|
email: '',
|
||||||
|
name: '',
|
||||||
|
picture: '',
|
||||||
|
provider: '',
|
||||||
|
providerName: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// Get user info from session storage or API
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${api}/select-username`, { withCredentials: true })
|
||||||
|
userInfo.value = response.data
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to get user info:', error)
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const onSubmit = async () => {
|
||||||
|
if (inProgress.value) return
|
||||||
|
|
||||||
|
inProgress.value = true
|
||||||
|
errorMessage.value = ''
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.post(`${api}/submit-username`, {
|
||||||
|
username: username.value.trim()
|
||||||
|
}, { withCredentials: true })
|
||||||
|
|
||||||
|
if (response.status === 200) {
|
||||||
|
// User successfully created and logged in
|
||||||
|
await uInfo.requestState()
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error.response?.status === 409) {
|
||||||
|
errorMessage.value = 'Username already taken'
|
||||||
|
} else if (error.response?.status === 400) {
|
||||||
|
errorMessage.value = error.response.data?.message || 'Invalid username'
|
||||||
|
} else {
|
||||||
|
errorMessage.value = 'Registration failed. Please try again.'
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
inProgress.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const goToLogin = () => {
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"sides": 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"animation": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"minimumValue": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 3,
|
||||||
|
"random": true,
|
||||||
|
"animation": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"minimumValue": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"links": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 1,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"outModes": {
|
||||||
|
"default": "out"
|
||||||
|
},
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotate": {
|
||||||
|
"x": 600,
|
||||||
|
"y": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detectsOn": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onHover": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onClick": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 400,
|
||||||
|
"links": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"quantity": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"quantity": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"detectRetina": true
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.username-selection-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 3rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username-selection-box {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
height: 100%;
|
||||||
|
max-height: calc(100vh - 1rem);
|
||||||
|
background: var(--color-background-soft);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-section {
|
||||||
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 50px;
|
||||||
|
width: auto;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: var(--color-heading);
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: var(--color-text);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-badge {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
padding: 0.2rem 0.6rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info-card {
|
||||||
|
background: var(--color-background-mute);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-text {
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-details {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
color: var(--color-heading);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-provider {
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username-input {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#particles-js {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.username-selection-box {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 16px;
|
||||||
|
max-height: calc(100vh - 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
MAJOR=0
|
MAJOR=0
|
||||||
MINOR=16
|
MINOR=23
|
||||||
PATCH=0
|
PATCH=1
|
||||||
|
|||||||
Reference in New Issue
Block a user