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

feat: 메인 시계를 턴 엔진 상태로 표시한다

Browse Source
This commit is contained in:
Hide_D
2026-08-24 15:50:22 +00:00
parent b5763290d2
commit 83edf7d956
9 changed files with 260 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/mainNavigation.spec.ts
+22 -14
View File
@@ -42,6 +42,7 @@ type NavigationFixture = {
clockMode?: 'realtime' | 'manual';
clockRunning?: boolean;
clockStartsAt?: string | null;
turnEngineRunning?: boolean | null;
cityDefence?: number;
cityState?: number;
nationRate?: number;
@@ -598,6 +599,7 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
clockMode: state.clockMode ?? 'realtime',
clockRunning: state.clockRunning ?? true,
clockStartsAt: state.clockStartsAt ?? null,
turnEngineRunning: state.turnEngineRunning === undefined ? true : state.turnEngineRunning,
scenarioTitle: state.scenarioTitle ?? '',
});
}
@@ -2037,7 +2039,7 @@ 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 ({
test('main header clock follows minute boundaries only while the turn engine is running', async ({
page,
}, testInfo) => {
const state: NavigationFixture = {
@@ -2052,6 +2054,7 @@ test('main header clock follows minute boundaries only while game-server contact
serverWallTime: '2026-08-13T00:00:00.000Z',
clockMode: 'realtime',
clockRunning: true,
turnEngineRunning: true,
};
await installRealtimeHarness(page);
await installFixture(page, state);
@@ -2063,37 +2066,42 @@ test('main header clock follows minute boundaries only while game-server contact
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 expect(clock).not.toHaveClass(/execution-status--stopped/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 page.evaluate(() => {
(window as unknown as { __emitMainRealtime: (type: string, value: unknown) => void }).__emitMainRealtime(
'ping',
{ turnEngineRunning: false }
);
});
await expect(clock).toHaveClass(/execution-status--stopped/u);
await expect(clock).toHaveAttribute('title', '턴 엔진이 정지하여 현재 시각 보정을 멈췄습니다.');
await expect.poll(() => clock.evaluate((element) => getComputedStyle(element).color)).toBe('rgb(255, 0, 255)');
const staleDesktopGeometry = await clock.evaluate((element) => ({
const stoppedDesktopGeometry = 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);
expect(stoppedDesktopGeometry.rect.width).toBeCloseTo(333.33, 0);
expect(stoppedDesktopGeometry.rect.height).toBeGreaterThanOrEqual(36);
expect(stoppedDesktopGeometry.overflow).toBeLessThanOrEqual(0);
await clock.screenshot({ path: testInfo.outputPath('main-header-clock-stopped-desktop-1200.png') });
await page.clock.runFor(81_000);
await expect(clock).toHaveText('현재 시각: 08-13 09:01');
await page.evaluate(() => {
(window as unknown as { __emitMainRealtime: (type: string, value: unknown) => void }).__emitMainRealtime(
'ping',
{}
{ turnEngineRunning: true }
);
});
await expect(clock).toHaveText('현재 시각: 08-13 09:02');
await expect(clock).not.toHaveClass(/execution-status--stale/u);
await expect(clock).not.toHaveClass(/execution-status--stopped/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)');
@@ -2114,7 +2122,7 @@ test('main header clock follows minute boundaries only while game-server contact
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`
`${JSON.stringify({ stoppedDesktopGeometry, freshMobileGeometry }, null, 2)}\n`
),
]);
expect(state.trpcRequests?.length ?? 0).toBe(initialRequestCount);
app/game-frontend/src/components/main/MainFrontStatus.vue
+16 -16
View File
@@ -2,11 +2,6 @@
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
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,
@@ -21,6 +16,7 @@ const props = defineProps<{
clockMode?: 'realtime' | 'manual';
clockRunning?: boolean;
clockStartsAt?: string | null;
turnEngineRunning?: boolean | null;
status: {
onlineUserCount: number;
onlineNations: string;
@@ -38,10 +34,12 @@ const props = defineProps<{
const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
const currentServerTime = ref('기록 없음');
const hasServerClock = ref(false);
const serverClockFresh = ref(false);
const turnEngineStopped = computed(() => props.turnEngineRunning === false);
const turnEngineStatusUnknown = computed(() => typeof props.turnEngineRunning !== 'boolean');
const serverClockTitle = computed(() => {
if (!hasServerClock.value) return '서버 시각을 아직 받지 못했습니다.';
if (!serverClockFresh.value) return '최근 45초 동안 서버 통신이 없어 시각 갱신을 멈췄습니다.';
if (turnEngineStopped.value) return '턴 엔진이 정지하여 현재 시각 보정을 멈췄습니다.';
if (turnEngineStatusUnknown.value) return '턴 엔진 진행 상태를 확인하지 못했습니다.';
return undefined;
});
@@ -54,7 +52,6 @@ const updateServerClock = () => {
if (serverClockSample === null) {
currentServerTime.value = '기록 없음';
hasServerClock.value = false;
serverClockFresh.value = false;
return;
}
@@ -65,16 +62,14 @@ const updateServerClock = () => {
fallback: '기록 없음',
});
hasServerClock.value = true;
if (props.turnEngineRunning !== true) return;
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];
const nextDelays: number[] = [];
if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
const untilStartMs = serverClockSample.startDelayMs - projection.clientElapsedMs;
nextDelays.push(untilStartMs > 0 ? untilStartMs : millisecondsUntilNextMinute(projection.time));
}
if (nextDelays.length === 0) return;
serverClockTimer = setTimeout(updateServerClock, Math.max(1, Math.min(...nextDelays)));
};
@@ -86,7 +81,7 @@ watch(
},
{ immediate: true }
);
watch(() => gameServerActivity.lastContactAt.value, updateServerClock);
watch(() => props.turnEngineRunning, updateServerClock);
onUnmounted(() => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
@@ -100,7 +95,8 @@ onUnmounted(() => {
class="status-row execution-status"
:class="{
'execution-status--empty': !hasServerClock,
'execution-status--stale': hasServerClock && !serverClockFresh,
'execution-status--stopped': hasServerClock && turnEngineStopped,
'execution-status--unknown': hasServerClock && turnEngineStatusUnknown,
}"
:title="serverClockTitle"
>
@@ -195,10 +191,14 @@ onUnmounted(() => {
color: magenta;
}
.execution-status--stale {
.execution-status--stopped {
color: magenta;
}
.execution-status--unknown {
color: #aaa;
}
.vote-label {
color: cyan;
}
app/game-frontend/src/stores/mainDashboard.ts
+33 -3
View File
@@ -81,7 +81,12 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
tournamentType?: TournamentType | null;
};
type DashboardTabMessage =
{ kind: 'patch'; patch: DashboardReadModelPatch } | { kind: 'status'; status: 'idle' | 'connected' };
| { kind: 'patch'; patch: DashboardReadModelPatch }
| {
kind: 'status';
status: 'idle' | 'connected';
turnEngineRunning?: boolean | null;
};
const loading = ref(false);
const refreshing = ref(false);
@@ -467,6 +472,14 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
}
};
const applyTurnEngineRunning = (turnEngineRunning: boolean | null | undefined) => {
if (turnEngineRunning === undefined || !lobbyInfo.value) return;
lobbyInfo.value = structurallyShare(lobbyInfo.value, {
...lobbyInfo.value,
turnEngineRunning,
});
};
const currentDashboardPatch = (): DashboardReadModelPatch => {
const patch: DashboardReadModelPatch = {};
patch.contextSnapshot = toRaw(contextSnapshot);
@@ -1115,6 +1128,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
return;
}
realtimeStatus.value = message.status;
applyTurnEngineRunning(message.turnEngineRunning);
if (message.status === 'connected') markGameServerContact();
},
});
@@ -1209,11 +1223,27 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
markGameServerContact();
void refreshMessages();
});
source.addEventListener('ping', () => {
source.addEventListener('ping', (event) => {
let turnEngineRunning: boolean | null | undefined;
if (event instanceof MessageEvent && typeof event.data === 'string') {
try {
const payload = JSON.parse(event.data) as { turnEngineRunning?: unknown };
if (typeof payload.turnEngineRunning === 'boolean' || payload.turnEngineRunning === null) {
turnEngineRunning = payload.turnEngineRunning;
}
} catch {
// Older APIs send an empty heartbeat. Keep the last explicit engine state.
}
}
applyTurnEngineRunning(turnEngineRunning);
markGameServerContact();
if (realtimeEnabled.value) {
realtimeStatus.value = 'connected';
realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
realtimeCoordinator?.postFromLeader({
kind: 'status',
status: 'connected',
...(turnEngineRunning === undefined ? {} : { turnEngineRunning }),
});
}
});
};
app/game-frontend/src/views/MainView.vue
+1
View File
@@ -253,6 +253,7 @@ watch(
:clock-mode="lobbyInfo?.clockMode"
:clock-running="lobbyInfo?.clockRunning"
:clock-starts-at="lobbyInfo?.clockStartsAt"
:turn-engine-running="lobbyInfo?.turnEngineRunning"
/>
</div>