update a lot

frontend/src/components/LiveModePanel.vue

@@ -132,9 +132,13 @@
                     <tr
                       v-for="row in pagedPreliminaryRows"
                       :key="'live-pre-overall-' + row.playerId"
-                      :class="{ 'qualified-row': isFinalist(row.playerId) }"
                     >
-                      <td class="mono rank">{{ row.rank }}</td>
+                      <td class="mono rank">
+                        <div class="live-rank-cell">
+                          <span>{{ row.rank }}</span>
+                          <span v-if="prelimOverallHintLabel(row)" class="live-rank-hint">{{ prelimOverallHintLabel(row) }}</span>
+                        </div>
+                      </td>
                       <td>
                         <div class="competitor-cell compact">
                           <img :src="playerImage(row)" :alt="row.nameAr" class="competitor-image" />
@@ -270,7 +274,12 @@
                   </thead>
                   <tbody>
                     <tr v-for="row in pagedFinalOverallRows" :key="'live-final-overall-' + row.playerId">
-                      <td class="mono rank">{{ row.rank }}</td>
+                      <td class="mono rank">
+                        <div class="live-rank-cell">
+                          <span>{{ row.rank }}</span>
+                          <span v-if="finalOverallHintLabel(row)" class="live-rank-hint">{{ finalOverallHintLabel(row) }}</span>
+                        </div>
+                      </td>
                       <td>
                         <div class="competitor-cell compact">
                           <img :src="playerImage(row)" :alt="row.nameAr" class="competitor-image" />
@@ -387,6 +396,8 @@ const props = defineProps({
 })
 
 const finalistIds = computed(() => new Set((props.finalists || []).map((row) => row.playerId)))
+const prelimTieIds = computed(() => new Set((props.prelimTieRows || []).map((row) => row.playerId)))
+const finalTieIds = computed(() => new Set((props.finalTieRows || []).map((row) => row.playerId)))
 const activeView = computed(() => props.liveSettings.activeView || 'group_live')
 const listPageIndex = ref(0)
 const tieGroupIndex = ref(0)
@@ -488,6 +499,25 @@ function isFinalist(playerId) {
   return finalistIds.value.has(playerId)
 }
 
+function isPrelimTiePlayer(playerId) {
+  return prelimTieIds.value.has(playerId)
+}
+
+function isFinalTiePlayer(playerId) {
+  return finalTieIds.value.has(playerId)
+}
+
+function prelimOverallHintLabel(row) {
+  if (isPrelimTiePlayer(row.playerId)) return props.t('labels.tieBreak')
+  if (isFinalist(row.playerId)) return props.t('labels.finalist')
+  return ''
+}
+
+function finalOverallHintLabel(row) {
+  if (isFinalTiePlayer(row.playerId)) return props.t('labels.tieBreak')
+  return ''
+}
+
 watch(
   () =>
     `${activeView.value}|${rotationIntervalSec.value}|${rotationPlayerCount.value}|${props.prelimTieRows.length}|${props.preliminaryRows.length}|${props.finalOverallRows.length}|${props.finalTieRows.length}`,

frontend/src/constants/i18n.js

@@ -24,6 +24,7 @@ export const I18N = {
       allPlayers: 'جميع اللاعبين',
       top12: 'أفضل 12 متأهل',
       finalist: 'متأهل',
+      tieBreak: 'كسر تعادل',
       notFinalist: 'غير متأهل',
       noPlayers: 'لا يوجد لاعبين بعد',
       noFinalists: 'لا يوجد متأهلون بعد',
@@ -224,6 +225,7 @@ export const I18N = {
       allPlayers: 'All players',
       top12: 'Top 12 finalists',
       finalist: 'Finalist',
+      tieBreak: 'Tie-break',
       notFinalist: 'Not finalist',
       noPlayers: 'No players yet',
       noFinalists: 'No finalists yet',

frontend/src/style.css

@@ -1514,6 +1514,7 @@ select.name-input {
 .live-footer-slot {
   display: flex;
   align-items: center;
+  min-height: 56px;
 }
 
 .live-footer-slot.left {
@@ -1529,18 +1530,13 @@ select.name-input {
 }
 
 .live-footer-logo {
-  max-width: min(35vw, 200px);
   padding: 8px 6px;
   width: auto;
-  height: auto;
+  height: 60px;
   object-fit: contain;
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
 }
 
-.live-footer-slot.right .live-footer-logo {
-  max-width: min(45vw, 280px);
-}
-
 .live-tie-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -1897,8 +1893,20 @@ select.name-input {
   background: #0d1931;
 }
 
-.live-screen-card .qualified-row {
-  background: rgba(0, 140, 168, 0.16);
+.live-rank-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.live-rank-hint {
+  color: rgba(255, 255, 255, 0.74);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
 .live-podium {
@@ -2901,11 +2909,7 @@ select.name-input {
   }
 
   .live-footer-logo {
-    max-height: 36px;
-  }
-
-  .live-footer-slot.right .live-footer-logo {
-    max-width: min(40vw, 150px);
+    max-width: min(34vw, 150px);
   }
 
   .live-tie-grid {