mejora de UX
This commit is contained in:
@@ -2,7 +2,12 @@
|
||||
<div class="dashboard">
|
||||
<div class="dashboard-header">
|
||||
<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="['status-indicator', { 'connected': isSSEConnected, 'disconnected': !isSSEConnected }]"></div>
|
||||
<span class="status-text">{{ isSSEConnected ? 'Real-time' : 'Polling' }}</span>
|
||||
@@ -405,6 +410,10 @@ function goToLobby() {
|
||||
router.push('/');
|
||||
}
|
||||
|
||||
function goToSelector() {
|
||||
router.push('/');
|
||||
}
|
||||
|
||||
function openTabs() {
|
||||
const base = window.location.origin;
|
||||
const openOne = (uuid: string) => {
|
||||
@@ -748,6 +757,31 @@ const selectedRoom = computed(() => {
|
||||
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 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0;
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="lobby">
|
||||
<div class="lobby-container">
|
||||
<div class="lobby-header">
|
||||
<button @click="goToSelector" class="btn btn-back">
|
||||
← UUIDs
|
||||
</button>
|
||||
</div>
|
||||
<h1 class="title">🎮 Snatch Game</h1>
|
||||
<div class="subtitle">Competitive Clicker Battle</div>
|
||||
|
||||
@@ -351,6 +356,10 @@ function shareQR() {
|
||||
copyUrl();
|
||||
}
|
||||
}
|
||||
|
||||
function goToSelector() {
|
||||
router.push('/');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -378,11 +387,39 @@ function shareQR() {
|
||||
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) {
|
||||
.lobby-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.lobby-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.name-input {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
@@ -12,11 +12,11 @@ export default defineConfig({
|
||||
},
|
||||
proxy: {
|
||||
'/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
|
||||
},
|
||||
'/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,
|
||||
ws: true,
|
||||
rewrite: (path) => path.replace(/^\/ws/, '')
|
||||
|
||||
Reference in New Issue
Block a user