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

reaccion del frontend

Browse Source
This commit is contained in:
josedario87
2025-08-16 00:26:44 -06:00
parent f56244aa62
commit b18397deb4
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/views/games/PlayerStats.vue
View File

@@ -1,8 +1,14 @@
<template>
<div class="player-card" :class="{ 'current-player': highlight }" :style="{ '--primary': primary } as any">
<div
class="player-card"
:class="{ 'current-player': highlight, 'shamed': hasShame }"
:style="{ '--primary': primary } as any"
:aria-label="hasShame ? 'Jugador con vergüenza' : 'Jugador'"
>
<div class="header">
<div class="name">{{ player.name || '—' }}</div>
<div class="role" :class="player.role">{{ player.role || '—' }}</div>
<div v-if="hasShame" class="shame-badge" :title="`Vergüenza: ${player.shameTokens}`">😶 × {{ player.shameTokens }}</div>
</div>
<div class="tokens">
<div class="token pill">
@@ -14,7 +20,7 @@
<span class="val"><AnimatedNumber :value="player.eloteTokens ?? 0" /></span>
</div>
<Transition name="pop">
<div v-if="(player.shameTokens ?? 0) > 0" class="token pill subtle shame-pill">
<div v-if="hasShame" class="token pill shame-pill" aria-label="Vergüenza">
<span class="icon">😶</span>
<span class="val"><AnimatedNumber :value="player.shameTokens ?? 0" :pulseOnFirst="true" /></span>
</div>
@@ -42,6 +48,7 @@ interface PlayerView {
const props = defineProps<{ player: PlayerView & { color?: string }; highlight?: boolean }>();
const highlight = computed(() => !!props.highlight);
const hasShame = computed(() => (props.player.shameTokens || 0) > 0);
const scoreAsP1 = computed(() => (props.player.pavoTokens || 0) * 1 + (props.player.eloteTokens || 0) * 2);
const scoreAsP2 = computed(() => (props.player.eloteTokens || 0) * 1 + (props.player.pavoTokens || 0) * 2);
@@ -50,16 +57,22 @@ const primary = computed(() => props.player.color || '#667eea');
</script>
<style scoped>
.player-card { background:#fff; border-radius:12px; padding:12px; border:1px solid #eee; box-shadow:0 10px 24px rgba(0,0,0,0.08); }
.player-card { position:relative; background:#fff; border-radius:12px; padding:12px; border:1px solid #eee; box-shadow:0 10px 24px rgba(0,0,0,0.08); }
.player-card.current-player { outline: 0.5px solid b; box-shadow:0 1px 7px var(--primary); }
.player-card.shamed { border-color:#fca5a5; box-shadow: 0 6px 24px rgba(239,68,68,0.25); background: linear-gradient(180deg, #fff 0%, #fff5f5 100%); }
.player-card.shamed::after { content:""; position:absolute; inset:-2px; border-radius:14px; pointer-events:none; box-shadow: 0 0 0 2px rgba(239,68,68,0.25) inset; }
.player-card.shamed { animation: shamePulse 1.6s ease-in-out 2; }
@keyframes shamePulse { 0%{ transform:scale(1); } 50%{ transform:scale(1.01); } 100%{ transform:scale(1); } }
.header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.name { font-weight: 700; color:#333; }
.role { font-size:12px; padding:2px 8px; border-radius:10px; background:#f0f0f0; color:#555; }
.role.P1 { background: color-mix(in srgb, var(--primary) 15%, white); color: var(--primary); }
.role.P2 { background: color-mix(in srgb, var(--primary) 15%, white); color: var(--primary); }
.shame-badge { margin-left:8px; margin-right:0; background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; border-radius:999px; padding:2px 8px; font-weight:800; font-size:12px; display:flex; align-items:center; gap:6px; }
.tokens { display:flex; gap:10px; margin:8px 0; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f7f7f7; border:1px solid #eee; }
.pill.subtle { background:#fafafa; color:#666; }
.shame-pill { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.icon { font-size: 16px; }
.val { font-weight: 600; color:#333; display:inline-block; min-width: 1ch; }
.score { display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding:8px; border-radius:10px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white) 0%, #ffffff 100%); border:1px solid color-mix(in srgb, var(--primary) 30%, #e6e9ff); }