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

Merge branch 'main' into feature/main-signup-kakao-gate

Browse Source 
# Conflicts:
#	app/gateway-frontend/src/views/LobbyView.vue
This commit is contained in:
Hide_D
2026-07-26 10:17:37 +00:00
parent a7bb352ba2 bcf1faaba7
commit 6c3a156b84
22 changed files with 2313 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/components/main/MainFrontStatus.vue
+99
View File
@@ -0,0 +1,99 @@
<script setup lang="ts">
defineProps<{
status: {
onlineUserCount: number;
onlineNations: string;
onlineGenerals: string;
nationNotice: string;
lastExecuted: string | null;
latestVote: {
id: number;
title: string;
hasVoted: boolean;
} | null;
} | null;
}>();
</script>
<template>
<section class="front-status" aria-label="접속 현황과 국가 방침">
<div class="status-row vote-status">
<RouterLink v-if="status?.latestVote" to="/survey">
<span class="vote-label">설문 진행 중: </span>{{ status.latestVote.title }}
</RouterLink>
<span v-else class="vote-empty">진행중인 설문 없음</span>
</div>
<div class="status-row online-nations">접속중인 국가: {{ status?.onlineNations ?? '' }}</div>
<div class="status-row online-users">【 접속자 】 {{ status?.onlineGenerals ?? '' }}</div>
<div class="status-row nation-notice">
<div class="notice-title">【 국가방침 】</div>
<!-- 레거시 국가 방침은 같은 저장 형식의 HTML 본문을 그대로 표시한다. -->
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="nation-notice-body" v-html="status?.nationNotice ?? ''" />
</div>
</section>
</template>
<style scoped>
.front-status {
width: calc(100% + 48px);
margin-left: -24px;
background-color: #302016;
background-image: url('/image/game/back_walnut.jpg');
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 21px;
}
.status-row {
box-sizing: border-box;
min-height: 36px;
border-top: 1px solid gray;
padding: 7px;
}
.nation-notice {
padding: 7px 0;
}
.notice-title {
padding: 0 7px;
}
.nation-notice-body {
overflow-wrap: anywhere;
}
.nation-notice-body :deep(p) {
min-height: 1em;
margin: 0;
}
.vote-status {
width: 33.333333%;
margin-left: auto;
padding-right: 0;
padding-left: 0;
text-align: center;
}
.vote-status a {
color: #fff;
text-decoration: gray underline;
}
.vote-label {
color: cyan;
}
.vote-empty {
color: magenta;
}
@media (max-width: 991px) {
.vote-status {
width: 50%;
}
}
</style>
app/game-frontend/src/stores/mainDashboard.ts
+65 -13
View File
@@ -27,10 +27,12 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
type BoardAccess = Awaited<ReturnType<typeof trpc.board.getAccess.query>>;
type ReservedTurnView = Awaited<ReturnType<typeof trpc.turns.reserved.getGeneral.query>>[number];
type RecentRecord = Awaited<ReturnType<typeof trpc.general.getRecentRecords.query>>['global'][number];
type FrontStatus = Awaited<ReturnType<typeof trpc.general.getFrontStatus.query>>;
const loading = ref(false);
const error = ref<string | null>(null);
const recordsError = ref<string | null>(null);
const frontStatusError = ref<string | null>(null);
const realtimeEnabled = ref(true);
const realtimeStatus = ref<'idle' | 'connected' | 'paused'>('idle');
@@ -47,6 +49,8 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
const globalRecords = ref<RecentRecord[]>([]);
const generalRecords = ref<RecentRecord[]>([]);
const worldHistory = ref<RecentRecord[]>([]);
const frontStatus = ref<FrontStatus | null>(null);
const surveyNotice = ref<NonNullable<FrontStatus['latestVote']> | null>(null);
let lastGeneralRecordId = 0;
let lastWorldHistoryId = 0;
let recordGeneralId: number | null = null;
@@ -199,6 +203,28 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
}
};
const updateFrontStatus = (nextStatus: FrontStatus) => {
frontStatus.value = nextStatus;
const latestVote = nextStatus.latestVote;
if (!latestVote || latestVote.hasVoted || typeof window === 'undefined') {
surveyNotice.value = null;
return;
}
const serverId = session.profile?.split(':', 1)[0] ?? 'game';
const storageKey = `state.${serverId}.lastVote`;
const lastSeenVoteId = Number.parseInt(window.localStorage.getItem(storageKey) ?? '0', 10);
if (latestVote.id <= (Number.isFinite(lastSeenVoteId) ? lastSeenVoteId : 0)) {
surveyNotice.value = null;
return;
}
window.localStorage.setItem(storageKey, latestVote.id.toString());
surveyNotice.value = latestVote;
};
const dismissSurveyNotice = () => {
surveyNotice.value = null;
};
const mergeRecentRecords = (current: RecentRecord[], incoming: RecentRecord[]): RecentRecord[] => {
const merged = new Map(current.map((entry) => [entry.id, entry]));
for (const entry of incoming) {
@@ -214,6 +240,8 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
lastGeneralRecordId = 0;
lastWorldHistoryId = 0;
recordGeneralId = id;
frontStatus.value = null;
surveyNotice.value = null;
};
const loadMainData = async () => {
@@ -223,6 +251,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
loading.value = true;
error.value = null;
recordsError.value = null;
frontStatusError.value = null;
try {
const context = await trpc.general.me.query();
@@ -256,19 +285,35 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
recordsError.value = resolveErrorMessage(err);
return null;
});
const [layout, lobby, map, commands, messageData, contacts, access, generalTurns, nationTurns, records] =
await Promise.all([
layoutPromise,
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 }),
trpc.messages.getContacts.query({ generalId: id }),
trpc.board.getAccess.query(),
generalTurnsPromise,
nationTurnsPromise,
recordsPromise,
]);
const frontStatusPromise = trpc.general.getFrontStatus.query().catch((err: unknown) => {
frontStatusError.value = resolveErrorMessage(err);
return null;
});
const [
layout,
lobby,
map,
commands,
messageData,
contacts,
access,
generalTurns,
nationTurns,
records,
nextFrontStatus,
] = await Promise.all([
layoutPromise,
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 }),
trpc.messages.getContacts.query({ generalId: id }),
trpc.board.getAccess.query(),
generalTurnsPromise,
nationTurnsPromise,
recordsPromise,
frontStatusPromise,
]);
mapLayout.value = layout;
lobbyInfo.value = lobby;
@@ -290,6 +335,9 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
);
lastWorldHistoryId = Math.max(lastWorldHistoryId, records.history[0]?.id ?? 0);
}
if (nextFrontStatus) {
updateFrontStatus(nextFrontStatus);
}
if (initializedMailboxGeneralId !== id) {
targetMailbox.value = MESSAGE_MAILBOX_NATIONAL_BASE + context.general.nationId;
initializedMailboxGeneralId = id;
@@ -639,6 +687,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
loading,
error,
recordsError,
frontStatusError,
realtimeEnabled,
realtimeStatus,
generalContext,
@@ -658,12 +707,15 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
globalRecords,
generalRecords,
worldHistory,
frontStatus,
surveyNotice,
messageDraftText,
targetMailbox,
mailboxGroups,
statusLine,
realtimeLabel,
setRealtimeEnabled,
dismissSurveyNotice,
loadMainData,
refreshMessages,
sendMessage,
app/game-frontend/src/views/MainView.vue
+83 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { onUnmounted, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useMediaQuery } from '@vueuse/core';
import PanelCard from '../components/ui/PanelCard.vue';
@@ -12,6 +12,7 @@ import NationBasicCard from '../components/main/NationBasicCard.vue';
import MessagePanel from '../components/main/MessagePanel.vue';
import SelectedCityPanel from '../components/main/SelectedCityPanel.vue';
import RecordPanel from '../components/main/RecordPanel.vue';
import MainFrontStatus from '../components/main/MainFrontStatus.vue';
import { formatLog } from '../utils/formatLog';
import { useSessionStore } from '../stores/session';
import { useMainDashboardStore } from '../stores/mainDashboard';
@@ -38,6 +39,7 @@ const {
loading,
error,
recordsError,
frontStatusError,
realtimeEnabled,
general,
city,
@@ -53,6 +55,8 @@ const {
globalRecords,
generalRecords,
worldHistory,
frontStatus,
surveyNotice,
messageDraftText,
targetMailbox,
mailboxGroups,
@@ -60,6 +64,22 @@ const {
realtimeLabel,
} = storeToRefs(dashboard);
let surveyNoticeTimer: ReturnType<typeof setTimeout> | null = null;
watch(surveyNotice, (notice) => {
if (surveyNoticeTimer) {
clearTimeout(surveyNoticeTimer);
surveyNoticeTimer = null;
}
if (notice) {
surveyNoticeTimer = setTimeout(() => dashboard.dismissSurveyNotice(), 60_000);
}
});
onUnmounted(() => {
if (surveyNoticeTimer) {
clearTimeout(surveyNoticeTimer);
}
});
const reserveGeneralTurn = (payload: { index: number; action: string; args: Record<string, unknown> }) => {
void dashboard.setGeneralTurn(payload.index, payload.action, payload.args);
};
@@ -153,11 +173,22 @@ watch(
</header>
<div v-if="error" class="error">{{ error }}</div>
<div v-if="frontStatusError" class="front-status-error" role="alert">{{ frontStatusError }}</div>
<div v-if="session.needsGeneral" class="warning">
장수가 아직 생성되지 않았습니다. <RouterLink to="/join">장수 생성/빙의</RouterLink>
</div>
<MainFrontStatus :status="frontStatus" />
<aside v-if="surveyNotice" class="survey-notice" role="status" aria-live="polite">
<div class="survey-notice-title">
<strong>설문조사 안내</strong>
<button type="button" aria-label="설문조사 알림 닫기" @click="dashboard.dismissSurveyNotice">×</button>
</div>
<RouterLink to="/survey">새로운 설문조사가 있습니다.</RouterLink>
</aside>
<section v-if="isMobile" class="layout-mobile">
<div class="mobile-tabs">
<button
@@ -453,11 +484,62 @@ button {
font-size: 0.85rem;
}
.front-status-error {
color: #ff8a80;
font-size: 0.85rem;
}
.warning {
color: #f5d08a;
font-size: 0.85rem;
}
.survey-notice {
position: fixed;
z-index: 1080;
right: 16px;
bottom: 16px;
box-sizing: border-box;
width: min(350px, calc(100vw - 32px));
border: 1px solid rgba(255, 193, 7, 0.75);
border-radius: 4px;
background: rgba(32, 28, 16, 0.96);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 14px;
line-height: 1.3;
}
.survey-notice-title {
display: flex;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 193, 7, 0.45);
padding: 8px 12px;
color: #ffc107;
}
.survey-notice-title button {
padding: 0 4px;
cursor: pointer;
font-size: 20px;
line-height: 1;
}
.survey-notice > a {
display: block;
padding: 12px;
color: #fff;
text-decoration: none;
}
.survey-notice > a:hover,
.survey-notice > a:focus-visible {
background: rgba(255, 193, 7, 0.12);
text-decoration: underline;
}
.layout-desktop {
display: grid;
grid-template-columns: minmax(320px, 1.4fr) minmax(320px, 1fr);