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

fix(frontend): 서버 보정 시각을 로컬 시계로 표시

Browse Source 
명령 목록 중앙 시계는 서버 게임 시각과 클라이언트 시각 차이를 보정해 흐르게 한다. 장수 다음 턴과 예약 행 시각도 브라우저 로컬 시간대로 투영한다.
This commit is contained in:
Hide_D
2026-08-15 18:23:13 +00:00
parent 964c780c9b
commit d0b9b8f211
6 changed files with 100 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/mainNavigation.spec.ts
+29 -10
View File
@@ -21,6 +21,8 @@ type NavigationFixture = {
operations: string[];
generalName?: string;
generalTurnTime?: string;
serverTime?: string;
clockMode?: 'realtime' | 'manual';
cityDefence?: number;
cityState?: number;
nationRate?: number;
@@ -346,6 +348,8 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
year: state.currentYear ?? 185,
month: state.currentMonth ?? 1,
turnTerm: 10,
serverTime: state.serverTime ?? '2026-08-13T00:00:00.000Z',
clockMode: state.clockMode ?? 'realtime',
scenarioTitle: state.scenarioTitle ?? '',
});
}
@@ -766,7 +770,7 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
await persistArtifact(page, `${basePath.slice(1)}-desktop-1200`);
});
test('main general card and command clock render the next turn with second precision', async ({ page }) => {
test('main general card uses local turn time and command clock tracks corrected server time', async ({ page }) => {
const state: NavigationFixture = {
officerLevel: 0,
permission: 0,
@@ -776,22 +780,29 @@ test('main general card and command clock render the next turn with second preci
generalMeCalls: 0,
operations: [],
generalName: 'Administrator',
generalTurnTime: '2026-08-13T00:07:06.713Z',
generalTurnTime: '2026-08-13T00:09:10.713Z',
serverTime: '2026-08-13T00:07:06.250Z',
clockMode: 'realtime',
currentYear: 179,
currentMonth: 8,
};
await installFixture(page, state);
await page.clock.install({ time: new Date('2026-08-13T00:00:00.000Z') });
const cdp = await page.context().newCDPSession(page);
await cdp.send('Emulation.setTimezoneOverride', { timezoneId: 'Asia/Seoul' });
await page.setViewportSize({ width: 1200, height: 900 });
await waitForMain(page);
const title = page.locator('[data-main-target="general"] .general-title').first();
await expect(title).toContainText('Administrator');
await expect(title).toContainText('용장');
await expect(title).toContainText('09:07:06');
await expect(title).not.toContainText('00:07');
await expect(title).toContainText('09:09:10');
await expect(title).not.toContainText('00:09');
const commandClock = page.locator('[data-main-target="commands"] [data-command-current-time]').first();
await expect(commandClock).toHaveText('09:07:06');
await expect(commandClock).not.toHaveText('00:07');
await page.clock.runFor(1_000);
await expect(commandClock).toHaveText('09:07:07');
const generalCard = page.locator('[data-main-target="general"] [data-general-basic-card]').first();
await expect(generalCard).toContainText('수비 함(훈사80)');
await expect(generalCard).toContainText('5 턴');
@@ -836,9 +847,9 @@ test('main general card and command clock render the next turn with second preci
const target = resolve(artifactRoot);
await mkdir(target, { recursive: true });
await Promise.all([
page.screenshot({ path: resolve(target, 'main-turn-time-seoul-desktop-1200.png'), fullPage: true }),
page.screenshot({ path: resolve(target, 'main-turn-time-local-desktop-1200.png'), fullPage: true }),
writeFile(
resolve(target, 'main-turn-time-seoul-desktop-1200.json'),
resolve(target, 'main-turn-time-local-desktop-1200.json'),
`${JSON.stringify({ title: desktopGeometry, commandClock: desktopClockGeometry }, null, 2)}\n`
),
]);
@@ -846,9 +857,9 @@ test('main general card and command clock render the next turn with second preci
await page.setViewportSize({ width: 500, height: 900 });
const mobileTitle = page.locator('[data-main-target="general"] .general-title').first();
await expect(mobileTitle).toContainText('09:07:06');
await expect(mobileTitle).toContainText('09:09:10');
const mobileCommandClock = page.locator('[data-main-target="commands"] [data-command-current-time]').first();
await expect(mobileCommandClock).toHaveText('09:07:06');
await expect(mobileCommandClock).toHaveText('09:07:07');
const mobileGeometry = {
title: await mobileTitle.evaluate((element) => ({
width: element.getBoundingClientRect().width,
@@ -874,15 +885,23 @@ test('main general card and command clock render the next turn with second preci
if (artifactRoot) {
await Promise.all([
page.screenshot({
path: resolve(artifactRoot, 'main-turn-time-seoul-mobile-500.png'),
path: resolve(artifactRoot, 'main-turn-time-local-mobile-500.png'),
fullPage: true,
}),
writeFile(
resolve(artifactRoot, 'main-turn-time-seoul-mobile-500.json'),
resolve(artifactRoot, 'main-turn-time-local-mobile-500.json'),
`${JSON.stringify(mobileGeometry, null, 2)}\n`
),
]);
}
state.clockMode = 'manual';
state.serverTime = '2026-08-13T00:08:30.000Z';
await page.reload();
const frozenClock = page.locator('[data-main-target="commands"] [data-command-current-time]').first();
await expect(frozenClock).toHaveText('09:08:30');
await page.clock.runFor(2_000);
await expect(frozenClock).toHaveText('09:08:30');
});
test('pure NPC message senders are not rendered as reply targets', async ({ page }) => {
app/game-frontend/src/components/main/CommandListPanel.vue
+41 -7
View File
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, onUnmounted, ref, watch } from 'vue';
import { addMinutes } from 'date-fns';
import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
import { formatSeoulTimeSeconds } from '../../utils/legacyDateTime';
import { formatLocalTimeSeconds } from '../../utils/legacyDateTime';
import type {
CommandMapData,
CommandMapLayout,
@@ -19,6 +19,8 @@ const props = defineProps<{
currentYear?: number;
currentMonth?: number;
turnTermMinutes?: number;
serverTime?: string;
clockMode?: 'realtime' | 'manual';
autorunLimit?: number | null;
storageKey?: string;
mapData?: CommandMapData | null;
@@ -56,16 +58,48 @@ const rows = computed<ReservedCommandRow[]>(() => {
autonomous: props.autorunLimit != null && absoluteMonth <= props.autorunLimit - 1,
time: date
? term >= 5
? `${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getUTCMinutes()).padStart(2, '0')}`
: `${String(date.getUTCMinutes()).padStart(2, '0')}:${String(date.getUTCSeconds()).padStart(2, '0')}`
? `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
: `${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
: '--:--',
};
});
});
const currentTurnTime = computed(() =>
props.general?.turnTime ? formatSeoulTimeSeconds(props.general.turnTime) : '--:--:--'
const currentServerTime = ref('--:--:--');
let sampledServerTimeMs: number | null = null;
let sampledClientTimeMs = 0;
let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
const updateServerClock = () => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
serverClockTimer = undefined;
if (sampledServerTimeMs === null) {
currentServerTime.value = '--:--:--';
return;
}
const projectedTime = new Date(
props.clockMode === 'manual' ? sampledServerTimeMs : sampledServerTimeMs + Date.now() - sampledClientTimeMs
);
currentServerTime.value = formatLocalTimeSeconds(projectedTime);
if (props.clockMode !== 'manual') {
serverClockTimer = setTimeout(updateServerClock, 1_000 - projectedTime.getMilliseconds());
}
};
watch(
() => [props.serverTime, props.clockMode] as const,
([serverTime]) => {
const parsed = serverTime ? new Date(serverTime).getTime() : Number.NaN;
sampledServerTimeMs = Number.isFinite(parsed) ? parsed : null;
sampledClientTimeMs = Date.now();
updateServerClock();
},
{ immediate: true }
);
onUnmounted(() => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
});
</script>
<template>
@@ -75,7 +109,7 @@ const currentTurnTime = computed(() =>
:command-table="props.commandTable"
:loading="props.loading"
:storage-key="props.storageKey ?? `core2026:general:${props.general?.id ?? 0}`"
:current-time="currentTurnTime"
:current-time="currentServerTime"
:map-data="props.mapData"
:map-layout="props.mapLayout"
@reserve-bulk="emit('set-general-turns', $event)"
app/game-frontend/src/components/main/GeneralBasicCard.vue
+2 -2
View File
@@ -3,7 +3,7 @@ import { computed } from 'vue';
import SkeletonLines from '../ui/SkeletonLines.vue';
import LegacyProgressBar from '../ui/LegacyProgressBar.vue';
import { formatSeoulTimeSeconds } from '../../utils/legacyDateTime';
import { formatLocalTimeSeconds } from '../../utils/legacyDateTime';
import { legacyExperiencePercent, ratioPercent } from '../../utils/legacyProgress';
import { DEFAULT_GENERAL_ICON_URL, resolveGeneralIconBackgroundImage } from '../../utils/generalIcon';
import { configuredGameAssetUrl } from '../../utils/imageAssets';
@@ -232,7 +232,7 @@ const specialText = computed(() => {
{{ props.general.officerLevelText }} | {{ props.general.generalType ?? '-' }} |
<span :style="{ color: injuryInfo.color }">{{ injuryInfo.text }}</span> 】
<span data-general-turn-time>{{
props.general.turnTime ? formatSeoulTimeSeconds(props.general.turnTime) : '-'
props.general.turnTime ? formatLocalTimeSeconds(props.general.turnTime) : '-'
}}</span>
</div>
app/game-frontend/src/utils/legacyDateTime.ts
+8
View File
@@ -7,3 +7,11 @@ export const formatSeoulHourMinute = (value: string | Date): string =>
export const formatSeoulTimeSeconds = (value: string | Date): string =>
formatServerDateTime(value, { format: 'timeSeconds' });
export const formatLocalTimeSeconds = (value: string | Date): string => {
const parsed = value instanceof Date ? value : new Date(value);
if (!Number.isFinite(parsed.getTime())) return '-';
return [parsed.getHours(), parsed.getMinutes(), parsed.getSeconds()]
.map((part) => String(part).padStart(2, '0'))
.join(':');
};
app/game-frontend/src/views/MainView.vue
+4
View File
@@ -205,6 +205,8 @@ watch(
:current-year="lobbyInfo?.year"
:current-month="lobbyInfo?.month"
:turn-term-minutes="lobbyInfo?.turnTerm"
:server-time="lobbyInfo?.serverTime"
:clock-mode="lobbyInfo?.clockMode"
:autorun-limit="reservedGeneralAutorunLimit"
:map-data="worldMap"
:map-layout="mapLayout"
@@ -331,6 +333,8 @@ watch(
:current-year="lobbyInfo?.year"
:current-month="lobbyInfo?.month"
:turn-term-minutes="lobbyInfo?.turnTerm"
:server-time="lobbyInfo?.serverTime"
:clock-mode="lobbyInfo?.clockMode"
:autorun-limit="reservedGeneralAutorunLimit"
:map-data="worldMap"
:map-layout="mapLayout"
app/game-frontend/test/legacyDateTime.test.ts
+16 -1
View File
@@ -1,7 +1,12 @@
import assert from 'node:assert/strict';
import test from 'node:test';
import { formatSeoulDateTime, formatSeoulHourMinute, formatSeoulTimeSeconds } from '../src/utils/legacyDateTime.ts';
import {
formatLocalTimeSeconds,
formatSeoulDateTime,
formatSeoulHourMinute,
formatSeoulTimeSeconds,
} from '../src/utils/legacyDateTime.ts';
void test('formats API UTC timestamps in the server Seoul timezone', () => {
assert.equal(formatSeoulDateTime('2026-08-13T00:07:06.713Z'), '2026-08-13 09:07:06');
@@ -14,3 +19,13 @@ void test('keeps legacy timezone-less server timestamps unchanged', () => {
assert.equal(formatSeoulHourMinute('2026-08-13 09:07:06'), '09:07');
assert.equal(formatSeoulTimeSeconds('2026-08-13 09:07:06'), '09:07:06');
});
void test('formats an ISO instant with the client local clock', () => {
const instant = new Date('2026-08-13T00:07:06.713Z');
const expected = [instant.getHours(), instant.getMinutes(), instant.getSeconds()]
.map((part) => String(part).padStart(2, '0'))
.join(':');
assert.equal(formatLocalTimeSeconds(instant), expected);
assert.equal(formatLocalTimeSeconds(instant.toISOString()), expected);
assert.equal(formatLocalTimeSeconds('invalid'), '-');
});