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 #44 from Pandipipas/style-flags-in-main.html

Browse Source 
Style scoreboard flags to match Runback look
This commit is contained in:
Pandipipas
2026-02-12 01:24:50 +01:00
committed by GitHub
parent 7e94297244 256c646081
commit 646a05f7ae
1 changed files with 138 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/graphics/scoreboard/main.vue
+120 -21
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { useHead } from '@unhead/vue';
import { computed } from 'vue';
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
import { resolveCountryCode } from '../../shared/countries';
import type { Schemas } from '../../types';
@@ -77,6 +77,76 @@ const leftFlagUrl = computed(() => getFlagUrl(scoreboard.value.leftCountryOverri
const rightFlagUrl = computed(() => getFlagUrl(scoreboard.value.rightCountryOverride));
const roundText = computed(() => scoreboard.value.round || 'Round');
const progressTextWrapperRef = ref<HTMLElement | null>(null);
const progressTextRef = ref<HTMLElement | null>(null);
const p1NameTextWrapperRef = ref<HTMLElement | null>(null);
const p1NameTextRef = ref<HTMLElement | null>(null);
const p2NameTextWrapperRef = ref<HTMLElement | null>(null);
const p2NameTextRef = ref<HTMLElement | null>(null);
const p1ScoreWrapperRef = ref<HTMLElement | null>(null);
const p1ScoreTextRef = ref<HTMLElement | null>(null);
const p2ScoreWrapperRef = ref<HTMLElement | null>(null);
const p2ScoreTextRef = ref<HTMLElement | null>(null);
const fitText = (container: HTMLElement | null, textElement: HTMLElement | null, maxSize: number, minSize = 1) => {
if (!container || !textElement) {
return;
}
let size = maxSize;
textElement.style.fontSize = `${size}px`;
while (size > minSize) {
const overflowsWidth = textElement.scrollWidth > container.clientWidth;
const overflowsHeight = textElement.scrollHeight > container.clientHeight;
if (!overflowsWidth && !overflowsHeight) {
break;
}
size -= 1;
textElement.style.fontSize = `${size}px`;
}
};
const refitText = () => {
fitText(progressTextWrapperRef.value, progressTextRef.value, 35);
fitText(p1NameTextWrapperRef.value, p1NameTextRef.value, 45);
fitText(p2NameTextWrapperRef.value, p2NameTextRef.value, 45);
fitText(p1ScoreWrapperRef.value, p1ScoreTextRef.value, 55);
fitText(p2ScoreWrapperRef.value, p2ScoreTextRef.value, 55);
};
const scheduleRefit = () => {
void nextTick(() => {
refitText();
});
};
onMounted(() => {
window.addEventListener('resize', refitText);
scheduleRefit();
});
onBeforeUnmount(() => {
window.removeEventListener('resize', refitText);
});
watch(
() => [
roundText.value,
leftTeam.value,
rightTeam.value,
leftName.value,
rightName.value,
scoreboard.value.leftScore,
scoreboard.value.rightScore,
],
() => {
scheduleRefit();
},
{ immediate: true },
);
</script>
<template>
@@ -96,26 +166,40 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
alt=""
>
<div id="progress-text-wrapper">
<div id="progress-text">
<div
id="progress-text-wrapper"
ref="progressTextWrapperRef"
>
<div
id="progress-text"
ref="progressTextRef"
>
{{ roundText }}
</div>
</div>
<div
id="p1-games-text-wrapper"
ref="p1ScoreWrapperRef"
class="games-text-wrapper"
>
<div class="games-text">
<div
ref="p1ScoreTextRef"
class="games-text"
>
{{ scoreboard.leftScore }}
</div>
</div>
<div
id="p2-games-text-wrapper"
ref="p2ScoreWrapperRef"
class="games-text-wrapper"
>
<div class="games-text">
<div
ref="p2ScoreTextRef"
class="games-text"
>
{{ scoreboard.rightScore }}
</div>
</div>
@@ -131,8 +215,10 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
<div
id="p1-name-text-wrapper"
ref="p1NameTextWrapperRef"
class="name-text-wrapper"
>
<div ref="p1NameTextRef">
<span
v-if="leftTeam"
class="team-text"
@@ -143,6 +229,7 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
{{ leftName }}
</span>
</div>
</div>
<div
v-if="leftFlagUrl"
@@ -170,8 +257,10 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
<div
id="p2-name-text-wrapper"
ref="p2NameTextWrapperRef"
class="name-text-wrapper"
>
<div ref="p2NameTextRef">
<span
v-if="rightTeam"
class="team-text"
@@ -182,6 +271,7 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
{{ rightName }}
</span>
</div>
</div>
<div
v-if="rightFlagUrl"
@@ -220,10 +310,9 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
var(--name-panel-height) * 0.5 - (var(--name-text-height) * 0.5)
);
--flag-width: 38px;
--flag-height: 26px;
--flag-offset-x: 16px;
--flag-offset-y: 12px;
--flag-height: 50px;
--flag-width: 120px;
--flag-offset-x: calc(var(--flag-width) * (0.25 + 0.01));
--games-text-width: calc(var(--main-panel-width) * 0.11);
--games-text-height: calc(var(--main-panel-height) * 0.8);
@@ -289,8 +378,8 @@ img {
#progress-text {
color: #ffffff;
font-family: 'Bebas Neue', 'Bebas Neue Regular', 'Roboto Condensed', sans-serif;
font-size: 32px;
font-family: 'Bebas Neue Regular', 'Rounded Mplus Regular', sans-serif;
font-size: 35px;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
@@ -301,11 +390,15 @@ img {
#p1-name-wrapper {
left: var(--name-panel-offset);
padding-left: var(--flag-width);
margin-left: calc(var(--flag-width) * -1);
text-align: left;
}
#p2-name-wrapper {
right: var(--name-panel-offset);
padding-right: var(--flag-width);
margin-right: calc(var(--flag-width) * -1);
text-align: right;
}
@@ -343,14 +436,20 @@ img {
height: var(--name-text-height);
width: var(--name-text-width);
line-height: var(--name-text-height);
font-family: 'Bebas Neue', 'Bebas Neue Bold', 'Roboto Condensed', sans-serif;
font-size: 40px;
font-family: 'Bebas Neue Bold', 'Rounded Mplus Bold', sans-serif;
font-size: 45px;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.name-text-wrapper > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-text {
color: #a5a5a5;
margin-right: 8px;
@@ -358,25 +457,25 @@ img {
.flag-wrapper {
position: absolute;
top: var(--flag-offset-y);
top: 0;
height: var(--flag-height);
width: var(--flag-width);
z-index: 1;
z-index: -3;
}
#p1-flag-wrapper {
left: var(--flag-offset-x);
clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
}
#p2-flag-wrapper {
right: var(--flag-offset-x);
clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}
.flag-mask {
width: 100%;
height: 100%;
border-radius: 4px;
overflow: hidden;
height: var(--flag-height);
}
.flag {
@@ -396,9 +495,9 @@ img {
.games-text {
color: #ffffff;
font-family: 'Gilroy', 'Bebas Neue', 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 42px;
font-family: 'Gilroy', sans-serif;
font-weight: bold;
font-size: 55px;
}
.gamertag-text {