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/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;
}