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

merge: 메인 현재 시각 분 단위 갱신을 병합한다

Browse Source
This commit is contained in:
Hide_D
2026-08-21 17:21:30 +00:00
parent 24afa7f466 96e2648f7c
commit 543283c648
10 changed files with 374 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/mainNavigation.spec.ts
+84 -1
View File
@@ -1188,7 +1188,7 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');
await expect(page.locator('.legacy-game-info')).not.toContainText('최근 턴:');
await expect(page.locator('.execution-status')).toHaveText('동작 시각: 08-13 09:05');
await expect(page.locator('.execution-status')).toHaveText('현재 시각: 08-13 09:00');
await expect(page.locator('.tournament-status')).toHaveText('토너먼트: 참가 모집중');
await expect(page.locator('.vote-status')).toHaveText('설문: 메뉴 설문');
const headerStatusGeometry = await page.locator('.main-page').evaluate((element) => {
@@ -1793,6 +1793,89 @@ test('main general card uses local turn time and command clock tracks corrected
expect(state.operations).toHaveLength(operationsBeforePreopenBoundary);
});
test('main header clock follows minute boundaries only while game-server contact is recent', async ({
page,
}, testInfo) => {
const state: NavigationFixture = {
officerLevel: 0,
permission: 0,
nationLevel: 0,
stage: 0,
npcMode: 1,
generalMeCalls: 0,
operations: [],
serverTime: '2026-08-13T00:00:35.000Z',
serverWallTime: '2026-08-13T00:00:00.000Z',
clockMode: 'realtime',
clockRunning: true,
};
await installRealtimeHarness(page);
await installFixture(page, state);
await page.clock.install({ time: new Date('2026-08-13T00:00:00.000Z') });
await page.setViewportSize({ width: 1200, height: 900 });
await waitForMain(page);
await waitForMainRealtime(page);
const clock = page.locator('.execution-status');
const initialRequestCount = state.trpcRequests?.length ?? 0;
await expect(clock).toHaveText('현재 시각: 08-13 09:00');
await expect(clock).not.toHaveClass(/execution-status--stale/u);
await page.clock.runFor(25_000);
await expect(clock).toHaveText('현재 시각: 08-13 09:01');
await page.clock.runFor(21_000);
await expect(clock).toHaveClass(/execution-status--stale/u);
await expect(clock).toHaveAttribute('title', '최근 45초 동안 서버 통신이 없어 시각 갱신을 멈췄습니다.');
await expect.poll(() => clock.evaluate((element) => getComputedStyle(element).color)).toBe('rgb(255, 0, 255)');
const staleDesktopGeometry = await clock.evaluate((element) => ({
rect: element.getBoundingClientRect().toJSON(),
overflow: element.scrollWidth - element.clientWidth,
color: getComputedStyle(element).color,
fontSize: getComputedStyle(element).fontSize,
lineHeight: getComputedStyle(element).lineHeight,
}));
expect(staleDesktopGeometry.rect.width).toBeCloseTo(333.33, 0);
expect(staleDesktopGeometry.rect.height).toBeGreaterThanOrEqual(36);
expect(staleDesktopGeometry.overflow).toBeLessThanOrEqual(0);
await clock.screenshot({ path: testInfo.outputPath('main-header-clock-stale-desktop-1200.png') });
await page.clock.runFor(60_000);
await expect(clock).toHaveText('현재 시각: 08-13 09:01');
await page.evaluate(() => {
(window as unknown as { __emitMainRealtime: (type: string, value: unknown) => void }).__emitMainRealtime(
'ping',
{}
);
});
await expect(clock).toHaveText('현재 시각: 08-13 09:02');
await expect(clock).not.toHaveClass(/execution-status--stale/u);
await page.clock.runFor(39_000);
await expect(clock).toHaveText('현재 시각: 08-13 09:03');
await expect.poll(() => clock.evaluate((element) => getComputedStyle(element).color)).toBe('rgb(0, 255, 255)');
await page.setViewportSize({ width: 500, height: 900 });
const freshMobileGeometry = await clock.evaluate((element) => ({
rect: element.getBoundingClientRect().toJSON(),
overflow: element.scrollWidth - element.clientWidth,
color: getComputedStyle(element).color,
fontSize: getComputedStyle(element).fontSize,
lineHeight: getComputedStyle(element).lineHeight,
documentScrollWidth: document.documentElement.scrollWidth,
}));
expect(freshMobileGeometry.rect.width).toBeCloseTo(166.67, 0);
expect(freshMobileGeometry.overflow).toBeLessThanOrEqual(0);
expect(freshMobileGeometry.documentScrollWidth).toBe(500);
await Promise.all([
clock.screenshot({ path: testInfo.outputPath('main-header-clock-fresh-mobile-500.png') }),
writeFile(
testInfo.outputPath('main-header-clock-geometry.json'),
`${JSON.stringify({ staleDesktopGeometry, freshMobileGeometry }, null, 2)}\n`
),
]);
expect(state.trpcRequests?.length ?? 0).toBe(initialRequestCount);
});
test('message targets keep reply behavior and use nation-color contrast in labels and select options', async ({
page,
}) => {
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;
}
app/game-frontend/src/stores/mainDashboard.ts
+9
View File
@@ -21,6 +21,7 @@ import {
import { createBroadcastTabCoordinator, type BroadcastTabCoordinator } from '../utils/broadcastTabCoordinator';
import { resolveWithReadModelSnapshotFallback } from '../utils/readModelDeltaRecovery';
import { createRealtimeRequestOptions } from '../utils/realtimeAccessGrant';
import { markGameServerContact } from '../utils/gameServerActivity';
const REALTIME_FULL_REFRESH_MIN_INTERVAL_MS = 5_000;
@@ -1097,10 +1098,12 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
onPayload: (message) => {
if (!isRealtimeParticipant()) return;
if (message.kind === 'patch') {
markGameServerContact();
applyDashboardPatch(message.patch);
return;
}
realtimeStatus.value = message.status;
if (message.status === 'connected') markGameServerContact();
},
});
realtimeCoordinator.start();
@@ -1153,6 +1156,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
realtimeSource = source;
source.addEventListener('open', () => {
markGameServerContact();
realtimeStatus.value = 'connected';
realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
});
@@ -1166,6 +1170,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
if (!payload || payload.type !== 'readModelInvalidated') {
return;
}
markGameServerContact();
readModelRefreshQueue.request(payload.invalidation, payload.refreshGrant);
});
source.addEventListener('messagesInvalidated', (event) => {
@@ -1174,6 +1179,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
if (!payload || payload.type !== 'messagesInvalidated') {
return;
}
markGameServerContact();
void refreshMessages(payload.refreshGrant);
});
@@ -1182,14 +1188,17 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
for (const legacyEventType of ['turnCompleted', 'readModelChanged'] as const) {
source.addEventListener(legacyEventType, () => {
if (realtimeCoordinator !== null && !realtimeCoordinator.isLeader()) return;
markGameServerContact();
realtimeRefreshQueue.request();
});
}
source.addEventListener('messageCreated', () => {
if (realtimeCoordinator !== null && !realtimeCoordinator.isLeader()) return;
markGameServerContact();
void refreshMessages();
});
source.addEventListener('ping', () => {
markGameServerContact();
if (realtimeEnabled.value) {
realtimeStatus.value = 'connected';
realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
app/game-frontend/src/utils/gameServerActivity.ts
+34
View File
@@ -0,0 +1,34 @@
import { readonly, ref, type Ref } from 'vue';
export const GAME_SERVER_ACTIVITY_FRESHNESS_MS = 45_000;
export type GameServerActivityTracker = {
lastContactAt: Readonly<Ref<number | null>>;
markContact: (contactAt?: number) => void;
};
export const createGameServerActivityTracker = (): GameServerActivityTracker => {
const lastContactAt = ref<number | null>(null);
return {
lastContactAt: readonly(lastContactAt),
markContact(contactAt = Date.now()) {
if (!Number.isFinite(contactAt)) return;
lastContactAt.value = contactAt;
},
};
};
export const isRecentGameServerActivity = (
lastContactAt: number | null,
now = Date.now(),
freshnessMs = GAME_SERVER_ACTIVITY_FRESHNESS_MS
): boolean =>
lastContactAt !== null &&
Number.isFinite(lastContactAt) &&
Number.isFinite(now) &&
Math.max(0, now - lastContactAt) <= freshnessMs;
export const gameServerActivity = createGameServerActivityTracker();
export const markGameServerContact = (contactAt = Date.now()) => gameServerActivity.markContact(contactAt);
app/game-frontend/src/utils/serverClockProjection.ts
+67
View File
@@ -0,0 +1,67 @@
export type ServerClockProjectionInput = {
serverTime?: string;
serverWallTime?: string;
clockMode?: 'realtime' | 'manual';
clockRunning?: boolean;
clockStartsAt?: string | null;
};
export type SampledServerClock = {
serverTimeMs: number;
sampledClientTimeMs: number;
clockMode: 'realtime' | 'manual';
startDelayMs: number | null;
};
const parseInstant = (value?: string | null): number | null => {
if (!value) return null;
const parsed = new Date(value).getTime();
return Number.isFinite(parsed) ? parsed : null;
};
export const sampleServerClock = (
input: ServerClockProjectionInput,
sampledClientTimeMs = Date.now()
): SampledServerClock | null => {
const serverTimeMs = parseInstant(input.serverTime);
if (serverTimeMs === null) return null;
let startDelayMs: number | null;
if (input.clockMode === 'manual') {
startDelayMs = null;
} else if (input.clockRunning !== false) {
startDelayMs = 0;
} else {
const serverWallTimeMs = parseInstant(input.serverWallTime);
const clockStartsAtMs = parseInstant(input.clockStartsAt);
startDelayMs =
serverWallTimeMs !== null && clockStartsAtMs !== null
? Math.max(0, clockStartsAtMs - serverWallTimeMs)
: null;
}
return {
serverTimeMs,
sampledClientTimeMs,
clockMode: input.clockMode ?? 'realtime',
startDelayMs,
};
};
export const projectServerClock = (sample: SampledServerClock, clientTimeMs = Date.now()) => {
const clientElapsedMs = Math.max(0, clientTimeMs - sample.sampledClientTimeMs);
const elapsedGameMs =
sample.clockMode === 'manual' || sample.startDelayMs === null
? 0
: Math.max(0, clientElapsedMs - sample.startDelayMs);
return {
clientElapsedMs,
time: new Date(sample.serverTimeMs + elapsedGameMs),
};
};
export const millisecondsUntilNextMinute = (time: Date): number => {
const remainder = ((time.getTime() % 60_000) + 60_000) % 60_000;
return remainder === 0 ? 60_000 : 60_000 - remainder;
};
app/game-frontend/src/utils/trpc.ts
+6
View File
@@ -3,6 +3,7 @@ import { REALTIME_ACCESS_GRANT_HEADER } from '@sammo-ts/common/realtime/types';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '@sammo-ts/game-api';
import { resolveBatchRealtimeAccessGrant } from './realtimeAccessGrant';
import { markGameServerContact } from './gameServerActivity';
const getGameToken = (): string | null => {
if (typeof window === 'undefined') {
@@ -17,6 +18,11 @@ export const trpc = createTRPCProxyClient<AppRouter>({
httpBatchLink({
url: import.meta.env.VITE_GAME_API_URL ?? '/api/trpc',
...trpcJsonBodyHttpClientOptions,
async fetch(input, init) {
const result = await globalThis.fetch(input, init);
markGameServerContact();
return result;
},
headers({ opList }) {
const token = getGameToken();
const refreshGrant = resolveBatchRealtimeAccessGrant(opList);
app/game-frontend/src/views/MainView.vue
+9 -1
View File
@@ -243,7 +243,15 @@ watch(
</div>
<div data-main-target="policy">
<MainFrontStatus :status="frontStatus" :tournament-stage="tournamentStage" />
<MainFrontStatus
:status="frontStatus"
:tournament-stage="tournamentStage"
:server-time="lobbyInfo?.serverTime"
:server-wall-time="lobbyInfo?.serverWallTime"
:clock-mode="lobbyInfo?.clockMode"
:clock-running="lobbyInfo?.clockRunning"
:clock-starts-at="lobbyInfo?.clockStartsAt"
/>
</div>
<aside v-if="surveyNotice" class="survey-notice" role="status" aria-live="polite">
app/game-frontend/test/gameServerActivity.test.ts
+22
View File
@@ -0,0 +1,22 @@
import assert from 'node:assert/strict';
import test from 'node:test';
import {
GAME_SERVER_ACTIVITY_FRESHNESS_MS,
createGameServerActivityTracker,
isRecentGameServerActivity,
} from '../src/utils/gameServerActivity.ts';
void test('keeps the most recently observed server contact timestamp', () => {
const tracker = createGameServerActivityTracker();
tracker.markContact(2_000);
tracker.markContact(1_000);
tracker.markContact(Number.NaN);
assert.equal(tracker.lastContactAt.value, 1_000);
});
void test('treats three heartbeat intervals as recent activity', () => {
assert.equal(isRecentGameServerActivity(1_000, 1_000 + GAME_SERVER_ACTIVITY_FRESHNESS_MS), true);
assert.equal(isRecentGameServerActivity(1_000, 1_001 + GAME_SERVER_ACTIVITY_FRESHNESS_MS), false);
assert.equal(isRecentGameServerActivity(null, 1_000), false);
});
app/game-frontend/test/serverClockProjection.test.ts
+51
View File
@@ -0,0 +1,51 @@
import assert from 'node:assert/strict';
import test from 'node:test';
import {
millisecondsUntilNextMinute,
projectServerClock,
sampleServerClock,
} from '../src/utils/serverClockProjection.ts';
void test('projects a running server clock from the browser sample instant', () => {
const sample = sampleServerClock(
{
serverTime: '2026-08-13T00:00:35.250Z',
clockMode: 'realtime',
clockRunning: true,
},
10_000
);
assert.ok(sample);
assert.equal(projectServerClock(sample, 34_750).time.toISOString(), '2026-08-13T00:01:00.000Z');
assert.equal(millisecondsUntilNextMinute(projectServerClock(sample, 10_000).time), 24_750);
});
void test('keeps manual clocks fixed even while client time advances', () => {
const sample = sampleServerClock(
{ serverTime: '2026-08-13T00:00:35.000Z', clockMode: 'manual', clockRunning: false },
10_000
);
assert.ok(sample);
assert.equal(projectServerClock(sample, 130_000).time.toISOString(), '2026-08-13T00:00:35.000Z');
});
void test('holds a preopen clock until its wall-clock start delay passes', () => {
const sample = sampleServerClock(
{
serverTime: '2026-08-13T00:00:00.000Z',
serverWallTime: '2026-08-13T08:00:00.000Z',
clockMode: 'realtime',
clockRunning: false,
clockStartsAt: '2026-08-13T08:01:00.000Z',
},
10_000
);
assert.ok(sample);
assert.equal(projectServerClock(sample, 69_999).time.toISOString(), '2026-08-13T00:00:00.000Z');
assert.equal(projectServerClock(sample, 70_001).time.toISOString(), '2026-08-13T00:00:00.001Z');
});
void test('rejects an invalid server clock sample', () => {
assert.equal(sampleServerClock({ serverTime: 'not-a-time' }, 10_000), null);
});