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

feat(game): align in-game GUI with ref captures

Browse Source
This commit is contained in:
Hide_D
2026-08-01 22:03:03 +00:00
parent 23cdc2adf2
commit 43ec211ff8
30 changed files with 1306 additions and 776 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/views/YearbookView.vue
+73 -28
View File
@@ -18,6 +18,7 @@ type HistoryData = {
color: string;
level: number;
power: number;
generalCount: number;
cities: string[];
}>;
globalHistory: string[];
@@ -32,6 +33,8 @@ const range = ref<YearbookRange | null>(null);
const mapLayout = ref<MapLayout | null>(null);
const history = ref<HistoryData | null>(null);
const selectedYearMonth = ref<number | null>(null);
const settingsOpen = ref(false);
const rankingBottom = ref(localStorage.getItem('yearbook-ranking-bottom') === 'true');
const serverID = computed(() => {
const value = route.query.serverID;
const raw = Array.isArray(value) ? value[0] : value;
@@ -93,6 +96,11 @@ const moveMonth = (delta: number): void => {
Math.max(range.value.firstYearMonth, selectedYearMonth.value + delta)
);
};
const toggleRankingPosition = (): void => {
rankingBottom.value = !rankingBottom.value;
localStorage.setItem('yearbook-ranking-bottom', String(rankingBottom.value));
settingsOpen.value = false;
};
watch(selectedYearMonth, () => {
void loadHistory();
@@ -117,12 +125,18 @@ onMounted(async () => {
<template>
<main id="yearbook-container" class="yearbook-page legacy-bg0">
<header class="yearbook-title legacy-bg2">
<header class="yearbook-title legacy-bg0">
<strong>연 감</strong>
<button class="legacy-button" type="button" @click="closePage">창 닫기</button>
<button class="legacy-button close-button" type="button" @click="closePage">창 닫기</button>
<span class="settings-menu">
<button class="legacy-button" type="button" @click="settingsOpen = !settingsOpen">⚙ 설정⌄</button>
<button v-if="settingsOpen" class="settings-item" type="button" @click="toggleRankingPosition">
국가 순서 위치 변경(모바일 전용)
</button>
</span>
</header>
<section class="year-selector legacy-border">
<section class="year-selector">
<span>연월 선택:</span>
<button
class="legacy-button"
@@ -150,24 +164,25 @@ onMounted(async () => {
<div v-if="errorMessage" class="yearbook-message error" role="alert">{{ errorMessage }}</div>
<div v-else-if="loading && !history" class="yearbook-message">불러오는 중...</div>
<section v-if="history" class="history-grid">
<section v-if="history" :class="['history-grid', { 'ranking-bottom': rankingBottom }]">
<div class="map-position">
<MapViewer :map-data="history.map" :map-layout="mapLayout" :loading="loading" />
</div>
<aside class="nation-position">
<div class="section-heading legacy-bg1">세력 일람</div>
<table>
<thead>
<tr>
<th>국가</th>
<th>국명</th>
<th>국력</th>
<th>도시</th>
<th>장수</th>
<th>속령</th>
</tr>
</thead>
<tbody>
<tr v-for="nation in history.nations" :key="nation.id">
<td :style="{ color: nation.color }">{{ nation.name }}</td>
<tr v-for="nation in [...history.nations].sort((a, b) => (a.level > 0 ? 0 : 1) - (b.level > 0 ? 0 : 1) || b.power - a.power)" :key="nation.id">
<td><span :style="{ backgroundColor: nation.color }">{{ nation.name }}</span></td>
<td>{{ nation.power.toLocaleString() }}</td>
<td>{{ nation.generalCount.toLocaleString() }}</td>
<td>{{ nation.cities.length }}</td>
</tr>
</tbody>
@@ -208,32 +223,45 @@ onMounted(async () => {
color: #fff;
font-family: var(--sammo-font-sans);
font-size: 14px;
background-color: transparent;
}
.yearbook-title {
position: relative;
min-height: 42px;
border: 1px solid gray;
min-height: 32px;
text-align: center;
line-height: 42px;
line-height: 21px;
background-color: transparent;
}
.yearbook-title strong {
display: inline-block;
line-height: 32px;
font-size: 20px;
letter-spacing: 0.35em;
}
.yearbook-title .legacy-button {
.yearbook-title .close-button,
.settings-menu {
position: absolute;
top: 5px;
right: 6px;
top: 0;
}
.yearbook-title .close-button { left: 0; height: 32px; }
.settings-menu { right: 0; height: 32px; }
.settings-menu > .legacy-button { height: 32px; }
.settings-item {
position: absolute;
z-index: 5;
top: 32px;
right: 0;
width: 250px;
border: 1px solid #777;
padding: 7px;
background: #222;
color: #fff;
}
.legacy-border,
.history-grid,
.map-position,
.nation-position,
.history-log {
.history-grid {
border: 1px solid gray;
}
@@ -243,8 +271,8 @@ onMounted(async () => {
justify-content: center;
align-items: center;
gap: 4px;
min-height: 42px;
padding: 3px 12px;
min-height: 37.5px;
padding: 0;
text-align: right;
}
@@ -264,8 +292,10 @@ onMounted(async () => {
.map-position,
.nation-position {
min-width: 0;
padding: 4px;
padding: 0;
}
.map-position :deep(.map-meta),
.map-position :deep(.map-footnote) { display: none; }
.nation-position table {
width: 100%;
@@ -276,9 +306,13 @@ onMounted(async () => {
.nation-position th,
.nation-position td {
border: 1px solid #555;
padding: 4px 2px;
border: 0;
border-left: 1px solid gray;
padding: 1px 6px;
}
.nation-position th { padding: 2px 6px; background: #ccc; color: #000; }
.nation-position td { text-align: right; }
.nation-position td:first-child { text-align: left; }
.section-heading {
min-height: 28px;
@@ -291,10 +325,19 @@ onMounted(async () => {
.history-log {
grid-column: 1 / -1;
}
.year-selector .legacy-button {
border: 0;
background: #444;
}
.settings-menu > .legacy-button,
.yearbook-title .close-button {
border: 0;
background: #00582c;
}
.log-content {
min-height: 72px;
padding: 7px 10px;
padding: 1px 0;
line-height: 1.35;
}
@@ -309,7 +352,7 @@ onMounted(async () => {
}
.yearbook-footer {
padding: 6px;
padding: 11px;
text-align: center;
}
@@ -320,7 +363,7 @@ onMounted(async () => {
.year-selector {
grid-template-columns: 90px 100px 190px 100px;
padding: 3px 5px;
padding: 0;
}
.history-grid {
@@ -333,5 +376,7 @@ onMounted(async () => {
width: 100%;
box-sizing: border-box;
}
.history-grid.ranking-bottom .nation-position { order: 4; }
.history-log:first-of-type { margin-bottom: 0; }
}
</style>