nucleo000/snatchgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras de UI

Browse Source
This commit is contained in:
josedario87
2025-08-28 03:21:49 -06:00
parent 16d8e64fcd
commit ba0f6265a7
2 changed files with 154 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
client/src/components/EventChart.vue
View File

@@ -1,7 +1,16 @@
<template>
<div class="panel glass">
<div class="panel-header">
<h2 class="panel-title">Eventos y comparación</h2>
<!-- Loading state as a single card -->
<div v-if="loading" class="card glass">
<div class="card-header">
<h2 class="card-title">Eventos y comparación</h2>
</div>
<div class="placeholder">Cargando datos…</div>
</div>
<!-- Count/percent view in a single card -->
<div v-else-if="viewMode !== 'ratio'" class="card glass">
<div class="card-header">
<h2 class="card-title">Eventos y comparación</h2>
<div v-if="filtersCollapsed && (activeFilters?.hasFilters || selectedPlayerUuid)" class="active-filters-summary">
<span class="filter-tag" v-if="activeFilters?.dataSource !== 'aggregated'">
{{ activeFilters?.dataSource === 'active-rooms' ? '🔴 Tiempo Real' : '📁 Agregado' }}
@@ -20,10 +29,7 @@
</span>
</div>
</div>
<div v-if="loading" class="placeholder">Cargando datos…</div>
<!-- Regular bars view -->
<div v-else-if="viewMode !== 'ratio'" class="bars big">
<div class="bars big">
<div
v-for="eventType in eventTypes"
:key="eventType"
@@ -64,54 +70,51 @@
</div>
<div class="hint small">Basado en mensajes disponibles por sala. Click jugador para comparar.</div>
</div>
<!-- Ratio bars view -->
<div v-else class="ratio-bars">
<div
v-for="group in ratioData"
:key="group.name"
v-show="group.total > 0"
class="ratio-group"
:class="{ highlight: highlighted === group.name }"
@mouseenter="highlighted = group.name"
@mouseleave="highlighted = ''"
>
<!-- Group Header -->
<div class="ratio-group-header">
<h3 class="group-title">{{ group.name }}</h3>
<span class="group-total">{{ group.total }}</span>
</div>
<!-- Ratio Bar -->
<div class="ratio-bar">
</div>
<!-- Ratio view: one card per group -->
<div v-else class="ratio-cards">
<div
v-for="group in ratioData"
:key="group.name"
v-show="group.total > 0"
class="card glass ratio-card"
:class="{ highlight: highlighted === group.name }"
@mouseenter="highlighted = group.name"
@mouseleave="highlighted = ''"
>
<div class="card-header">
<h3 class="card-title">{{ group.name }}</h3>
<span class="group-total">{{ group.total }}</span>
</div>
<div class="ratio-bar">
<div
v-for="(action, actionIndex) in group.actions"
:key="action"
class="ratio-segment"
:style="{
width: group.percentages[actionIndex] + '%',
background: eventStyles[action]?.gradient || 'linear-gradient(90deg, #94a3b8, #64748b)'
}"
>
<div
v-for="(action, actionIndex) in group.actions"
:key="action"
class="ratio-segment"
class="ratio-event-chip"
v-if="group.percentages[actionIndex] > 5"
:style="{
width: group.percentages[actionIndex] + '%',
background: eventStyles[action]?.gradient || 'linear-gradient(90deg, #94a3b8, #64748b)'
background: getEventChipBg(action),
borderColor: getEventBorderColor(action)
}"
>
<div
class="ratio-event-chip"
v-if="group.percentages[actionIndex] > 5"
:style="{
background: getEventChipBg(action),
borderColor: getEventBorderColor(action)
}"
>
<span class="ratio-icon">{{ eventStyles[action]?.icon || '📊' }}</span>
<span class="ratio-label">{{ group.labels[actionIndex] }}</span>
<span class="ratio-count">{{ group.values[actionIndex] }} ({{ Math.round(group.percentages[actionIndex]) }}%)</span>
</div>
<span class="ratio-icon">{{ eventStyles[action]?.icon || '📊' }}</span>
<span class="ratio-label">{{ group.labels[actionIndex] }}</span>
<span class="ratio-count">{{ group.values[actionIndex] }} ({{ Math.round(group.percentages[actionIndex]) }}%)</span>
</div>
</div>
</div>
<div class="hint small">
{{ selectedPlayerUuid ? 'Ratios del jugador seleccionado' : 'Ratios globales' }}.
Los segmentos muestran la proporción relativa dentro de cada categoría.
</div>
</div>
<div class="hint small">
{{ selectedPlayerUuid ? 'Ratios del jugador seleccionado' : 'Ratios globales' }}.
Los segmentos muestran la proporción relativa dentro de cada categoría.
</div>
</div>
</template>
@@ -303,7 +306,7 @@ function friendlyEventName(eventType: string): string {
</script>
<style scoped>
.panel {
.card {
padding: 14px 16px;
display: flex;
flex-direction: column;
@@ -312,15 +315,15 @@ function friendlyEventName(eventType: string): string {
}
.glass {
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(229, 231, 235, 0.9);
box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(229, 231, 235, 0.95);
box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.75);
backdrop-filter: blur(18px) saturate(120%);
-webkit-backdrop-filter: blur(18px) saturate(120%);
border-radius: 16px;
}
.panel-header {
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
@@ -328,12 +331,17 @@ function friendlyEventName(eventType: string): string {
flex-wrap: wrap;
gap: 8px;
}
.panel-title {
.card-title {
margin: 0;
color: #334155;
}
.ratio-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.active-filters-summary {
display: flex;
gap: 6px;
@@ -677,6 +685,12 @@ function friendlyEventName(eventType: string): string {
}
@media (max-width: 767px) {
.card { padding: 10px 12px; }
.card-header { margin-bottom: 8px; }
.card-title { font-size: 16px; }
.bars.big .bar-row { min-height: 28px; }
.ratio-group { min-height: 90px; }
.ratio-bar { height: 42px; }
.bar-chip {
min-width: 120px;
padding: 4px 8px;
@@ -699,6 +713,42 @@ function friendlyEventName(eventType: string): string {
}
@media (max-width: 480px) {
.ratio-cards {
gap: 8px;
}
.card {
padding: 8px 10px;
}
.card-header {
margin-bottom: 6px;
}
.card-title {
font-size: 14px;
}
.bars.big .bar-row { min-height: 24px; }
.group-total {
font-size: 12px;
padding: 3px 8px;
min-width: 40px;
}
.ratio-bar {
height: 34px;
}
.ratio-group {
min-height: 74px;
}
.ratio-group-header {
margin-top: 6px;
margin-bottom: 6px;
padding: 6px 8px;
}
.bar-chip {
min-width: 100px;
padding: 3px 6px;
@@ -737,6 +787,15 @@ function friendlyEventName(eventType: string): string {
font-size: 8px;
padding: 1px 3px;
}
.filter-tag {
font-size: 10px;
padding: 3px 6px;
}
.hint.small {
display: none;
}
}
@media (max-width: 767px) {
@@ -797,4 +856,4 @@ function friendlyEventName(eventType: string): string {
padding: 3px 8px;
}
}
</style>
</style>