From 5350fa1dae2f24c780630f2171068e2e2c39ca3a Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Sun, 8 Feb 2026 21:15:14 +0100
Subject: [PATCH] Update scoreboard layout to match Runback style

---
 src/graphics/scoreboard/img/back.svg  |   1 +
 src/graphics/scoreboard/img/main.svg  |   1 +
 src/graphics/scoreboard/img/name1.svg |   1 +
 src/graphics/scoreboard/img/name2.svg |   1 +
 src/graphics/scoreboard/main.vue      | 262 +++++++++++++++++++-------
 5 files changed, 197 insertions(+), 69 deletions(-)
 create mode 100644 src/graphics/scoreboard/img/back.svg
 create mode 100644 src/graphics/scoreboard/img/main.svg
 create mode 100644 src/graphics/scoreboard/img/name1.svg
 create mode 100644 src/graphics/scoreboard/img/name2.svg

diff --git a/src/graphics/scoreboard/img/back.svg b/src/graphics/scoreboard/img/back.svg
new file mode 100644
index 0000000..cd6a873
--- /dev/null
+++ b/src/graphics/scoreboard/img/back.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 346.09 28.99"><defs><style>.cls-1{fill:url(#radial-gradient);}</style><radialGradient id="radial-gradient" cx="173.05" cy="14.49" r="122.79" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#283b3f"/><stop offset="0.98" stop-color="#0c1519"/></radialGradient></defs><title>back</title><polygon class="cls-1" points="7.25 28.99 338.84 28.99 346.09 0 0 0 7.25 28.99"/></svg>
\ No newline at end of file
diff --git a/src/graphics/scoreboard/img/main.svg b/src/graphics/scoreboard/img/main.svg
new file mode 100644
index 0000000..af48d91
--- /dev/null
+++ b/src/graphics/scoreboard/img/main.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 271.49 39.8"><defs><style>.cls-1{fill:url(#radial-gradient);}.cls-2{fill:url(#radial-gradient-2);}.cls-3{fill:url(#radial-gradient-3);}.cls-4{fill:url(#radial-gradient-4);}</style><radialGradient id="radial-gradient" cx="228.85" cy="0.44" r="34.72" gradientUnits="userSpaceOnUse"><stop offset="0.23" stop-color="#162024"/><stop offset="1" stop-color="#0c1519"/></radialGradient><radialGradient id="radial-gradient-2" cx="7538.35" cy="6661.86" r="34.72" gradientTransform="matrix(-1, 0, 0, 1, 7580.98, -6661.43)" xlink:href="#radial-gradient"/><radialGradient id="radial-gradient-3" cx="138.39" cy="-27.78" r="81.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#283b3f"/><stop offset="0.62" stop-color="#172529"/><stop offset="0.98" stop-color="#0c1519"/></radialGradient><radialGradient id="radial-gradient-4" cx="143.93" cy="34.2" r="93.03" gradientUnits="userSpaceOnUse"><stop offset="0.52" stop-color="#e6a244"/><stop offset="1" stop-color="#f0c890"/></radialGradient></defs><title>scoreboard</title><g id="Layer_5" data-name="Layer 5"><polyline class="cls-1" points="214.07 39.8 261.53 39.8 271.49 0 224.03 0"/><polyline class="cls-2" points="57.42 39.8 9.96 39.8 0 0 47.46 0"/></g><g id="Layer_3" data-name="Layer 3"><polyline class="cls-3" points="136.6 28.99 226.16 28.99 233.41 0 136.6 0 137.21 0 40.4 0 47.65 28.99 137.21 28.99"/><g id="Layer_4" data-name="Layer 4"><polyline class="cls-4" points="136.6 34 224.91 34 226.16 28.99 136.6 28.99 137.21 28.99 47.65 28.99 48.91 34 137.21 34"/></g></g></svg>
\ No newline at end of file
diff --git a/src/graphics/scoreboard/img/name1.svg b/src/graphics/scoreboard/img/name1.svg
new file mode 100644
index 0000000..9e26a63
--- /dev/null
+++ b/src/graphics/scoreboard/img/name1.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 289.44 28.99"><defs><style>.cls-1{fill:url(#radial-gradient);}</style><radialGradient id="radial-gradient" cx="287.78" cy="15.16" r="242.51" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#283b3f"/><stop offset="0.62" stop-color="#172529"/><stop offset="0.98" stop-color="#0c1519"/></radialGradient></defs><title>player1-new</title><polygon class="cls-1" points="289.44 28.99 289.44 0 0 0 17.51 28.99 289.44 28.99"/></svg>
\ No newline at end of file
diff --git a/src/graphics/scoreboard/img/name2.svg b/src/graphics/scoreboard/img/name2.svg
new file mode 100644
index 0000000..62efff4
--- /dev/null
+++ b/src/graphics/scoreboard/img/name2.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 289.44 28.99"><defs><style>.cls-1{fill:url(#radial-gradient);}</style><radialGradient id="radial-gradient" cx="7297.6" cy="7084.13" r="242.51" gradientTransform="matrix(-1, 0, 0, 1, 7299.27, -7068.97)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#283b3f"/><stop offset="0.62" stop-color="#172529"/><stop offset="0.98" stop-color="#0c1519"/></radialGradient></defs><title>player2-new</title><polygon class="cls-1" points="0 28.99 0 0 289.44 0 271.92 28.99 0 28.99"/></svg>
\ No newline at end of file
diff --git a/src/graphics/scoreboard/main.vue b/src/graphics/scoreboard/main.vue
index 97ae888..603b7e5 100644
--- a/src/graphics/scoreboard/main.vue
+++ b/src/graphics/scoreboard/main.vue
@@ -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>