Compare commits
2 Commits
3dda2fefc2
...
feat/BAC-8
| Author | SHA1 | Date | |
|---|---|---|---|
|
5f30b9f739 | ||
|
|
7829b35211 |
@@ -160,8 +160,3 @@
|
|||||||
### Features
|
### Features
|
||||||
|
|
||||||
* Update LobbyComponent to use icons for player removal buttons ([c653746](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/c6537467f87d60aeece18f86f42c839d5437c18b))
|
* 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))
|
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ function getCardImagePath(cardPath: string) {
|
|||||||
function selectTie(tieIndex: number) {
|
function selectTie(tieIndex: number) {
|
||||||
wb.sendAndWait("PickTie", { cardIndex: tieIndex }).then(
|
wb.sendAndWait("PickTie", { cardIndex: tieIndex }).then(
|
||||||
$q.notify({
|
$q.notify({
|
||||||
message: "You've successfully picked your tieCard",
|
message: "You've successfully picked your tieCard!",
|
||||||
color: "positive",
|
color: "positive",
|
||||||
position: "top"
|
position: "top"
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
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";
|
||||||
@@ -53,18 +51,6 @@ 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',
|
||||||
|
|||||||
@@ -48,42 +48,6 @@
|
|||||||
<div class="row justify-center">
|
<div class="row justify-center">
|
||||||
<q-btn type="submit" label="Login" push color="dark" />
|
<q-btn type="submit" label="Login" push color="dark" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row justify-center q-mt-md">
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="text-white text-caption">Or continue with:</p>
|
|
||||||
<div class="row q-gutter-sm justify-center">
|
|
||||||
<q-btn
|
|
||||||
@click="loginWithProvider('discord')"
|
|
||||||
color="#5865F2"
|
|
||||||
text-color="white"
|
|
||||||
icon="mdi-discord"
|
|
||||||
label="Discord"
|
|
||||||
outline
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
@click="loginWithProvider('keycloak')"
|
|
||||||
color="#0088CC"
|
|
||||||
text-color="white"
|
|
||||||
icon="mdi-key"
|
|
||||||
label="Keycloak"
|
|
||||||
outline
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-center q-mt-md">
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
color="white"
|
|
||||||
label="Don't have an account? Register"
|
|
||||||
@click="goToRegister"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
</q-form>
|
||||||
</div>
|
</div>
|
||||||
<vue-particles
|
<vue-particles
|
||||||
@@ -124,14 +88,6 @@ 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": {
|
||||||
|
|||||||
@@ -1,306 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="register-box q-col-gutter-sm">
|
|
||||||
<div class="text-h3 text-center row">
|
|
||||||
<img src="/logo.png" alt="Logo" style="height: 60px; margin-right: 10px;" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-h5 text-center text-white q-mb-md">Create Account</h1>
|
|
||||||
|
|
||||||
<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%">
|
|
||||||
<q-input
|
|
||||||
style="width: 100%"
|
|
||||||
filled
|
|
||||||
dark
|
|
||||||
label-color="white"
|
|
||||||
color="white"
|
|
||||||
v-model="username"
|
|
||||||
label="Username *"
|
|
||||||
:error="!!errorMessage"
|
|
||||||
:error-message="errorMessage"
|
|
||||||
|
|
||||||
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'
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row q-col-gutter-sm" style="width: 100%">
|
|
||||||
<q-input
|
|
||||||
style="width: 100%"
|
|
||||||
filled
|
|
||||||
dark
|
|
||||||
type="password"
|
|
||||||
label-color="white"
|
|
||||||
color="white"
|
|
||||||
v-model="password"
|
|
||||||
label="Password *"
|
|
||||||
:error="!!errorMessage"
|
|
||||||
:error-message="errorMessage"
|
|
||||||
|
|
||||||
lazy-rules
|
|
||||||
:rules="[
|
|
||||||
val => !!val || 'Password is required',
|
|
||||||
val => val && val.length >= 6 || 'Password must be at least 6 characters'
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row q-col-gutter-sm" style="width: 100%">
|
|
||||||
<q-input
|
|
||||||
style="width: 100%"
|
|
||||||
filled
|
|
||||||
dark
|
|
||||||
type="password"
|
|
||||||
label-color="white"
|
|
||||||
color="white"
|
|
||||||
v-model="confirmPassword"
|
|
||||||
label="Confirm Password *"
|
|
||||||
:error="!!errorMessage"
|
|
||||||
:error-message="errorMessage"
|
|
||||||
|
|
||||||
lazy-rules
|
|
||||||
:rules="[
|
|
||||||
val => !!val || 'Password confirmation is required',
|
|
||||||
val => val === password || 'Passwords do not match'
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-center">
|
|
||||||
<q-btn type="submit" label="Register" push color="dark" :loading="inProgress" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-center q-mt-md">
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="text-white text-caption">Or register with:</p>
|
|
||||||
<div class="row q-gutter-sm justify-center">
|
|
||||||
<q-btn
|
|
||||||
@click="loginWithProvider('discord')"
|
|
||||||
color="#5865F2"
|
|
||||||
text-color="white"
|
|
||||||
icon="mdi-discord"
|
|
||||||
label="Discord"
|
|
||||||
outline
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
@click="loginWithProvider('keycloak')"
|
|
||||||
color="#0088CC"
|
|
||||||
text-color="white"
|
|
||||||
icon="mdi-key"
|
|
||||||
label="Keycloak"
|
|
||||||
outline
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-center">
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
color="white"
|
|
||||||
label="Already have an account? Login"
|
|
||||||
@click="goToLogin"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
</div>
|
|
||||||
<vue-particles
|
|
||||||
id="particles-js"
|
|
||||||
:options='options'
|
|
||||||
/>
|
|
||||||
</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-box {
|
|
||||||
position: fixed;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 420px;
|
|
||||||
padding: 1rem;
|
|
||||||
z-index: 2;
|
|
||||||
background-color: var(--color-background);
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,296 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="username-selection-box q-col-gutter-sm">
|
|
||||||
<div class="text-h3 text-center row">
|
|
||||||
<img src="/logo.png" alt="Logo" style="height: 60px; margin-right: 10px;" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-h5 text-center text-white q-mb-md">Choose Your Username</h1>
|
|
||||||
<p class="text-center text-white text-caption q-mb-lg">
|
|
||||||
You're signed in with {{ userInfo.provider }}. Please choose a username for your account.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="user-info q-mb-lg">
|
|
||||||
<div class="row items-center q-gutter-md">
|
|
||||||
<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="text-white text-weight-medium">{{ userInfo.name || 'Unknown User' }}</div>
|
|
||||||
<div class="text-white text-caption">Signed in with {{ userInfo.provider }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-form @submit.prevent="onSubmit" class="q-gutter-md">
|
|
||||||
<div class="row q-col-gutter-sm">
|
|
||||||
<q-input
|
|
||||||
style="width: 100%"
|
|
||||||
filled
|
|
||||||
dark
|
|
||||||
label-color="white"
|
|
||||||
color="white"
|
|
||||||
v-model="username"
|
|
||||||
label="Username *"
|
|
||||||
:error="!!errorMessage"
|
|
||||||
:error-message="errorMessage"
|
|
||||||
:loading="inProgress"
|
|
||||||
|
|
||||||
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'
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-center">
|
|
||||||
<q-btn type="submit" label="Complete Registration" push color="primary" :loading="inProgress" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-center">
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
color="white"
|
|
||||||
label="Cancel"
|
|
||||||
@click="goToLogin"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
</div>
|
|
||||||
<vue-particles
|
|
||||||
id="particles-js"
|
|
||||||
:options='options'
|
|
||||||
/>
|
|
||||||
</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: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
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-box {
|
|
||||||
position: fixed;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 420px;
|
|
||||||
padding: 1rem;
|
|
||||||
z-index: 2;
|
|
||||||
background-color: var(--color-background);
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-info {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1rem;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar {
|
|
||||||
min-width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-text {
|
|
||||||
color: white;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-details {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
MAJOR=0
|
MAJOR=0
|
||||||
MINOR=23
|
MINOR=22
|
||||||
PATCH=0
|
PATCH=0
|
||||||
|
|||||||
Reference in New Issue
Block a user