feat: add NationGeneralsView and NationPersonnelView components for managing generals and personnel in the nation
This commit is contained in:
@@ -3,6 +3,9 @@ import MainView from '../views/MainView.vue';
|
||||
import PublicView from '../views/PublicView.vue';
|
||||
import LoginView from '../views/LoginView.vue';
|
||||
import JoinView from '../views/JoinView.vue';
|
||||
import NationCitiesView from '../views/NationCitiesView.vue';
|
||||
import NationGeneralsView from '../views/NationGeneralsView.vue';
|
||||
import NationPersonnelView from '../views/NationPersonnelView.vue';
|
||||
import NotFoundView from '../views/NotFoundView.vue';
|
||||
import { useSessionStore } from '../stores/session';
|
||||
|
||||
@@ -30,6 +33,33 @@ const routes = [
|
||||
requiresNoGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/nation/cities',
|
||||
name: 'nation-cities',
|
||||
component: NationCitiesView,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
requiresGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/nation/generals',
|
||||
name: 'nation-generals',
|
||||
component: NationGeneralsView,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
requiresGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/nation/personnel',
|
||||
name: 'nation-personnel',
|
||||
component: NationPersonnelView,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
requiresGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
export const officerLevelMapDefault: Record<number, string> = {
|
||||
12: '군주',
|
||||
11: '참모',
|
||||
10: '제1장군',
|
||||
9: '제1모사',
|
||||
8: '제2장군',
|
||||
7: '제2모사',
|
||||
6: '제3장군',
|
||||
5: '제3모사',
|
||||
4: '태수',
|
||||
3: '군사',
|
||||
2: '종사',
|
||||
1: '일반',
|
||||
0: '재야',
|
||||
};
|
||||
|
||||
export const officerLevelMapByNationLevel: Record<number, Record<number, string>> = {
|
||||
7: {
|
||||
12: '황제',
|
||||
11: '승상',
|
||||
10: '표기장군',
|
||||
9: '사공',
|
||||
8: '거기장군',
|
||||
7: '태위',
|
||||
6: '위장군',
|
||||
5: '사도',
|
||||
},
|
||||
6: {
|
||||
12: '왕',
|
||||
11: '광록훈',
|
||||
10: '좌장군',
|
||||
9: '상서령',
|
||||
8: '우장군',
|
||||
7: '중서령',
|
||||
6: '전장군',
|
||||
5: '비서령',
|
||||
},
|
||||
5: {
|
||||
12: '공',
|
||||
11: '광록대부',
|
||||
10: '안국장군',
|
||||
9: '집금오',
|
||||
8: '파로장군',
|
||||
7: '소부',
|
||||
},
|
||||
4: {
|
||||
12: '주목',
|
||||
11: '태사령',
|
||||
10: '아문장군',
|
||||
9: '낭중',
|
||||
8: '호군',
|
||||
7: '종사중랑',
|
||||
},
|
||||
3: {
|
||||
12: '주자사',
|
||||
11: '주부',
|
||||
10: '편장군',
|
||||
9: '간의대부',
|
||||
},
|
||||
2: {
|
||||
12: '군벌',
|
||||
11: '참모',
|
||||
10: '비장군',
|
||||
9: '부참모',
|
||||
},
|
||||
1: {
|
||||
12: '영주',
|
||||
11: '참모',
|
||||
},
|
||||
0: {
|
||||
12: '두목',
|
||||
11: '부두목',
|
||||
},
|
||||
};
|
||||
|
||||
export const formatOfficerLevelText = (officerLevel: number, nationLevel?: number): string => {
|
||||
if (officerLevel < 5) {
|
||||
return officerLevelMapDefault[officerLevel] ?? '???';
|
||||
}
|
||||
|
||||
const nationMap =
|
||||
nationLevel === undefined
|
||||
? officerLevelMapDefault
|
||||
: (officerLevelMapByNationLevel[nationLevel] ?? officerLevelMapDefault);
|
||||
|
||||
return nationMap[officerLevel] ?? (officerLevelMapDefault[officerLevel] ?? '???');
|
||||
};
|
||||
|
||||
export const regionMap: Record<number, string> = {
|
||||
1: '하북',
|
||||
2: '중원',
|
||||
3: '서북',
|
||||
4: '서촉',
|
||||
5: '남중',
|
||||
6: '초',
|
||||
7: '오월',
|
||||
8: '동이',
|
||||
};
|
||||
|
||||
export const cityLevelMap: Record<number, string> = {
|
||||
1: '수',
|
||||
2: '진',
|
||||
3: '관',
|
||||
4: '이',
|
||||
5: '소',
|
||||
6: '중',
|
||||
7: '대',
|
||||
8: '특',
|
||||
};
|
||||
|
||||
export const getNationChiefLevel = (nationLevel: number): number => {
|
||||
const map: Record<number, number> = {
|
||||
7: 5,
|
||||
6: 5,
|
||||
5: 7,
|
||||
4: 7,
|
||||
3: 9,
|
||||
2: 9,
|
||||
1: 11,
|
||||
0: 11,
|
||||
};
|
||||
return map[nationLevel] ?? 11;
|
||||
};
|
||||
@@ -91,6 +91,9 @@ watch(
|
||||
<p class="page-subtitle">{{ statusLine }}</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<RouterLink class="ghost" to="/nation/cities">세력 도시</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/personnel">인사부</RouterLink>
|
||||
<button
|
||||
class="toggle"
|
||||
:class="{ active: realtimeEnabled }"
|
||||
|
||||
@@ -0,0 +1,582 @@
|
||||
<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 { cityLevelMap, regionMap } from '../utils/nationFormat';
|
||||
|
||||
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;
|
||||
|
||||
try {
|
||||
data.value = await trpc.nation.getCityOverview.query();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
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 - lhs.trade;
|
||||
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
|
||||
class="ghost"
|
||||
:class="{ active: showAppointment }"
|
||||
@click="showAppointment = !showAppointment"
|
||||
v-if="canAppoint"
|
||||
>
|
||||
관직 임명 모드
|
||||
</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 }}%</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 class="appoint-row" v-for="level in officerLevels" :key="level">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nation-page {
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.ghost.active {
|
||||
background: rgba(201, 164, 90, 0.2);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.city-meta {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.city-stats,
|
||||
.city-incomes,
|
||||
.city-officers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.city-incomes {
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid rgba(201, 164, 90, 0.2);
|
||||
}
|
||||
|
||||
.city-officers {
|
||||
border-top: 1px solid rgba(201, 164, 90, 0.2);
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,349 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import PanelCard from '../components/ui/PanelCard.vue';
|
||||
import SkeletonLines from '../components/ui/SkeletonLines.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
import { formatOfficerLevelText } from '../utils/nationFormat';
|
||||
|
||||
type GeneralListResponse = Awaited<ReturnType<typeof trpc.nation.getGeneralList.query>>;
|
||||
|
||||
type GeneralEntry = GeneralListResponse['generals'][number];
|
||||
|
||||
type SortKey =
|
||||
| 1
|
||||
| 2
|
||||
| 3
|
||||
| 4
|
||||
| 5
|
||||
| 6
|
||||
| 7
|
||||
| 8
|
||||
| 9
|
||||
| 10
|
||||
| 11
|
||||
| 12
|
||||
| 13
|
||||
| 14
|
||||
| 15;
|
||||
|
||||
const sortOptions: Array<{ key: SortKey; 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: '내특' },
|
||||
{ key: 13, label: '전특' },
|
||||
{ key: 14, label: '사관' },
|
||||
{ key: 15, label: 'NPC' },
|
||||
];
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const data = ref<GeneralListResponse | null>(null);
|
||||
const sortKey = ref<SortKey>(1);
|
||||
const filterText = ref('');
|
||||
|
||||
const resolveErrorMessage = (value: unknown): string => {
|
||||
if (value instanceof Error) {
|
||||
return value.message;
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
return value;
|
||||
}
|
||||
return 'unknown_error';
|
||||
};
|
||||
|
||||
const loadGenerals = async () => {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
data.value = await trpc.nation.getGeneralList.query();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const sortGenerals = (list: GeneralEntry[]): GeneralEntry[] => {
|
||||
const key = sortKey.value;
|
||||
const sorted = [...list].sort((lhs, rhs) => {
|
||||
switch (key) {
|
||||
case 1:
|
||||
return rhs.officerLevel - lhs.officerLevel;
|
||||
case 2:
|
||||
return rhs.dedication - lhs.dedication;
|
||||
case 3:
|
||||
return rhs.experience - lhs.experience;
|
||||
case 4:
|
||||
return rhs.stats.leadership - lhs.stats.leadership;
|
||||
case 5:
|
||||
return rhs.stats.strength - lhs.stats.strength;
|
||||
case 6:
|
||||
return rhs.stats.intelligence - lhs.stats.intelligence;
|
||||
case 7:
|
||||
return rhs.gold - lhs.gold;
|
||||
case 8:
|
||||
return rhs.rice - lhs.rice;
|
||||
case 9:
|
||||
return rhs.crew - lhs.crew;
|
||||
case 10:
|
||||
return 0;
|
||||
case 11:
|
||||
return (lhs.personality?.name ?? '').localeCompare(rhs.personality?.name ?? '');
|
||||
case 12:
|
||||
return (lhs.specialDomestic?.name ?? '').localeCompare(rhs.specialDomestic?.name ?? '');
|
||||
case 13:
|
||||
return (lhs.specialWar?.name ?? '').localeCompare(rhs.specialWar?.name ?? '');
|
||||
case 14:
|
||||
return rhs.belong - lhs.belong;
|
||||
case 15:
|
||||
return rhs.npcState - lhs.npcState;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
if (key === 11 || key === 12 || key === 13) {
|
||||
return sorted;
|
||||
}
|
||||
|
||||
return sorted;
|
||||
};
|
||||
|
||||
const filteredGenerals = computed(() => {
|
||||
const list = data.value?.generals ?? [];
|
||||
const keyword = filterText.value.trim().toLowerCase();
|
||||
const filtered = keyword
|
||||
? list.filter((general) => {
|
||||
return (
|
||||
general.name.toLowerCase().includes(keyword) ||
|
||||
(general.cityName ?? '').toLowerCase().includes(keyword) ||
|
||||
(general.officerCityName ?? '').toLowerCase().includes(keyword)
|
||||
);
|
||||
})
|
||||
: list;
|
||||
|
||||
return sortGenerals(filtered);
|
||||
});
|
||||
|
||||
const nationLevel = computed(() => data.value?.nation.level ?? 0);
|
||||
|
||||
const formatSpecial = (general: GeneralEntry): string => {
|
||||
const domestic = general.specialDomestic?.name ?? '-';
|
||||
const war = general.specialWar?.name ?? '-';
|
||||
return `${domestic} / ${war}`;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
void loadGenerals();
|
||||
});
|
||||
</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/cities">세력 도시</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/personnel">인사부</RouterLink>
|
||||
<button class="ghost" @click="loadGenerals">새로고침</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="이름/도시 검색" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="list-meta">총 {{ filteredGenerals.length }}명</div>
|
||||
|
||||
<SkeletonLines v-if="loading" :lines="6" />
|
||||
<div v-else class="table-scroll">
|
||||
<table class="nation-table">
|
||||
<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>
|
||||
<th>사관</th>
|
||||
<th>현재 도시</th>
|
||||
<th>관직 도시</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="general in filteredGenerals" :key="general.id">
|
||||
<td>
|
||||
<span v-if="general.npcState > 0" class="npc-tag">NPC</span>
|
||||
{{ general.name }}
|
||||
</td>
|
||||
<td>{{ formatOfficerLevelText(general.officerLevel, nationLevel) }}</td>
|
||||
<td>{{ general.dedication }}</td>
|
||||
<td>{{ general.experience }}</td>
|
||||
<td>{{ general.stats.leadership }}</td>
|
||||
<td>{{ general.stats.strength }}</td>
|
||||
<td>{{ general.stats.intelligence }}</td>
|
||||
<td>{{ general.gold }}</td>
|
||||
<td>{{ general.rice }}</td>
|
||||
<td>{{ general.crew }}</td>
|
||||
<td>{{ general.personality?.name ?? '-' }}</td>
|
||||
<td>{{ formatSpecial(general) }}</td>
|
||||
<td>{{ general.belong > 0 ? general.belong : '-' }}</td>
|
||||
<td>{{ general.cityName ?? '-' }}</td>
|
||||
<td>{{ general.officerCityName ?? '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</PanelCard>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nation-page {
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f5b7b1;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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: 8px;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nation-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.nation-table th,
|
||||
.nation-table td {
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid rgba(201, 164, 90, 0.2);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nation-table thead th {
|
||||
font-size: 0.7rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.npc-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.6rem;
|
||||
padding: 2px 4px;
|
||||
margin-right: 6px;
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
color: rgba(232, 221, 196, 0.8);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,627 @@
|
||||
<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 {
|
||||
cityLevelMap,
|
||||
formatOfficerLevelText,
|
||||
getNationChiefLevel,
|
||||
regionMap,
|
||||
} from '../utils/nationFormat';
|
||||
|
||||
type PersonnelResponse = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
|
||||
|
||||
type GeneralEntry = PersonnelResponse['generals'][number];
|
||||
|
||||
type OfficerLevel = 2 | 3 | 4;
|
||||
|
||||
const officerLabels: Record<OfficerLevel, string> = {
|
||||
4: '태수',
|
||||
3: '군사',
|
||||
2: '종사',
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const data = ref<PersonnelResponse | null>(null);
|
||||
|
||||
const chiefAppointmentDraft = reactive<Record<number, number>>({});
|
||||
const selectedCityId = ref<number>(0);
|
||||
const selectedOfficerLevel = ref<OfficerLevel>(4);
|
||||
const selectedGeneralId = ref<number>(0);
|
||||
const kickTargetId = ref<number>(0);
|
||||
const ambassadorSelection = ref<number[]>([]);
|
||||
const auditorSelection = ref<number[]>([]);
|
||||
|
||||
const resolveErrorMessage = (value: unknown): string => {
|
||||
if (value instanceof Error) {
|
||||
return value.message;
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
return value;
|
||||
}
|
||||
return 'unknown_error';
|
||||
};
|
||||
|
||||
const loadPersonnel = async () => {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
data.value = await trpc.nation.getPersonnelInfo.query();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const nationLevel = computed(() => data.value?.nation.level ?? 0);
|
||||
const canAssign = computed(() => (data.value?.me.officerLevel ?? 0) >= 5);
|
||||
const isLeader = computed(() => (data.value?.me.officerLevel ?? 0) >= 12);
|
||||
|
||||
const chiefLevels = computed(() => {
|
||||
if (!data.value) {
|
||||
return [] as number[];
|
||||
}
|
||||
const minLevel = getNationChiefLevel(data.value.nation.level);
|
||||
const levels: number[] = [];
|
||||
for (let level = 12; level >= minLevel; level -= 1) {
|
||||
levels.push(level);
|
||||
}
|
||||
return levels;
|
||||
});
|
||||
|
||||
const cityNameMap = computed(() => {
|
||||
const map = new Map<number, string>();
|
||||
for (const city of data.value?.cityAssignments ?? []) {
|
||||
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 chiefAssignments = computed(() => data.value?.chiefAssignments ?? {});
|
||||
|
||||
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 chiefCandidates = (level: number): GeneralEntry[] => {
|
||||
const minStat = data.value?.chiefStatMin ?? 0;
|
||||
const list = data.value?.generals ?? [];
|
||||
if (level === 11) {
|
||||
return list;
|
||||
}
|
||||
if (level % 2 === 0) {
|
||||
return list.filter((general) => general.stats.strength >= minStat);
|
||||
}
|
||||
return list.filter((general) => general.stats.intelligence >= minStat);
|
||||
};
|
||||
|
||||
const cityCandidatesByLevel = 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 currentCityOfficer = computed(() => {
|
||||
const city = data.value?.cityAssignments.find((entry) => entry.id === selectedCityId.value);
|
||||
if (!city) {
|
||||
return null;
|
||||
}
|
||||
return city.officers[selectedOfficerLevel.value] ?? null;
|
||||
});
|
||||
|
||||
const initializeDrafts = () => {
|
||||
if (!data.value) {
|
||||
return;
|
||||
}
|
||||
for (const key of Object.keys(chiefAppointmentDraft)) {
|
||||
delete chiefAppointmentDraft[Number(key)];
|
||||
}
|
||||
for (const level of chiefLevels.value) {
|
||||
chiefAppointmentDraft[level] = chiefAssignments.value[level]?.id ?? 0;
|
||||
}
|
||||
|
||||
selectedCityId.value = data.value.cityAssignments[0]?.id ?? 0;
|
||||
selectedOfficerLevel.value = 4;
|
||||
selectedGeneralId.value = currentCityOfficer.value?.id ?? 0;
|
||||
kickTargetId.value = 0;
|
||||
|
||||
ambassadorSelection.value = data.value.permissionCandidates.ambassadors
|
||||
.filter((candidate) => candidate.permission === 'ambassador')
|
||||
.map((candidate) => candidate.id);
|
||||
auditorSelection.value = data.value.permissionCandidates.auditors
|
||||
.filter((candidate) => candidate.permission === 'auditor')
|
||||
.map((candidate) => candidate.id);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => data.value,
|
||||
(value) => {
|
||||
if (value) {
|
||||
initializeDrafts();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch([selectedCityId, selectedOfficerLevel], () => {
|
||||
selectedGeneralId.value = currentCityOfficer.value?.id ?? 0;
|
||||
});
|
||||
|
||||
const appointChief = async (level: number) => {
|
||||
if (!data.value) {
|
||||
return;
|
||||
}
|
||||
const generalId = chiefAppointmentDraft[level] ?? 0;
|
||||
const general = generalMap.value.get(generalId);
|
||||
const title = formatOfficerLevelText(level, nationLevel.value);
|
||||
const message =
|
||||
generalId === 0
|
||||
? `${title} 자리를 비우시겠습니까?`
|
||||
: `${general?.name ?? '선택 장수'}을(를) ${title}로 임명하시겠습니까?`;
|
||||
|
||||
if (!window.confirm(message)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await trpc.nation.appoint.mutate({
|
||||
destGeneralId: generalId,
|
||||
destCityId: 0,
|
||||
officerLevel: level,
|
||||
});
|
||||
await loadPersonnel();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const appointCityOfficer = async () => {
|
||||
if (!data.value || !selectedCityId.value) {
|
||||
return;
|
||||
}
|
||||
const city = data.value.cityAssignments.find((entry) => entry.id === selectedCityId.value);
|
||||
const general = generalMap.value.get(selectedGeneralId.value);
|
||||
const officerLabel = officerLabels[selectedOfficerLevel.value];
|
||||
const message =
|
||||
selectedGeneralId.value === 0
|
||||
? `${city?.name ?? ''} ${officerLabel} 자리를 비우시겠습니까?`
|
||||
: `${general?.name ?? '선택 장수'}을(를) ${city?.name ?? ''} ${officerLabel}로 임명하시겠습니까?`;
|
||||
|
||||
if (!window.confirm(message)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await trpc.nation.appoint.mutate({
|
||||
destGeneralId: selectedGeneralId.value,
|
||||
destCityId: selectedCityId.value,
|
||||
officerLevel: selectedOfficerLevel.value,
|
||||
});
|
||||
await loadPersonnel();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const kickGeneral = async () => {
|
||||
const general = generalMap.value.get(kickTargetId.value);
|
||||
if (!general) {
|
||||
return;
|
||||
}
|
||||
if (!window.confirm(`${general.name}을(를) 추방하시겠습니까?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await trpc.nation.kick.mutate({ destGeneralId: general.id });
|
||||
await loadPersonnel();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const enforceLimit = (list: number[], id: number) => {
|
||||
if (list.length <= 2) {
|
||||
return;
|
||||
}
|
||||
const idx = list.indexOf(id);
|
||||
if (idx >= 0) {
|
||||
list.splice(idx, 1);
|
||||
}
|
||||
alert('최대 2명까지 설정 가능합니다.');
|
||||
};
|
||||
|
||||
const enforceAmbassadorLimit = (id: number) => {
|
||||
enforceLimit(ambassadorSelection.value, id);
|
||||
};
|
||||
|
||||
const enforceAuditorLimit = (id: number) => {
|
||||
enforceLimit(auditorSelection.value, id);
|
||||
};
|
||||
|
||||
const changePermissions = async (isAmbassador: boolean) => {
|
||||
const selection = isAmbassador ? ambassadorSelection.value : auditorSelection.value;
|
||||
if (!window.confirm('권한을 변경하시겠습니까?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await trpc.nation.changePermission.mutate({
|
||||
isAmbassador,
|
||||
targetGeneralIds: selection,
|
||||
});
|
||||
await loadPersonnel();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const kickCandidates = computed(() => {
|
||||
const list = data.value?.generals ?? [];
|
||||
const myId = data.value?.me.id ?? 0;
|
||||
return list.filter((general) => general.id !== myId);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
void loadPersonnel();
|
||||
});
|
||||
</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/cities">세력 도시</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
|
||||
<button class="ghost" @click="loadPersonnel">새로고침</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<SkeletonLines v-if="loading" :lines="6" />
|
||||
|
||||
<section v-else class="panel-grid">
|
||||
<PanelCard title="수뇌 현황" subtitle="현재 수뇌 배치">
|
||||
<div class="chief-grid">
|
||||
<div v-for="level in chiefLevels" :key="level" class="chief-item">
|
||||
<div class="chief-title">{{ formatOfficerLevelText(level, nationLevel) }}</div>
|
||||
<div class="chief-name">
|
||||
{{ chiefAssignments[level]?.name ?? '-' }}
|
||||
</div>
|
||||
<div class="chief-meta" v-if="chiefAssignments[level]">
|
||||
{{ chiefAssignments[level]?.officerCityName ?? chiefAssignments[level]?.cityName ?? '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="수뇌부 임명" subtitle="수뇌 관직 임명 및 해임" v-if="canAssign">
|
||||
<div class="chief-appoint">
|
||||
<div v-for="level in chiefLevels" :key="level" class="appoint-row">
|
||||
<div class="appoint-label">{{ formatOfficerLevelText(level, nationLevel) }}</div>
|
||||
<select v-model.number="chiefAppointmentDraft[level]" class="select-input">
|
||||
<option :value="0">공석</option>
|
||||
<option v-for="candidate in chiefCandidates(level)" :key="candidate.id" :value="candidate.id">
|
||||
{{ formatCandidateLabel(candidate) }}
|
||||
</option>
|
||||
</select>
|
||||
<button class="ghost" @click="appointChief(level)">임명</button>
|
||||
</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="도시 관직 빠른 임명" subtitle="도시별 관직을 신속하게 배치합니다" v-if="canAssign">
|
||||
<div class="fast-appoint">
|
||||
<div class="appoint-row">
|
||||
<div class="appoint-label">도시</div>
|
||||
<select v-model.number="selectedCityId" class="select-input">
|
||||
<option v-for="city in data?.cityAssignments ?? []" :key="city.id" :value="city.id">
|
||||
{{ regionMap[city.region] ?? '-' }} · {{ cityLevelMap[city.level] ?? '-' }} {{ city.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="appoint-row">
|
||||
<div class="appoint-label">관직</div>
|
||||
<select v-model.number="selectedOfficerLevel" class="select-input">
|
||||
<option :value="4">태수</option>
|
||||
<option :value="3">군사</option>
|
||||
<option :value="2">종사</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="appoint-row">
|
||||
<div class="appoint-label">장수</div>
|
||||
<select v-model.number="selectedGeneralId" class="select-input">
|
||||
<option :value="0">공석</option>
|
||||
<option
|
||||
v-for="candidate in cityCandidatesByLevel[selectedOfficerLevel]"
|
||||
:key="candidate.id"
|
||||
:value="candidate.id"
|
||||
>
|
||||
{{ formatCandidateLabel(candidate) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="current-officer">
|
||||
현재 임명: {{ currentCityOfficer?.name ?? '-' }}
|
||||
</div>
|
||||
<button class="ghost" @click="appointCityOfficer">임명</button>
|
||||
</div>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="도시 관직 현황" subtitle="도시별 관직 배치">
|
||||
<div class="table-scroll">
|
||||
<table class="nation-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>도시</th>
|
||||
<th>태수</th>
|
||||
<th>군사</th>
|
||||
<th>종사</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="city in data?.cityAssignments ?? []" :key="city.id">
|
||||
<td>{{ city.name }}</td>
|
||||
<td>{{ city.officers[4]?.name ?? '-' }}</td>
|
||||
<td>{{ city.officers[3]?.name ?? '-' }}</td>
|
||||
<td>{{ city.officers[2]?.name ?? '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="외교 권한" subtitle="외교권자/조언자 임명" v-if="isLeader">
|
||||
<div class="permission-grid">
|
||||
<div>
|
||||
<div class="permission-title">외교권자 (최대 2명)</div>
|
||||
<div class="permission-list">
|
||||
<label
|
||||
v-for="candidate in data?.permissionCandidates.ambassadors ?? []"
|
||||
:key="candidate.id"
|
||||
class="permission-item"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="candidate.id"
|
||||
v-model="ambassadorSelection"
|
||||
@change="enforceAmbassadorLimit(candidate.id)"
|
||||
/>
|
||||
{{ candidate.name }}
|
||||
</label>
|
||||
</div>
|
||||
<button class="ghost" @click="changePermissions(true)">변경</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="permission-title">조언자 (최대 2명)</div>
|
||||
<div class="permission-list">
|
||||
<label
|
||||
v-for="candidate in data?.permissionCandidates.auditors ?? []"
|
||||
:key="candidate.id"
|
||||
class="permission-item"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="candidate.id"
|
||||
v-model="auditorSelection"
|
||||
@change="enforceAuditorLimit(candidate.id)"
|
||||
/>
|
||||
{{ candidate.name }}
|
||||
</label>
|
||||
</div>
|
||||
<button class="ghost" @click="changePermissions(false)">변경</button>
|
||||
</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="추방" subtitle="국가에서 장수를 추방합니다" v-if="canAssign">
|
||||
<div class="kick-panel">
|
||||
<select v-model.number="kickTargetId" class="select-input">
|
||||
<option :value="0">장수 선택</option>
|
||||
<option v-for="general in kickCandidates" :key="general.id" :value="general.id">
|
||||
{{ general.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button class="ghost" @click="kickGeneral" :disabled="kickTargetId === 0">추방</button>
|
||||
</div>
|
||||
</PanelCard>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nation-page {
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f5b7b1;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.panel-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.chief-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chief-item {
|
||||
border: 1px solid rgba(201, 164, 90, 0.2);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.chief-title {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
}
|
||||
|
||||
.chief-name {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chief-meta {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
}
|
||||
|
||||
.chief-appoint,
|
||||
.fast-appoint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.appoint-row {
|
||||
display: grid;
|
||||
grid-template-columns: 120px minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.appoint-label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.current-officer {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nation-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.nation-table th,
|
||||
.nation-table td {
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid rgba(201, 164, 90, 0.2);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nation-table thead th {
|
||||
font-size: 0.7rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.permission-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.permission-title {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.permission-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.permission-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.kick-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user