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

feat: Refactor command selection and message handling components; add main dashboard store

Browse Source
This commit is contained in:
Hide_D
2026-01-16 16:33:44 +00:00
parent 5f664ddafc
commit 4f44e76ef1
6 changed files with 791 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/components/main/CommandListPanel.vue
+24 -63
View File
@@ -1,10 +1,13 @@
<script setup lang="ts">
import { computed } from 'vue';
import SkeletonLines from '../ui/SkeletonLines.vue';
import { ref } from 'vue';
import CommandSelectForm from './CommandSelectForm.vue';
interface TurnCommandAvailability {
key: string;
name: string;
status: string;
status: 'available' | 'blocked' | 'needsInput' | 'unknown';
possible: boolean;
reason?: string;
}
interface TurnCommandGroup {
@@ -22,81 +25,39 @@ const props = defineProps<{
loading: boolean;
}>();
const generalGroups = computed(() => props.commandTable?.general ?? []);
const nationGroups = computed(() => props.commandTable?.nation ?? []);
const activeCategory = ref('');
const takePreview = (group: TurnCommandGroup): TurnCommandAvailability[] => group.values.slice(0, 6);
const handleSelect = (commandKey: string) => {
void commandKey;
};
</script>
<template>
<div class="command-list">
<div v-if="props.loading">
<SkeletonLines :lines="5" />
</div>
<div v-else-if="!props.commandTable" class="empty">
명령 목록을 불러오지 못했습니다.
</div>
<div v-else class="command-body">
<div class="group" v-for="group in generalGroups" :key="`g-${group.category}`">
<div class="group-title">{{ group.category }}</div>
<div class="commands">
<span v-for="command in takePreview(group)" :key="command.name" class="command">
{{ command.name }}
</span>
</div>
</div>
<div v-if="nationGroups.length" class="divider">국가 명령</div>
<div class="group" v-for="group in nationGroups" :key="`n-${group.category}`">
<div class="group-title">{{ group.category }}</div>
<div class="commands">
<span v-for="command in takePreview(group)" :key="command.name" class="command">
{{ command.name }}
</span>
</div>
</div>
<div class="command-panel">
<CommandSelectForm
:command-table="props.commandTable"
:loading="props.loading"
:active-category="activeCategory"
@update:active-category="activeCategory = $event"
@select="handleSelect"
/>
<div class="command-placeholder">
선택한 명령의 상세/예약 UI는 추후 이식 예정
</div>
</div>
</template>
<style scoped>
.command-list {
.command-panel {
display: flex;
flex-direction: column;
gap: 12px;
}
.group {
display: flex;
flex-direction: column;
gap: 6px;
}
.group-title {
font-size: 0.85rem;
color: rgba(232, 221, 196, 0.75);
}
.commands {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.command {
padding: 2px 6px;
border: 1px solid rgba(201, 164, 90, 0.35);
.command-placeholder {
border: 1px dashed rgba(201, 164, 90, 0.3);
padding: 8px;
font-size: 0.75rem;
}
.divider {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(201, 164, 90, 0.3);
font-size: 0.8rem;
color: rgba(232, 221, 196, 0.7);
}
.empty {
color: rgba(232, 221, 196, 0.6);
}
</style>
app/game-frontend/src/components/main/CommandSelectForm.vue
+208
View File
@@ -0,0 +1,208 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import SkeletonLines from '../ui/SkeletonLines.vue';
type CommandAvailability = {
key: string;
name: string;
status: 'available' | 'blocked' | 'needsInput' | 'unknown';
possible: boolean;
reason?: string;
};
type CommandGroup = {
category: string;
values: CommandAvailability[];
};
type CommandTable = {
general: CommandGroup[];
nation: CommandGroup[];
};
const props = defineProps<{
commandTable: CommandTable | null;
loading: boolean;
activeCategory?: string;
}>();
const emit = defineEmits<{
(event: 'select', commandKey: string): void;
(event: 'update:activeCategory', category: string): void;
}>();
const categories = computed(() => {
if (!props.commandTable) {
return [] as Array<{ label: string; category: string; groupType: 'general' | 'nation' }>;
}
const general = props.commandTable.general.map((group) => ({
label: group.category,
category: group.category,
groupType: 'general' as const,
}));
const nation = props.commandTable.nation.map((group) => ({
label: `국가:${group.category}`,
category: group.category,
groupType: 'nation' as const,
}));
return [...general, ...nation];
});
const selectedCategory = ref('');
const selectedGroup = computed(() => {
if (!props.commandTable) {
return null;
}
const base = props.commandTable.general.find((group) => group.category === selectedCategory.value);
if (base) {
return base;
}
return props.commandTable.nation.find((group) => group.category === selectedCategory.value) ?? null;
});
watch(
() => props.activeCategory,
(value) => {
if (value) {
selectedCategory.value = value;
}
}
);
watch(
categories,
(list) => {
if (!list.length) {
selectedCategory.value = '';
return;
}
if (!list.some((item) => item.category === selectedCategory.value)) {
selectedCategory.value = list[0].category;
}
},
{ immediate: true }
);
watch(selectedCategory, (value) => {
if (value) {
emit('update:activeCategory', value);
}
});
const statusLabel = (command: CommandAvailability) => {
if (command.status === 'available') {
return '가능';
}
if (command.status === 'needsInput') {
return '입력 필요';
}
if (command.status === 'blocked') {
return '불가';
}
return '확인 필요';
};
</script>
<template>
<div class="command-form">
<div v-if="props.loading">
<SkeletonLines :lines="4" />
</div>
<div v-else-if="!props.commandTable" class="empty">
명령 목록을 불러오지 못했습니다.
</div>
<div v-else>
<div class="category-list">
<button
v-for="category in categories"
:key="category.label"
:class="['category-btn', { active: selectedCategory === category.category }]"
@click="selectedCategory = category.category"
>
{{ category.label }}
</button>
</div>
<div v-if="!selectedGroup" class="empty">명령이 없습니다.</div>
<div v-else class="command-grid">
<button
v-for="command in selectedGroup.values"
:key="command.key"
:class="[
'command-item',
command.status === 'available' ? 'ok' : '',
command.status === 'blocked' ? 'blocked' : '',
]"
:disabled="!command.possible"
@click="emit('select', command.key)"
>
<span class="command-name">{{ command.name }}</span>
<span class="command-status">{{ statusLabel(command) }}</span>
</button>
</div>
</div>
</div>
</template>
<style scoped>
.command-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.category-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 6px;
}
.category-btn {
border: 1px solid rgba(201, 164, 90, 0.4);
padding: 6px 8px;
font-size: 0.75rem;
cursor: pointer;
}
.category-btn.active {
background: rgba(201, 164, 90, 0.2);
}
.command-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 6px;
}
.command-item {
border: 1px solid rgba(201, 164, 90, 0.3);
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
font-size: 0.75rem;
cursor: pointer;
}
.command-item.ok {
border-color: rgba(201, 164, 90, 0.6);
}
.command-item.blocked {
opacity: 0.5;
cursor: not-allowed;
}
.command-name {
font-weight: 600;
}
.command-status {
font-size: 0.7rem;
color: rgba(232, 221, 196, 0.6);
}
.empty {
color: rgba(232, 221, 196, 0.6);
}
</style>
app/game-frontend/src/components/main/MapViewer.vue
+163 -16
View File
@@ -1,21 +1,77 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import SkeletonLines from '../ui/SkeletonLines.vue';
interface MapSummary {
year: number;
month: number;
cityList: unknown[];
nationList: unknown[];
cityList: [number, number, number, number, number, number][];
nationList: [number, string, string, number][];
myCity?: number | null;
myNation?: number | null;
}
const props = defineProps<{
mapData: MapSummary | null;
loading: boolean;
}>();
const showCityName = ref(true);
const detailMode = ref(false);
const nationById = computed(() => {
const map = new Map<number, { name: string; color: string }>();
if (!props.mapData) {
return map;
}
for (const nation of props.mapData.nationList) {
const [id, name, color] = nation;
map.set(id, { name, color });
}
return map;
});
const cityEntries = computed(() => {
if (!props.mapData) {
return [];
}
return props.mapData.cityList.map((entry) => {
const [id, level, state, nationId, region, supplyFlag] = entry;
const nation = nationById.value.get(nationId);
return {
id,
level,
state,
nationId,
region,
supply: supplyFlag > 0,
nationName: nation?.name ?? '무주',
color: nation?.color ?? '#444444',
};
});
});
const mapSummary = computed(() => {
if (!props.mapData) {
return '';
}
return `${props.mapData.year}년 ${props.mapData.month}월`;
});
</script>
<template>
<div class="map-viewer">
<div class="map-top">
<div class="map-title">{{ mapSummary }}</div>
<div class="map-controls">
<button class="map-toggle" :class="{ active: showCityName }" @click="showCityName = !showCityName">
도시명
</button>
<button class="map-toggle" :class="{ active: detailMode }" @click="detailMode = !detailMode">
상세
</button>
</div>
</div>
<div v-if="props.loading">
<SkeletonLines :lines="4" />
</div>
@@ -23,12 +79,27 @@ const props = defineProps<{
지도 데이터를 불러오지 못했습니다.
</div>
<div v-else class="map-body">
<div class="map-meta">
<span>연월: {{ props.mapData.year }}년 {{ props.mapData.month }}월</span>
<span>도시 {{ props.mapData.cityList.length }}</span>
<span>세력 {{ props.mapData.nationList.length }}</span>
<div class="map-placeholder">
<div class="map-placeholder-text">레거시 지도 렌더러 이식 대기</div>
<div class="map-meta">
<span>도시 {{ props.mapData.cityList.length }}</span>
<span>세력 {{ props.mapData.nationList.length }}</span>
</div>
</div>
<div class="city-list">
<div
v-for="city in cityEntries.slice(0, detailMode ? 20 : 10)"
:key="city.id"
class="city-row"
:class="{ mine: props.mapData.myCity === city.id }"
>
<span class="nation" :style="{ backgroundColor: city.color }" />
<span class="name">{{ showCityName ? `도시 ${city.id}` : `#${city.id}` }}</span>
<span class="meta">Lv {{ city.level }} · 지역 {{ city.region }}</span>
<span class="state">보급 {{ city.supply ? 'O' : 'X' }}</span>
</div>
<div v-if="cityEntries.length === 0" class="city-empty">표시할 도시가 없습니다.</div>
</div>
<div class="map-placeholder">지도 뷰어는 추후 이식 예정</div>
</div>
</div>
</template>
@@ -37,25 +108,101 @@ const props = defineProps<{
.map-viewer {
display: flex;
flex-direction: column;
gap: 8px;
gap: 12px;
}
.map-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.map-title {
font-size: 0.95rem;
font-weight: 600;
}
.map-controls {
display: flex;
gap: 6px;
}
.map-toggle {
border: 1px solid rgba(201, 164, 90, 0.4);
padding: 4px 8px;
font-size: 0.75rem;
cursor: pointer;
}
.map-toggle.active {
background: rgba(201, 164, 90, 0.2);
}
.map-body {
display: grid;
gap: 12px;
}
.map-placeholder {
border: 1px dashed rgba(201, 164, 90, 0.4);
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(16, 16, 16, 0.6);
}
.map-placeholder-text {
font-size: 0.85rem;
color: rgba(232, 221, 196, 0.8);
}
.map-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 0.8rem;
color: rgba(232, 221, 196, 0.8);
font-size: 0.75rem;
color: rgba(232, 221, 196, 0.6);
}
.map-placeholder {
height: 240px;
border: 1px dashed rgba(201, 164, 90, 0.4);
.city-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.city-row {
display: grid;
grid-template-columns: 14px 1fr auto auto;
gap: 8px;
align-items: center;
justify-content: center;
padding: 4px 6px;
border: 1px solid rgba(201, 164, 90, 0.2);
font-size: 0.75rem;
}
.city-row.mine {
background: rgba(201, 164, 90, 0.15);
}
.city-row .nation {
width: 12px;
height: 12px;
border: 1px solid rgba(232, 221, 196, 0.6);
}
.city-row .name {
color: rgba(232, 221, 196, 0.9);
}
.city-row .meta,
.city-row .state {
color: rgba(232, 221, 196, 0.6);
}
.city-empty {
font-size: 0.8rem;
color: rgba(232, 221, 196, 0.6);
background: rgba(16, 16, 16, 0.6);
}
.map-empty {
app/game-frontend/src/components/main/MessagePanel.vue
+137 -57
View File
@@ -1,10 +1,13 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import SkeletonLines from '../ui/SkeletonLines.vue';
import type { MessageType } from '@sammo-ts/logic';
interface MessageEntry {
id: number;
text: string;
time: string;
msgType: MessageType;
}
interface MessageBucket {
@@ -17,59 +20,96 @@ interface MessageBucket {
const props = defineProps<{
messages: MessageBucket | null;
loading: boolean;
targetMailbox: number;
draftText: string;
mailboxOptions: Array<{ label: string; value: number; disabled?: boolean }>;
}>();
const preview = (items: MessageEntry[]): MessageEntry | null => (items.length ? items[0] : null);
const emit = defineEmits<{
(event: 'update:targetMailbox', value: number): void;
(event: 'update:draftText', value: string): void;
(event: 'send'): void;
(event: 'refresh'): void;
(event: 'load-older', type: MessageType): void;
}>();
const trimText = (value: string): string => {
const clean = value.replace(/\s+/g, ' ').trim();
if (clean.length <= 60) {
return clean;
const messageTabs: Array<{ key: MessageType; label: string }> = [
{ key: 'public', label: '전체' },
{ key: 'national', label: '국가' },
{ key: 'private', label: '개인' },
{ key: 'diplomacy', label: '외교' },
];
const activeTab = ref<MessageType>('public');
const activeMessages = computed(() => {
if (!props.messages) {
return [] as MessageEntry[];
}
return `${clean.slice(0, 60)}...`;
return props.messages[activeTab.value] ?? [];
});
const setMailbox = (value: string) => {
const parsed = Number(value);
emit('update:targetMailbox', Number.isFinite(parsed) ? parsed : 0);
};
</script>
<template>
<div class="message-panel">
<div class="message-input">
<select
class="message-select"
:value="targetMailbox"
@change="setMailbox(($event.target as HTMLSelectElement).value)"
>
<option
v-for="option in mailboxOptions"
:key="option.label"
:value="option.value"
:disabled="option.disabled"
>
{{ option.label }}
</option>
</select>
<input
class="message-text"
type="text"
maxlength="99"
:value="draftText"
placeholder="메시지 입력"
@input="emit('update:draftText', ($event.target as HTMLInputElement).value)"
@keydown.enter="emit('send')"
/>
<button class="message-send" @click="emit('send')">전송</button>
</div>
<div class="message-tabs">
<button
v-for="tab in messageTabs"
:key="tab.key"
:class="{ active: activeTab === tab.key }"
@click="activeTab = tab.key"
>
{{ tab.label }}
</button>
<button class="refresh" @click="emit('refresh')">갱신</button>
</div>
<div v-if="props.loading">
<SkeletonLines :lines="5" />
<SkeletonLines :lines="4" />
</div>
<div v-else-if="!props.messages" class="empty">
메시지를 불러오지 못했습니다.
</div>
<div v-else class="message-body">
<div class="bucket">
<div class="bucket-title">개인</div>
<div class="bucket-item" v-if="preview(props.messages.private)">
<div class="text">{{ trimText(preview(props.messages.private)?.text ?? '') }}</div>
<div class="time">{{ preview(props.messages.private)?.time }}</div>
<div v-else class="message-list">
<div v-if="activeMessages.length === 0" class="empty">메시지가 없습니다.</div>
<div v-else>
<div v-for="message in activeMessages" :key="message.id" class="message-item">
<div class="text">{{ message.text }}</div>
<div class="time">{{ message.time }}</div>
</div>
<div v-else class="bucket-empty">메시지 없음</div>
</div>
<div class="bucket">
<div class="bucket-title">공공</div>
<div class="bucket-item" v-if="preview(props.messages.public)">
<div class="text">{{ trimText(preview(props.messages.public)?.text ?? '') }}</div>
<div class="time">{{ preview(props.messages.public)?.time }}</div>
</div>
<div v-else class="bucket-empty">메시지 없음</div>
</div>
<div class="bucket">
<div class="bucket-title">국가</div>
<div class="bucket-item" v-if="preview(props.messages.national)">
<div class="text">{{ trimText(preview(props.messages.national)?.text ?? '') }}</div>
<div class="time">{{ preview(props.messages.national)?.time }}</div>
</div>
<div v-else class="bucket-empty">메시지 없음</div>
</div>
<div class="bucket">
<div class="bucket-title">외교</div>
<div class="bucket-item" v-if="preview(props.messages.diplomacy)">
<div class="text">{{ trimText(preview(props.messages.diplomacy)?.text ?? '') }}</div>
<div class="time">{{ preview(props.messages.diplomacy)?.time }}</div>
</div>
<div v-else class="bucket-empty">메시지 없음</div>
<button class="load-older" @click="emit('load-older', activeTab)">이전 메시지</button>
</div>
</div>
</div>
@@ -82,32 +122,72 @@ const trimText = (value: string): string => {
gap: 12px;
}
.bucket {
.message-input {
display: grid;
grid-template-columns: minmax(90px, 120px) 1fr auto;
gap: 6px;
}
.message-select,
.message-text {
background: rgba(16, 16, 16, 0.8);
border: 1px solid rgba(201, 164, 90, 0.4);
color: inherit;
padding: 6px;
font-size: 0.75rem;
}
.message-send {
border: 1px solid rgba(201, 164, 90, 0.4);
padding: 6px 10px;
font-size: 0.75rem;
cursor: pointer;
}
.message-tabs {
display: flex;
flex-direction: column;
gap: 4px;
flex-wrap: wrap;
gap: 6px;
}
.bucket-title {
font-size: 0.8rem;
color: rgba(232, 221, 196, 0.7);
}
.bucket-item {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 0.85rem;
}
.bucket-item .time {
.message-tabs button {
border: 1px solid rgba(201, 164, 90, 0.4);
padding: 4px 8px;
font-size: 0.7rem;
cursor: pointer;
}
.message-tabs button.active {
background: rgba(201, 164, 90, 0.2);
}
.message-tabs .refresh {
margin-left: auto;
}
.message-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.message-item {
border: 1px solid rgba(201, 164, 90, 0.2);
padding: 6px;
font-size: 0.75rem;
}
.message-item .time {
margin-top: 4px;
font-size: 0.65rem;
color: rgba(232, 221, 196, 0.6);
}
.bucket-empty {
font-size: 0.8rem;
color: rgba(232, 221, 196, 0.5);
.load-older {
border: 1px dashed rgba(201, 164, 90, 0.3);
padding: 6px;
font-size: 0.7rem;
cursor: pointer;
}
.empty {
app/game-frontend/src/stores/mainDashboard.ts
+202
View File
@@ -0,0 +1,202 @@
import { computed, ref } from 'vue';
import { defineStore } from 'pinia';
import { MESSAGE_MAILBOX_NATIONAL_BASE, MESSAGE_MAILBOX_PUBLIC, type MessageType } from '@sammo-ts/logic';
import { trpc } from '../utils/trpc';
const resolveErrorMessage = (value: unknown): string => {
if (value instanceof Error) {
return value.message;
}
if (typeof value === 'string') {
return value;
}
return 'unknown_error';
};
export const useMainDashboardStore = defineStore('mainDashboard', () => {
type GeneralContext = Awaited<ReturnType<typeof trpc.general.me.query>>;
type LobbyInfo = Awaited<ReturnType<typeof trpc.lobby.info.query>>;
type WorldMapResult = Awaited<ReturnType<typeof trpc.world.getMap.query>>;
type CommandTable = Awaited<ReturnType<typeof trpc.turns.getCommandTable.query>>;
type MessageBundle = Awaited<ReturnType<typeof trpc.messages.getRecent.query>>;
const loading = ref(false);
const error = ref<string | null>(null);
const realtimeEnabled = ref(true);
const realtimeStatus = ref<'idle' | 'connected' | 'paused'>('connected');
const generalContext = ref<GeneralContext | null>(null);
const lobbyInfo = ref<LobbyInfo | null>(null);
const worldMap = ref<WorldMapResult | null>(null);
const commandTable = ref<CommandTable | null>(null);
const messages = ref<MessageBundle | null>(null);
const messageDraftText = ref('');
const targetMailbox = ref<number>(MESSAGE_MAILBOX_PUBLIC);
const general = computed(() => generalContext.value?.general ?? null);
const city = computed(() => generalContext.value?.city ?? null);
const nation = computed(() => generalContext.value?.nation ?? null);
const generalId = computed(() => general.value?.id ?? null);
const nationId = computed(() => nation.value?.id ?? null);
const mailboxOptions = computed(() => {
const options: Array<{ label: string; value: number; disabled?: boolean }> = [
{ label: '공공', value: MESSAGE_MAILBOX_PUBLIC },
];
if (nationId.value) {
options.push({ label: '국가', value: MESSAGE_MAILBOX_NATIONAL_BASE + nationId.value });
} else {
options.push({ label: '국가', value: -1, disabled: true });
}
options.push({ label: '외교', value: -2, disabled: true });
options.push({ label: '개인', value: -3, disabled: true });
return options;
});
const statusLine = computed(() => {
if (!lobbyInfo.value) {
return '상태 정보를 불러오는 중';
}
return `${lobbyInfo.value.year}년 ${lobbyInfo.value.month}월 · 턴 ${lobbyInfo.value.turnTerm}분`;
});
const realtimeLabel = computed(() => {
if (!realtimeEnabled.value) {
return '끔';
}
return realtimeStatus.value === 'connected' ? '연결됨' : '대기중';
});
const setRealtimeEnabled = (enabled: boolean) => {
realtimeEnabled.value = enabled;
realtimeStatus.value = enabled ? 'connected' : 'paused';
};
const loadMainData = async () => {
if (loading.value) {
return;
}
loading.value = true;
error.value = null;
try {
const context = await trpc.general.me.query();
generalContext.value = context;
if (!context) {
loading.value = false;
return;
}
const id = context.general.id;
const [lobby, map, commands, messageData] = await Promise.all([
trpc.lobby.info.query(),
trpc.world.getMap.query({ generalId: id, showMe: true, useCache: true }),
trpc.turns.getCommandTable.query({ generalId: id }),
trpc.messages.getRecent.query({ generalId: id }),
]);
lobbyInfo.value = lobby;
worldMap.value = map;
commandTable.value = commands;
messages.value = messageData;
} catch (err) {
error.value = resolveErrorMessage(err);
} finally {
loading.value = false;
}
};
const refreshMessages = async () => {
const id = generalId.value;
if (!id) {
return;
}
try {
messages.value = await trpc.messages.getRecent.query({ generalId: id });
} catch (err) {
error.value = resolveErrorMessage(err);
}
};
const sendMessage = async () => {
const id = generalId.value;
if (!id) {
return;
}
const mailbox = targetMailbox.value;
const text = messageDraftText.value.trim();
if (!text) {
return;
}
if (mailbox <= 0) {
return;
}
try {
await trpc.messages.send.mutate({
generalId: id,
mailbox,
text,
});
messageDraftText.value = '';
await refreshMessages();
} catch (err) {
error.value = resolveErrorMessage(err);
}
};
const loadOlderMessages = async (type: MessageType) => {
const id = generalId.value;
if (!id || !messages.value) {
return;
}
const bucket = messages.value[type] ?? [];
const oldest = bucket[bucket.length - 1];
if (!oldest) {
return;
}
try {
const older = await trpc.messages.getOld.query({
generalId: id,
type,
to: oldest.id,
});
const merged = {
...messages.value,
[type]: [...bucket, ...older[type]],
} as MessageBundle;
messages.value = merged;
} catch (err) {
error.value = resolveErrorMessage(err);
}
};
return {
loading,
error,
realtimeEnabled,
realtimeStatus,
generalContext,
general,
city,
nation,
lobbyInfo,
worldMap,
commandTable,
messages,
messageDraftText,
targetMailbox,
mailboxOptions,
statusLine,
realtimeLabel,
setRealtimeEnabled,
loadMainData,
refreshMessages,
sendMessage,
loadOlderMessages,
};
});
app/game-frontend/src/views/MainView.vue
+57 -92
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useMediaQuery } from '@vueuse/core';
import PanelCard from '../components/ui/PanelCard.vue';
import SkeletonLines from '../components/ui/SkeletonLines.vue';
@@ -9,20 +10,11 @@ import GeneralBasicCard from '../components/main/GeneralBasicCard.vue';
import CityBasicCard from '../components/main/CityBasicCard.vue';
import NationBasicCard from '../components/main/NationBasicCard.vue';
import MessagePanel from '../components/main/MessagePanel.vue';
import { trpc } from '../utils/trpc';
import { useSessionStore } from '../stores/session';
type GeneralContext = Awaited<ReturnType<typeof trpc.general.me.query>>;
type LobbyInfo = Awaited<ReturnType<typeof trpc.lobby.info.query>>;
type CommandTable = Awaited<ReturnType<typeof trpc.turns.getCommandTable.query>>;
type WorldMapResult = Awaited<ReturnType<typeof trpc.world.getMap.query>>;
type MessageBundle = Awaited<ReturnType<typeof trpc.messages.getRecent.query>>;
type GeneralInfo = NonNullable<GeneralContext>['general'];
type CityInfo = NonNullable<GeneralContext>['city'];
type NationInfo = NonNullable<GeneralContext>['nation'];
import { useMainDashboardStore } from '../stores/mainDashboard';
const session = useSessionStore();
const dashboard = useMainDashboardStore();
const isMobile = useMediaQuery('(max-width: 1024px)');
const mobileTabs = [
@@ -36,76 +28,27 @@ const mobileTabs = [
type MobileTabKey = (typeof mobileTabs)[number]['key'];
const mobileTab = ref<MobileTabKey>('map');
const realtimeEnabled = ref(true);
const realtimeStatus = ref<'idle' | 'connected' | 'paused'>('connected');
const loading = ref(false);
const error = ref<string | null>(null);
const generalInfo = ref<GeneralInfo | null>(null);
const cityInfo = ref<CityInfo | null>(null);
const nationInfo = ref<NationInfo | null>(null);
const lobbyInfo = ref<LobbyInfo | null>(null);
const worldMap = ref<WorldMapResult | null>(null);
const commandTable = ref<CommandTable | null>(null);
const messages = ref<MessageBundle | null>(null);
const statusLine = computed(() => {
if (!lobbyInfo.value) {
return '상태 정보를 불러오는 중';
}
return `${lobbyInfo.value.year}년 ${lobbyInfo.value.month}월 · 턴 ${lobbyInfo.value.turnTerm}분`;
});
const realtimeLabel = computed(() => {
if (!realtimeEnabled.value) {
return '끔';
}
if (realtimeStatus.value === 'connected') {
return '연결됨';
}
return '대기중';
});
const {
loading,
error,
realtimeEnabled,
general,
city,
nation,
lobbyInfo,
worldMap,
commandTable,
messages,
messageDraftText,
targetMailbox,
mailboxOptions,
statusLine,
realtimeLabel,
} = storeToRefs(dashboard);
const loadMainData = async () => {
if (loading.value) {
return;
}
loading.value = true;
error.value = null;
try {
const generalContext = await trpc.general.me.query();
if (!generalContext) {
generalInfo.value = null;
cityInfo.value = null;
nationInfo.value = null;
loading.value = false;
return;
}
generalInfo.value = generalContext.general;
cityInfo.value = generalContext.city;
nationInfo.value = generalContext.nation;
const generalId = generalContext.general.id;
const [lobby, map, commands, messageData] = await Promise.all([
trpc.lobby.info.query(),
trpc.world.getMap.query({ generalId, showMe: true, useCache: true }),
trpc.turns.getCommandTable.query({ generalId }),
trpc.messages.getRecent.query({ generalId }),
]);
lobbyInfo.value = lobby;
worldMap.value = map;
commandTable.value = commands;
messages.value = messageData;
} catch (err) {
error.value = '메인 정보를 불러오지 못했습니다.';
} finally {
loading.value = false;
}
await dashboard.loadMainData();
};
watch(
@@ -117,10 +60,6 @@ watch(
},
{ immediate: true }
);
watch(realtimeEnabled, (enabled) => {
realtimeStatus.value = enabled ? 'connected' : 'paused';
});
</script>
<template>
@@ -131,7 +70,11 @@ watch(realtimeEnabled, (enabled) => {
<p class="page-subtitle">{{ statusLine }}</p>
</div>
<div class="header-actions">
<button class="toggle" :class="{ active: realtimeEnabled }" @click="realtimeEnabled = !realtimeEnabled">
<button
class="toggle"
:class="{ active: realtimeEnabled }"
@click="dashboard.setRealtimeEnabled(!realtimeEnabled)"
>
실시간 동기화: {{ realtimeLabel }}
</button>
<button class="ghost" @click="loadMainData">새로고침</button>
@@ -170,13 +113,13 @@ watch(realtimeEnabled, (enabled) => {
<div class="mobile-panel" v-if="mobileTab === 'status'">
<PanelCard title="장수 스탯">
<GeneralBasicCard :general="generalInfo" :loading="loading" />
<GeneralBasicCard :general="general" :loading="loading" />
</PanelCard>
<PanelCard title="도시 정보">
<CityBasicCard :city="cityInfo" :loading="loading" />
<CityBasicCard :city="city" :loading="loading" />
</PanelCard>
<PanelCard title="국가 정보">
<NationBasicCard :nation="nationInfo" :loading="loading" />
<NationBasicCard :nation="nation" :loading="loading" />
</PanelCard>
</div>
@@ -201,7 +144,18 @@ watch(realtimeEnabled, (enabled) => {
<div class="mobile-panel" v-if="mobileTab === 'messages'">
<PanelCard title="메시지함">
<MessagePanel :messages="messages" :loading="loading" />
<MessagePanel
:messages="messages"
:loading="loading"
:target-mailbox="targetMailbox"
:draft-text="messageDraftText"
:mailbox-options="mailboxOptions"
@update:target-mailbox="targetMailbox = $event"
@update:draft-text="messageDraftText = $event"
@send="dashboard.sendMessage"
@load-older="dashboard.loadOlderMessages"
@refresh="dashboard.refreshMessages"
/>
</PanelCard>
</div>
</section>
@@ -220,7 +174,18 @@ watch(realtimeEnabled, (enabled) => {
</div>
</PanelCard>
<PanelCard title="메시지함">
<MessagePanel :messages="messages" :loading="loading" />
<MessagePanel
:messages="messages"
:loading="loading"
:target-mailbox="targetMailbox"
:draft-text="messageDraftText"
:mailbox-options="mailboxOptions"
@update:target-mailbox="targetMailbox = $event"
@update:draft-text="messageDraftText = $event"
@send="dashboard.sendMessage"
@load-older="dashboard.loadOlderMessages"
@refresh="dashboard.refreshMessages"
/>
</PanelCard>
</div>
@@ -229,17 +194,17 @@ watch(realtimeEnabled, (enabled) => {
<CommandListPanel :command-table="commandTable" :loading="loading" />
</PanelCard>
<PanelCard title="장수 스탯">
<GeneralBasicCard :general="generalInfo" :loading="loading" />
<GeneralBasicCard :general="general" :loading="loading" />
</PanelCard>
<PanelCard title="장수 동향">
<SkeletonLines v-if="loading" :lines="4" />
<div v-else class="placeholder">장수 동향은 실시간 스트림으로 연결 예정</div>
</PanelCard>
<PanelCard title="도시 정보">
<CityBasicCard :city="cityInfo" :loading="loading" />
<CityBasicCard :city="city" :loading="loading" />
</PanelCard>
<PanelCard title="국가 정보">
<NationBasicCard :nation="nationInfo" :loading="loading" />
<NationBasicCard :nation="nation" :loading="loading" />
</PanelCard>
<PanelCard title="개인 기록">
<SkeletonLines v-if="loading" :lines="4" />