Merge pull request #44 from Pandipipas/style-flags-in-main.html

Style scoreboard flags to match Runback look

src/graphics/scoreboard/main.vue

@@ -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,17 +215,20 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
 
         <div
           id="p1-name-text-wrapper"
+          ref="p1NameTextWrapperRef"
           class="name-text-wrapper"
         >
-          <span
-            v-if="leftTeam"
-            class="team-text"
-          >
-            {{ leftTeam }}
-          </span>
-          <span class="gamertag-text">
-            {{ leftName }}
-          </span>
+          <div ref="p1NameTextRef">
+            <span
+              v-if="leftTeam"
+              class="team-text"
+            >
+              {{ leftTeam }}
+            </span>
+            <span class="gamertag-text">
+              {{ leftName }}
+            </span>
+          </div>
         </div>
 
         <div
@@ -170,17 +257,20 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
 
         <div
           id="p2-name-text-wrapper"
+          ref="p2NameTextWrapperRef"
           class="name-text-wrapper"
         >
-          <span
-            v-if="rightTeam"
-            class="team-text"
-          >
-            {{ rightTeam }}
-          </span>
-          <span class="gamertag-text">
-            {{ rightName }}
-          </span>
+          <div ref="p2NameTextRef">
+            <span
+              v-if="rightTeam"
+              class="team-text"
+            >
+              {{ rightTeam }}
+            </span>
+            <span class="gamertag-text">
+              {{ rightName }}
+            </span>
+          </div>
         </div>
 
         <div
@@ -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 {