Pandipipas/scoreko-dev
1
0
Fork 0
mirror of https://github.com/Pandipipas/scoreko-dev.git synced 2026-06-06 03:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #127 from Pandipipas/add-animations-to-scoreboard-graphics

Browse Source 
Add reactive animations to scoreboard and scoreboard-2xko
This commit is contained in:
Pandipipas
2026-02-21 01:24:04 +01:00
committed by GitHub
parent 66572e0bf4 8d1aecc44a
commit 6412bce598
2 changed files with 463 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/graphics/scoreboard-2xko/main.vue
+179 -7
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { useHead } from '@unhead/vue';
import { computed, ref, watch } from 'vue';
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
import { graphicsSettingsReplicant, playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
import { resolveCountryCode } from '../../shared/countries';
import { getCharactersByGame } from '../../shared/fighting-characters';
@@ -60,6 +60,68 @@ watch(() => scoreboard.value.rightCountryOverride, async (country) => { rightFla
const roundText = computed(() => scoreboard.value.round || 'WINNERS FINALS');
const gameText = computed(() => scoreboard.value.game || '2XKO');
const leftScoreAnimClass = ref('');
const rightScoreAnimClass = ref('');
let leftScoreTimer: ReturnType<typeof setTimeout> | undefined;
let rightScoreTimer: ReturnType<typeof setTimeout> | undefined;
const triggerScoreAnimation = (side: 'left' | 'right', direction: 'up' | 'down') => {
const className = direction === 'up' ? 'score-up' : 'score-down';
if (side === 'left') {
leftScoreAnimClass.value = '';
if (leftScoreTimer) {
clearTimeout(leftScoreTimer);
}
void nextTick(() => {
leftScoreAnimClass.value = className;
leftScoreTimer = setTimeout(() => {
leftScoreAnimClass.value = '';
}, 420);
});
return;
}
rightScoreAnimClass.value = '';
if (rightScoreTimer) {
clearTimeout(rightScoreTimer);
}
void nextTick(() => {
rightScoreAnimClass.value = className;
rightScoreTimer = setTimeout(() => {
rightScoreAnimClass.value = '';
}, 420);
});
};
watch(
() => scoreboard.value.leftScore,
(nextScore, previousScore) => {
if (previousScore === undefined || nextScore === previousScore) {
return;
}
triggerScoreAnimation('left', nextScore > previousScore ? 'up' : 'down');
},
);
watch(
() => scoreboard.value.rightScore,
(nextScore, previousScore) => {
if (previousScore === undefined || nextScore === previousScore) {
return;
}
triggerScoreAnimation('right', nextScore > previousScore ? 'up' : 'down');
},
);
onBeforeUnmount(() => {
if (leftScoreTimer) {
clearTimeout(leftScoreTimer);
}
if (rightScoreTimer) {
clearTimeout(rightScoreTimer);
}
});
</script>
<template>
@@ -216,8 +278,13 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
<div style="display:flex;position:absolute;width:100%;justify-content:center;gap:582px;top:0;">
<div style="position:relative;width:100%;">
<Transition
name="flag-swap"
mode="out-in"
>
<svg
id="p1BGfull"
:key="`left-plaque-${scoreboard.leftPlayerId}-${scoreboard.leftCountryOverride}-${scoreboard.leftCharacter}`"
class="bg-img playerPlaque"
style="position:absolute;top:-7px;right:-8px;"
xmlns="http://www.w3.org/2000/svg"
@@ -257,10 +324,16 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
preserveAspectRatio="xMidYMid meet"
clip-path="url(#p1-clip-path)"
/></svg>
</Transition>
</div>
<div style="position:relative;width:100%;">
<Transition
name="flag-swap"
mode="out-in"
>
<svg
id="p2BGfull"
:key="`right-plaque-${scoreboard.rightPlayerId}-${scoreboard.rightCountryOverride}-${scoreboard.rightCharacter}`"
class="bg-img playerPlaque"
style="position:absolute;top:-7px;left:-8px;"
xmlns="http://www.w3.org/2000/svg"
@@ -303,6 +376,7 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
preserveAspectRatio="xMidYMid meet"
clip-path="url(#p2-clip-path)"
/></svg>
</Transition>
</div>
</div>
@@ -313,12 +387,27 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
class="nameBlock"
>
<div class="name">
<Transition
name="text-fade"
mode="out-in"
>
<span :key="`${scoreboard.leftPlayerId}-${leftTeam}-${leftName}`">
{{ leftTeam }} <span v-if="leftTeam">|</span> {{ leftName }}
</span>
</Transition>
</div>
</div>
<div class="scoreBlock">
<div class="score">
{{ scoreboard.leftScore }}
<div
class="score"
:class="leftScoreAnimClass"
>
<Transition
name="score-flip"
mode="out-in"
>
<span :key="scoreboard.leftScore">{{ scoreboard.leftScore }}</span>
</Transition>
</div>
</div>
<div class="centerPanel">
@@ -327,12 +416,22 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
id="stageText"
class="infoBar"
>
{{ gameText }}
<Transition
name="text-fade"
mode="out-in"
>
<span :key="gameText">{{ gameText }}</span>
</Transition>
</div><div
id="topText"
class="infoBar"
>
{{ roundText }}
<Transition
name="text-fade"
mode="out-in"
>
<span :key="roundText">{{ roundText }}</span>
</Transition>
</div><div
id="matchTypeText"
class="infoBar"
@@ -342,8 +441,16 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
</div>
</div>
<div class="scoreBlock">
<div class="score">
{{ scoreboard.rightScore }}
<div
class="score"
:class="rightScoreAnimClass"
>
<Transition
name="score-flip"
mode="out-in"
>
<span :key="scoreboard.rightScore">{{ scoreboard.rightScore }}</span>
</Transition>
</div>
</div>
<div
@@ -351,7 +458,14 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
class="nameBlock"
>
<div class="name">
<Transition
name="text-fade"
mode="out-in"
>
<span :key="`${scoreboard.rightPlayerId}-${rightTeam}-${rightName}`">
{{ rightTeam }} <span v-if="rightTeam">|</span> {{ rightName }}
</span>
</Transition>
</div>
</div>
</div>
@@ -641,6 +755,64 @@ body {
max-width: 46px;
}
.text-fade-enter-active,
.text-fade-leave-active {
transition: opacity 180ms ease, transform 180ms ease;
}
.text-fade-enter-from,
.text-fade-leave-to {
opacity: 0;
transform: translateY(6px);
}
.score-flip-enter-active,
.score-flip-leave-active {
transition: opacity 200ms ease, transform 200ms ease;
display: inline-block;
}
.score-flip-enter-from {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
.score-flip-leave-to {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
.score-up {
animation: score-up-pulse 420ms ease;
}
.score-down {
animation: score-down-pulse 420ms ease;
}
.flag-swap-enter-active,
.flag-swap-leave-active {
transition: opacity 220ms ease, transform 220ms ease;
}
.flag-swap-enter-from,
.flag-swap-leave-to {
opacity: 0;
transform: scale(0.95);
}
@keyframes score-up-pulse {
0% { transform: scale(1); color: #ffffff; }
50% { transform: scale(1.18); color: #a7ffcf; }
100% { transform: scale(1); color: #ffffff; }
}
@keyframes score-down-pulse {
0% { transform: scale(1); color: #ffffff; }
50% { transform: scale(1.18); color: #ffd0d0; }
100% { transform: scale(1); color: #ffffff; }
}
.team-custom-image-style {
max-height: 29px;
max-width: 39px;
src/graphics/scoreboard/main.vue
+157 -3
View File
@@ -110,6 +110,59 @@ watch(
const roundText = computed(() => scoreboard.value.round || 'Round');
const leftScoreAnimClass = ref('');
const rightScoreAnimClass = ref('');
let leftScoreTimer: ReturnType<typeof setTimeout> | undefined;
let rightScoreTimer: ReturnType<typeof setTimeout> | undefined;
const triggerScoreAnimation = (side: 'left' | 'right', direction: 'up' | 'down') => {
const className = direction === 'up' ? 'score-up' : 'score-down';
if (side === 'left') {
leftScoreAnimClass.value = '';
if (leftScoreTimer) {
clearTimeout(leftScoreTimer);
}
void nextTick(() => {
leftScoreAnimClass.value = className;
leftScoreTimer = setTimeout(() => {
leftScoreAnimClass.value = '';
}, 420);
});
return;
}
rightScoreAnimClass.value = '';
if (rightScoreTimer) {
clearTimeout(rightScoreTimer);
}
void nextTick(() => {
rightScoreAnimClass.value = className;
rightScoreTimer = setTimeout(() => {
rightScoreAnimClass.value = '';
}, 420);
});
};
watch(
() => scoreboard.value.leftScore,
(nextScore, previousScore) => {
if (previousScore === undefined || nextScore === previousScore) {
return;
}
triggerScoreAnimation('left', nextScore > previousScore ? 'up' : 'down');
},
);
watch(
() => scoreboard.value.rightScore,
(nextScore, previousScore) => {
if (previousScore === undefined || nextScore === previousScore) {
return;
}
triggerScoreAnimation('right', nextScore > previousScore ? 'up' : 'down');
},
);
const progressTextWrapperRef = ref<HTMLElement | null>(null);
const progressTextRef = ref<HTMLElement | null>(null);
const p1NameTextWrapperRef = ref<HTMLElement | null>(null);
@@ -162,6 +215,12 @@ onMounted(() => {
onBeforeUnmount(() => {
window.removeEventListener('resize', refitText);
if (leftScoreTimer) {
clearTimeout(leftScoreTimer);
}
if (rightScoreTimer) {
clearTimeout(rightScoreTimer);
}
});
watch(
@@ -206,7 +265,12 @@ watch(
id="progress-text"
ref="progressTextRef"
>
{{ roundText }}
<Transition
name="text-fade"
mode="out-in"
>
<span :key="roundText">{{ roundText }}</span>
</Transition>
</div>
</div>
@@ -218,8 +282,14 @@ watch(
<div
ref="p1ScoreTextRef"
class="games-text"
:class="leftScoreAnimClass"
>
{{ scoreboard.leftScore }}
<Transition
name="score-flip"
mode="out-in"
>
<span :key="scoreboard.leftScore">{{ scoreboard.leftScore }}</span>
</Transition>
</div>
</div>
@@ -231,8 +301,14 @@ watch(
<div
ref="p2ScoreTextRef"
class="games-text"
:class="rightScoreAnimClass"
>
{{ scoreboard.rightScore }}
<Transition
name="score-flip"
mode="out-in"
>
<span :key="scoreboard.rightScore">{{ scoreboard.rightScore }}</span>
</Transition>
</div>
</div>
@@ -251,6 +327,11 @@ watch(
class="name-text-wrapper"
>
<div ref="p1NameTextRef">
<Transition
name="text-fade"
mode="out-in"
>
<span :key="`${scoreboard.leftPlayerId}-${leftTeam}-${leftName}`">
<span
v-if="leftTeam"
class="team-text"
@@ -260,12 +341,16 @@ watch(
<span class="gamertag-text">
{{ leftName }}
</span>
</span>
</Transition>
</div>
</div>
<Transition name="flag-swap">
<div
v-if="leftFlagUrl"
id="p1-flag-wrapper"
:key="`left-${scoreboard.leftCountryOverride}-${leftFlagUrl}`"
class="flag-wrapper"
>
<div class="flag-mask">
@@ -276,6 +361,7 @@ watch(
>
</div>
</div>
</Transition>
</div>
<div
@@ -293,6 +379,11 @@ watch(
class="name-text-wrapper"
>
<div ref="p2NameTextRef">
<Transition
name="text-fade"
mode="out-in"
>
<span :key="`${scoreboard.rightPlayerId}-${rightTeam}-${rightName}`">
<span
v-if="rightTeam"
class="team-text"
@@ -302,12 +393,16 @@ watch(
<span class="gamertag-text">
{{ rightName }}
</span>
</span>
</Transition>
</div>
</div>
<Transition name="flag-swap">
<div
v-if="rightFlagUrl"
id="p2-flag-wrapper"
:key="`right-${scoreboard.rightCountryOverride}-${rightFlagUrl}`"
class="flag-wrapper"
>
<div class="flag-mask">
@@ -318,6 +413,7 @@ watch(
>
</div>
</div>
</Transition>
</div>
</div>
</div>
@@ -535,4 +631,62 @@ img {
.gamertag-text {
color: #ffffff;
}
.text-fade-enter-active,
.text-fade-leave-active {
transition: opacity 180ms ease, transform 180ms ease;
}
.text-fade-enter-from,
.text-fade-leave-to {
opacity: 0;
transform: translateY(6px);
}
.score-flip-enter-active,
.score-flip-leave-active {
transition: opacity 200ms ease, transform 200ms ease;
display: inline-block;
}
.score-flip-enter-from {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
.score-flip-leave-to {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
.score-up {
animation: score-up-pulse 420ms ease;
}
.score-down {
animation: score-down-pulse 420ms ease;
}
.flag-swap-enter-active,
.flag-swap-leave-active {
transition: opacity 200ms ease, transform 200ms ease;
}
.flag-swap-enter-from,
.flag-swap-leave-to {
opacity: 0;
transform: scale(0.92);
}
@keyframes score-up-pulse {
0% { transform: scale(1); color: #ffffff; }
50% { transform: scale(1.2); color: #a7ffcf; }
100% { transform: scale(1); color: #ffffff; }
}
@keyframes score-down-pulse {
0% { transform: scale(1); color: #ffffff; }
50% { transform: scale(1.2); color: #ffd0d0; }
100% { transform: scale(1); color: #ffffff; }
}
</style>