mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-06 03:32:06 +00:00
Update scoreboard layout to match Runback style
This commit is contained in:
Pandipipas
@@ -34,31 +34,54 @@ const rightName = computed(() => {
|
||||
const player = players.value[scoreboard.value.rightPlayerId];
|
||||
return player?.gamertag || 'Jugador 2';
|
||||
});
|
||||
|
||||
const roundText = computed(() => scoreboard.value.round || 'Round');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="scoreboard-root">
|
||||
<div class="scoreboard-panel">
|
||||
<div class="scoreboard-round">
|
||||
{{ scoreboard.round || 'Round' }}
|
||||
</div>
|
||||
<div class="scoreboard-row">
|
||||
<div class="scoreboard-side">
|
||||
<div class="scoreboard-name">
|
||||
{{ leftName }}
|
||||
</div>
|
||||
<div class="scoreboard-score">
|
||||
{{ scoreboard.leftScore }}
|
||||
</div>
|
||||
<div id="scoreboard">
|
||||
<div id="back-panel-wrapper">
|
||||
<img id="back-panel" src="./img/back.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<div id="main-panel-wrapper">
|
||||
<img id="main-panel" src="./img/main.svg" alt="" />
|
||||
|
||||
<div id="progress-text-wrapper">
|
||||
<div id="progress-text">
|
||||
{{ roundText }}
|
||||
</div>
|
||||
<div class="scoreboard-divider">VS</div>
|
||||
<div class="scoreboard-side">
|
||||
<div class="scoreboard-name">
|
||||
</div>
|
||||
|
||||
<div id="p1-games-text-wrapper" class="games-text-wrapper">
|
||||
<div class="games-text">
|
||||
{{ scoreboard.leftScore }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="p2-games-text-wrapper" class="games-text-wrapper">
|
||||
<div class="games-text">
|
||||
{{ scoreboard.rightScore }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="p1-name-wrapper" class="name-wrapper">
|
||||
<img src="./img/name1.svg" alt="" />
|
||||
|
||||
<div id="p1-name-text-wrapper" class="name-text-wrapper">
|
||||
<span class="gamertag-text">
|
||||
{{ leftName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="p2-name-wrapper" class="name-wrapper">
|
||||
<img src="./img/name2.svg" alt="" />
|
||||
|
||||
<div id="p2-name-text-wrapper" class="name-text-wrapper">
|
||||
<span class="gamertag-text">
|
||||
{{ rightName }}
|
||||
</div>
|
||||
<div class="scoreboard-score">
|
||||
{{ scoreboard.rightScore }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,66 +89,167 @@ const rightName = computed(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scoreboard-root {
|
||||
width: 100%;
|
||||
:global(:root) {
|
||||
--main-panel-height: 60px;
|
||||
--main-panel-width: 409.28px;
|
||||
|
||||
--back-panel-height: 50px;
|
||||
--back-panel-width: 596.6px;
|
||||
|
||||
--name-panel-height: 50px;
|
||||
--name-panel-width: 499.19px;
|
||||
--name-panel-offset: calc(var(--name-panel-width) * 0.95 * -1);
|
||||
|
||||
--name-text-width: calc(var(--name-panel-width) * 0.845);
|
||||
--name-text-height: calc(var(--name-panel-height) * 0.8);
|
||||
--name-text-offset-x: calc(var(--name-panel-width) * 0.325);
|
||||
--name-text-offset-y: calc(
|
||||
var(--name-panel-height) * 0.5 - (var(--name-text-height) * 0.5)
|
||||
);
|
||||
|
||||
--games-text-width: calc(var(--main-panel-width) * 0.11);
|
||||
--games-text-height: calc(var(--main-panel-height) * 0.8);
|
||||
--games-text-offset-x: calc(var(--main-panel-width) * 0.04);
|
||||
--games-text-offset-y: calc(
|
||||
var(--main-panel-height) * 0.5 - (var(--games-text-height) * 0.5)
|
||||
);
|
||||
|
||||
--progress-text-width: calc(var(--main-panel-width) * 0.65);
|
||||
--progress-text-height: calc(var(--main-panel-height) * 0.55);
|
||||
--progress-text-offset-x: calc(var(--main-panel-width) * 0.5);
|
||||
--progress-text-offset-y: calc(
|
||||
var(--main-panel-height) * 0.35 - (var(--progress-text-height) * 0.5)
|
||||
);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 40px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #ffffff;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.scoreboard-panel {
|
||||
width: min(900px, 100%);
|
||||
padding: 24px 32px;
|
||||
border-radius: 16px;
|
||||
background: rgba(10, 12, 20, 0.85);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
|
||||
#scoreboard {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scoreboard-round {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 20px;
|
||||
#back-panel-wrapper {
|
||||
position: absolute;
|
||||
height: var(--back-panel-height);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -2;
|
||||
transform: translateX(-50%) translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.scoreboard-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
#main-panel {
|
||||
filter: drop-shadow(0px 5px 5px rgba(34, 34, 34, 0.85));
|
||||
}
|
||||
|
||||
.scoreboard-side {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
#main-panel-wrapper {
|
||||
position: absolute;
|
||||
height: var(--main-panel-height);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.scoreboard-divider {
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.2em;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.scoreboard-name {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scoreboard-score {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
padding: 8px 16px;
|
||||
border-radius: 10px;
|
||||
min-width: 64px;
|
||||
#progress-text-wrapper {
|
||||
position: absolute;
|
||||
top: var(--progress-text-offset-y);
|
||||
left: var(--progress-text-offset-x);
|
||||
width: var(--progress-text-width);
|
||||
height: var(--progress-text-height);
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#progress-text {
|
||||
color: #ffffff;
|
||||
font-family: 'Bebas Neue', 'Bebas Neue Regular', 'Roboto Condensed', sans-serif;
|
||||
font-size: 32px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#p1-name-wrapper {
|
||||
left: var(--name-panel-offset);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#p2-name-wrapper {
|
||||
right: var(--name-panel-offset);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#p1-name-text-wrapper {
|
||||
left: var(--name-text-offset-x);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#p2-name-text-wrapper {
|
||||
right: var(--name-text-offset-x);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#p1-games-text-wrapper {
|
||||
left: var(--games-text-offset-x);
|
||||
}
|
||||
|
||||
#p2-games-text-wrapper {
|
||||
right: var(--games-text-offset-x);
|
||||
}
|
||||
|
||||
.name-wrapper {
|
||||
position: absolute;
|
||||
height: var(--name-panel-height);
|
||||
top: 0;
|
||||
z-index: -2;
|
||||
overflow: visible;
|
||||
padding-bottom: 20px;
|
||||
filter: drop-shadow(0px 2px 5px rgba(34, 34, 34, 0.85));
|
||||
}
|
||||
|
||||
.name-text-wrapper {
|
||||
position: absolute;
|
||||
top: var(--name-text-offset-y);
|
||||
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;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.games-text-wrapper {
|
||||
position: absolute;
|
||||
top: var(--games-text-offset-y);
|
||||
height: var(--games-text-height);
|
||||
width: var(--games-text-width);
|
||||
text-align: center;
|
||||
line-height: var(--games-text-height);
|
||||
}
|
||||
|
||||
.games-text {
|
||||
color: #ffffff;
|
||||
font-family: 'Gilroy', 'Bebas Neue', 'Roboto Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.gamertag-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user