api specs
This commit is contained in:
@@ -8,9 +8,11 @@
|
||||
:competition-title="competitionTitle"
|
||||
:mode="mode"
|
||||
:language="language"
|
||||
:is-fullscreen="isFullscreen"
|
||||
:server-time="state.serverTime ? formatServerTime(state.serverTime) : ''"
|
||||
@change-mode="mode = $event"
|
||||
@change-language="setLanguage"
|
||||
@toggle-fullscreen="toggleFullscreen"
|
||||
/>
|
||||
|
||||
<main class="page-content">
|
||||
@@ -133,6 +135,7 @@
|
||||
:display-name="displayName"
|
||||
:secondary-name="secondaryName"
|
||||
:score-input-value="scoreInputValue"
|
||||
:score-input-invalid="scoreInputInvalid"
|
||||
:on-score-focus="onScoreFocus"
|
||||
:on-score-input="onScoreInput"
|
||||
:on-score-commit="onScoreCommit"
|
||||
@@ -222,6 +225,7 @@ const mode = ref('live')
|
||||
const viewTab = ref('groups')
|
||||
const adminTab = ref('players')
|
||||
const language = ref(localStorage.getItem('shooting_lang') === 'en' ? 'en' : 'ar')
|
||||
const isFullscreen = ref(false)
|
||||
const state = ref(createInitialState())
|
||||
const primaryGroups = ref(loadPrimaryGroups(localStorage))
|
||||
|
||||
@@ -640,6 +644,11 @@ watch(
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
onFullscreenChange()
|
||||
document.addEventListener('fullscreenchange', onFullscreenChange)
|
||||
document.addEventListener('webkitfullscreenchange', onFullscreenChange)
|
||||
document.addEventListener('mozfullscreenchange', onFullscreenChange)
|
||||
document.addEventListener('MSFullscreenChange', onFullscreenChange)
|
||||
document.documentElement.lang = language.value
|
||||
document.documentElement.dir = language.value === 'ar' ? 'rtl' : 'ltr'
|
||||
await fetchState()
|
||||
@@ -647,6 +656,10 @@ onMounted(async () => {
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('fullscreenchange', onFullscreenChange)
|
||||
document.removeEventListener('webkitfullscreenchange', onFullscreenChange)
|
||||
document.removeEventListener('mozfullscreenchange', onFullscreenChange)
|
||||
document.removeEventListener('MSFullscreenChange', onFullscreenChange)
|
||||
stopLiveRotation()
|
||||
stopLiveMonitorRotation()
|
||||
stopRealtimeSync()
|
||||
@@ -662,6 +675,57 @@ function setLanguage(next) {
|
||||
if (next === 'ar' || next === 'en') language.value = next
|
||||
}
|
||||
|
||||
function getFullscreenElement() {
|
||||
return (
|
||||
document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement ||
|
||||
null
|
||||
)
|
||||
}
|
||||
|
||||
function onFullscreenChange() {
|
||||
isFullscreen.value = Boolean(getFullscreenElement())
|
||||
}
|
||||
|
||||
function requestFullscreenFor(element) {
|
||||
if (!element) return Promise.resolve()
|
||||
const fn =
|
||||
element.requestFullscreen ||
|
||||
element.webkitRequestFullscreen ||
|
||||
element.mozRequestFullScreen ||
|
||||
element.msRequestFullscreen
|
||||
if (!fn) return Promise.resolve()
|
||||
const result = fn.call(element)
|
||||
if (result && typeof result.then === 'function') return result
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
function exitFullscreen() {
|
||||
const fn =
|
||||
document.exitFullscreen ||
|
||||
document.webkitExitFullscreen ||
|
||||
document.mozCancelFullScreen ||
|
||||
document.msExitFullscreen
|
||||
if (!fn) return Promise.resolve()
|
||||
const result = fn.call(document)
|
||||
if (result && typeof result.then === 'function') return result
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
async function toggleFullscreen() {
|
||||
try {
|
||||
if (getFullscreenElement()) {
|
||||
await exitFullscreen()
|
||||
return
|
||||
}
|
||||
await requestFullscreenFor(document.documentElement)
|
||||
} catch {
|
||||
// Ignore fullscreen errors, mostly caused by browser policy.
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeLiveActiveView(value) {
|
||||
const normalized = String(value || '').trim().toLowerCase()
|
||||
const allowed = new Set(['group_live', 'prelim_tie', 'prelim_overall', 'final_groups', 'final_tie', 'podium'])
|
||||
@@ -1209,7 +1273,7 @@ async function applySuggestedScore() {
|
||||
if (!scoreAdviceModal.advice) return
|
||||
const stage = scoreAdviceModal.stage
|
||||
const playerId = scoreAdviceModal.playerId
|
||||
const score = Number(scoreAdviceModal.advice.advisedScore || 0)
|
||||
const score = clampScoreValue(scoreAdviceModal.advice.advisedScore)
|
||||
await updateScoreValue(stage, playerId, score)
|
||||
scoreAdviceModal.currentScore = score
|
||||
closeScoreAdviceModal()
|
||||
@@ -1287,26 +1351,48 @@ function scoreDraftKey(stage, playerId) {
|
||||
return `${stage}:${playerId}`
|
||||
}
|
||||
|
||||
function clampScoreValue(value) {
|
||||
let score = Number(value)
|
||||
if (!Number.isFinite(score)) score = 0
|
||||
score = Math.trunc(score)
|
||||
if (score < 0) return 0
|
||||
if (score > 100) return 100
|
||||
return score
|
||||
}
|
||||
|
||||
function scoreInputValue(stage, playerId) {
|
||||
const draft = scoreDrafts[scoreDraftKey(stage, playerId)]
|
||||
if (draft) return draft.value
|
||||
return String(scoreFor(stage, playerId))
|
||||
}
|
||||
|
||||
function scoreInputInvalid(stage, playerId) {
|
||||
const draft = scoreDrafts[scoreDraftKey(stage, playerId)]
|
||||
return Boolean(draft?.invalid)
|
||||
}
|
||||
|
||||
function parseDraftScoreValue(value) {
|
||||
let score = Number(value === '' ? 0 : value)
|
||||
if (!Number.isFinite(score)) score = 0
|
||||
return Math.trunc(score)
|
||||
}
|
||||
|
||||
function onScoreFocus(stage, playerId) {
|
||||
const key = scoreDraftKey(stage, playerId)
|
||||
if (!scoreDrafts[key]) {
|
||||
scoreDrafts[key] = { value: String(scoreFor(stage, playerId)), committing: false }
|
||||
scoreDrafts[key] = { value: String(scoreFor(stage, playerId)), committing: false, invalid: false }
|
||||
}
|
||||
}
|
||||
|
||||
function onScoreInput(stage, playerId, event) {
|
||||
const key = scoreDraftKey(stage, playerId)
|
||||
const raw = String(event?.target?.value ?? '')
|
||||
const cleaned = raw.replace(/[^\d]/g, '').slice(0, 4)
|
||||
const current = scoreDrafts[key] || { value: String(scoreFor(stage, playerId)), committing: false }
|
||||
scoreDrafts[key] = { ...current, value: cleaned }
|
||||
if (event?.target && event.target.value !== cleaned) event.target.value = cleaned
|
||||
const digits = raw.replace(/[^\d]/g, '').slice(0, 3)
|
||||
const parsed = parseDraftScoreValue(digits)
|
||||
const invalid = digits !== '' && (parsed < 0 || parsed > 100)
|
||||
const current = scoreDrafts[key] || { value: String(scoreFor(stage, playerId)), committing: false, invalid: false }
|
||||
scoreDrafts[key] = { ...current, value: digits, invalid }
|
||||
if (event?.target && event.target.value !== digits) event.target.value = digits
|
||||
}
|
||||
|
||||
async function onScoreCommit(stage, playerId) {
|
||||
@@ -1314,11 +1400,11 @@ async function onScoreCommit(stage, playerId) {
|
||||
const draft = scoreDrafts[key]
|
||||
if (!draft || draft.committing) return
|
||||
|
||||
let score = Number(draft.value === '' ? 0 : draft.value)
|
||||
if (!Number.isFinite(score)) score = 0
|
||||
score = Math.trunc(score)
|
||||
const score = parseDraftScoreValue(draft.value)
|
||||
const invalid = score < 0 || score > 100
|
||||
|
||||
if (score < 0 || score > 9999) {
|
||||
if (invalid) {
|
||||
scoreDrafts[key] = { ...draft, invalid: true }
|
||||
showToast(t('messages.invalidScore'), 'error')
|
||||
return
|
||||
}
|
||||
@@ -1328,12 +1414,12 @@ async function onScoreCommit(stage, playerId) {
|
||||
return
|
||||
}
|
||||
|
||||
scoreDrafts[key] = { ...draft, committing: true }
|
||||
scoreDrafts[key] = { ...draft, invalid: false, committing: true }
|
||||
await updateScoreValue(stage, playerId, score, key)
|
||||
}
|
||||
|
||||
async function updateScoreValue(stage, playerId, score, draftKey = '') {
|
||||
if (score < 0 || score > 9999) {
|
||||
if (score < 0 || score > 100) {
|
||||
showToast(t('messages.invalidScore'), 'error')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -98,6 +98,7 @@
|
||||
:display-name="displayName"
|
||||
:secondary-name="secondaryName"
|
||||
:score-input-value="scoreInputValue"
|
||||
:score-input-invalid="scoreInputInvalid"
|
||||
:on-score-focus="onScoreFocus"
|
||||
:on-score-input="onScoreInput"
|
||||
:on-score-commit="onScoreCommit"
|
||||
@@ -139,6 +140,7 @@
|
||||
:display-name="displayName"
|
||||
:secondary-name="secondaryName"
|
||||
:score-input-value="scoreInputValue"
|
||||
:score-input-invalid="scoreInputInvalid"
|
||||
:on-score-focus="onScoreFocus"
|
||||
:on-score-input="onScoreInput"
|
||||
:on-score-commit="onScoreCommit"
|
||||
@@ -188,6 +190,7 @@
|
||||
:display-name="displayName"
|
||||
:secondary-name="secondaryName"
|
||||
:score-input-value="scoreInputValue"
|
||||
:score-input-invalid="scoreInputInvalid"
|
||||
:on-score-focus="onScoreFocus"
|
||||
:on-score-input="onScoreInput"
|
||||
:on-score-commit="onScoreCommit"
|
||||
@@ -224,6 +227,7 @@
|
||||
:display-name="displayName"
|
||||
:secondary-name="secondaryName"
|
||||
:score-input-value="scoreInputValue"
|
||||
:score-input-invalid="scoreInputInvalid"
|
||||
:on-score-focus="onScoreFocus"
|
||||
:on-score-input="onScoreInput"
|
||||
:on-score-commit="onScoreCommit"
|
||||
@@ -313,6 +317,7 @@ defineProps({
|
||||
displayName: { type: Function, required: true },
|
||||
secondaryName: { type: Function, required: true },
|
||||
scoreInputValue: { type: Function, required: true },
|
||||
scoreInputInvalid: { type: Function, required: true },
|
||||
onScoreFocus: { type: Function, required: true },
|
||||
onScoreInput: { type: Function, required: true },
|
||||
onScoreCommit: { type: Function, required: true },
|
||||
|
||||
@@ -16,6 +16,35 @@
|
||||
<span>{{ optionsLabel }}</span>
|
||||
<span class="control-toggle-meta">{{ modeShort }} · {{ languageShort }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="control-icon-btn"
|
||||
type="button"
|
||||
:class="{ active: isFullscreen }"
|
||||
:aria-label="fullscreenActionLabel"
|
||||
:title="fullscreenActionLabel"
|
||||
@click="toggleFullscreen"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
v-if="!isFullscreen"
|
||||
d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
v-else
|
||||
d="M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Transition name="controls-reveal">
|
||||
@@ -57,9 +86,10 @@ const props = defineProps({
|
||||
mode: { type: String, required: true },
|
||||
language: { type: String, required: true },
|
||||
serverTime: { type: String, default: '' },
|
||||
isFullscreen: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['change-mode', 'change-language'])
|
||||
const emit = defineEmits(['change-mode', 'change-language', 'toggle-fullscreen'])
|
||||
|
||||
const controlsOpen = ref(false)
|
||||
const controlsRoot = ref(null)
|
||||
@@ -71,6 +101,7 @@ const modeShort = computed(() => {
|
||||
return props.language === 'ar' ? 'إدارة' : 'Admin'
|
||||
})
|
||||
const languageShort = computed(() => (props.language === 'ar' ? 'AR' : 'EN'))
|
||||
const fullscreenActionLabel = computed(() => (props.isFullscreen ? props.t('actions.exitFullscreen') : props.t('actions.enterFullscreen')))
|
||||
const modeStatusLabel = computed(() => {
|
||||
if (props.mode === 'view') return '● ' + props.t('labels.liveTracker')
|
||||
if (props.mode === 'live') return '● ' + props.t('liveMode')
|
||||
@@ -91,6 +122,10 @@ function changeLanguage(nextLanguage) {
|
||||
controlsOpen.value = false
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
emit('toggle-fullscreen')
|
||||
}
|
||||
|
||||
function onGlobalPointerDown(event) {
|
||||
if (!controlsOpen.value) return
|
||||
const root = controlsRoot.value
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<section class="live-mode-shell">
|
||||
<div class="live-mode-overlay">
|
||||
<div class="live-mode-root">
|
||||
<section class="live-mode-shell">
|
||||
<div class="live-mode-overlay">
|
||||
<header class="live-mode-header">
|
||||
<h2>{{ t('sections.liveModeTitle') }}</h2>
|
||||
<p>{{ t('sections.liveModeSubtitle') }}</p>
|
||||
</header>
|
||||
|
||||
<div class="live-screen-head live-head-selection">
|
||||
<!-- <div class="live-screen-head live-head-selection">
|
||||
<span class="live-chip strong">{{ activeViewLabel }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="live-mode-grid single">
|
||||
<article v-if="activeView === 'group_live'" class="live-screen-card wide">
|
||||
@@ -256,7 +257,7 @@
|
||||
<img class="podium-img" :src="podiumImage(podiumOrdered[0])" :alt="podiumName(podiumOrdered[0])" />
|
||||
</div>
|
||||
<div class="podium-medal-icon">🥈</div>
|
||||
<h3 class="podium-name" :class="{ empty: !podiumHasResult(podiumOrdered[0]) }">{{ podiumName(podiumOrdered[0]) }}</h3>
|
||||
<h3 class="podium-name" dir="auto" :title="podiumName(podiumOrdered[0])" :class="{ empty: !podiumHasResult(podiumOrdered[0]) }">{{ podiumName(podiumOrdered[0]) }}</h3>
|
||||
<div class="podium-score-wrap">
|
||||
<p class="podium-score">{{ podiumScoreMain(podiumOrdered[0]) }}</p>
|
||||
<p v-if="podiumTieSubtitle(podiumOrdered[0])" class="podium-score-sub">{{ podiumTieSubtitle(podiumOrdered[0]) }}</p>
|
||||
@@ -268,7 +269,7 @@
|
||||
<img class="podium-img" :src="podiumImage(podiumOrdered[1])" :alt="podiumName(podiumOrdered[1])" />
|
||||
</div>
|
||||
<div class="podium-medal-icon">🥇</div>
|
||||
<h3 class="podium-name" :class="{ empty: !podiumHasResult(podiumOrdered[1]) }">{{ podiumName(podiumOrdered[1]) }}</h3>
|
||||
<h3 class="podium-name" dir="auto" :title="podiumName(podiumOrdered[1])" :class="{ empty: !podiumHasResult(podiumOrdered[1]) }">{{ podiumName(podiumOrdered[1]) }}</h3>
|
||||
<div class="podium-score-wrap">
|
||||
<p class="podium-score">{{ podiumScoreMain(podiumOrdered[1]) }}</p>
|
||||
<p v-if="podiumTieSubtitle(podiumOrdered[1])" class="podium-score-sub">{{ podiumTieSubtitle(podiumOrdered[1]) }}</p>
|
||||
@@ -280,7 +281,7 @@
|
||||
<img class="podium-img" :src="podiumImage(podiumOrdered[2])" :alt="podiumName(podiumOrdered[2])" />
|
||||
</div>
|
||||
<div class="podium-medal-icon">🥉</div>
|
||||
<h3 class="podium-name" :class="{ empty: !podiumHasResult(podiumOrdered[2]) }">{{ podiumName(podiumOrdered[2]) }}</h3>
|
||||
<h3 class="podium-name" dir="auto" :title="podiumName(podiumOrdered[2])" :class="{ empty: !podiumHasResult(podiumOrdered[2]) }">{{ podiumName(podiumOrdered[2]) }}</h3>
|
||||
<div class="podium-score-wrap">
|
||||
<p class="podium-score">{{ podiumScoreMain(podiumOrdered[2]) }}</p>
|
||||
<p v-if="podiumTieSubtitle(podiumOrdered[2])" class="podium-score-sub">{{ podiumTieSubtitle(podiumOrdered[2]) }}</p>
|
||||
@@ -289,8 +290,22 @@
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="live-mode-footer live-mode-fixed-footer">
|
||||
<div class="live-footer-slot left">
|
||||
<img src="/simon_logo.png" alt="Simon logo" class="live-footer-logo" />
|
||||
</div>
|
||||
|
||||
<div class="live-footer-slot center">
|
||||
<img src="/arture_logo.png" alt="Arture logo" class="live-footer-logo" />
|
||||
</div>
|
||||
<div class="live-footer-slot right">
|
||||
<img src="/datwyler_logo.png" alt="Datwyler logo" class="live-footer-logo" />
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -41,11 +41,12 @@
|
||||
<td v-for="round in roundStages" :key="'cell-' + round.stage + '-' + row.playerId" class="multi-round-cell">
|
||||
<input
|
||||
class="score-input score-input-compact"
|
||||
:class="{ 'score-input-over-limit': scoreInputInvalid(round.stage, row.playerId) }"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
min="0"
|
||||
max="9999"
|
||||
max="100"
|
||||
:value="scoreInputValue(round.stage, row.playerId)"
|
||||
@focus="onScoreFocus(round.stage, row.playerId)"
|
||||
@input="onScoreInput(round.stage, row.playerId, $event)"
|
||||
@@ -103,11 +104,12 @@
|
||||
<span class="score-label">{{ round.label }}</span>
|
||||
<input
|
||||
class="score-input"
|
||||
:class="{ 'score-input-over-limit': scoreInputInvalid(round.stage, row.playerId) }"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
min="0"
|
||||
max="9999"
|
||||
max="100"
|
||||
:value="scoreInputValue(round.stage, row.playerId)"
|
||||
@focus="onScoreFocus(round.stage, row.playerId)"
|
||||
@input="onScoreInput(round.stage, row.playerId, $event)"
|
||||
@@ -164,6 +166,7 @@ const props = defineProps({
|
||||
displayName: { type: Function, required: true },
|
||||
secondaryName: { type: Function, required: true },
|
||||
scoreInputValue: { type: Function, required: true },
|
||||
scoreInputInvalid: { type: Function, required: true },
|
||||
onScoreFocus: { type: Function, required: true },
|
||||
onScoreInput: { type: Function, required: true },
|
||||
onScoreCommit: { type: Function, required: true },
|
||||
|
||||
@@ -40,11 +40,12 @@
|
||||
<td>
|
||||
<input
|
||||
class="score-input"
|
||||
:class="{ 'score-input-over-limit': scoreInputInvalid(stage, row.playerId) }"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
min="0"
|
||||
max="9999"
|
||||
max="100"
|
||||
:value="scoreInputValue(stage, row.playerId)"
|
||||
@focus="onScoreFocus(stage, row.playerId)"
|
||||
@input="onScoreInput(stage, row.playerId, $event)"
|
||||
@@ -109,11 +110,12 @@
|
||||
<label class="score-label">{{ inputLabel }}</label>
|
||||
<input
|
||||
class="score-input"
|
||||
:class="{ 'score-input-over-limit': scoreInputInvalid(stage, row.playerId) }"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
min="0"
|
||||
max="9999"
|
||||
max="100"
|
||||
:value="scoreInputValue(stage, row.playerId)"
|
||||
@focus="onScoreFocus(stage, row.playerId)"
|
||||
@input="onScoreInput(stage, row.playerId, $event)"
|
||||
@@ -170,6 +172,7 @@ const props = defineProps({
|
||||
displayName: { type: Function, required: true },
|
||||
secondaryName: { type: Function, required: true },
|
||||
scoreInputValue: { type: Function, required: true },
|
||||
scoreInputInvalid: { type: Function, required: true },
|
||||
onScoreFocus: { type: Function, required: true },
|
||||
onScoreInput: { type: Function, required: true },
|
||||
onScoreCommit: { type: Function, required: true },
|
||||
|
||||
@@ -14,6 +14,7 @@ export const I18N = {
|
||||
liveTracker: 'LIVE TRACKER',
|
||||
mode: 'الوضع',
|
||||
language: 'اللغة',
|
||||
fullscreen: 'ملء الشاشة',
|
||||
lastSync: 'آخر مزامنة',
|
||||
loading: 'جاري تحميل بيانات البطولة...',
|
||||
players: 'لاعب',
|
||||
@@ -139,6 +140,8 @@ export const I18N = {
|
||||
resetPosition: 'إعادة الضبط',
|
||||
liveModeRotate: 'تدوير تلقائي',
|
||||
liveModeFixed: 'ثابت',
|
||||
enterFullscreen: 'دخول ملء الشاشة',
|
||||
exitFullscreen: 'الخروج من ملء الشاشة',
|
||||
},
|
||||
auth: {
|
||||
username: 'اسم المستخدم',
|
||||
@@ -166,7 +169,7 @@ export const I18N = {
|
||||
confirmDelete: 'هل تريد حذف اللاعب؟',
|
||||
confirmReset: 'هل تريد تصفير نتائج هذه المرحلة؟',
|
||||
resetProofPrompt: 'هل تريد أيضًا حذف صور الإثبات لهذه المرحلة؟',
|
||||
invalidScore: 'النتيجة يجب أن تكون من 0 إلى 9999.',
|
||||
invalidScore: 'النتيجة يجب أن تكون من 0 إلى 100.',
|
||||
unauthorized: 'انتهت صلاحية جلسة الإدارة. يرجى تسجيل الدخول مرة أخرى.',
|
||||
errorPrefix: 'حدث خطأ',
|
||||
noGroupsConfigured: 'لا توجد مجموعات أساسية مهيأة.',
|
||||
@@ -190,6 +193,7 @@ export const I18N = {
|
||||
liveTracker: 'LIVE TRACKER',
|
||||
mode: 'Mode',
|
||||
language: 'Language',
|
||||
fullscreen: 'Fullscreen',
|
||||
lastSync: 'Last sync',
|
||||
loading: 'Loading tournament data...',
|
||||
players: 'Players',
|
||||
@@ -315,6 +319,8 @@ export const I18N = {
|
||||
resetPosition: 'Reset position',
|
||||
liveModeRotate: 'Auto rotate',
|
||||
liveModeFixed: 'Fixed',
|
||||
enterFullscreen: 'Enter Fullscreen',
|
||||
exitFullscreen: 'Exit Fullscreen',
|
||||
},
|
||||
auth: {
|
||||
username: 'Username',
|
||||
@@ -342,7 +348,7 @@ export const I18N = {
|
||||
confirmDelete: 'Delete this player?',
|
||||
confirmReset: 'Reset this stage scores?',
|
||||
resetProofPrompt: 'Also remove all proof images for this stage?',
|
||||
invalidScore: 'Score must be between 0 and 9999.',
|
||||
invalidScore: 'Score must be between 0 and 100.',
|
||||
unauthorized: 'Admin session expired. Please login again.',
|
||||
errorPrefix: 'Error',
|
||||
noGroupsConfigured: 'No primary groups configured.',
|
||||
|
||||
@@ -117,6 +117,8 @@ body {
|
||||
.control-toggle-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.control-toggle-btn {
|
||||
@@ -138,6 +140,35 @@ body {
|
||||
background: linear-gradient(180deg, #f0f6ff 0%, #e6f0ff 100%);
|
||||
}
|
||||
|
||||
.control-icon-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid #cfd6e7;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
|
||||
border-radius: 12px;
|
||||
color: #445478;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(27, 31, 64, 0.08);
|
||||
}
|
||||
|
||||
.control-icon-btn:hover {
|
||||
background: linear-gradient(180deg, #f0f6ff 0%, #e6f0ff 100%);
|
||||
}
|
||||
|
||||
.control-icon-btn.active {
|
||||
background: var(--navy);
|
||||
border-color: var(--navy);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-icon-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.control-toggle-meta {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
color: #6c7a97;
|
||||
@@ -901,6 +932,23 @@ select.name-input {
|
||||
color: #7d87a1;
|
||||
}
|
||||
|
||||
.score-input-over-limit {
|
||||
border-color: #ec2f23 !important;
|
||||
color: #8e1a14;
|
||||
background: #fff2f1;
|
||||
animation: score-over-limit-blink 0.7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes score-over-limit-blink {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(236, 47, 35, 0.18);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 4px rgba(236, 47, 35, 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
.proof-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1123,12 +1171,18 @@ select.name-input {
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.live-mode-root {
|
||||
position: relative;
|
||||
--live-footer-height: 74px;
|
||||
--live-footer-offset: 16px;
|
||||
padding-bottom: calc(var(--live-footer-height) + var(--live-footer-offset) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.live-mode-shell {
|
||||
position: relative;
|
||||
min-height: 72vh;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
background-image: url('/bg_live.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -1139,12 +1193,12 @@ select.name-input {
|
||||
.live-mode-overlay {
|
||||
min-height: 72vh;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, rgba(7, 18, 43, 0.72) 0%, rgba(9, 27, 56, 0.6) 45%, rgba(12, 30, 68, 0.66) 100%);
|
||||
background: #171b3c;
|
||||
}
|
||||
|
||||
.live-mode-header h2 {
|
||||
margin: 0;
|
||||
color: #f8d78b;
|
||||
color: rgba(240, 248, 255, 0.84);
|
||||
font-size: clamp(22px, 3vw, 34px);
|
||||
}
|
||||
|
||||
@@ -1167,7 +1221,7 @@ select.name-input {
|
||||
.live-screen-card {
|
||||
border: 1px solid rgba(200, 223, 255, 0.28);
|
||||
border-radius: 14px;
|
||||
background: rgba(8, 16, 38, 0.62);
|
||||
background: #1a1e3f;
|
||||
box-shadow: 0 8px 18px rgba(7, 19, 42, 0.18);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: 10px;
|
||||
@@ -1186,7 +1240,7 @@ select.name-input {
|
||||
.live-focus-banner {
|
||||
border: 1px solid rgba(168, 205, 242, 0.4);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, rgba(16, 32, 72, 0.86) 0%, rgba(11, 27, 60, 0.84) 100%);
|
||||
background: rgba(23, 27, 60, 0.9);
|
||||
padding: 10px 14px;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
@@ -1211,28 +1265,13 @@ select.name-input {
|
||||
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.live-focus-banner.focus-a .live-focus-title {
|
||||
color: #98c4ff;
|
||||
}
|
||||
|
||||
.live-focus-banner.focus-b .live-focus-title {
|
||||
color: #8de6ff;
|
||||
}
|
||||
|
||||
.live-focus-banner.focus-c .live-focus-title {
|
||||
color: #ffad9d;
|
||||
}
|
||||
|
||||
.live-focus-banner.focus-d .live-focus-title {
|
||||
color: #ffd98f;
|
||||
}
|
||||
|
||||
.live-focus-banner.focus-u .live-focus-title {
|
||||
color: #d9e3f2;
|
||||
}
|
||||
|
||||
.live-focus-banner.focus-a .live-focus-title,
|
||||
.live-focus-banner.focus-b .live-focus-title,
|
||||
.live-focus-banner.focus-c .live-focus-title,
|
||||
.live-focus-banner.focus-d .live-focus-title,
|
||||
.live-focus-banner.focus-u .live-focus-title,
|
||||
.live-focus-banner.focus-final .live-focus-title {
|
||||
color: #f9e3a1;
|
||||
color: #d9e3f2;
|
||||
}
|
||||
|
||||
.live-screen-head {
|
||||
@@ -1245,6 +1284,10 @@ select.name-input {
|
||||
|
||||
.live-head-selection {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.live-screen-head h3 {
|
||||
@@ -1293,6 +1336,56 @@ select.name-input {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.live-mode-footer {
|
||||
margin-top: 0;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(158, 198, 238, 0.38);
|
||||
border-radius: 14px;
|
||||
background: #1a1e3f;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.live-mode-fixed-footer {
|
||||
position: fixed;
|
||||
inset-inline: 24px;
|
||||
bottom: calc(var(--live-footer-offset) + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 10px 24px rgba(8, 18, 39, 0.02);
|
||||
}
|
||||
|
||||
.live-footer-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.live-footer-slot.left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.live-footer-slot.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.live-footer-slot.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.live-footer-logo {
|
||||
max-width: min(35vw, 200px);
|
||||
padding: 10px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.live-footer-slot.right .live-footer-logo {
|
||||
max-width: min(45vw, 280px);
|
||||
}
|
||||
|
||||
.multi-round-cell {
|
||||
min-width: 98px;
|
||||
}
|
||||
@@ -1376,7 +1469,7 @@ select.name-input {
|
||||
}
|
||||
|
||||
.live-score-table thead th {
|
||||
background: linear-gradient(90deg, #11254a 0%, #124665 100%);
|
||||
background: #171b3c;
|
||||
}
|
||||
|
||||
.live-screen-card .score-table td {
|
||||
@@ -1391,49 +1484,103 @@ select.name-input {
|
||||
|
||||
.live-screen-card .table-wrap {
|
||||
border-color: rgba(158, 186, 216, 0.28);
|
||||
background: rgba(11, 24, 49, 0.65);
|
||||
background: #171b3c;
|
||||
}
|
||||
|
||||
.live-screen-card .qualified-row {
|
||||
background: linear-gradient(90deg, rgba(16, 160, 194, 0.24), rgba(16, 160, 194, 0.06));
|
||||
background: rgba(16, 160, 194, 0.12);
|
||||
}
|
||||
|
||||
.live-podium {
|
||||
margin-top: 60px;
|
||||
height: 390px;
|
||||
margin-top: 72px;
|
||||
min-height: 500px;
|
||||
gap: 22px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col {
|
||||
background: linear-gradient(180deg, rgba(12, 23, 52, 0.95) 0%, rgba(9, 19, 43, 0.95) 100%);
|
||||
background: #1a1e3f;
|
||||
border: 1px solid rgba(177, 205, 236, 0.26);
|
||||
box-shadow: 0 16px 30px rgba(2, 10, 25, 0.45);
|
||||
box-shadow: 0 18px 34px rgba(2, 10, 25, 0.45);
|
||||
min-width: 0;
|
||||
max-width: 330px;
|
||||
border-radius: 22px 22px 0 0;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 {
|
||||
border-top: 8px solid #e7c45f;
|
||||
background: linear-gradient(180deg, rgba(48, 38, 15, 0.95) 0%, rgba(18, 24, 48, 0.96) 100%);
|
||||
height: 330px;
|
||||
border-top: 10px solid rgba(231, 196, 95, 0.4);
|
||||
background: #1a1e3f;
|
||||
height: 430px;
|
||||
box-shadow: 0 22px 44px rgba(231, 196, 95, 0.15);
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-2 {
|
||||
border-top: 8px solid #b8c3d7;
|
||||
background: linear-gradient(180deg, rgba(37, 44, 62, 0.95) 0%, rgba(12, 20, 43, 0.96) 100%);
|
||||
height: 260px;
|
||||
border-top: 10px solid rgba(184, 195, 215, 0.4);
|
||||
background: #1a1e3f;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-3 {
|
||||
border-top: 8px solid #cf8b45;
|
||||
background: linear-gradient(180deg, rgba(59, 36, 23, 0.95) 0%, rgba(14, 22, 45, 0.96) 100%);
|
||||
height: 240px;
|
||||
border-top: 10px solid rgba(207, 139, 69, 0.4);
|
||||
background: #1a1e3f;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-avatar-wrap {
|
||||
top: -82px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 .podium-avatar-wrap {
|
||||
top: -112px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 .podium-img {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
border-width: 7px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-name {
|
||||
color: #f2f8ff;
|
||||
font-size: clamp(19px, 1.8vw, 24px);
|
||||
width: calc(100% - 20px);
|
||||
max-width: calc(100% - 20px);
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
unicode-bidi: plaintext;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
min-height: 2.4em;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 .podium-name {
|
||||
font-size: clamp(22px, 2.2vw, 30px);
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
min-height: 3.6em;
|
||||
max-height: 3.6em;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-name.empty {
|
||||
color: rgba(204, 220, 240, 0.78);
|
||||
font-size: 22px;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
min-height: 2.4em;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-score {
|
||||
@@ -1441,12 +1588,29 @@ select.name-input {
|
||||
color: #ffd888;
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 .podium-score {
|
||||
font-size: 18px;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-medal-icon {
|
||||
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
|
||||
font-size: 60px;
|
||||
margin-top: 86px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 .podium-medal-icon {
|
||||
font-size: 84px;
|
||||
margin-top: 118px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.podium-panel {
|
||||
background: #f0f2f8;
|
||||
}
|
||||
@@ -2111,10 +2275,15 @@ select.name-input {
|
||||
}
|
||||
|
||||
.control-toggle-btn {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.control-icon-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
grid-auto-columns: minmax(126px, 1fr);
|
||||
}
|
||||
@@ -2170,14 +2339,19 @@ select.name-input {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.live-mode-root {
|
||||
--live-footer-height: 62px;
|
||||
--live-footer-offset: 10px;
|
||||
}
|
||||
|
||||
.live-mode-shell {
|
||||
border-radius: 12px;
|
||||
min-height: 0;
|
||||
min-height: 70dvh;
|
||||
}
|
||||
|
||||
.live-mode-overlay {
|
||||
padding: 10px;
|
||||
min-height: 0;
|
||||
min-height: 70dvh;
|
||||
}
|
||||
|
||||
.live-mode-grid {
|
||||
@@ -2193,6 +2367,23 @@ select.name-input {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.live-mode-footer {
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.live-mode-fixed-footer {
|
||||
inset-inline: 10px;
|
||||
}
|
||||
|
||||
.live-footer-logo {
|
||||
max-height: 36px;
|
||||
}
|
||||
|
||||
.live-footer-slot.right .live-footer-logo {
|
||||
max-width: min(40vw, 150px);
|
||||
}
|
||||
|
||||
.status-row {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@@ -2229,6 +2420,36 @@ select.name-input {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 .podium-img {
|
||||
width: 156px;
|
||||
height: 156px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-medal-icon {
|
||||
font-size: 50px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 .podium-medal-icon {
|
||||
font-size: 64px;
|
||||
margin-top: 84px;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-name {
|
||||
-webkit-line-clamp: 3;
|
||||
min-height: 3.45em;
|
||||
}
|
||||
|
||||
.podium-live-card .podium-col.pos-1 .podium-name {
|
||||
-webkit-line-clamp: 3;
|
||||
min-height: 3.45em;
|
||||
}
|
||||
|
||||
.competitor-image {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
Reference in New Issue
Block a user