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

merge: 최신 main을 인게임 작업 toast 변경에 통합한다

Browse Source
This commit is contained in:
Hide_D
2026-08-21 17:33:28 +00:00
parent 6b6a19b35e cc65aeb2c6
commit d37fc39b09
30 changed files with 931 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/components/directory/DirectoryTooltip.vue
-2
View File
@@ -29,8 +29,6 @@ defineProps<{
}
.directory-tooltip--enabled {
cursor: help;
text-decoration: underline dotted rgb(150 210 255 / 85%);
text-underline-offset: 2px;
}
.directory-tooltip--enabled:focus-visible {
border-radius: 2px;
app/game-frontend/src/components/main/CommandListPanel.vue
+18 -34
View File
@@ -3,6 +3,7 @@ import { computed, onUnmounted, ref, watch } from 'vue';
import { addMinutes } from 'date-fns';
import ReservedCommandEditor from '../command/ReservedCommandEditor.vue';
import { formatLocalDateTime, formatLocalTimeSeconds } from '../../utils/legacyDateTime';
import { projectServerClock, sampleServerClock, type SampledServerClock } from '../../utils/serverClockProjection';
import type {
CommandMapData,
CommandMapLayout,
@@ -15,7 +16,7 @@ const props = defineProps<{
commandTable: CommandTable | null;
loading: boolean;
reservedGeneralTurns: Array<{ index: number; action: string; args?: unknown }> | null;
general: { id: number; turnTime?: string } | null;
general: { id: number; turnTime?: string; nextTurnMonthOffset?: 0 | 1 } | null;
currentYear?: number;
currentMonth?: number;
turnTermMinutes?: number;
@@ -44,13 +45,19 @@ const labelMap = computed(() => {
return result;
});
const firstReservedMonth = computed(
() =>
(props.currentYear ?? 0) * 12 +
(props.currentMonth ?? 1) -
1 +
(props.general?.nextTurnMonthOffset ?? 0)
);
const rows = computed<ReservedCommandRow[]>(() => {
const base = props.general?.turnTime ? new Date(props.general.turnTime) : null;
const term = props.turnTermMinutes ?? 0;
const baseYear = props.currentYear ?? 0;
const baseMonth = props.currentMonth ?? 1;
return (props.reservedGeneralTurns ?? []).map((turn, offset) => {
const absoluteMonth = baseYear * 12 + baseMonth - 1 + offset;
const absoluteMonth = firstReservedMonth.value + offset;
const date = base && Number.isFinite(base.getTime()) ? addMinutes(base, offset * term) : null;
return {
...turn,
@@ -70,9 +77,7 @@ const rows = computed<ReservedCommandRow[]>(() => {
const autonomousUntil = computed(() => {
if (props.autorunLimit == null) return null;
const baseYear = props.currentYear ?? 0;
const baseMonth = props.currentMonth ?? 1;
const currentAbsoluteMonth = baseYear * 12 + baseMonth - 1;
const currentAbsoluteMonth = firstReservedMonth.value;
const lastAutonomousMonth = props.autorunLimit - 1;
if (lastAutonomousMonth < currentAbsoluteMonth) return null;
@@ -90,27 +95,20 @@ const autonomousUntil = computed(() => {
const currentServerTime = ref('--:--:--');
const MAX_SERVER_CLOCK_TIMER_DELAY_MS = 60_000;
let sampledServerTimeMs: number | null = null;
let sampledClientTimeMs = 0;
let sampledStartDelayMs: number | null = 0;
let serverClockSample: SampledServerClock | null = null;
let serverClockTimer: ReturnType<typeof setTimeout> | undefined;
const updateServerClock = () => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
serverClockTimer = undefined;
if (sampledServerTimeMs === null) {
if (serverClockSample === null) {
currentServerTime.value = '--:--:--';
return;
}
const clientElapsedMs = Math.max(0, Date.now() - sampledClientTimeMs);
const elapsedGameMs =
props.clockMode === 'manual' || sampledStartDelayMs === null
? 0
: Math.max(0, clientElapsedMs - sampledStartDelayMs);
const projectedTime = new Date(sampledServerTimeMs + elapsedGameMs);
const { clientElapsedMs, time: projectedTime } = projectServerClock(serverClockSample);
currentServerTime.value = formatLocalTimeSeconds(projectedTime);
if (props.clockMode !== 'manual' && sampledStartDelayMs !== null) {
const untilStartMs = sampledStartDelayMs - clientElapsedMs;
if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
const untilStartMs = serverClockSample.startDelayMs - clientElapsedMs;
serverClockTimer = setTimeout(
updateServerClock,
untilStartMs > 0
@@ -123,21 +121,7 @@ const updateServerClock = () => {
watch(
() => [props.serverTime, props.serverWallTime, props.clockMode, props.clockRunning, props.clockStartsAt] as const,
([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt]) => {
const parsed = serverTime ? new Date(serverTime).getTime() : Number.NaN;
sampledServerTimeMs = Number.isFinite(parsed) ? parsed : null;
sampledClientTimeMs = Date.now();
if (clockMode === 'manual') {
sampledStartDelayMs = null;
} else if (clockRunning !== false) {
sampledStartDelayMs = 0;
} else {
const wallTimeMs = serverWallTime ? new Date(serverWallTime).getTime() : Number.NaN;
const startsAtMs = clockStartsAt ? new Date(clockStartsAt).getTime() : Number.NaN;
sampledStartDelayMs =
Number.isFinite(wallTimeMs) && Number.isFinite(startsAtMs)
? Math.max(0, startsAtMs - wallTimeMs)
: null;
}
serverClockSample = sampleServerClock({ serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt });
updateServerClock();
},
{ immediate: true }
app/game-frontend/src/components/main/GeneralBattleSummary.vue
+8 -2
View File
@@ -7,6 +7,7 @@ export type GeneralBattleSummaryData = {
available?: boolean;
experience?: number | null;
dedicationText?: string | null;
bill?: number | null;
warnum?: number | null;
wins?: number | null;
losses?: number | null;
@@ -62,8 +63,13 @@ const killRate = computed(() => {
<template v-else>
<span>명성</span><strong>{{ numberText(summary.experience) }}</strong> <span>계급</span
><strong>{{ summary.dedicationText || '-' }}</strong>
<span class="battle-general-extra__empty" aria-hidden="true"></span>
<strong class="battle-general-extra__empty" aria-hidden="true"></strong>
<template v-if="summary.bill !== undefined">
<span>봉급</span><strong>{{ numberText(summary.bill) }}</strong>
</template>
<template v-else>
<span class="battle-general-extra__empty" aria-hidden="true"></span>
<strong class="battle-general-extra__empty" aria-hidden="true"></strong>
</template>
<span>전투</span
><strong>{{ numberText(summary.warnum) }}<template v-if="summary.warnum != null">회</template></strong>
<span>계략</span><strong>{{ numberText(summary.strategies) }}</strong>
app/game-frontend/src/components/main/MainFrontStatus.vue
+85 -6
View File
@@ -1,10 +1,26 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
import { computed } from 'vue';
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,
sampleServerClock,
type SampledServerClock,
} from '../../utils/serverClockProjection';
const props = defineProps<{
tournamentStage: number;
serverTime?: string;
serverWallTime?: string;
clockMode?: 'realtime' | 'manual';
clockRunning?: boolean;
clockStartsAt?: string | null;
status: {
onlineUserCount: number;
onlineNations: string;
@@ -20,16 +36,75 @@ const props = defineProps<{
}>();
const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
const lastExecutedStatus = computed(() =>
formatServerDateTime(props.status?.lastExecuted, { format: 'monthDayTime', fallback: '기록 없음' })
const currentServerTime = ref('기록 없음');
const hasServerClock = ref(false);
const serverClockFresh = ref(false);
const serverClockTitle = computed(() => {
if (!hasServerClock.value) return '서버 시각을 아직 받지 못했습니다.';
if (!serverClockFresh.value) return '최근 45초 동안 서버 통신이 없어 시각 갱신을 멈췄습니다.';
return undefined;
});
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;
serverClockFresh.value = false;
return;
}
const now = Date.now();
const projection = projectServerClock(serverClockSample, now);
currentServerTime.value = formatServerDateTime(projection.time, {
format: 'monthDayTime',
fallback: '기록 없음',
});
hasServerClock.value = true;
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];
if (serverClockSample.clockMode !== 'manual' && serverClockSample.startDelayMs !== null) {
const untilStartMs = serverClockSample.startDelayMs - projection.clientElapsedMs;
nextDelays.push(untilStartMs > 0 ? untilStartMs : millisecondsUntilNextMinute(projection.time));
}
serverClockTimer = setTimeout(updateServerClock, Math.max(1, Math.min(...nextDelays)));
};
watch(
() => [props.serverTime, props.serverWallTime, props.clockMode, props.clockRunning, props.clockStartsAt] as const,
([serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt]) => {
serverClockSample = sampleServerClock({ serverTime, serverWallTime, clockMode, clockRunning, clockStartsAt });
updateServerClock();
},
{ immediate: true }
);
watch(() => gameServerActivity.lastContactAt.value, updateServerClock);
onUnmounted(() => {
if (serverClockTimer !== undefined) clearTimeout(serverClockTimer);
});
</script>
<template>
<section class="front-status" aria-label="접속 현황과 국가 방침">
<div class="activity-status" aria-label="동작 시각, 토너먼트와 설문 진행 현황">
<div class="status-row execution-status" :class="{ 'execution-status--empty': !status?.lastExecuted }">
동작 시각: {{ lastExecutedStatus }}
<div class="activity-status" aria-label="현재 시각, 토너먼트와 설문 진행 현황">
<div
class="status-row execution-status"
:class="{
'execution-status--empty': !hasServerClock,
'execution-status--stale': hasServerClock && !serverClockFresh,
}"
:title="serverClockTitle"
>
현재 시각: {{ currentServerTime }}
</div>
<div class="status-row tournament-status">
<RouterLink to="/tournament">
@@ -120,6 +195,10 @@ const lastExecutedStatus = computed(() =>
color: magenta;
}
.execution-status--stale {
color: magenta;
}
.vote-label {
color: cyan;
}
app/game-frontend/src/components/main/NationBasicCard.vue
-1
View File
@@ -284,7 +284,6 @@ const displayChiefName = (chief: NationChief | undefined): string => {
.strategic.has-tooltip {
overflow: visible;
text-decoration: underline dashed red;
}
.cooldown-tooltip {
app/game-frontend/src/components/ui/LegacyHtmlEditor.vue
+178 -20
View File
@@ -1,16 +1,17 @@
<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from 'vue';
import { EditorContent, useEditor } from '@tiptap/vue-3';
import { BubbleMenu } from '@tiptap/vue-3/menus';
import StarterKit from '@tiptap/starter-kit';
import Image from '@tiptap/extension-image';
import TextAlign from '@tiptap/extension-text-align';
import { TextStyleKit } from '@tiptap/extension-text-style';
import { trpc } from '../../utils/trpc';
const props = withDefaults(
defineProps<{ modelValue: string; maxLength?: number; ariaLabel?: string }>(),
{ maxLength: 16384, ariaLabel: 'HTML 편집기' }
);
const props = withDefaults(defineProps<{ modelValue: string; maxLength?: number; ariaLabel?: string }>(), {
maxLength: 16384,
ariaLabel: 'HTML 편집기',
});
const emit = defineEmits<{ (event: 'update:modelValue', value: string): void }>();
const fontFamilies = [
@@ -24,11 +25,41 @@ const fileInput = ref<HTMLInputElement | null>(null);
const uploadBusy = ref(false);
const uploadError = ref<string | null>(null);
type Alignment = 'left' | 'center' | 'right';
type ImageAlignment = Alignment | 'float-left' | 'float-right';
const imageAlignmentControls: ReadonlyArray<{ value: ImageAlignment; label: string }> = [
{ value: 'float-left', label: '왼쪽 붙이기' },
{ value: 'left', label: '왼쪽 정렬' },
{ value: 'center', label: '가운데 정렬' },
{ value: 'right', label: '오른쪽 정렬' },
{ value: 'float-right', label: '오른쪽 붙이기' },
];
const AlignedImage = Image.extend({
addAttributes() {
return {
...this.parent?.(),
align: {
default: null,
parseHTML: (element) => {
for (const control of imageAlignmentControls) {
if (element.classList.contains(`custom-image-align-${control.value}`)) return control.value;
}
return null;
},
renderHTML: (attributes) =>
attributes.align ? { class: `custom-image-align-${String(attributes.align)}` } : {},
},
};
},
});
const editor = useEditor({
content: props.modelValue,
extensions: [
StarterKit.configure({ link: { openOnClick: false } }),
Image.configure({ inline: false, allowBase64: false }),
AlignedImage.configure({ inline: false, allowBase64: false }),
TextAlign.configure({ types: ['heading', 'paragraph'], alignments: ['left', 'center', 'right'] }),
TextStyleKit,
],
@@ -85,11 +116,30 @@ const setColor = (event: Event, kind: 'foreground' | 'background') => {
const clearColors = () => editor.value?.chain().focus().unsetColor().unsetBackgroundColor().run();
const setAlignment = (alignment: Alignment) => {
if (!editor.value) return;
if (editor.value.isActive('image')) {
editor.value.chain().focus().updateAttributes('image', { align: alignment }).run();
return;
}
editor.value.chain().focus().setTextAlign(alignment).run();
};
const isAlignmentActive = (alignment: Alignment) =>
editor.value?.isActive('image')
? editor.value.isActive('image', { align: alignment })
: editor.value?.isActive({ textAlign: alignment });
const setImageAlignment = (alignment: ImageAlignment) =>
editor.value?.chain().focus().updateAttributes('image', { align: alignment }).run();
const readFileAsDataUrl = (file: File) =>
new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = () =>
typeof reader.result === 'string' ? resolve(reader.result) : reject(new Error('이미지를 읽을 수 없습니다.'));
typeof reader.result === 'string'
? resolve(reader.result)
: reject(new Error('이미지를 읽을 수 없습니다.'));
reader.onerror = () => reject(new Error('이미지를 읽는 중 오류가 발생했습니다.'));
reader.readAsDataURL(file);
});
@@ -164,7 +214,12 @@ onBeforeUnmount(() => editor.value?.destroy());
<span class="legacy-html-editor__sr-only">글꼴</span>
<select aria-label="글꼴" @change="setFontFamily">
<option value="">글꼴</option>
<option v-for="font in fontFamilies" :key="font.value" :value="font.value" :style="{ fontFamily: font.value }">
<option
v-for="font in fontFamilies"
:key="font.value"
:value="font.value"
:style="{ fontFamily: font.value }"
>
{{ font.label }}
</option>
</select>
@@ -173,7 +228,9 @@ onBeforeUnmount(() => editor.value?.destroy());
<span class="legacy-html-editor__sr-only">크기</span>
<select aria-label="글꼴 크기" @change="setFontSize">
<option value="">크기</option>
<option v-for="size in fontSizes" :key="size" :value="size" :style="{ fontSize: size }">{{ size }}</option>
<option v-for="size in fontSizes" :key="size" :value="size" :style="{ fontSize: size }">
{{ size }}
</option>
</select>
</label>
<label class="legacy-html-editor__color" title="글자색">
@@ -226,30 +283,36 @@ onBeforeUnmount(() => editor.value?.destroy());
</button>
<button
type="button"
title="왼쪽 정렬"
title="왼쪽 정렬 (선택한 이미지에도 적용)"
aria-label="왼쪽 정렬"
:class="{ active: editor?.isActive({ textAlign: 'left' }) }"
@click="editor?.chain().focus().setTextAlign('left').run()"
:class="{ active: isAlignmentActive('left') }"
@click="setAlignment('left')"
>
≡
<svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
<path d="M1 1h14v2H1zM1 5h9v2H1zM1 9h14v2H1zM1 13h9v1H1z" />
</svg>
</button>
<button
type="button"
title="가운데 정렬"
title="가운데 정렬 (선택한 이미지에도 적용)"
aria-label="가운데 정렬"
:class="{ active: editor?.isActive({ textAlign: 'center' }) }"
@click="editor?.chain().focus().setTextAlign('center').run()"
:class="{ active: isAlignmentActive('center') }"
@click="setAlignment('center')"
>
≡
<svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
<path d="M1 1h14v2H1zM3.5 5h9v2h-9zM1 9h14v2H1zM3.5 13h9v1h-9z" />
</svg>
</button>
<button
type="button"
title="오른쪽 정렬"
title="오른쪽 정렬 (선택한 이미지에도 적용)"
aria-label="오른쪽 정렬"
:class="{ active: editor?.isActive({ textAlign: 'right' }) }"
@click="editor?.chain().focus().setTextAlign('right').run()"
:class="{ active: isAlignmentActive('right') }"
@click="setAlignment('right')"
>
≡
<svg class="legacy-html-editor__align-icon" viewBox="0 0 16 14" aria-hidden="true">
<path d="M1 1h14v2H1zM6 5h9v2H6zM1 9h14v2H1zM6 13h9v1H6z" />
</svg>
</button>
<button
type="button"
@@ -285,6 +348,21 @@ onBeforeUnmount(() => editor.value?.destroy());
Tx
</button>
</div>
<BubbleMenu v-if="editor" v-show="editor.isActive('image')" :editor="editor">
<div class="legacy-html-editor__image-toolbar" role="toolbar" aria-label="이미지 정렬">
<span>이미지 정렬</span>
<button
v-for="control in imageAlignmentControls"
:key="control.value"
type="button"
:class="{ active: editor.isActive('image', { align: control.value }) }"
:aria-label="`이미지 ${control.label}`"
@click="setImageAlignment(control.value)"
>
{{ control.label }}
</button>
</div>
</BubbleMenu>
<EditorContent :editor="editor" />
<p v-if="uploadError" class="legacy-html-editor__error" role="alert">{{ uploadError }}</p>
</div>
@@ -331,6 +409,44 @@ onBeforeUnmount(() => editor.value?.destroy());
.legacy-html-editor__toolbar button.active {
background: #555;
}
.legacy-html-editor__align-icon {
display: block;
width: 16px;
height: 14px;
fill: currentcolor;
}
.legacy-html-editor__image-toolbar {
display: flex;
align-items: center;
gap: 2px;
border: 1px solid #9dc8f0;
padding: 3px;
background: #303030;
color: #fff;
box-shadow: 0 2px 6px rgb(0 0 0 / 45%);
}
.legacy-html-editor__image-toolbar span {
padding: 0 4px;
font-size: 12px;
}
.legacy-html-editor__image-toolbar button {
border: 1px solid transparent;
border-radius: 0;
padding: 3px 6px;
background: #303030;
color: inherit;
cursor: pointer;
font: inherit;
}
.legacy-html-editor__image-toolbar button:hover,
.legacy-html-editor__image-toolbar button:focus-visible {
border-color: #9dc8f0;
outline: 1px solid #9dc8f0;
background: #444;
}
.legacy-html-editor__image-toolbar button.active {
background: #555;
}
.legacy-html-editor__select,
.legacy-html-editor__color {
display: inline-flex;
@@ -402,4 +518,46 @@ button[aria-label='오른쪽 정렬'] {
:deep(.legacy-html-editor__content p) {
margin: 0 0 0.4em;
}
:deep(.legacy-html-editor__content ol),
:deep(.legacy-html-editor__content ul) {
margin: 0 0 0.4em;
padding-left: 2em;
list-style-position: outside;
}
:deep(.legacy-html-editor__content ol) {
list-style-type: decimal;
}
:deep(.legacy-html-editor__content ul) {
list-style-type: disc;
}
:deep(.legacy-html-editor__content li > p) {
margin: 0;
}
:deep(.legacy-html-editor__content img.ProseMirror-selectednode) {
outline: 2px solid #9dc8f0;
}
:deep(.legacy-html-editor__content img) {
max-width: 100%;
}
:deep(.legacy-html-editor__content img.custom-image-align-left) {
display: block;
margin-right: auto;
margin-left: 0;
}
:deep(.legacy-html-editor__content img.custom-image-align-center) {
display: block;
margin-right: auto;
margin-left: auto;
}
:deep(.legacy-html-editor__content img.custom-image-align-right) {
display: block;
margin-right: 0;
margin-left: auto;
}
:deep(.legacy-html-editor__content img.custom-image-align-float-left) {
float: left;
}
:deep(.legacy-html-editor__content img.custom-image-align-float-right) {
float: right;
}
</style>
app/game-frontend/src/components/ui/RichTooltip.vue
-2
View File
@@ -97,8 +97,6 @@ watch(
.rich-tooltip-trigger--enabled {
cursor: help;
text-decoration: underline dotted rgb(150 210 255 / 85%);
text-underline-offset: 2px;
}
.rich-tooltip-trigger--enabled:focus-visible {
app/game-frontend/src/stores/mainDashboard.ts
+9
View File
@@ -21,6 +21,7 @@ import {
import { createBroadcastTabCoordinator, type BroadcastTabCoordinator } from '../utils/broadcastTabCoordinator';
import { resolveWithReadModelSnapshotFallback } from '../utils/readModelDeltaRecovery';
import { createRealtimeRequestOptions } from '../utils/realtimeAccessGrant';
import { markGameServerContact } from '../utils/gameServerActivity';
const REALTIME_FULL_REFRESH_MIN_INTERVAL_MS = 5_000;
@@ -1097,10 +1098,12 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
onPayload: (message) => {
if (!isRealtimeParticipant()) return;
if (message.kind === 'patch') {
markGameServerContact();
applyDashboardPatch(message.patch);
return;
}
realtimeStatus.value = message.status;
if (message.status === 'connected') markGameServerContact();
},
});
realtimeCoordinator.start();
@@ -1153,6 +1156,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
realtimeSource = source;
source.addEventListener('open', () => {
markGameServerContact();
realtimeStatus.value = 'connected';
realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
});
@@ -1166,6 +1170,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
if (!payload || payload.type !== 'readModelInvalidated') {
return;
}
markGameServerContact();
readModelRefreshQueue.request(payload.invalidation, payload.refreshGrant);
});
source.addEventListener('messagesInvalidated', (event) => {
@@ -1174,6 +1179,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
if (!payload || payload.type !== 'messagesInvalidated') {
return;
}
markGameServerContact();
void refreshMessages(payload.refreshGrant);
});
@@ -1182,14 +1188,17 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
for (const legacyEventType of ['turnCompleted', 'readModelChanged'] as const) {
source.addEventListener(legacyEventType, () => {
if (realtimeCoordinator !== null && !realtimeCoordinator.isLeader()) return;
markGameServerContact();
realtimeRefreshQueue.request();
});
}
source.addEventListener('messageCreated', () => {
if (realtimeCoordinator !== null && !realtimeCoordinator.isLeader()) return;
markGameServerContact();
void refreshMessages();
});
source.addEventListener('ping', () => {
markGameServerContact();
if (realtimeEnabled.value) {
realtimeStatus.value = 'connected';
realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
app/game-frontend/src/utils/gameServerActivity.ts
+34
View File
@@ -0,0 +1,34 @@
import { readonly, ref, type Ref } from 'vue';
export const GAME_SERVER_ACTIVITY_FRESHNESS_MS = 45_000;
export type GameServerActivityTracker = {
lastContactAt: Readonly<Ref<number | null>>;
markContact: (contactAt?: number) => void;
};
export const createGameServerActivityTracker = (): GameServerActivityTracker => {
const lastContactAt = ref<number | null>(null);
return {
lastContactAt: readonly(lastContactAt),
markContact(contactAt = Date.now()) {
if (!Number.isFinite(contactAt)) return;
lastContactAt.value = contactAt;
},
};
};
export const isRecentGameServerActivity = (
lastContactAt: number | null,
now = Date.now(),
freshnessMs = GAME_SERVER_ACTIVITY_FRESHNESS_MS
): boolean =>
lastContactAt !== null &&
Number.isFinite(lastContactAt) &&
Number.isFinite(now) &&
Math.max(0, now - lastContactAt) <= freshnessMs;
export const gameServerActivity = createGameServerActivityTracker();
export const markGameServerContact = (contactAt = Date.now()) => gameServerActivity.markContact(contactAt);
app/game-frontend/src/utils/serverClockProjection.ts
+67
View File
@@ -0,0 +1,67 @@
export type ServerClockProjectionInput = {
serverTime?: string;
serverWallTime?: string;
clockMode?: 'realtime' | 'manual';
clockRunning?: boolean;
clockStartsAt?: string | null;
};
export type SampledServerClock = {
serverTimeMs: number;
sampledClientTimeMs: number;
clockMode: 'realtime' | 'manual';
startDelayMs: number | null;
};
const parseInstant = (value?: string | null): number | null => {
if (!value) return null;
const parsed = new Date(value).getTime();
return Number.isFinite(parsed) ? parsed : null;
};
export const sampleServerClock = (
input: ServerClockProjectionInput,
sampledClientTimeMs = Date.now()
): SampledServerClock | null => {
const serverTimeMs = parseInstant(input.serverTime);
if (serverTimeMs === null) return null;
let startDelayMs: number | null;
if (input.clockMode === 'manual') {
startDelayMs = null;
} else if (input.clockRunning !== false) {
startDelayMs = 0;
} else {
const serverWallTimeMs = parseInstant(input.serverWallTime);
const clockStartsAtMs = parseInstant(input.clockStartsAt);
startDelayMs =
serverWallTimeMs !== null && clockStartsAtMs !== null
? Math.max(0, clockStartsAtMs - serverWallTimeMs)
: null;
}
return {
serverTimeMs,
sampledClientTimeMs,
clockMode: input.clockMode ?? 'realtime',
startDelayMs,
};
};
export const projectServerClock = (sample: SampledServerClock, clientTimeMs = Date.now()) => {
const clientElapsedMs = Math.max(0, clientTimeMs - sample.sampledClientTimeMs);
const elapsedGameMs =
sample.clockMode === 'manual' || sample.startDelayMs === null
? 0
: Math.max(0, clientElapsedMs - sample.startDelayMs);
return {
clientElapsedMs,
time: new Date(sample.serverTimeMs + elapsedGameMs),
};
};
export const millisecondsUntilNextMinute = (time: Date): number => {
const remainder = ((time.getTime() % 60_000) + 60_000) % 60_000;
return remainder === 0 ? 60_000 : 60_000 - remainder;
};
app/game-frontend/src/utils/trpc.ts
+6
View File
@@ -3,6 +3,7 @@ import { REALTIME_ACCESS_GRANT_HEADER } from '@sammo-ts/common/realtime/types';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '@sammo-ts/game-api';
import { resolveBatchRealtimeAccessGrant } from './realtimeAccessGrant';
import { markGameServerContact } from './gameServerActivity';
const getGameToken = (): string | null => {
if (typeof window === 'undefined') {
@@ -17,6 +18,11 @@ export const trpc = createTRPCProxyClient<AppRouter>({
httpBatchLink({
url: import.meta.env.VITE_GAME_API_URL ?? '/api/trpc',
...trpcJsonBodyHttpClientOptions,
async fetch(input, init) {
const result = await globalThis.fetch(input, init);
markGameServerContact();
return result;
},
headers({ opList }) {
const token = getGameToken();
const refreshGrant = resolveBatchRealtimeAccessGrant(opList);
app/game-frontend/src/views/BattleCenterView.vue
+1
View File
@@ -291,6 +291,7 @@ onMounted(() => {
available: true,
experience: selectedGeneral.experience,
dedicationText: selectedGeneral.progression.dedicationText,
bill: selectedGeneral.bill,
warnum: selectedGeneral.warnum,
wins: selectedGeneral.battleStats.kills,
losses: selectedGeneral.battleStats.deaths,
app/game-frontend/src/views/JoinView.vue
-1
View File
@@ -1733,7 +1733,6 @@ onUnmounted(() => {
.npc-tooltip {
position: relative;
cursor: help;
text-decoration: underline dotted;
}
.npc-tooltip [role='tooltip'] {
app/game-frontend/src/views/MainView.vue
+9 -1
View File
@@ -243,7 +243,15 @@ watch(
</div>
<div data-main-target="policy">
<MainFrontStatus :status="frontStatus" :tournament-stage="tournamentStage" />
<MainFrontStatus
:status="frontStatus"
:tournament-stage="tournamentStage"
:server-time="lobbyInfo?.serverTime"
:server-wall-time="lobbyInfo?.serverWallTime"
:clock-mode="lobbyInfo?.clockMode"
:clock-running="lobbyInfo?.clockRunning"
:clock-starts-at="lobbyInfo?.clockStartsAt"
/>
</div>
<aside v-if="surveyNotice" class="survey-notice" role="status" aria-live="polite">
app/game-frontend/src/views/MyPageView.vue
+1
View File
@@ -421,6 +421,7 @@ onMounted(() => {
available: true,
experience: data.general.experience,
dedicationText: data.general.progression?.dedicationText,
bill: data.general.bill,
warnum: data.general.records.battles,
wins: data.general.records.wins,
losses: data.general.records.losses,
app/game-frontend/src/views/NationStratFinanView.vue
+46 -1
View File
@@ -283,7 +283,13 @@ onMounted(() => void loadStratFinan());
</header>
<div class="scout-limit">870px x 200px를 넘어서는 내용은 표시되지 않습니다.</div>
<div v-if="!editingScoutMsg" class="message-preview scout-preview" v-html="scoutMsg || '내용 없음'" />
<LegacyHtmlEditor v-else v-model="scoutMsgDraft" :max-length="1000" aria-label="임관 권유" />
<LegacyHtmlEditor
v-else
v-model="scoutMsgDraft"
class="scout-editor"
:max-length="1000"
aria-label="임관 권유"
/>
</section>
<div class="finance-title">예산&amp;정책</div>
@@ -549,6 +555,45 @@ textarea {
margin-left: auto;
overflow: hidden;
}
.message-preview :deep(ol),
.message-preview :deep(ul) {
margin: 0 0 0.4em;
padding-left: 2em;
list-style-position: outside;
}
.message-preview :deep(ol) {
list-style-type: decimal;
}
.message-preview :deep(ul) {
list-style-type: disc;
}
.message-preview :deep(li > p) {
margin: 0;
}
.message-preview :deep(img) {
max-width: 100%;
}
.message-preview :deep(img.custom-image-align-left) {
display: block;
margin-right: auto;
margin-left: 0;
}
.message-preview :deep(img.custom-image-align-center) {
display: block;
margin-right: auto;
margin-left: auto;
}
.message-preview :deep(img.custom-image-align-right) {
display: block;
margin-right: 0;
margin-left: auto;
}
.message-preview :deep(img.custom-image-align-float-left) {
float: left;
}
.message-preview :deep(img.custom-image-align-float-right) {
float: right;
}
.finance-grid {
display: flex;
flex-wrap: wrap;