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

복구 2배속의 게임·실제 시간 표시 설정과 시계 빠른 전환 추가

Browse Source
This commit is contained in:
Hide_D
2026-09-10 04:22:18 +00:00
parent 3a5d4e7833
commit 73e1743a3d
26 changed files with 537 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/App.vue
+2
View File
@@ -1,10 +1,12 @@
<script setup lang="ts">
import { useClockDisplayRefresh } from './composables/useClockDisplayRefresh';
import { RouterView } from 'vue-router';
import GameServerConnectionNotice from './components/ui/GameServerConnectionNotice.vue';
import GameFeedbackLayer from './components/ui/GameFeedbackLayer.vue';
import { useDeploymentVersionNotice } from './composables/useDeploymentVersionNotice';
useDeploymentVersionNotice();
useClockDisplayRefresh();
</script>
<template>
app/game-frontend/src/components/chief/ChiefCommandEditor.vue
+5 -1
View File
@@ -1,5 +1,9 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useClockDisplay } from '../../composables/useClockDisplay';
import { formatSeoulTimeSeconds } from '../../utils/legacyDateTime';
const { time } = useClockDisplay();
const currentTime = computed(() => (time.value ? formatSeoulTimeSeconds(time.value) : '--:--:--'));
import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
import type {
CommandMapData,
@@ -50,7 +54,7 @@ const reserveBulk = (entries: CommandPatternEntry[], complete?: ReservationCompl
:mobile="props.mobile"
:title="props.officerLevelText"
:name="props.name"
:current-time="props.rows[0]?.time"
:current-time="currentTime"
:map-data="props.mapData"
:map-layout="props.mapLayout"
@reserve-bulk="reserveBulk"
app/game-frontend/src/components/command/ReservedCommandEditor.vue
+22 -2
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { useClockDisplay } from '../../composables/useClockDisplay';
const { accelerated, label: clockLabel, toggle: toggleClock, mode: clockDisplayMode } = useClockDisplay();
import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
import CommandArgumentForm from '../main/CommandArgumentForm.vue';
import CommandSelectForm from '../main/CommandSelectForm.vue';
@@ -382,7 +384,18 @@ const clickOutsideMenu = (event: Event) => {
><span>{{ props.title }}</span>
</div>
<button type="button" @click="editMode = !editMode">{{ editMode ? '일반 모드' : '고급 모드' }}</button>
<div class="clock" data-command-current-time>{{ props.currentTime }}</div>
<button
type="button"
class="clock"
data-command-current-time
:class="{ 'clock--real': accelerated && clockDisplayMode === 'real' }"
:disabled="!accelerated"
:title="accelerated ? `${clockLabel} · 클릭하여 변경` : clockLabel"
:aria-label="`현재 시각 · ${clockLabel}`"
@click="toggleClock"
>
{{ props.currentTime }}
</button>
<details class="legacy-menu">
<summary>반복</summary>
<div class="menu-items">
@@ -881,10 +894,17 @@ const clickOutsideMenu = (event: Event) => {
place-items: center;
padding: 4px;
}
.clock {
.control-pad > .clock {
background: #345c85;
font-variant-numeric: tabular-nums;
}
.clock:disabled {
opacity: 1;
cursor: default;
}
.control-pad > .clock--real {
background: #386b45;
}
.legacy-menu {
position: relative;
min-width: 0;
app/game-frontend/src/components/main/CommandListPanel.vue
+8 -57
View File
@@ -1,10 +1,11 @@
<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue';
import { computed } from 'vue';
import { useClockDisplay } from '../../composables/useClockDisplay';
import { addMinutes } from 'date-fns';
import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
import { generalTurnEditorModeStorageKey } from '../command/commandQueue';
import { formatLocalDateTime, formatLocalTimeSeconds } from '../../utils/legacyDateTime';
import { projectServerClock, sampleServerClock, type SampledServerClock } from '../../utils/serverClockProjection';
import { gameFrontendRuntimeConfig } from '../../config/runtimeConfig';
import type {
CommandMapData,
@@ -14,6 +15,9 @@ import type {
ReservedCommandRow,
} from '../command/types';
const { projectTime, time } = useClockDisplay();
const currentServerTime = computed(() => (time.value ? formatLocalTimeSeconds(time.value) : '--:--:--'));
type ReservationCompletion = (success: boolean) => void;
const props = defineProps<{
@@ -69,7 +73,7 @@ const rows = computed<ReservedCommandRow[]>(() => {
const term = props.turnTermMinutes ?? 0;
return (props.reservedGeneralTurns ?? []).map((turn, offset) => {
const absoluteMonth = firstReservedMonth.value + offset;
const date = base && Number.isFinite(base.getTime()) ? addMinutes(base, offset * term) : null;
const date = base && Number.isFinite(base.getTime()) ? projectTime(addMinutes(base, offset * term)) : null;
return {
...turn,
args: turn.args ?? {},
@@ -100,62 +104,9 @@ const autonomousUntil = computed(() => {
base && Number.isFinite(base.getTime())
? addMinutes(base, (lastAutonomousMonth - currentAbsoluteMonth) * term)
: null;
const currentTimeLabel = expiresAt ? formatLocalDateTime(expiresAt) : '현재시각 확인 불가';
const currentTimeLabel = expiresAt ? formatLocalDateTime(projectTime(expiresAt)) : '현재시각 확인 불가';
return `${untilYear}年 ${untilMonth}月 · ${currentTimeLabel}까지`;
});
const currentServerTime = ref('--:--:--');
const MAX_SERVER_CLOCK_TIMER_DELAY_MS = 60_000;
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 = '--:--:--';
return;
}
const { clientElapsedMs, time: projectedTime, rate } = projectServerClock(serverClockSample);
currentServerTime.value = formatLocalTimeSeconds(projectedTime);
if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
const untilStartMs = serverClockSample.startDelayMs - clientElapsedMs;
serverClockTimer = setTimeout(
updateServerClock,
untilStartMs > 0
? Math.min(untilStartMs, MAX_SERVER_CLOCK_TIMER_DELAY_MS)
: (1_000 - projectedTime.getMilliseconds()) / rate
);
}
};
watch(
() =>
[
props.serverTime,
props.serverWallTime,
props.clockMode,
props.clockRunning,
props.clockStartsAt,
props.clockRecovery,
] as const,
([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt, clockRecovery]) => {
serverClockSample = sampleServerClock({
serverTime,
serverWallTime,
clockMode,
clockRunning,
clockStartsAt,
clockRecovery,
});
updateServerClock();
},
{ immediate: true }
);
onUnmounted(() => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
});
</script>
<template>
app/game-frontend/src/components/main/GeneralBasicCard.vue
+3 -1
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { useClockDisplay } from '../../composables/useClockDisplay';
const { projectTime } = useClockDisplay();
import { computed } from 'vue';
import SkeletonLines from '../ui/SkeletonLines.vue';
@@ -257,7 +259,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 ? formatLocalTimeSeconds(props.general.turnTime) : '-'
props.general.turnTime ? formatLocalTimeSeconds(projectTime(props.general.turnTime)) : '-'
}}</span>
</div>
app/game-frontend/src/components/main/MainFrontStatus.vue
+50 -79
View File
@@ -1,13 +1,8 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { computed, onUnmounted, ref, watch } from 'vue';
import { computed, watch } from 'vue';
import { resolveTournamentStageName } from '../../utils/tournamentStatus';
import {
millisecondsUntilNextMinute,
projectServerClock,
sampleServerClock,
type SampledServerClock,
} from '../../utils/serverClockProjection';
import { receiveClockSample, useClockDisplay } from '../../composables/useClockDisplay';
const props = defineProps<{
tournamentStage: number;
@@ -33,99 +28,53 @@ const props = defineProps<{
}>();
const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
const currentServerTime = ref('기록 없음');
const hasServerClock = ref(false);
const recovering = ref(false);
const turnEngineStopped = computed(() => props.turnEngineRunning === false);
const turnEngineStatusUnknown = computed(() => typeof props.turnEngineRunning !== 'boolean');
const { time, accelerated: recovering, mode, label, toggle, engineRunning } = useClockDisplay();
const currentServerTime = computed(() =>
formatServerDateTime(time.value, { format: 'monthDayTime', fallback: '기록 없음' })
);
const hasServerClock = computed(() => time.value !== null);
const turnEngineStopped = computed(() => engineRunning.value === false);
const turnEngineStatusUnknown = computed(() => typeof engineRunning.value !== 'boolean');
const serverClockTitle = computed(() => {
if (!hasServerClock.value) return '서버 시각을 아직 받지 못했습니다.';
if (turnEngineStopped.value) return '턴 엔진이 정지하여 현재 시각 보정을 멈췄습니다.';
if (turnEngineStatusUnknown.value) return '턴 엔진 진행 상태를 확인하지 못했습니다.';
return undefined;
return recovering.value ? `${label.value} · 클릭하여 변경` : label.value;
});
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;
return;
}
const now = Date.now();
const projection = projectServerClock(serverClockSample, now);
recovering.value = projection.rate === 2;
currentServerTime.value = formatServerDateTime(projection.time, {
format: 'monthDayTime',
fallback: '기록 없음',
});
hasServerClock.value = true;
if (props.turnEngineRunning !== true) return;
const nextDelays: number[] = [];
if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
const untilStartMs = serverClockSample.startDelayMs - projection.clientElapsedMs;
nextDelays.push(
untilStartMs > 0 ? untilStartMs : millisecondsUntilNextMinute(projection.time) / projection.rate
);
}
for (const boundary of [serverClockSample.recoveryStartDelayMs, serverClockSample.recoveryEndDelayMs]) {
if (boundary !== undefined && boundary > projection.clientElapsedMs)
nextDelays.push(boundary - projection.clientElapsedMs);
}
if (nextDelays.length === 0) return;
serverClockTimer = setTimeout(updateServerClock, Math.max(1, Math.min(...nextDelays)));
};
watch(
() =>
[
props.serverTime,
props.serverWallTime,
props.clockMode,
props.clockRunning,
props.clockStartsAt,
props.clockRecovery,
] as const,
([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt, clockRecovery]) => {
serverClockSample = sampleServerClock({
serverTime,
serverWallTime,
clockMode,
clockRunning,
clockStartsAt,
clockRecovery,
});
updateServerClock();
},
() => [
props.serverTime,
props.serverWallTime,
props.clockMode,
props.clockRunning,
props.clockStartsAt,
props.clockRecovery,
],
() => receiveClockSample(props),
{ immediate: true }
);
watch(() => props.turnEngineRunning, updateServerClock);
onUnmounted(() => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
});
</script>
<template>
<section class="front-status" aria-label="접속 현황과 국가 방침">
<div class="activity-status" aria-label="현재 시각, 토너먼트와 설문 진행 현황">
<div
<button
type="button"
:disabled="!recovering || turnEngineStopped"
class="status-row execution-status"
:class="{
'execution-status--game': recovering && mode === 'game',
'execution-status--real': recovering && mode === 'real',
'execution-status--empty': !hasServerClock,
'execution-status--stopped': hasServerClock && turnEngineStopped,
'execution-status--unknown': hasServerClock && turnEngineStatusUnknown,
}"
:title="serverClockTitle"
@click="toggle"
>
현재 시각: {{ currentServerTime }}<span v-if="recovering"> · 복구 2배속</span>
</div>
현재 시각: {{ currentServerTime
}}<span v-if="recovering"> · 2배속 · {{ mode === 'real' ? '실제 시간' : '게임 시간' }}</span>
</button>
<div class="status-row tournament-status">
<RouterLink to="/tournament">
<span class="tournament-label">토너먼트: </span>{{ tournamentStatus }}
@@ -208,9 +157,31 @@ onUnmounted(() => {
}
.execution-status {
background: transparent;
border-right: 0;
border-bottom: 0;
border-left: 0;
font: inherit;
cursor: pointer;
color: cyan;
}
.execution-status > span {
display: block;
white-space: nowrap;
font-size: 12px;
}
.execution-status:disabled {
opacity: 1;
cursor: default;
}
.execution-status--game {
color: #ffd180;
}
.execution-status--real {
color: #a5d6a7;
}
.execution-status--empty {
color: magenta;
}
app/game-frontend/src/composables/useClockDisplay.ts
+98
View File
@@ -0,0 +1,98 @@
import { computed, ref, shallowRef } from 'vue';
import { useStorage } from '@vueuse/core';
import { formatServerDateTime, type ServerDateTimeOptions } from '@sammo-ts/common/time/ServerDateTime';
import { gameFrontendRuntimeConfig } from '../config/runtimeConfig';
import {
projectRecoveryTime,
projectServerClock,
sampleServerClock,
type ServerClockProjectionInput,
} from '../utils/serverClockProjection';
export const clockDisplayStorageKey = `sammo-clock-display:${gameFrontendRuntimeConfig.profile}:${gameFrontendRuntimeConfig.appBasePath}`;
const storedMode = useStorage<string>(clockDisplayStorageKey, 'game');
const mode = computed({
get: () => (storedMode.value === 'real' ? 'real' : 'game'),
set: (value: string) => {
storedMode.value = value === 'real' ? 'real' : 'game';
},
});
const sample = shallowRef<ReturnType<typeof sampleServerClock>>(null);
const now = ref(Date.now());
const engineRunning = ref<boolean | null>(null);
const haltedAt = ref<number | null>(null);
export const receiveClockEngineState = (running: boolean | null): void => {
engineRunning.value = running;
haltedAt.value = running === false ? (haltedAt.value ?? Date.now()) : null;
};
export const receiveClockSample = (
input: ServerClockProjectionInput & { turnEngineRunning?: boolean | null }
): void => {
if (!input.serverTime) return;
const wallTime = input.serverWallTime ? new Date(input.serverWallTime).getTime() : undefined;
// 메인 화면의 이전 표본을 heartbeat가 재전달해도 더 최신 lobby 표본을 되감지 않는다.
if (
wallTime !== undefined &&
sample.value?.serverWallTimeMs !== undefined &&
wallTime < sample.value.serverWallTimeMs
)
return;
if (
sample.value &&
wallTime !== undefined &&
wallTime === sample.value.serverWallTimeMs &&
new Date(input.serverTime).getTime() === sample.value.serverTimeMs &&
input.turnEngineRunning === engineRunning.value
)
return;
receiveClockEngineState(input.turnEngineRunning ?? null);
sample.value = sampleServerClock(
input.turnEngineRunning === false ? { ...input, clockRunning: false, clockStartsAt: null } : input
);
now.value = Date.now();
};
export const advanceClockDisplay = (): void => {
now.value = Date.now();
};
export const clockSampleIsStale = (): boolean =>
!sample.value || Date.now() - sample.value.sampledClientTimeMs >= 30_000;
const projection = computed(() =>
sample.value ? projectServerClock(sample.value, haltedAt.value ?? now.value) : null
);
const accelerated = computed(() => projection.value?.rate === 2 && engineRunning.value !== false);
const label = computed(() => (mode.value === 'real' ? '실제 시간 기준' : '게임 시간 기준'));
const time = computed(() => {
const projected = projection.value?.time;
if (!projected) return null;
return mode.value === 'real' && accelerated.value ? projectRecoveryTime(sample.value, projected) : projected;
});
const toggle = (): void => {
if (accelerated.value) mode.value = mode.value === 'real' ? 'game' : 'real';
};
const projectTime = (value: string | Date): Date => {
// timezone 없는 API 값은 기존 고정 UTC+9 서버 벽시계 계약을 유지한다.
const normalized =
typeof value === 'string' && /^\d{4}-\d\d-\d\d[ T]\d\d:\d\d(?::\d\d(?:\.\d+)?)?$/.test(value)
? `${value.replace(' ', 'T')}+09:00`
: value;
const date = normalized instanceof Date ? normalized : new Date(normalized);
return mode.value === 'real' ? projectRecoveryTime(sample.value, date) : date;
};
const formatTime = (value: string | Date | null | undefined, options?: ServerDateTimeOptions): string =>
formatServerDateTime(value ? projectTime(value) : value, options);
export const useClockDisplay = () => ({
mode,
label,
time,
accelerated,
toggle,
projectTime,
formatTime,
engineRunning,
});
app/game-frontend/src/composables/useClockDisplayRefresh.ts
+37
View File
@@ -0,0 +1,37 @@
import { onMounted, onUnmounted } from 'vue';
import { trpc } from '../utils/trpc';
import { advanceClockDisplay, clockSampleIsStale } from './useClockDisplay';
export const useClockDisplayRefresh = (): void => {
let timer: ReturnType<typeof setInterval> | undefined;
let pending = false;
let lastAttempt = -Infinity;
const refresh = async () => {
advanceClockDisplay();
if (
Date.now() - lastAttempt < 30_000 ||
pending ||
document.visibilityState !== 'visible' ||
!clockSampleIsStale()
)
return;
pending = true;
lastAttempt = Date.now();
try {
await trpc.lobby.info.query();
} catch {
/* 다음 표본으로 복구한다. */
} finally {
pending = false;
}
};
onMounted(() => {
void refresh();
timer = setInterval(() => {
void refresh();
}, 250);
});
onUnmounted(() => {
if (timer) clearInterval(timer);
});
};
app/game-frontend/src/stores/mainDashboard.ts
+2
View File
@@ -1,3 +1,4 @@
import { receiveClockEngineState } from '../composables/useClockDisplay';
import { computed, ref, toRaw, watch } from 'vue';
import { defineStore } from 'pinia';
import {
@@ -557,6 +558,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
const applyTurnEngineRunning = (turnEngineRunning: boolean | null | undefined) => {
if (turnEngineRunning === undefined || !lobbyInfo.value) return;
receiveClockEngineState(turnEngineRunning);
lobbyInfo.value = structurallyShare(lobbyInfo.value, {
...lobbyInfo.value,
turnEngineRunning,
app/game-frontend/src/utils/serverClockProjection.ts
+24
View File
@@ -10,6 +10,7 @@ export type ServerClockProjectionInput = {
export type SampledServerClock = {
serverTimeMs: number;
sampledClientTimeMs: number;
serverWallTimeMs?: number;
clockMode: 'realtime' | 'manual';
startDelayMs: number | null;
recoveryStartDelayMs?: number;
@@ -49,6 +50,7 @@ export const sampleServerClock = (
return {
serverTimeMs,
sampledClientTimeMs,
...(wallSample !== null ? { serverWallTimeMs: wallSample } : {}),
clockMode: input.clockMode ?? 'realtime',
startDelayMs,
...(wallSample !== null && recoveryStart !== null && recoveryEnd !== null && recoveryEnd > recoveryStart
@@ -93,3 +95,25 @@ export const millisecondsUntilNextMinute = (time: Date): number => {
const remainder = ((time.getTime() % 60_000) + 60_000) % 60_000;
return remainder === 0 ? 60_000 : 60_000 - remainder;
};
// 복구 종료 좌표를 기준으로 역산한다. 종료 이후의 턴에는 2배속을 적용하지 않는다.
export const projectRecoveryTime = (sample: SampledServerClock | null, gameTime: Date): Date => {
if (
!sample ||
sample.clockMode === 'manual' ||
sample.startDelayMs === null ||
sample.serverWallTimeMs === undefined ||
sample.recoveryStartDelayMs === undefined ||
sample.recoveryEndDelayMs === undefined
)
return gameTime;
const endDelay = sample.recoveryEndDelayMs;
const endGame = projectServerClock(sample, sample.sampledClientTimeMs + Math.max(0, endDelay)).time.getTime();
const endWall = sample.serverWallTimeMs + endDelay;
const span = endDelay - sample.recoveryStartDelayMs;
const startGame = endGame - 2 * span;
const target = gameTime.getTime();
// 이전 기록은 이 복구 창으로 실제 발생 시각을 알 수 없으므로 그대로 둔다.
if (target < startGame) return gameTime;
return new Date(Math.ceil(target <= endGame ? endWall - (endGame - target) / 2 : endWall + target - endGame));
};
app/game-frontend/src/utils/trpc.ts
+21
View File
@@ -1,5 +1,8 @@
import { trpcJsonBodyHttpClientOptions } from '@sammo-ts/common/http/trpcTransport';
import { REALTIME_ACCESS_GRANT_HEADER } from '@sammo-ts/common/realtime/types';
import { observable } from '@trpc/server/observable';
import { receiveClockSample } from '../composables/useClockDisplay';
import type { ServerClockProjectionInput } from './serverClockProjection';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '@sammo-ts/game-api';
import { gameFrontendRuntimeConfig } from '../config/runtimeConfig';
@@ -25,6 +28,24 @@ const getGameToken = (): string | null => {
export const trpc = createTRPCProxyClient<AppRouter>({
links: [
() =>
({ op, next }) =>
observable((observer) =>
next(op).subscribe({
next(value) {
if (op.path === 'lobby.info' && 'data' in value.result && value.result.data) {
receiveClockSample(
value.result.data as ServerClockProjectionInput & {
turnEngineRunning?: boolean | null;
}
);
}
observer.next(value);
},
error: (error) => observer.error(error),
complete: () => observer.complete(),
})
),
httpBatchLink({
url: gameFrontendRuntimeConfig.gameApiUrl,
...trpcJsonBodyHttpClientOptions,
app/game-frontend/src/views/AuctionView.vue
+5 -3
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
@@ -42,8 +44,8 @@ const resolveErrorMessage = (value: unknown): string => {
const formatNumber = (value: number | null | undefined): string => (value ?? 0).toLocaleString();
const displayCode = (value: string | null | undefined): string =>
!value || /^\d+$/u.test(value) ? '-' : value.replace(/^che_(?:event_)?/u, '');
const cutDateTime = (value: string | null | undefined, showSecond = false): string => {
return formatServerDateTime(value, {
const cutDateTime = (value: string | null | undefined, showSecond = false, gameTime = true): string => {
return (gameTime ? formatGameTime : formatServerDateTime)(value, {
format: showSecond ? 'monthDayTimeSeconds' : 'monthDayTime',
fallback: '-',
});
@@ -413,7 +415,7 @@ onMounted(() => {
<div v-for="bid in uniqueDetail.bids" :key="bid.id" class="bid-row">
<span :class="{ 'is-me': bid.isCaller }">{{ bid.bidderName }}</span>
<span class="tnum">{{ formatNumber(bid.amount) }}</span>
<time class="tnum">{{ cutDateTime(bid.eventAt) }}</time>
<time class="tnum">{{ cutDateTime(bid.eventAt, false, false) }}</time>
</div>
<template v-if="uniqueDetail.auction.status === 'OPEN'">
<h3 class="subsection-title bg1">입찰하기</h3>
app/game-frontend/src/views/BattleCenterView.vue
+3 -1
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
@@ -130,7 +132,7 @@ const selectedGeneral = computed(() => {
const formatGeneralLabel = (general: GeneralEntry): string => {
const name = general.officerLevel > 4 ? `*${general.name}*` : general.name;
const time = formatServerDateTime(general.turnTime, { format: 'hourMinute', fallback: '--:--' });
const time = formatGameTime(general.turnTime, { format: 'hourMinute', fallback: '--:--' });
if (orderBy.value === 'recentWar') {
return `${name} (${formatServerDateTime(general.recentWar, { format: 'hourMinute', fallback: '--:--' })})`;
}
app/game-frontend/src/views/BettingView.vue
+3 -2
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { storeToRefs } from 'pinia';
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
import TournamentBracket from '../components/tournament/TournamentBracket.vue';
@@ -53,7 +54,7 @@ const ratio = (id: number) => {
return amount ? (totalAmount.value / amount).toFixed(2) : '0';
};
const openingTime = computed(() =>
formatServerDateTime(snapshot.value?.state?.nextAt, { format: 'hourMinute', fallback: '--:--' })
formatGameTime(snapshot.value?.state?.nextAt, { format: 'hourMinute', fallback: '--:--' })
);
const selectedRatio = computed(() => {
const targetId = selectedTarget.value?.id;
app/game-frontend/src/views/ChiefCenterView.vue
+4 -3
View File
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { computed, onMounted, ref, watch } from 'vue';
import { useMediaQuery } from '@vueuse/core';
import { addMinutes } from 'date-fns';
import { useRouter } from 'vue-router';
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import SkeletonLines from '../components/ui/SkeletonLines.vue';
import ChiefTurnCard from '../components/chief/ChiefTurnCard.vue';
import ChiefCommandEditor from '../components/chief/ChiefCommandEditor.vue';
@@ -220,8 +221,8 @@ const buildTurnRows = (chief: ChiefEntry): TurnRow[] => {
baseTime && Number.isFinite(turnTermMinutes) ? addMinutes(baseTime, idx * turnTermMinutes) : null;
const timeLabel = turnDate
? turnTermMinutes >= 5
? formatServerDateTime(turnDate, { format: 'hourMinute' })
: formatServerDateTime(turnDate, { format: 'minuteSecond' })
? formatGameTime(turnDate, { format: 'hourMinute' })
: formatGameTime(turnDate, { format: 'minuteSecond' })
: '--:--';
const actionLabel =
formatReservedCommandBrief('nation', turn.action, turn.args, commandTable.value) ??
app/game-frontend/src/views/JoinView.vue
+2 -1
View File
@@ -10,7 +10,8 @@ import { sortGeneralsByTypeThenName } from '../utils/generalOrder';
import { useSessionStore } from '../stores/session';
import { cityLevelMap, formatOfficerLevelText, regionMap } from '../utils/nationFormat';
import { getNpcColor } from '../utils/npcColor';
import { formatSeoulDateTime } from '../utils/legacyDateTime';
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatSeoulDateTime } = useClockDisplay();
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
import { abilityLeadint, abilityLeadpow, abilityPowint, abilityRand, type GeneralStats } from '../utils/generalStats';
import { legacyLuminanceTextColor } from '../utils/legacyNationColor';
app/game-frontend/src/views/MyPageView.vue
+2 -1
View File
@@ -3,7 +3,8 @@ import { JosaUtil } from '@sammo-ts/common/util/JosaUtil';
import { computed, onMounted, reactive, ref } from 'vue';
import { trpc } from '../utils/trpc';
import { formatLog } from '../utils/formatLog';
import { formatSeoulDateTime } from '../utils/legacyDateTime';
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatSeoulDateTime } = useClockDisplay();
import { isDefenceTrainPenaltyWaivedByScenarioEffect } from '@sammo-ts/logic/scenario/scenarioEffect.js';
import { useSessionStore } from '../stores/session';
import GeneralInformationPanel from '../components/main/GeneralInformationPanel.vue';
app/game-frontend/src/views/MySettingsView.vue
+14
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { useClockDisplay } from '../composables/useClockDisplay';
const { mode: clockDisplayMode } = useClockDisplay();
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { trpc } from '../utils/trpc';
import { formatSeoulDateTime } from '../utils/legacyDateTime';
@@ -148,6 +150,18 @@ onBeforeUnmount(() => {
</div>
</div>
<div class="screen-mode-row">
<span
>가속 시 시간 표시 기준<br /><small
>이 기기에 저장하며, 2배속 중에는 시계를 눌러 바꿀 수 있습니다.</small
></span
>
<div class="button-group" role="radiogroup" aria-label="가속 시 시간 표시 기준">
<label><input v-model="clockDisplayMode" type="radio" value="game" />게임 시간 기준</label>
<label><input v-model="clockDisplayMode" type="radio" value="real" />실제 시간 기준</label>
</div>
</div>
<div class="mobile-layout-setting-row">
<span>
모바일 메인 레이아웃<br />
app/game-frontend/src/views/NationCitiesView.vue
+3 -2
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { JosaUtil } from '@sammo-ts/common/util/JosaUtil';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
@@ -700,7 +701,7 @@ onMounted(async () => {
</template>
</td>
<td>{{ general.killTurn }}</td>
<td>{{ formatServerDateTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
<td>{{ formatGameTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
</tr>
</tbody>
</table>
app/game-frontend/src/views/NationGeneralsView.vue
+3 -1
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
@@ -495,7 +497,7 @@ const cellValue = (general: General, columnId: NationGeneralColumnId): CellValue
case 'reservedCommand':
return commandText(general, false);
case 'turntime':
return formatServerDateTime(details(general).turnTime, { format: 'minuteSecond', fallback: '?' });
return formatGameTime(details(general).turnTime, { format: 'minuteSecond', fallback: '?' });
case 'recent_war':
return formatServerDateTime(details(general).recentWar, { format: 'minuteSecond', fallback: '-' });
case 'years_1':
app/game-frontend/src/views/NationSecretView.vue
+3 -2
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { computed, onMounted, ref } from 'vue';
import { formatReservedCommandBrief } from '../components/command/reservedCommandBrief';
import type { CommandTable } from '../components/command/types';
@@ -332,7 +333,7 @@ onMounted(load);
>
</td>
<td>{{ general.killTurn }}</td>
<td>{{ formatServerDateTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
<td>{{ formatGameTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
</tr>
</tbody>
</table>
app/game-frontend/src/views/SelectGeneralView.vue
+2 -1
View File
@@ -4,7 +4,8 @@ import { useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import { useSessionStore } from '../stores/session';
import { formatSeoulDateTime } from '../utils/legacyDateTime';
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatSeoulDateTime } = useClockDisplay();
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
import { legacyLuminanceTextColor } from '../utils/legacyNationColor';
import { trpc } from '../utils/trpc';
app/game-frontend/src/views/TournamentView.vue
+3 -2
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { storeToRefs } from 'pinia';
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
import TournamentBracket from '../components/tournament/TournamentBracket.vue';
@@ -55,7 +56,7 @@ const matchesAt = (stage: number) =>
.sort((a, b) => a.roundIndex - b.roundIndex);
const nameOf = (id?: number) => (id ? (participantsById.value.get(id)?.name ?? `#${id}`) : '-');
const openingTime = computed(() =>
formatServerDateTime(snapshot.value?.state?.nextAt, { format: 'hourMinute', fallback: '--:--' })
formatGameTime(snapshot.value?.state?.nextAt, { format: 'hourMinute', fallback: '--:--' })
);
const isParticipant = computed(() =>
(snapshot.value?.participants ?? []).some((participant) => participant.id === myGeneralId.value)
app/game-frontend/src/views/TroopView.vue
+3 -2
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { useClockDisplay } from '../composables/useClockDisplay';
const { formatTime: formatGameTime } = useClockDisplay();
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
@@ -170,7 +171,7 @@ const hideMemberPopup = () => {
const iconPath = (troop: Troop): string => resolveGeneralIconUrl(troop.leader ?? {});
const formatTurn = (turnTime: string | null): string => {
return formatServerDateTime(turnTime, { format: 'minuteSecond', fallback: '--:--' });
return formatGameTime(turnTime, { format: 'minuteSecond', fallback: '--:--' });
};
onMounted(() => {