Merge branch 'main' into feature/survey-unique-parity
This commit is contained in:
@@ -6,6 +6,9 @@ import JoinView from '../views/JoinView.vue';
|
||||
import InheritView from '../views/InheritView.vue';
|
||||
import AuctionView from '../views/AuctionView.vue';
|
||||
import NationCitiesView from '../views/NationCitiesView.vue';
|
||||
import NationInfoView from '../views/NationInfoView.vue';
|
||||
import GlobalInfoView from '../views/GlobalInfoView.vue';
|
||||
import CurrentCityView from '../views/CurrentCityView.vue';
|
||||
import NationGeneralsView from '../views/NationGeneralsView.vue';
|
||||
import NationPersonnelView from '../views/NationPersonnelView.vue';
|
||||
import NationStratFinanView from '../views/NationStratFinanView.vue';
|
||||
@@ -83,6 +86,12 @@ const routes = [
|
||||
requiresGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/nation/info',
|
||||
name: 'nation-info',
|
||||
component: NationInfoView,
|
||||
meta: { requiresAuth: true, requiresGeneral: true },
|
||||
},
|
||||
{
|
||||
path: '/nation/cities',
|
||||
name: 'nation-cities',
|
||||
@@ -92,6 +101,18 @@ const routes = [
|
||||
requiresGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/global-info',
|
||||
name: 'global-info',
|
||||
component: GlobalInfoView,
|
||||
meta: { requiresAuth: true, requiresGeneral: true },
|
||||
},
|
||||
{
|
||||
path: '/current-city',
|
||||
name: 'current-city',
|
||||
component: CurrentCityView,
|
||||
meta: { requiresAuth: true, requiresGeneral: true },
|
||||
},
|
||||
{
|
||||
path: '/nation/affairs',
|
||||
name: 'nation-affairs',
|
||||
|
||||
@@ -0,0 +1,240 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { formatOfficerLevelText, cityLevelMap, regionMap } from '../utils/nationFormat';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type Result = Awaited<ReturnType<typeof trpc.world.getCurrentCity.query>>;
|
||||
const data = ref<Result | null>(null);
|
||||
const error = ref('');
|
||||
const selected = ref<number>();
|
||||
const show = (value: number | null) => (value === null ? '?' : value.toLocaleString('ko-KR'));
|
||||
const load = async (cityId?: number) => {
|
||||
try {
|
||||
data.value = await trpc.world.getCurrentCity.query(cityId ? { cityId } : undefined);
|
||||
selected.value = data.value.city.id;
|
||||
error.value = '';
|
||||
} catch (cause) {
|
||||
error.value = cause instanceof Error ? cause.message : '도시 정보를 불러오지 못했습니다.';
|
||||
}
|
||||
};
|
||||
const city = computed(() => data.value?.city);
|
||||
onMounted(() => void load());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="city-page">
|
||||
<table class="legacy-table legacy-bg0 center">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>도 시 정 보<br /><RouterLink to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="legacy-table legacy-bg0 selector">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
도시선택 :
|
||||
<select v-model.number="selected" @change="load(selected)">
|
||||
<option v-for="option in data?.options ?? []" :key="option.id" :value="option.id">
|
||||
【{{ option.name.padEnd(4, '_') }}】{{
|
||||
option.nationId === data?.me.nationId
|
||||
? '본국'
|
||||
: option.nationId === 0
|
||||
? '공백지'
|
||||
: '타국'
|
||||
}}
|
||||
</option>
|
||||
</select>
|
||||
<p>명령 화면에서 도시를 클릭하셔도 됩니다.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<template v-if="data && city">
|
||||
<table class="legacy-table legacy-bg2 stats">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="11" class="city-title">
|
||||
【 {{ regionMap[city.region] }} | {{ cityLevelMap[city.level] }} 】 {{ city.name }}
|
||||
</td>
|
||||
<td class="city-title">{{ data.lastExecute }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>주민</th>
|
||||
<td>{{ show(city.population) }}/{{ show(city.populationMax) }}</td>
|
||||
<th>농업</th>
|
||||
<td>{{ show(city.agriculture) }}/{{ show(city.agricultureMax) }}</td>
|
||||
<th>상업</th>
|
||||
<td>{{ show(city.commerce) }}/{{ show(city.commerceMax) }}</td>
|
||||
<th>치안</th>
|
||||
<td>{{ show(city.security) }}/{{ show(city.securityMax) }}</td>
|
||||
<th>수비</th>
|
||||
<td>{{ show(city.defence) }}/{{ show(city.defenceMax) }}</td>
|
||||
<th>성벽</th>
|
||||
<td>{{ show(city.wall) }}/{{ show(city.wallMax) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>민심</th>
|
||||
<td>{{ show(city.trust) }}</td>
|
||||
<th>시세</th>
|
||||
<td>{{ city.trade ?? '-' }}%</td>
|
||||
<th>인구</th>
|
||||
<td>
|
||||
{{
|
||||
city.population === null
|
||||
? '?'
|
||||
: ((city.population / city.populationMax) * 100).toFixed(2)
|
||||
}}%
|
||||
</td>
|
||||
<th>태수</th>
|
||||
<td>{{ city.officers[4] }}</td>
|
||||
<th>군사</th>
|
||||
<td>{{ city.officers[3] }}</td>
|
||||
<th>종사</th>
|
||||
<td>{{ city.officers[2] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>장수</th>
|
||||
<td colspan="11">
|
||||
{{
|
||||
data.visibility.detailed
|
||||
? data.generals.map((g) => g.name).join(', ') || '-'
|
||||
: '알 수 없음'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table v-if="data.visibility.detailed" class="legacy-table legacy-bg0 generals">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>얼 굴</th>
|
||||
<th>이 름</th>
|
||||
<th>통솔</th>
|
||||
<th>무력</th>
|
||||
<th>지력</th>
|
||||
<th>관 직</th>
|
||||
<th>守</th>
|
||||
<th>병 종</th>
|
||||
<th>병 사</th>
|
||||
<th>훈련</th>
|
||||
<th>사기</th>
|
||||
<th>명 령</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="general in data.generals" :key="general.id">
|
||||
<td>
|
||||
<img
|
||||
v-if="general.picture"
|
||||
width="64"
|
||||
height="64"
|
||||
:src="`/image/general/${general.picture}`"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ general.name }}</td>
|
||||
<td>{{ general.leadership }}</td>
|
||||
<td>{{ general.strength }}</td>
|
||||
<td>{{ general.intelligence }}</td>
|
||||
<td>{{ formatOfficerLevelText(general.officerLevel) }}</td>
|
||||
<td>{{ general.defenceTrain ?? '?' }}</td>
|
||||
<td>{{ general.crewTypeId ?? '?' }}</td>
|
||||
<td>{{ general.crew ?? '?' }}</td>
|
||||
<td>{{ general.train ?? '?' }}</td>
|
||||
<td>{{ general.atmos ?? '?' }}</td>
|
||||
<td class="turns">
|
||||
{{
|
||||
general.turns.length
|
||||
? general.turns.map((turn, index) => `${index + 1} : ${turn}`).join(' / ')
|
||||
: general.npcState > 1
|
||||
? 'NPC 장수'
|
||||
: `【${general.nationName}】 장수`
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
<table class="legacy-table legacy-bg0 center footer">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><RouterLink to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.city-page {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
.legacy-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.legacy-table td,
|
||||
.legacy-table th {
|
||||
border: 1px solid #777;
|
||||
padding: 3px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.selector {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
.selector select {
|
||||
display: inline-block;
|
||||
min-width: 400px;
|
||||
}
|
||||
.stats {
|
||||
margin-top: 14px;
|
||||
}
|
||||
.stats th,
|
||||
.generals th {
|
||||
background-image: url('/image/game/back_green.jpg');
|
||||
text-align: center;
|
||||
}
|
||||
.stats td {
|
||||
text-align: center;
|
||||
}
|
||||
.city-title {
|
||||
text-align: center;
|
||||
}
|
||||
.generals {
|
||||
margin-top: 14px;
|
||||
}
|
||||
.generals td {
|
||||
text-align: center;
|
||||
}
|
||||
.generals td:last-child {
|
||||
text-align: left;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.turns {
|
||||
font-size: x-small;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 14px;
|
||||
}
|
||||
.error {
|
||||
text-align: center;
|
||||
color: #ff7373;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.city-page {
|
||||
width: 1000px;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.selector select {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,243 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import MapViewer from '../components/main/MapViewer.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type Result = Awaited<ReturnType<typeof trpc.world.getGlobalInfo.query>>;
|
||||
type Layout = Awaited<ReturnType<typeof trpc.world.getMapLayout.query>>;
|
||||
const data = ref<Result | null>(null);
|
||||
const layout = ref<Layout | null>(null);
|
||||
const error = ref('');
|
||||
const state = (value: number) => ({ 0: '★', 1: '▲', 2: '', 7: '@' })[value] ?? 'ㆍ';
|
||||
const stateClass = (value: number) => `state-${value}`;
|
||||
const nationMap = computed(() => new Map(data.value?.nations.map((nation) => [nation.id, nation]) ?? []));
|
||||
onMounted(async () => {
|
||||
try {
|
||||
[data.value, layout.value] = await Promise.all([
|
||||
trpc.world.getGlobalInfo.query(),
|
||||
trpc.world.getMapLayout.query(),
|
||||
]);
|
||||
} catch (cause) {
|
||||
error.value = cause instanceof Error ? cause.message : '중원 정보를 불러오지 못했습니다.';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="global-page legacy-bg0">
|
||||
<table class="legacy-title">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>중 원 정 보<br /><RouterLink to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<section v-if="data" class="section">
|
||||
<h2 class="blue">외교 현황</h2>
|
||||
<div class="matrix-wrap">
|
||||
<table class="matrix">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th
|
||||
v-for="nation in data.nations"
|
||||
:key="nation.id"
|
||||
class="vertical"
|
||||
:style="{ backgroundColor: nation.color }"
|
||||
>
|
||||
{{ nation.name }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="me in data.nations" :key="me.id">
|
||||
<th :style="{ backgroundColor: me.color }">{{ me.name }}</th>
|
||||
<td
|
||||
v-for="you in data.nations"
|
||||
:key="you.id"
|
||||
:class="[
|
||||
stateClass(data.diplomacy[me.id]?.[you.id] ?? 2),
|
||||
{ mine: me.id === data.myNationId || you.id === data.myNationId },
|
||||
]"
|
||||
>
|
||||
{{ me.id === you.id ? '＼' : state(data.diplomacy[me.id]?.[you.id] ?? 2) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td :colspan="data.nations.length + 1">
|
||||
불가침 : <b class="state-7">@</b>, 통상 : ㆍ, 선포 : <b class="state-1">▲</b>, 교전 :
|
||||
<b class="state-0">★</b>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="data?.conflict.length" class="section">
|
||||
<h2 class="magenta">분쟁 현황</h2>
|
||||
<div v-for="conflict in data.conflict" :key="conflict.cityId" class="conflict">
|
||||
<strong>{{ conflict.cityName }}</strong>
|
||||
<div>
|
||||
<div v-for="(percent, id) in conflict.nations" :key="id" class="conflict-row">
|
||||
<span :style="{ backgroundColor: nationMap.get(Number(id))?.color }">{{
|
||||
nationMap.get(Number(id))?.name
|
||||
}}</span
|
||||
><em>{{ percent.toFixed(1) }}%</em
|
||||
><i :style="{ width: `${percent}%`, backgroundColor: nationMap.get(Number(id))?.color }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="data && layout" class="section map-section">
|
||||
<h2 class="green">중원 지도</h2>
|
||||
<div class="map-grid">
|
||||
<MapViewer :map-data="data.map" :map-layout="layout" :loading="false" />
|
||||
<div class="nation-list">
|
||||
<div v-for="nation in data.nations" :key="nation.id">
|
||||
<b :style="{ color: nation.color }">【{{ nation.name }}】</b> {{ nation.power.toLocaleString()
|
||||
}}<br /><small>{{ nation.cities.join(', ') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<table class="legacy-title footer">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><RouterLink to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.global-page {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
.legacy-title {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
}
|
||||
.legacy-title td {
|
||||
border: 1px solid #777;
|
||||
padding: 4px;
|
||||
}
|
||||
.section {
|
||||
margin-top: 21px;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: 16.8px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
border-block: 1px solid #777;
|
||||
padding: 2px;
|
||||
}
|
||||
.blue {
|
||||
background: #00f;
|
||||
}
|
||||
.magenta {
|
||||
background: #f0f;
|
||||
}
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
.matrix-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.matrix {
|
||||
margin: auto;
|
||||
min-width: 400px;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
}
|
||||
.matrix th {
|
||||
font-weight: 400;
|
||||
}
|
||||
.matrix .vertical {
|
||||
writing-mode: vertical-rl;
|
||||
text-align: end;
|
||||
padding: 1ch 0;
|
||||
min-width: 1ch;
|
||||
max-width: 3ch;
|
||||
}
|
||||
.matrix tbody th {
|
||||
padding: 2px 1ch;
|
||||
text-align: right;
|
||||
min-width: 10ch;
|
||||
}
|
||||
.matrix td {
|
||||
border-left: 1px solid gray;
|
||||
border-top: 1px solid gray;
|
||||
padding: 0;
|
||||
}
|
||||
.matrix td.mine {
|
||||
background: #600;
|
||||
}
|
||||
.state-0 {
|
||||
color: red;
|
||||
}
|
||||
.state-1 {
|
||||
color: #f0f;
|
||||
}
|
||||
.state-7 {
|
||||
color: #32cd32;
|
||||
}
|
||||
.conflict {
|
||||
display: grid;
|
||||
grid-template-columns: 16ch 1fr;
|
||||
}
|
||||
.conflict > strong {
|
||||
text-align: right;
|
||||
padding-right: 1ch;
|
||||
align-self: center;
|
||||
}
|
||||
.conflict-row {
|
||||
display: grid;
|
||||
grid-template-columns: 16ch 6ch 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
.conflict-row span {
|
||||
padding-left: 1ch;
|
||||
}
|
||||
.conflict-row em {
|
||||
text-align: right;
|
||||
padding-right: 0.5ch;
|
||||
font-style: normal;
|
||||
}
|
||||
.conflict-row i {
|
||||
height: 1.2em;
|
||||
}
|
||||
.map-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 700px 300px;
|
||||
}
|
||||
.nation-list > div {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #666;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.error {
|
||||
text-align: center;
|
||||
color: #ff7373;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.global-page {
|
||||
width: 500px;
|
||||
}
|
||||
.map-grid {
|
||||
grid-template-columns: 500px;
|
||||
}
|
||||
.nation-list {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -91,7 +91,10 @@ watch(
|
||||
<p class="page-subtitle">{{ statusLine }}</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<RouterLink class="ghost" to="/nation/info">세력 정보</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/cities">세력 도시</RouterLink>
|
||||
<RouterLink class="ghost" to="/global-info">중원 정보</RouterLink>
|
||||
<RouterLink class="ghost" to="/current-city">현재 도시</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/personnel">인사부</RouterLink>
|
||||
<RouterLink class="ghost" to="/troop">부대 편성</RouterLink>
|
||||
|
||||
@@ -1,582 +1,185 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import PanelCard from '../components/ui/PanelCard.vue';
|
||||
import SkeletonLines from '../components/ui/SkeletonLines.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { cityLevelMap, regionMap } from '../utils/nationFormat';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type CityOverviewResponse = Awaited<ReturnType<typeof trpc.nation.getCityOverview.query>>;
|
||||
|
||||
type CityEntry = CityOverviewResponse['cities'][number];
|
||||
type GeneralEntry = CityOverviewResponse['generals'][number];
|
||||
|
||||
type CitySortKey = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
|
||||
type OfficerLevel = 2 | 3 | 4;
|
||||
|
||||
const officerLabels: Record<OfficerLevel, string> = {
|
||||
4: '태수',
|
||||
3: '군사',
|
||||
2: '종사',
|
||||
};
|
||||
|
||||
const officerLevels: OfficerLevel[] = [4, 3, 2];
|
||||
|
||||
const sortOptions: Array<{ key: CitySortKey; label: string }> = [
|
||||
{ key: 1, label: '기본' },
|
||||
{ key: 2, label: '인구' },
|
||||
{ key: 3, label: '인구율' },
|
||||
{ key: 4, label: '민심' },
|
||||
{ key: 5, label: '농업' },
|
||||
{ key: 6, label: '상업' },
|
||||
{ key: 7, label: '치안' },
|
||||
{ key: 8, label: '수비' },
|
||||
{ key: 9, label: '성벽' },
|
||||
{ key: 10, label: '시세' },
|
||||
{ key: 11, label: '지역' },
|
||||
{ key: 12, label: '규모' },
|
||||
];
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const data = ref<CityOverviewResponse | null>(null);
|
||||
const sortKey = ref<CitySortKey>(1);
|
||||
const filterText = ref('');
|
||||
const showAppointment = ref(false);
|
||||
const appointmentDraft = reactive<Record<number, Record<number, number>>>({});
|
||||
|
||||
const resolveErrorMessage = (value: unknown): string => {
|
||||
if (value instanceof Error) {
|
||||
return value.message;
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
return value;
|
||||
}
|
||||
return 'unknown_error';
|
||||
};
|
||||
|
||||
const loadCities = async () => {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
type Result = Awaited<ReturnType<typeof trpc.nation.getCityOverview.query>>;
|
||||
type City = Result['cities'][number];
|
||||
type Sort = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
const data = ref<Result | null>(null);
|
||||
const error = ref('');
|
||||
const sort = ref<Sort>(10);
|
||||
const options = ['기본', '인구', '인구율', '민심', '농업', '상업', '치안', '수비', '성벽', '시세', '지역', '규모'];
|
||||
const generalNames = (cityId: number) =>
|
||||
data.value?.generals
|
||||
.filter((g) => g.cityId === cityId)
|
||||
.map((g) => g.name)
|
||||
.join(', ') || '-';
|
||||
const cities = computed(() =>
|
||||
[...(data.value?.cities ?? [])].sort((a, b) => {
|
||||
const key = sort.value;
|
||||
if (key === 1) return a.id - b.id;
|
||||
if (key === 2) return b.population - a.population;
|
||||
if (key === 3) return b.population / b.populationMax - a.population / a.populationMax;
|
||||
if (key === 4) return b.trust - a.trust;
|
||||
if (key === 5) return b.agriculture - a.agriculture;
|
||||
if (key === 6) return b.commerce - a.commerce;
|
||||
if (key === 7) return b.security - a.security;
|
||||
if (key === 8) return b.defence - a.defence;
|
||||
if (key === 9) return b.wall - a.wall;
|
||||
if (key === 10) return (b.trade ?? -1) - (a.trade ?? -1);
|
||||
if (key === 11) return a.region - b.region || b.level - a.level;
|
||||
return b.level - a.level || a.region - b.region;
|
||||
})
|
||||
);
|
||||
const officer = (city: City, level: 2 | 3 | 4) => city.officers[level]?.name ?? '-';
|
||||
onMounted(async () => {
|
||||
try {
|
||||
data.value = await trpc.nation.getCityOverview.query();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
} catch (cause) {
|
||||
error.value = cause instanceof Error ? cause.message : '세력 도시를 불러오지 못했습니다.';
|
||||
}
|
||||
};
|
||||
|
||||
const cityNameMap = computed(() => {
|
||||
const map = new Map<number, string>();
|
||||
if (data.value) {
|
||||
for (const city of data.value.cities) {
|
||||
map.set(city.id, city.name);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
const generalMap = computed(() => {
|
||||
const map = new Map<number, GeneralEntry>();
|
||||
for (const general of data.value?.generals ?? []) {
|
||||
map.set(general.id, general);
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
const generalsByCity = computed(() => {
|
||||
const map = new Map<number, GeneralEntry[]>();
|
||||
for (const general of data.value?.generals ?? []) {
|
||||
if (!map.has(general.cityId)) {
|
||||
map.set(general.cityId, []);
|
||||
}
|
||||
map.get(general.cityId)?.push(general);
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
const canAppoint = computed(() => (data.value?.me.officerLevel ?? 0) >= 5);
|
||||
|
||||
const candidatesByLevel = computed(() => {
|
||||
const minStat = data.value?.chiefStatMin ?? 0;
|
||||
const base = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
|
||||
return {
|
||||
4: base.filter((general) => general.stats.strength >= minStat),
|
||||
3: base.filter((general) => general.stats.intelligence >= minStat),
|
||||
2: base,
|
||||
} as Record<OfficerLevel, GeneralEntry[]>;
|
||||
});
|
||||
|
||||
const formatCandidateLabel = (general: GeneralEntry): string => {
|
||||
const cityName = cityNameMap.value.get(general.cityId);
|
||||
const role = general.officerLevel >= 5 ? '수뇌' : general.officerLevel >= 2 ? '관직' : '일반';
|
||||
return `${general.name}${cityName ? ` (${cityName})` : ''} · ${role}`;
|
||||
};
|
||||
|
||||
const ensureDraft = (cityId: number, level: OfficerLevel, defaultValue: number) => {
|
||||
if (!appointmentDraft[cityId]) {
|
||||
appointmentDraft[cityId] = { 2: 0, 3: 0, 4: 0 };
|
||||
}
|
||||
if (appointmentDraft[cityId][level] === undefined) {
|
||||
appointmentDraft[cityId][level] = defaultValue;
|
||||
}
|
||||
};
|
||||
|
||||
const resetDrafts = (cities: CityEntry[]) => {
|
||||
for (const key of Object.keys(appointmentDraft)) {
|
||||
delete appointmentDraft[Number(key)];
|
||||
}
|
||||
for (const city of cities) {
|
||||
appointmentDraft[city.id] = {
|
||||
2: city.officers[2]?.id ?? 0,
|
||||
3: city.officers[3]?.id ?? 0,
|
||||
4: city.officers[4]?.id ?? 0,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => data.value,
|
||||
(value) => {
|
||||
if (value) {
|
||||
resetDrafts(value.cities);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const sortedCities = computed(() => {
|
||||
const list = data.value?.cities ?? [];
|
||||
const keyword = filterText.value.trim();
|
||||
const filtered = keyword
|
||||
? list.filter((city) => city.name.includes(keyword))
|
||||
: list;
|
||||
|
||||
return [...filtered].sort((lhs, rhs) => {
|
||||
switch (sortKey.value) {
|
||||
case 2:
|
||||
return rhs.population - lhs.population;
|
||||
case 3:
|
||||
return rhs.population / rhs.populationMax - lhs.population / lhs.populationMax;
|
||||
case 4:
|
||||
return rhs.trust - lhs.trust;
|
||||
case 5:
|
||||
return rhs.agriculture - lhs.agriculture;
|
||||
case 6:
|
||||
return rhs.commerce - lhs.commerce;
|
||||
case 7:
|
||||
return rhs.security - lhs.security;
|
||||
case 8:
|
||||
return rhs.defence - lhs.defence;
|
||||
case 9:
|
||||
return rhs.wall - lhs.wall;
|
||||
case 10:
|
||||
return (rhs.trade ?? -1) - (lhs.trade ?? -1);
|
||||
case 11: {
|
||||
const regionCmp = lhs.region - rhs.region;
|
||||
if (regionCmp !== 0) {
|
||||
return regionCmp;
|
||||
}
|
||||
return rhs.level - lhs.level;
|
||||
}
|
||||
case 12: {
|
||||
const levelCmp = rhs.level - lhs.level;
|
||||
if (levelCmp !== 0) {
|
||||
return levelCmp;
|
||||
}
|
||||
return lhs.region - rhs.region;
|
||||
}
|
||||
default:
|
||||
return lhs.id - rhs.id;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const formatPercent = (value: number, max: number): string => {
|
||||
if (!max) {
|
||||
return '-';
|
||||
}
|
||||
return `${((value / max) * 100).toFixed(1)}%`;
|
||||
};
|
||||
|
||||
const formatNumber = (value: number): string => new Intl.NumberFormat('ko-KR').format(value);
|
||||
|
||||
const resolveOfficerName = (officer: CityEntry['officers'][OfficerLevel]): string => {
|
||||
if (!officer) {
|
||||
return '-';
|
||||
}
|
||||
if (officer.cityName) {
|
||||
return `${officer.name} (${officer.cityName})`;
|
||||
}
|
||||
return officer.name;
|
||||
};
|
||||
|
||||
const appointOfficer = async (cityId: number, officerLevel: OfficerLevel) => {
|
||||
if (!data.value) {
|
||||
return;
|
||||
}
|
||||
const city = data.value.cities.find((entry) => entry.id === cityId);
|
||||
if (!city) {
|
||||
return;
|
||||
}
|
||||
const destGeneralId = appointmentDraft[cityId]?.[officerLevel] ?? 0;
|
||||
const general = generalMap.value.get(destGeneralId);
|
||||
const officerLabel = officerLabels[officerLevel];
|
||||
const targetName = destGeneralId === 0 ? '공석' : general?.name ?? '알 수 없음';
|
||||
const message =
|
||||
destGeneralId === 0
|
||||
? `${city.name} ${officerLabel} 자리를 비우시겠습니까?`
|
||||
: `${targetName}을(를) ${city.name} ${officerLabel}로 임명하시겠습니까?`;
|
||||
|
||||
if (!window.confirm(message)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await trpc.nation.appoint.mutate({
|
||||
destGeneralId,
|
||||
destCityId: cityId,
|
||||
officerLevel,
|
||||
});
|
||||
await loadCities();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
void loadCities();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="nation-page">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">세력 도시</h1>
|
||||
<p class="page-subtitle">세력 도시 현황과 관직 배치를 확인합니다.</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<RouterLink class="ghost" to="/">메인</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/personnel">인사부</RouterLink>
|
||||
<button class="ghost" @click="loadCities">새로고침</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<PanelCard title="세력 도시 목록" subtitle="도시별 개발 상태 및 관직 현황">
|
||||
<template #actions>
|
||||
<div class="toolbar-actions">
|
||||
<select v-model.number="sortKey" class="select-input">
|
||||
<option v-for="option in sortOptions" :key="option.key" :value="option.key">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
<input v-model="filterText" class="filter-input" placeholder="도시 검색" />
|
||||
<button
|
||||
v-if="canAppoint"
|
||||
class="ghost"
|
||||
:class="{ active: showAppointment }"
|
||||
@click="showAppointment = !showAppointment"
|
||||
>
|
||||
관직 임명 모드
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="list-meta">
|
||||
총 {{ sortedCities.length }}개 도시 · 관직 최소 능력 {{ data?.chiefStatMin ?? '-' }}
|
||||
</div>
|
||||
|
||||
<SkeletonLines v-if="loading" :lines="8" />
|
||||
<section v-else class="city-grid">
|
||||
<article v-for="city in sortedCities" :key="city.id" class="city-card">
|
||||
<div class="city-header">
|
||||
<div>
|
||||
<div class="city-title">
|
||||
{{ city.name }}
|
||||
<span v-if="data?.nation.capitalCityId === city.id" class="capital-tag">수도</span>
|
||||
</div>
|
||||
<div class="city-meta">
|
||||
{{ regionMap[city.region] ?? '미지' }} · {{ cityLevelMap[city.level] ?? '-' }} 규모
|
||||
</div>
|
||||
</div>
|
||||
<div class="city-meta">시세 {{ city.trade === null ? '- ' : city.trade }}%</div>
|
||||
</div>
|
||||
|
||||
<div class="city-stats">
|
||||
<div>
|
||||
주민 {{ city.population }}/{{ city.populationMax }}
|
||||
<span class="muted">({{ formatPercent(city.population, city.populationMax) }})</span>
|
||||
</div>
|
||||
<div>농업 {{ city.agriculture }}/{{ city.agricultureMax }}</div>
|
||||
<div>상업 {{ city.commerce }}/{{ city.commerceMax }}</div>
|
||||
<div>치안 {{ city.security }}/{{ city.securityMax }}</div>
|
||||
<div>수비 {{ city.defence }}/{{ city.defenceMax }}</div>
|
||||
<div>성벽 {{ city.wall }}/{{ city.wallMax }}</div>
|
||||
<div>민심 {{ city.trust }}</div>
|
||||
</div>
|
||||
|
||||
<div class="city-incomes">
|
||||
<div>자금 수입 {{ formatNumber(city.incomes.gold) }}</div>
|
||||
<div>군량 수입 {{ formatNumber(city.incomes.rice) }}</div>
|
||||
<div>둔전 수입 {{ formatNumber(city.incomes.wall) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="city-officers">
|
||||
<div>
|
||||
<span class="officer-label">태수</span>
|
||||
{{ resolveOfficerName(city.officers[4]) }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="officer-label">군사</span>
|
||||
{{ resolveOfficerName(city.officers[3]) }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="officer-label">종사</span>
|
||||
{{ resolveOfficerName(city.officers[2]) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showAppointment && canAppoint" class="city-appoint">
|
||||
<div v-for="level in officerLevels" :key="level" class="appoint-row">
|
||||
<span class="officer-label">{{ officerLabels[level] }}</span>
|
||||
<select
|
||||
v-model.number="appointmentDraft[city.id][level]"
|
||||
class="select-input"
|
||||
@focus="ensureDraft(city.id, level, city.officers[level]?.id ?? 0)"
|
||||
>
|
||||
<option :value="0">공석</option>
|
||||
<option
|
||||
v-for="candidate in candidatesByLevel[level]"
|
||||
:key="candidate.id"
|
||||
:value="candidate.id"
|
||||
>
|
||||
{{ formatCandidateLabel(candidate) }}
|
||||
</option>
|
||||
</select>
|
||||
<button class="ghost" @click="appointOfficer(city.id, level)">임명</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="city-generals">
|
||||
<div class="muted">장수</div>
|
||||
<div class="general-tags">
|
||||
<span
|
||||
v-for="general in generalsByCity.get(city.id) ?? []"
|
||||
:key="general.id"
|
||||
class="general-tag"
|
||||
>
|
||||
<span v-if="general.npcState > 0" class="npc-tag">NPC</span>
|
||||
{{ general.name }}
|
||||
</span>
|
||||
<span v-if="(generalsByCity.get(city.id) ?? []).length === 0" class="muted">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</PanelCard>
|
||||
<main class="nation-cities-page">
|
||||
<table class="legacy-table legacy-bg0 title">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>세 력 도 시<br /><RouterLink to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
정렬순서 :
|
||||
<select v-model.number="sort">
|
||||
<option v-for="(label, index) in options" :key="label" :value="index + 1">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
<button class="legacy-button">정렬하기</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<table v-for="city in cities" :key="city.id" class="legacy-table city legacy-bg2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="10" class="city-title" :style="{ backgroundColor: data?.nation.color }">
|
||||
【 {{ regionMap[city.region] }} | {{ cityLevelMap[city.level] }} 】
|
||||
<span :class="{ capital: city.id === data?.nation.capitalCityId }">{{
|
||||
city.id === data?.nation.capitalCityId ? `[${city.name}]` : city.name
|
||||
}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>주민</th>
|
||||
<td>{{ city.population }}/{{ city.populationMax }}</td>
|
||||
<th>인구율</th>
|
||||
<td>{{ ((city.population / city.populationMax) * 100).toFixed(2) }}%</td>
|
||||
<th>자금 수입</th>
|
||||
<td>{{ city.incomes.gold.toLocaleString() }}</td>
|
||||
<th>군량 수입</th>
|
||||
<td>{{ city.incomes.rice.toLocaleString() }}</td>
|
||||
<th>둔전 수입</th>
|
||||
<td>{{ city.incomes.wall.toLocaleString() }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>농업</th>
|
||||
<td>{{ city.agriculture }}/{{ city.agricultureMax }}</td>
|
||||
<th>상업</th>
|
||||
<td>{{ city.commerce }}/{{ city.commerceMax }}</td>
|
||||
<th>치안</th>
|
||||
<td>{{ city.security }}/{{ city.securityMax }}</td>
|
||||
<th>수비</th>
|
||||
<td>{{ city.defence }}/{{ city.defenceMax }}</td>
|
||||
<th>성벽</th>
|
||||
<td>{{ city.wall }}/{{ city.wallMax }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>민심</th>
|
||||
<td>{{ city.trust.toFixed(1) }}</td>
|
||||
<th>시세</th>
|
||||
<td>{{ city.trade ?? '-' }}%</td>
|
||||
<th>태수</th>
|
||||
<td>{{ officer(city, 4) }}</td>
|
||||
<th>군사</th>
|
||||
<td>{{ officer(city, 3) }}</td>
|
||||
<th>종사</th>
|
||||
<td>{{ officer(city, 2) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>장수</th>
|
||||
<td colspan="9" class="general-list">{{ generalNames(city.id) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="legacy-table legacy-bg0 title footer">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><RouterLink to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nation-page {
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.nation-cities-page {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid rgba(201, 164, 90, 0.4);
|
||||
padding-bottom: 12px;
|
||||
.legacy-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
.legacy-table td,
|
||||
.legacy-table th {
|
||||
border: 1px solid #777;
|
||||
padding: 3px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
.city {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background: rgba(16, 16, 16, 0.6);
|
||||
.city th {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
background-image: url('/image/game/back_green.jpg');
|
||||
}
|
||||
|
||||
.ghost.active {
|
||||
background: rgba(201, 164, 90, 0.2);
|
||||
.city td {
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f5b7b1;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.select-input {
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
background: rgba(16, 16, 16, 0.8);
|
||||
color: rgba(232, 221, 196, 0.9);
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
background: rgba(16, 16, 16, 0.8);
|
||||
color: rgba(232, 221, 196, 0.9);
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.list-meta {
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
}
|
||||
|
||||
.city-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.city-card {
|
||||
border: 1px solid rgba(201, 164, 90, 0.3);
|
||||
padding: 12px;
|
||||
background: rgba(12, 12, 12, 0.75);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.city-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.city-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.city-meta {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
.general-list {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.capital-tag {
|
||||
margin-left: 6px;
|
||||
font-size: 0.65rem;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
color: rgba(232, 221, 196, 0.8);
|
||||
.capital {
|
||||
color: #0ff;
|
||||
}
|
||||
|
||||
.city-stats,
|
||||
.city-incomes,
|
||||
.city-officers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
.footer {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.city-incomes {
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid rgba(201, 164, 90, 0.2);
|
||||
.legacy-button {
|
||||
padding: 1px 6px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.city-officers {
|
||||
border-top: 1px solid rgba(201, 164, 90, 0.2);
|
||||
padding-top: 6px;
|
||||
.error {
|
||||
text-align: center;
|
||||
color: #ff7373;
|
||||
}
|
||||
|
||||
.officer-label {
|
||||
font-weight: 600;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.city-appoint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-top: 1px dashed rgba(201, 164, 90, 0.2);
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.appoint-row {
|
||||
display: grid;
|
||||
grid-template-columns: 60px minmax(0, 1fr) auto;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.city-generals {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.general-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.general-tag {
|
||||
padding: 3px 6px;
|
||||
border: 1px solid rgba(201, 164, 90, 0.3);
|
||||
font-size: 0.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.npc-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.6rem;
|
||||
padding: 1px 3px;
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
color: rgba(232, 221, 196, 0.8);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
@media (max-width: 700px) {
|
||||
.nation-cities-page {
|
||||
width: 1000px;
|
||||
transform-origin: top left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type Result = Awaited<ReturnType<typeof trpc.nation.getNationInfo.query>>;
|
||||
const data = ref<Result | null>(null);
|
||||
const error = ref('');
|
||||
const number = (value: number) => value.toLocaleString('ko-KR');
|
||||
const diff = (value: number) => `${value > 0 ? '+' : ''}${number(value)}`;
|
||||
const nationLevel = computed(
|
||||
() => ['두목', '영주', '군벌', '주자사', '주목', '공', '왕', '황제'][data.value?.nation.level ?? 0] ?? '-'
|
||||
);
|
||||
onMounted(async () => {
|
||||
try {
|
||||
data.value = await trpc.nation.getNationInfo.query();
|
||||
} catch (cause) {
|
||||
error.value = cause instanceof Error ? cause.message : '세력 정보를 불러오지 못했습니다.';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="legacy-info-page">
|
||||
<table class="legacy-table title-table legacy-bg0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>세 력 정 보<br /><RouterLink to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<table v-if="data" class="legacy-table info-table legacy-bg2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="8" class="nation-title" :style="{ backgroundColor: data.nation.color }">
|
||||
【{{ data.nation.name }}】
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>총주민</th>
|
||||
<td>{{ number(data.population.current) }}/{{ number(data.population.max) }}</td>
|
||||
<th>총병사</th>
|
||||
<td>{{ number(data.crew.current) }}/{{ number(data.crew.max) }}</td>
|
||||
<th>국 력</th>
|
||||
<td colspan="3">{{ data.nation.power }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>국 고</th>
|
||||
<td>{{ number(data.nation.gold) }}</td>
|
||||
<th>병 량</th>
|
||||
<td>{{ number(data.nation.rice) }}</td>
|
||||
<th>세 율</th>
|
||||
<td colspan="3">{{ data.nation.rate }} %</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>세금/단기</th>
|
||||
<td>+{{ number(data.income.goldCity) }} / +{{ number(data.income.goldWar) }}</td>
|
||||
<th>세곡/둔전</th>
|
||||
<td>+{{ number(data.income.riceCity) }} / +{{ number(data.income.riceWall) }}</td>
|
||||
<th>지급률</th>
|
||||
<td colspan="3">{{ data.nation.bill }} %</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>수입/지출</th>
|
||||
<td>+{{ number(data.income.goldTotal) }} / -{{ number(data.income.outcome) }}</td>
|
||||
<th>수입/지출</th>
|
||||
<td>+{{ number(data.income.riceTotal) }} / -{{ number(data.income.outcome) }}</td>
|
||||
<th>속 령</th>
|
||||
<td>{{ data.cities.length }}</td>
|
||||
<th>장 수</th>
|
||||
<td>{{ data.nation.generalCount }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>국고 예산</th>
|
||||
<td>{{ number(data.budget.gold) }} ({{ diff(data.income.goldTotal - data.income.outcome) }})</td>
|
||||
<th>병량 예산</th>
|
||||
<td>{{ number(data.budget.rice) }} ({{ diff(data.income.riceTotal - data.income.outcome) }})</td>
|
||||
<th>기술력</th>
|
||||
<td>{{ number(data.nation.tech) }}</td>
|
||||
<th>작 위</th>
|
||||
<td>{{ nationLevel }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>속령일람 :</th>
|
||||
<td colspan="7">
|
||||
<template v-for="(city, index) in data.cities" :key="city.id"
|
||||
><span v-if="city.capital" class="capital">{{ city.name }}</span
|
||||
><span v-else>{{ city.name }}</span
|
||||
><span v-if="index + 1 < data.cities.length">, </span></template
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>국가열전</th>
|
||||
<td colspan="7" class="history legacy-bg0">
|
||||
<div v-for="entry in data.history" :key="entry.id">
|
||||
{{ entry.year }}년 {{ entry.month }}월: {{ entry.text }}
|
||||
</div>
|
||||
<span v-if="!data.history.length">-</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="legacy-table footer-table legacy-bg0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><RouterLink to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.legacy-info-page {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
.legacy-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.legacy-table td,
|
||||
.legacy-table th {
|
||||
border: 1px solid #777;
|
||||
padding: 4px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.title-table,
|
||||
.footer-table {
|
||||
text-align: center;
|
||||
}
|
||||
.title-table {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.footer-table {
|
||||
margin-top: 14px;
|
||||
}
|
||||
.info-table th {
|
||||
width: 98px;
|
||||
text-align: center;
|
||||
background-image: url('/image/game/back_green.jpg');
|
||||
}
|
||||
.info-table td {
|
||||
text-align: center;
|
||||
}
|
||||
.info-table td:nth-child(2),
|
||||
.info-table td:nth-child(4) {
|
||||
width: 198px;
|
||||
}
|
||||
.nation-title {
|
||||
text-align: center;
|
||||
}
|
||||
.capital {
|
||||
color: #0ff;
|
||||
}
|
||||
.history {
|
||||
text-align: left !important;
|
||||
}
|
||||
.error {
|
||||
color: #ff7373;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.legacy-info-page {
|
||||
width: 500px;
|
||||
}
|
||||
.info-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
.info-table td,
|
||||
.info-table th {
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user