refactorizacion leaderboard
This commit is contained in:
309
client/src/components/EventChart.vue
Normal file
309
client/src/components/EventChart.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<div class="panel glass">
|
||||
<h2 class="panel-title">Eventos y comparación</h2>
|
||||
<div v-if="loading" class="placeholder">Cargando datos…</div>
|
||||
<div v-else class="bars big">
|
||||
<div
|
||||
v-for="eventType in eventTypes"
|
||||
:key="eventType"
|
||||
class="bar-row"
|
||||
:class="{ highlight: highlighted === eventType }"
|
||||
@mouseenter="highlighted = eventType"
|
||||
@mouseleave="highlighted = ''"
|
||||
>
|
||||
<div class="bar">
|
||||
<div
|
||||
class="bar-fill global shimmer"
|
||||
:style="{
|
||||
width: globalBarWidth(eventType) + '%',
|
||||
background: eventStyles[eventType]?.gradient || 'linear-gradient(90deg, #94a3b8, #64748b)'
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
v-if="selectedPlayerUuid"
|
||||
class="bar-fill player"
|
||||
:style="{
|
||||
width: playerBarWidth(eventType) + '%',
|
||||
background: playerBarGradient
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="bar-chip"
|
||||
:style="{
|
||||
background: getEventChipBg(eventType),
|
||||
borderColor: getEventBorderColor(eventType)
|
||||
}"
|
||||
>
|
||||
<span class="event-icon">{{ eventStyles[eventType]?.icon || '📊' }}</span>
|
||||
<span class="chip-label">{{ friendlyEventName(eventType) }}</span>
|
||||
<span class="chip-count global">{{ globalValueLabel(eventType) }}</span>
|
||||
<span v-if="selectedPlayerUuid" class="chip-count player">{{ playerValueLabel(eventType) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint small">Basado en mensajes disponibles por sala. Click jugador para comparar.</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
interface Props {
|
||||
eventTypes: string[];
|
||||
eventStyles: Record<string, { icon: string; color: string; gradient: string }>;
|
||||
globalEventCounts: Record<string, number>;
|
||||
playerEventCounts: Record<string, number>;
|
||||
selectedPlayerUuid?: string;
|
||||
playerBarGradient: string;
|
||||
showPercent: boolean;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
selectedPlayerUuid: '',
|
||||
loading: false
|
||||
});
|
||||
|
||||
const highlighted = ref('');
|
||||
|
||||
// Global calculations
|
||||
const globalMax = computed(() => {
|
||||
const vals = props.eventTypes.map(k => props.globalEventCounts[k] || 0);
|
||||
const m = Math.max(0, ...vals);
|
||||
return m || 1;
|
||||
});
|
||||
|
||||
const globalTotal = computed(() =>
|
||||
props.eventTypes.reduce((acc, k) => acc + (props.globalEventCounts[k] || 0), 0) || 1
|
||||
);
|
||||
|
||||
function globalBarWidth(eventType: string) {
|
||||
const v = props.globalEventCounts[eventType] || 0;
|
||||
return Math.round((v / (props.showPercent ? globalTotal.value : globalMax.value)) * 100);
|
||||
}
|
||||
|
||||
function globalValueLabel(eventType: string) {
|
||||
const v = props.globalEventCounts[eventType] || 0;
|
||||
return props.showPercent ? `${Math.round((v / globalTotal.value) * 100)}%` : String(v);
|
||||
}
|
||||
|
||||
// Player calculations
|
||||
const playerMax = computed(() => {
|
||||
const vals = props.eventTypes.map(k => props.playerEventCounts[k] || 0);
|
||||
const m = Math.max(0, ...vals);
|
||||
return m || 1;
|
||||
});
|
||||
|
||||
const playerTotal = computed(() =>
|
||||
props.eventTypes.reduce((acc, k) => acc + (props.playerEventCounts[k] || 0), 0) || 1
|
||||
);
|
||||
|
||||
function playerBarWidth(eventType: string) {
|
||||
const v = props.playerEventCounts[eventType] || 0;
|
||||
return Math.round((v / (props.showPercent ? playerTotal.value : playerMax.value)) * 100);
|
||||
}
|
||||
|
||||
function playerValueLabel(eventType: string) {
|
||||
const v = props.playerEventCounts[eventType] || 0;
|
||||
return props.showPercent ? `${Math.round((v / playerTotal.value) * 100)}%` : String(v);
|
||||
}
|
||||
|
||||
// Styling helpers
|
||||
function getEventChipBg(eventType: string): string {
|
||||
const style = props.eventStyles[eventType];
|
||||
if (!style) return 'rgba(255,255,255,0.82)';
|
||||
return `linear-gradient(135deg, ${style.color}15 0%, rgba(255,255,255,0.9) 100%)`;
|
||||
}
|
||||
|
||||
function getEventBorderColor(eventType: string): string {
|
||||
const style = props.eventStyles[eventType];
|
||||
if (!style) return 'rgba(229,231,235,0.9)';
|
||||
return `${style.color}40`;
|
||||
}
|
||||
|
||||
function friendlyEventName(eventType: string): string {
|
||||
const friendlyNames: Record<string, string> = {
|
||||
p1_propose: 'Ofrecer',
|
||||
p1_no_offer: 'No Ofrecer',
|
||||
p2_snatch: 'Robar',
|
||||
p2_accept: 'Aceptar Oferta',
|
||||
p2_force: 'Forzar Oferta',
|
||||
p2_no_force: 'No Forzar Oferta',
|
||||
p2_reject: 'Rechazar Oferta',
|
||||
p1_shame: 'Asignar Vergüenza',
|
||||
p1_no_shame: 'No Asignar Vergüenza',
|
||||
p1_report: 'Denunciar',
|
||||
p1_no_report: 'No Denunciar',
|
||||
};
|
||||
return friendlyNames[eventType] || eventType;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.panel {
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
backdrop-filter: blur(18px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(120%);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 10px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #64748b;
|
||||
padding: 12px;
|
||||
border: 1px dashed #e5e9f0;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.bars.big {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bars.big .bar-row {
|
||||
flex: 1 1 0;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.bar-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
transition: transform .18s ease;
|
||||
}
|
||||
|
||||
.bar-row.highlight {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(238,242,255,0.4) 0%, rgba(199,210,254,0.2) 100%);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(199,210,254,0.3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
transform-origin: left center;
|
||||
transition: width .65s cubic-bezier(.2,.7,.1,1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.bar-fill.global {
|
||||
backdrop-filter: blur(4px);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.bar-fill.player {
|
||||
mix-blend-mode: normal;
|
||||
opacity: 0.85;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.bar-chip {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4);
|
||||
backdrop-filter: blur(8px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.bar-row:hover .bar-chip {
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.event-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chip-label {
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: .1px;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chip-count {
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
font-weight: 800;
|
||||
font-size: 11px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.chip-count.global {
|
||||
background: rgba(255,255,255,0.7);
|
||||
color: #1f2937;
|
||||
border: 1px solid rgba(229,231,235,0.5);
|
||||
}
|
||||
|
||||
.chip-count.player {
|
||||
background: rgba(99,102,241,0.15);
|
||||
color: #312e81;
|
||||
border: 1px solid rgba(99,102,241,0.3);
|
||||
}
|
||||
|
||||
/* Shimmer on global bars for subtle movement */
|
||||
.shimmer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
|
||||
transform: translateX(-100%);
|
||||
animation: shimmer 3.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
45% { transform: translateX(110%); }
|
||||
100% { transform: translateX(110%); }
|
||||
}
|
||||
|
||||
.hint.small {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user