devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 메인 현재 시각을 최근 통신 기준으로 갱신

Browse Source 
완료 턴 시각 대신 lobby serverTime을 분 경계에 맞춰 표시한다. 게임 API 응답과 SSE 및 같은 계정 탭 전달을 최근 통신으로 기록하고, 45초 공백에는 시계를 멈춘다. 공통 시계 투영과 단위 및 Chromium 회귀 검증을 추가한다.
This commit is contained in:
Hide_D
2026-08-21 17:19:46 +00:00
parent b82492e6d1
commit 1e14320911
10 changed files with 374 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/components/main/CommandListPanel.vue
+7 -27
View File
@@ -3,6 +3,7 @@ import { computed, onUnmounted, ref, watch } from 'vue';
import { addMinutes } from 'date-fns';
import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
import { formatLocalDateTime, formatLocalTimeSeconds } from '../../utils/legacyDateTime';
import { projectServerClock, sampleServerClock, type SampledServerClock } from '../../utils/serverClockProjection';
import type {
CommandMapData,
CommandMapLayout,
@@ -90,27 +91,20 @@ const autonomousUntil = computed(() => {
const currentServerTime = ref('--:--:--');
const MAX_SERVER_CLOCK_TIMER_DELAY_MS = 60_000;
let sampledServerTimeMs: number | null = null;
let sampledClientTimeMs = 0;
let sampledStartDelayMs: number | null = 0;
let serverClockSample: SampledServerClock | null = null;
let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
const updateServerClock = () => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
serverClockTimer = undefined;
if (sampledServerTimeMs === null) {
if (serverClockSample === null) {
currentServerTime.value = '--:--:--';
return;
}
const clientElapsedMs = Math.max(0, Date.now() - sampledClientTimeMs);
const elapsedGameMs =
props.clockMode === 'manual' || sampledStartDelayMs === null
? 0
: Math.max(0, clientElapsedMs - sampledStartDelayMs);
const projectedTime = new Date(sampledServerTimeMs + elapsedGameMs);
const { clientElapsedMs, time: projectedTime } = projectServerClock(serverClockSample);
currentServerTime.value = formatLocalTimeSeconds(projectedTime);
if (props.clockMode !== 'manual' && sampledStartDelayMs !== null) {
const untilStartMs = sampledStartDelayMs - clientElapsedMs;
if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
const untilStartMs = serverClockSample.startDelayMs - clientElapsedMs;
serverClockTimer = setTimeout(
updateServerClock,
untilStartMs > 0
@@ -123,21 +117,7 @@ const updateServerClock = () => {
watch(
() => [props.serverTime, props.serverWallTime, props.clockMode, props.clockRunning, props.clockStartsAt] as const,
([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt]) => {
const parsed = serverTime ? new Date(serverTime).getTime() : Number.NaN;
sampledServerTimeMs = Number.isFinite(parsed) ? parsed : null;
sampledClientTimeMs = Date.now();
if (clockMode === 'manual') {
sampledStartDelayMs = null;
} else if (clockRunning !== false) {
sampledStartDelayMs = 0;
} else {
const wallTimeMs = serverWallTime ? new Date(serverWallTime).getTime() : Number.NaN;
const startsAtMs = clockStartsAt ? new Date(clockStartsAt).getTime() : Number.NaN;
sampledStartDelayMs =
Number.isFinite(wallTimeMs) && Number.isFinite(startsAtMs)
? Math.max(0, startsAtMs - wallTimeMs)
: null;
}
serverClockSample = sampleServerClock({ serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt });
updateServerClock();
},
{ immediate: true }
app/game-frontend/src/components/main/MainFrontStatus.vue
+85 -6
View File
@@ -1,10 +1,26 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { computed } from 'vue';
import { computed, onUnmounted, ref, watch } from 'vue';
import { resolveTournamentStageName } from '../../utils/tournamentStatus';
import {
GAME_SERVER_ACTIVITY_FRESHNESS_MS,
gameServerActivity,
isRecentGameServerActivity,
} from '../../utils/gameServerActivity';
import {
millisecondsUntilNextMinute,
projectServerClock,
sampleServerClock,
type SampledServerClock,
} from '../../utils/serverClockProjection';
const props = defineProps<{
tournamentStage: number;
serverTime?: string;
serverWallTime?: string;
clockMode?: 'realtime' | 'manual';
clockRunning?: boolean;
clockStartsAt?: string | null;
status: {
onlineUserCount: number;
onlineNations: string;
@@ -20,16 +36,75 @@ const props = defineProps<{
}>();
const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
const lastExecutedStatus = computed(() =>
formatServerDateTime(props.status?.lastExecuted, { format: 'monthDayTime', fallback: '기록 없음' })
const currentServerTime = ref('기록 없음');
const hasServerClock = ref(false);
const serverClockFresh = ref(false);
const serverClockTitle = computed(() => {
if (!hasServerClock.value) return '서버 시각을 아직 받지 못했습니다.';
if (!serverClockFresh.value) return '최근 45초 동안 서버 통신이 없어 시각 갱신을 멈췄습니다.';
return undefined;
});
let serverClockSample: SampledServerClock | null = null;
let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
const updateServerClock = () => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
serverClockTimer = undefined;
if (serverClockSample === null) {
currentServerTime.value = '기록 없음';
hasServerClock.value = false;
serverClockFresh.value = false;
return;
}
const now = Date.now();
const projection = projectServerClock(serverClockSample, now);
currentServerTime.value = formatServerDateTime(projection.time, {
format: 'monthDayTime',
fallback: '기록 없음',
});
hasServerClock.value = true;
const lastContactAt = gameServerActivity.lastContactAt.value;
serverClockFresh.value = isRecentGameServerActivity(lastContactAt, now);
if (!serverClockFresh.value || lastContactAt === null) return;
const nextDelays = [lastContactAt + GAME_SERVER_ACTIVITY_FRESHNESS_MS - now + 1];
if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
const untilStartMs = serverClockSample.startDelayMs - projection.clientElapsedMs;
nextDelays.push(untilStartMs > 0 ? untilStartMs : millisecondsUntilNextMinute(projection.time));
}
serverClockTimer = setTimeout(updateServerClock, Math.max(1, Math.min(...nextDelays)));
};
watch(
() => [props.serverTime, props.serverWallTime, props.clockMode, props.clockRunning, props.clockStartsAt] as const,
([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt]) => {
serverClockSample = sampleServerClock({ serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt });
updateServerClock();
},
{ immediate: true }
);
watch(() => gameServerActivity.lastContactAt.value, updateServerClock);
onUnmounted(() => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
});
</script>
<template>
<section class="front-status" aria-label="접속 현황과 국가 방침">
<div class="activity-status" aria-label="동작 시각, 토너먼트와 설문 진행 현황">
<div class="status-row execution-status" :class="{ 'execution-status--empty': !status?.lastExecuted }">
동작 시각: {{ lastExecutedStatus }}
<div class="activity-status" aria-label="현재 시각, 토너먼트와 설문 진행 현황">
<div
class="status-row execution-status"
:class="{
'execution-status--empty': !hasServerClock,
'execution-status--stale': hasServerClock && !serverClockFresh,
}"
:title="serverClockTitle"
>
현재 시각: {{ currentServerTime }}
</div>
<div class="status-row tournament-status">
<RouterLink to="/tournament">
@@ -120,6 +195,10 @@ const lastExecutedStatus = computed(() =>
color: magenta;
}
.execution-status--stale {
color: magenta;
}
.vote-label {
color: cyan;
}