mejora de UX
This commit is contained in:
@@ -2,7 +2,12 @@
|
|||||||
<div class="dashboard">
|
<div class="dashboard">
|
||||||
<div class="dashboard-header">
|
<div class="dashboard-header">
|
||||||
<div class="header-top">
|
<div class="header-top">
|
||||||
<h1>🎛️ Admin Dashboard</h1>
|
<div class="header-left">
|
||||||
|
<button @click="goToSelector" class="btn btn-back">
|
||||||
|
← UUIDs
|
||||||
|
</button>
|
||||||
|
<h1>🎛️ Admin Dashboard</h1>
|
||||||
|
</div>
|
||||||
<div class="connection-status">
|
<div class="connection-status">
|
||||||
<div :class="['status-indicator', { 'connected': isSSEConnected, 'disconnected': !isSSEConnected }]"></div>
|
<div :class="['status-indicator', { 'connected': isSSEConnected, 'disconnected': !isSSEConnected }]"></div>
|
||||||
<span class="status-text">{{ isSSEConnected ? 'Real-time' : 'Polling' }}</span>
|
<span class="status-text">{{ isSSEConnected ? 'Real-time' : 'Polling' }}</span>
|
||||||
@@ -405,6 +410,10 @@ function goToLobby() {
|
|||||||
router.push('/');
|
router.push('/');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function goToSelector() {
|
||||||
|
router.push('/');
|
||||||
|
}
|
||||||
|
|
||||||
function openTabs() {
|
function openTabs() {
|
||||||
const base = window.location.origin;
|
const base = window.location.origin;
|
||||||
const openOne = (uuid: string) => {
|
const openOne = (uuid: string) => {
|
||||||
@@ -748,6 +757,31 @@ const selectedRoom = computed(() => {
|
|||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-back {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: white;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-back:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-color: rgba(255, 255, 255, 0.3);
|
||||||
|
transform: translateX(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard-header h1 {
|
.dashboard-header h1 {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -1,6 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="lobby">
|
<div class="lobby">
|
||||||
<div class="lobby-container">
|
<div class="lobby-container">
|
||||||
|
<div class="lobby-header">
|
||||||
|
<button @click="goToSelector" class="btn btn-back">
|
||||||
|
← UUIDs
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<h1 class="title">🎮 Snatch Game</h1>
|
<h1 class="title">🎮 Snatch Game</h1>
|
||||||
<div class="subtitle">Competitive Clicker Battle</div>
|
<div class="subtitle">Competitive Clicker Battle</div>
|
||||||
|
|
||||||
@@ -351,6 +356,10 @@ function shareQR() {
|
|||||||
copyUrl();
|
copyUrl();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function goToSelector() {
|
||||||
|
router.push('/');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -378,11 +387,39 @@ function shareQR() {
|
|||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lobby-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-back {
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
color: #475569;
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-back:hover {
|
||||||
|
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
|
||||||
|
border-color: #94a3b8;
|
||||||
|
transform: translateX(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.lobby-container {
|
.lobby-container {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lobby-header {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.name-input {
|
.name-input {
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,11 +12,11 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: process.env.VITE_DEV_API_PROXY_TARGET || 'http://localhost:2567',
|
target: process.env.VITE_DEV_API_PROXY_TARGET || 'http://localhost:3000',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
},
|
},
|
||||||
'/ws': {
|
'/ws': {
|
||||||
target: process.env.VITE_DEV_WS_PROXY_TARGET || 'http://localhost:2567',
|
target: process.env.VITE_DEV_WS_PROXY_TARGET || 'http://localhost:3000',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
ws: true,
|
ws: true,
|
||||||
rewrite: (path) => path.replace(/^\/ws/, '')
|
rewrite: (path) => path.replace(/^\/ws/, '')
|
||||||
|
|||||||
Reference in New Issue
Block a user