fix(frontend): show next turn seconds in command clock
This commit is contained in:
@@ -765,7 +765,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 renders Ref title and omitted rows with second precision', async ({ page }) => {
|
||||
test('main general card and command clock render the next turn with second precision', async ({ page }) => {
|
||||
const state: NavigationFixture = {
|
||||
officerLevel: 0,
|
||||
permission: 0,
|
||||
@@ -788,6 +788,9 @@ test('main general card renders Ref title and omitted rows with second precision
|
||||
await expect(title).toContainText('용장');
|
||||
await expect(title).toContainText('09:07:06');
|
||||
await expect(title).not.toContainText('00:07');
|
||||
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');
|
||||
const generalCard = page.locator('[data-main-target="general"] [data-general-basic-card]').first();
|
||||
await expect(generalCard).toContainText('수비 함(훈사80)');
|
||||
await expect(generalCard).toContainText('5 턴');
|
||||
@@ -808,9 +811,25 @@ test('main general card renders Ref title and omitted rows with second precision
|
||||
overflow: style.overflow,
|
||||
};
|
||||
});
|
||||
const desktopClockGeometry = await commandClock.evaluate((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const style = getComputedStyle(element);
|
||||
return {
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
scrollWidth: element.scrollWidth,
|
||||
clientWidth: element.clientWidth,
|
||||
fontSize: style.fontSize,
|
||||
lineHeight: style.lineHeight,
|
||||
display: style.display,
|
||||
placeItems: style.placeItems,
|
||||
};
|
||||
});
|
||||
expect(desktopGeometry.width).toBeGreaterThan(0);
|
||||
expect(desktopGeometry.height).toBeGreaterThan(0);
|
||||
expect(desktopGeometry.scrollWidth - desktopGeometry.clientWidth).toBeLessThanOrEqual(0);
|
||||
expect(desktopClockGeometry.scrollWidth - desktopClockGeometry.clientWidth).toBeLessThanOrEqual(0);
|
||||
expect(desktopClockGeometry.placeItems).toBe('center');
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth)).toBeLessThanOrEqual(0);
|
||||
if (artifactRoot) {
|
||||
const target = resolve(artifactRoot);
|
||||
@@ -819,7 +838,7 @@ test('main general card renders Ref title and omitted rows with second precision
|
||||
page.screenshot({ path: resolve(target, 'main-turn-time-seoul-desktop-1200.png'), fullPage: true }),
|
||||
writeFile(
|
||||
resolve(target, 'main-turn-time-seoul-desktop-1200.json'),
|
||||
`${JSON.stringify(desktopGeometry, null, 2)}\n`
|
||||
`${JSON.stringify({ title: desktopGeometry, commandClock: desktopClockGeometry }, null, 2)}\n`
|
||||
),
|
||||
]);
|
||||
}
|
||||
@@ -827,13 +846,41 @@ test('main general card renders Ref title and omitted rows with second precision
|
||||
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');
|
||||
expect(await mobileTitle.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(0);
|
||||
const mobileCommandClock = page.locator('[data-main-target="commands"] [data-command-current-time]').first();
|
||||
await expect(mobileCommandClock).toHaveText('09:07:06');
|
||||
const mobileGeometry = {
|
||||
title: await mobileTitle.evaluate((element) => ({
|
||||
width: element.getBoundingClientRect().width,
|
||||
height: element.getBoundingClientRect().height,
|
||||
overflow: element.scrollWidth - element.clientWidth,
|
||||
fontSize: getComputedStyle(element).fontSize,
|
||||
lineHeight: getComputedStyle(element).lineHeight,
|
||||
})),
|
||||
commandClock: await mobileCommandClock.evaluate((element) => ({
|
||||
width: element.getBoundingClientRect().width,
|
||||
height: element.getBoundingClientRect().height,
|
||||
overflow: element.scrollWidth - element.clientWidth,
|
||||
fontSize: getComputedStyle(element).fontSize,
|
||||
lineHeight: getComputedStyle(element).lineHeight,
|
||||
display: getComputedStyle(element).display,
|
||||
placeItems: getComputedStyle(element).placeItems,
|
||||
})),
|
||||
};
|
||||
expect(mobileGeometry.title.overflow).toBeLessThanOrEqual(0);
|
||||
expect(mobileGeometry.commandClock.overflow).toBeLessThanOrEqual(0);
|
||||
expect(mobileGeometry.commandClock.placeItems).toBe('center');
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth)).toBeLessThanOrEqual(0);
|
||||
if (artifactRoot) {
|
||||
await page.screenshot({
|
||||
path: resolve(artifactRoot, 'main-turn-time-seoul-mobile-500.png'),
|
||||
fullPage: true,
|
||||
});
|
||||
await Promise.all([
|
||||
page.screenshot({
|
||||
path: resolve(artifactRoot, 'main-turn-time-seoul-mobile-500.png'),
|
||||
fullPage: true,
|
||||
}),
|
||||
writeFile(
|
||||
resolve(artifactRoot, 'main-turn-time-seoul-mobile-500.json'),
|
||||
`${JSON.stringify(mobileGeometry, null, 2)}\n`
|
||||
),
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -44,7 +44,7 @@ const props = withDefaults(
|
||||
mobile: false,
|
||||
title: '',
|
||||
name: null,
|
||||
currentTime: '--:--',
|
||||
currentTime: '--:--:--',
|
||||
mapData: null,
|
||||
mapLayout: null,
|
||||
}
|
||||
@@ -333,7 +333,7 @@ const clickOutsideMenu = (event: Event) => {
|
||||
><span>{{ props.title }}</span>
|
||||
</div>
|
||||
<button type="button" @click="editMode = !editMode">{{ editMode ? '일반 모드' : '고급 모드' }}</button>
|
||||
<div class="clock">{{ props.currentTime }}</div>
|
||||
<div class="clock" data-command-current-time>{{ props.currentTime }}</div>
|
||||
<details class="legacy-menu">
|
||||
<summary>반복</summary>
|
||||
<div class="menu-items">
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { computed } from 'vue';
|
||||
import { addMinutes } from 'date-fns';
|
||||
import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
|
||||
import { formatSeoulTimeSeconds } from '../../utils/legacyDateTime';
|
||||
import type {
|
||||
CommandMapData,
|
||||
CommandMapLayout,
|
||||
@@ -61,6 +62,10 @@ const rows = computed<ReservedCommandRow[]>(() => {
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const currentTurnTime = computed(() =>
|
||||
props.general?.turnTime ? formatSeoulTimeSeconds(props.general.turnTime) : '--:--:--'
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -70,7 +75,7 @@ const rows = computed<ReservedCommandRow[]>(() => {
|
||||
:command-table="props.commandTable"
|
||||
:loading="props.loading"
|
||||
:storage-key="props.storageKey ?? `core2026:general:${props.general?.id ?? 0}`"
|
||||
:current-time="rows[0]?.time"
|
||||
:current-time="currentTurnTime"
|
||||
:map-data="props.mapData"
|
||||
:map-layout="props.mapLayout"
|
||||
@reserve-bulk="emit('set-general-turns', $event)"
|
||||
|
||||
Reference in New Issue
Block a user