mejora de UX

This commit is contained in:
2025-08-16 18:12:05 -06:00
parent c1c2a70217
commit 7cee57f135
3 changed files with 74 additions and 3 deletions

View File

@@ -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;

View File

@@ -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%;
} }

View File

@@ -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/, '')