синхронизация текущего времени матча во всех браузерах, тест 1

app.py

@@ -440,6 +440,49 @@ def logout(request: Request):
     return response
 
 
+
+class ClockStatePayload(BaseModel):
+    currentPeriod: str | None = None
+    matchClockSeconds: int = 0
+    timerRunning: bool = False
+    pausedAccumulatedSeconds: int | None = None
+    sourceClientId: str | None = None
+
+
+# Простое общее состояние часов для всех браузеров.
+# localStorage остаётся резервом на стороне клиента.
+MATCH_CLOCK_STATES: Dict[int, dict] = {}
+
+
+def build_clock_state_payload(match_id: int) -> dict:
+    state = MATCH_CLOCK_STATES.get(match_id)
+    if not state:
+        return {
+            "exists": False,
+            "currentPeriod": None,
+            "matchClockSeconds": 0,
+            "timerRunning": False,
+            "serverSavedAt": None,
+            "sourceClientId": None,
+        }
+
+    seconds = int(state.get("matchClockSeconds") or 0)
+    timer_running = bool(state.get("timerRunning"))
+    saved_at = float(state.get("serverSavedAt") or time.time())
+
+    if timer_running:
+        seconds += max(0, int(time.time() - saved_at))
+
+    return {
+        "exists": True,
+        "currentPeriod": state.get("currentPeriod"),
+        "matchClockSeconds": max(0, seconds),
+        "timerRunning": timer_running,
+        "serverSavedAt": saved_at,
+        "sourceClientId": state.get("sourceClientId"),
+    }
+
+
 class MatchEventPayload(BaseModel):
     side: str
     type: str
@@ -1082,6 +1125,41 @@ def save_formation(session_token: str, payload: FormationSavePayload):
     return {"success": True}
 
 
+@app.get("/admin/session/{session_token}/clock-state")
+def api_get_clock_state(session_token: str):
+    session_row = get_match_session_by_token(session_token)
+    if not session_row:
+        return JSONResponse({"error": "session_not_found"}, status_code=404)
+
+    match_id = session_row[1]
+    return build_clock_state_payload(match_id)
+
+
+@app.post("/admin/session/{session_token}/clock-state")
+def api_save_clock_state(session_token: str, payload: ClockStatePayload):
+    session_row = get_match_session_by_token(session_token)
+    if not session_row:
+        return JSONResponse({"error": "session_not_found"}, status_code=404)
+
+    match_id = session_row[1]
+    seconds = max(0, int(payload.matchClockSeconds or 0))
+
+    MATCH_CLOCK_STATES[match_id] = {
+        "currentPeriod": payload.currentPeriod,
+        "matchClockSeconds": seconds,
+        "timerRunning": bool(payload.timerRunning),
+        "pausedAccumulatedSeconds": (
+            int(payload.pausedAccumulatedSeconds)
+            if payload.pausedAccumulatedSeconds is not None
+            else seconds
+        ),
+        "serverSavedAt": time.time(),
+        "sourceClientId": payload.sourceClientId,
+    }
+
+    return build_clock_state_payload(match_id)
+
+
 @app.get("/admin/session/{session_token}/events")
 def api_get_events(session_token: str):
     session_row = get_match_session_by_token(session_token)

static/script.js

@@ -64,6 +64,17 @@ let originalLineupState = null;
 const SESSION_TOKEN = MATCH_DATA.sessionToken ?? null;
 const MATCH_ID = MATCH_DATA.matchId ?? null;
 const STORAGE_KEY = `match_admin_state_match_${MATCH_ID}`;
+const CLOCK_CLIENT_ID_KEY = `match_admin_clock_client_${MATCH_ID}`;
+let CLOCK_CLIENT_ID = localStorage.getItem(CLOCK_CLIENT_ID_KEY);
+if (!CLOCK_CLIENT_ID) {
+    CLOCK_CLIENT_ID = `${Date.now()}_${Math.random().toString(16).slice(2)}`;
+    localStorage.setItem(CLOCK_CLIENT_ID_KEY, CLOCK_CLIENT_ID);
+}
+let lastClockServerSyncAt = 0;
+let clockServerSyncInFlight = false;
+let applyingRemoteClockState = false;
+let clockEditorIsOpen = false;
+
 
 const formationState = {
     home: Array.isArray(MATCH_DATA.homeFormations) ? MATCH_DATA.homeFormations : [],
@@ -315,11 +326,106 @@ function saveMatchState() {
         };
 
         localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
+        syncClockStateToServer(false);
     } catch (e) {
         console.warn("Не удалось сохранить состояние матча", e);
     }
 }
 
+async function syncClockStateToServer(force = false) {
+    if (!SESSION_TOKEN || applyingRemoteClockState) return;
+
+    const now = Date.now();
+    if (!force && now - lastClockServerSyncAt < 1500) return;
+    if (clockServerSyncInFlight) return;
+
+    lastClockServerSyncAt = now;
+    clockServerSyncInFlight = true;
+
+    try {
+        const liveSeconds = getLiveClockSeconds();
+        await fetch(`/admin/session/${SESSION_TOKEN}/clock-state`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                currentPeriod,
+                matchClockSeconds: liveSeconds,
+                timerRunning: !!timerId,
+                pausedAccumulatedSeconds: liveSeconds,
+                sourceClientId: CLOCK_CLIENT_ID
+            })
+        });
+    } catch (e) {
+        console.warn("Не удалось синхронизировать время с сервером", e);
+    } finally {
+        clockServerSyncInFlight = false;
+    }
+}
+
+async function loadClockStateFromServer() {
+    if (!SESSION_TOKEN || clockEditorIsOpen) return false;
+
+    try {
+        const res = await fetch(`/admin/session/${SESSION_TOKEN}/clock-state`, {
+            cache: "no-store"
+        });
+        if (!res.ok) return false;
+
+        const state = await res.json();
+        if (!state || !state.exists) return false;
+
+        // Если это только что отправил этот же браузер — не дёргаем локальный таймер лишний раз.
+        if (state.sourceClientId && state.sourceClientId === CLOCK_CLIENT_ID) {
+            return true;
+        }
+
+        applyingRemoteClockState = true;
+
+        currentPeriod = state.currentPeriod ?? currentPeriod;
+        const seconds = Math.max(0, Number(state.matchClockSeconds) || 0);
+        const shouldRun = !!state.timerRunning && (currentPeriod === "1H" || currentPeriod === "2H");
+
+        if (timerId) {
+            clearInterval(timerId);
+            timerId = null;
+        }
+
+        pausedAccumulatedSeconds = seconds;
+        matchClockSeconds = seconds;
+        periodStartedAt = shouldRun ? Date.now() : null;
+
+        if (shouldRun) {
+            timerId = setInterval(() => {
+                updateTimerUI();
+                saveMatchState();
+            }, 1000);
+        }
+
+        updateTimerUI();
+        updatePeriodBadge(
+            currentPeriod === "1H" ? (extraTimeMinutes.first ? `1-й тайм +${extraTimeMinutes.first}` : "1-й тайм") :
+            currentPeriod === "HT" ? "Перерыв" :
+            currentPeriod === "2H" ? (extraTimeMinutes.second ? `2-й тайм +${extraTimeMinutes.second}` : "2-й тайм") :
+            currentPeriod === "FT" ? "Матч завершён" :
+            "Матч не начат"
+        );
+
+        saveMatchState();
+        updatePeriodButtons();
+        return true;
+    } catch (e) {
+        console.warn("Не удалось получить время с сервера", e);
+        return false;
+    } finally {
+        applyingRemoteClockState = false;
+    }
+}
+
+function initClockStateSync() {
+    loadClockStateFromServer();
+    setInterval(loadClockStateFromServer, 2000);
+}
+
 function restoreMatchState() {
     const state = getPersistedState();
     if (!state) return false;
@@ -407,12 +513,15 @@ async function syncEditedClockToVmix(totalSeconds, shouldRun) {
 }
 
 function closeClockEditor() {
+    clockEditorIsOpen = false;
     const modal = document.getElementById("clockEditorModal");
     if (modal) modal.classList.remove("show");
 }
 
 function openClockEditor() {
+    clockEditorIsOpen = true;
     if (!(currentPeriod === "1H" || currentPeriod === "2H")) {
+        clockEditorIsOpen = false;
         alert("Редактировать время можно после запуска 1-го или 2-го тайма");
         return;
     }
@@ -472,6 +581,7 @@ async function applyClockEditor() {
 
     updateTimerUI();
     saveMatchState();
+    await syncClockStateToServer(true);
     closeClockEditor();
     await syncEditedClockToVmix(newSeconds, wasRunning);
 }
@@ -710,6 +820,7 @@ function setMatchPeriod(period) {
         addPeriodMarker("period_start_1h", "Начало 1-го тайма", 0);
         triggerVmixTimerAction("first_half_start");
         saveMatchState();
+        syncClockStateToServer(true);
         clearExtraTimeInput();
         updatePeriodButtons();
         return;
@@ -725,6 +836,7 @@ function setMatchPeriod(period) {
     addPeriodMarker("period_ht", "Конец 1-го тайма", actualEndSeconds);
     triggerVmixTimerAction("halftime");
     saveMatchState();
+    syncClockStateToServer(true);
     clearExtraTimeInput();
     updatePeriodButtons();
     return;
@@ -747,6 +859,7 @@ function setMatchPeriod(period) {
         triggerVmixTimerAction("second_half_start");
         startTimer();
         saveMatchState();
+        syncClockStateToServer(true);
         updatePeriodButtons();
         return;
     }
@@ -757,6 +870,7 @@ function setMatchPeriod(period) {
         addPeriodMarker("period_ft", "Конец 2-го тайма", getLiveClockSeconds());
         triggerVmixTimerAction("full_time");
         saveMatchState();
+        syncClockStateToServer(true);
         clearExtraTimeInput();
         updatePeriodButtons();
     }
@@ -1022,6 +1136,7 @@ function clearMatchEvents() {
     renderEvents();
 
     saveMatchState();
+    syncClockStateToServer(true);
     clearEventsOnServer();
     updateCoachCardButtons();
     updatePeriodButtons();
@@ -2416,6 +2531,7 @@ if (!restored) {
 }
 
 loadEventsFromServer();
+initClockStateSync();
 window.addEventListener("beforeunload", saveMatchState);
 window.addEventListener("pagehide", saveMatchState);
 document.addEventListener("visibilitychange", () => {