merge: 최신 main을 유산 유니크 경매 작업에 반영
This commit is contained in:
@@ -0,0 +1,528 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
|
||||
|
||||
type SelectionMetric = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
type SelectionItem = {
|
||||
id: number;
|
||||
name: string;
|
||||
subtitle: string;
|
||||
searchText: string;
|
||||
accent?: 'current' | 'assigned' | 'available';
|
||||
iconBackground?: string;
|
||||
badges?: string[];
|
||||
stats?: SelectionMetric[];
|
||||
details?: SelectionMetric[];
|
||||
};
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
open: boolean;
|
||||
title: string;
|
||||
description: string;
|
||||
items: SelectionItem[];
|
||||
selectedId: number;
|
||||
searchPlaceholder?: string;
|
||||
vacancyLabel?: string | null;
|
||||
}>(),
|
||||
{
|
||||
searchPlaceholder: '이름이나 조건으로 검색',
|
||||
vacancyLabel: null,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
cancel: [];
|
||||
select: [id: number];
|
||||
}>();
|
||||
|
||||
const query = ref('');
|
||||
const searchInput = ref<HTMLInputElement | null>(null);
|
||||
const dialogPanel = ref<HTMLElement | null>(null);
|
||||
let returnFocus: HTMLElement | null = null;
|
||||
let previousBodyOverflow = '';
|
||||
|
||||
const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase('ko-KR'));
|
||||
const filteredItems = computed(() => {
|
||||
const keyword = normalizedQuery.value;
|
||||
if (!keyword) return props.items;
|
||||
return props.items.filter((item) => item.searchText.toLocaleLowerCase('ko-KR').includes(keyword));
|
||||
});
|
||||
|
||||
const close = (): void => emit('cancel');
|
||||
const select = (id: number): void => emit('select', id);
|
||||
|
||||
const restorePage = (): void => {
|
||||
document.body.style.overflow = previousBodyOverflow;
|
||||
const target = returnFocus;
|
||||
returnFocus = null;
|
||||
if (target?.isConnected) target.focus();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
async (open, previous) => {
|
||||
if (open && !previous) {
|
||||
query.value = '';
|
||||
returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
||||
previousBodyOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
await nextTick();
|
||||
searchInput.value?.focus();
|
||||
return;
|
||||
}
|
||||
if (!open && previous) restorePage();
|
||||
},
|
||||
{ flush: 'post' }
|
||||
);
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent): void => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
close();
|
||||
return;
|
||||
}
|
||||
if (event.key !== 'Tab' || !dialogPanel.value) return;
|
||||
const focusable = [
|
||||
...dialogPanel.value.querySelectorAll<HTMLElement>(
|
||||
'input:not(:disabled), button:not(:disabled), [tabindex="0"]'
|
||||
),
|
||||
];
|
||||
if (focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable.at(-1);
|
||||
if (event.shiftKey && document.activeElement === first) {
|
||||
event.preventDefault();
|
||||
last?.focus();
|
||||
} else if (!event.shiftKey && document.activeElement === last) {
|
||||
event.preventDefault();
|
||||
first?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (props.open) restorePage();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="personnel-picker">
|
||||
<div v-if="open" class="personnel-picker-backdrop" @click.self="close">
|
||||
<section
|
||||
ref="dialogPanel"
|
||||
class="personnel-picker"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="personnel-picker-title"
|
||||
aria-describedby="personnel-picker-description"
|
||||
data-testid="personnel-selection-dialog"
|
||||
@keydown="handleKeydown"
|
||||
>
|
||||
<header class="personnel-picker-header">
|
||||
<div>
|
||||
<p class="personnel-picker-eyebrow">인사부 선택 도우미</p>
|
||||
<h2 id="personnel-picker-title">{{ title }}</h2>
|
||||
<p id="personnel-picker-description">{{ description }}</p>
|
||||
</div>
|
||||
<button type="button" class="personnel-picker-close" aria-label="선택 창 닫기" @click="close">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<label class="personnel-picker-search">
|
||||
<span class="sr-only">{{ searchPlaceholder }}</span>
|
||||
<span aria-hidden="true">⌕</span>
|
||||
<input ref="searchInput" v-model="query" type="search" :placeholder="searchPlaceholder" />
|
||||
</label>
|
||||
|
||||
<div class="personnel-picker-results" aria-label="선택 후보">
|
||||
<button
|
||||
v-if="vacancyLabel"
|
||||
type="button"
|
||||
class="personnel-picker-card vacancy-card"
|
||||
:class="{ selected: selectedId === 0 }"
|
||||
:aria-pressed="selectedId === 0"
|
||||
@click="select(0)"
|
||||
>
|
||||
<span class="vacancy-icon" aria-hidden="true">＋</span>
|
||||
<span>
|
||||
<strong>{{ vacancyLabel }}</strong>
|
||||
<small>현재 관직을 비우려면 선택하세요.</small>
|
||||
</span>
|
||||
<span v-if="selectedId === 0" class="selection-check">선택됨</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-for="item in filteredItems"
|
||||
:key="item.id"
|
||||
type="button"
|
||||
class="personnel-picker-card"
|
||||
:class="[
|
||||
item.accent ? `personnel-picker-card--${item.accent}` : '',
|
||||
{ selected: selectedId === item.id },
|
||||
]"
|
||||
:aria-pressed="selectedId === item.id"
|
||||
@click="select(item.id)"
|
||||
>
|
||||
<span
|
||||
v-if="item.iconBackground"
|
||||
class="personnel-picker-portrait"
|
||||
:style="{ backgroundImage: item.iconBackground }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span v-else class="personnel-picker-city-icon" aria-hidden="true">城</span>
|
||||
|
||||
<span class="personnel-picker-card-body">
|
||||
<span class="personnel-picker-card-title">
|
||||
<span>
|
||||
<strong>{{ item.name }}</strong>
|
||||
<small>{{ item.subtitle }}</small>
|
||||
</span>
|
||||
<span v-if="selectedId === item.id" class="selection-check">선택됨</span>
|
||||
</span>
|
||||
|
||||
<span v-if="item.badges?.length" class="personnel-picker-badges">
|
||||
<span v-for="badge in item.badges" :key="badge">{{ badge }}</span>
|
||||
</span>
|
||||
|
||||
<span v-if="item.stats?.length" class="personnel-picker-stats">
|
||||
<span v-for="stat in item.stats" :key="stat.label">
|
||||
<small>{{ stat.label }}</small>
|
||||
<strong>{{ stat.value }}</strong>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span v-if="item.details?.length" class="personnel-picker-details">
|
||||
<span v-for="detail in item.details" :key="detail.label">
|
||||
<small>{{ detail.label }}</small>
|
||||
<span>{{ detail.value }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<p v-if="filteredItems.length === 0" class="personnel-picker-empty">
|
||||
검색 조건에 맞는 후보가 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.personnel-picker-backdrop {
|
||||
position: fixed;
|
||||
z-index: 2050;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 18px;
|
||||
background: rgb(0 0 0 / 78%);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.personnel-picker {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
width: min(780px, calc(100vw - 36px));
|
||||
max-height: min(760px, calc(100vh - 36px));
|
||||
overflow: hidden;
|
||||
color: #f6f2e8;
|
||||
background: #121411;
|
||||
border: 1px solid #78653d;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 24px 70px rgb(0 0 0 / 78%);
|
||||
font: 14px/1.45 var(--sammo-font-sans);
|
||||
}
|
||||
.personnel-picker-header {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 20px 22px 16px;
|
||||
background: linear-gradient(135deg, rgb(69 57 34 / 72%), rgb(25 28 22 / 96%));
|
||||
border-bottom: 1px solid #53482f;
|
||||
}
|
||||
.personnel-picker-eyebrow {
|
||||
margin: 0 0 3px;
|
||||
color: #cbb171;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.13em;
|
||||
}
|
||||
.personnel-picker h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.personnel-picker-header p:last-child {
|
||||
margin: 7px 0 0;
|
||||
color: #c9c8c2;
|
||||
}
|
||||
.personnel-picker-close {
|
||||
flex: 0 0 auto;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid #6d634d;
|
||||
border-radius: 999px;
|
||||
padding: 0;
|
||||
color: #ddd7ca;
|
||||
background: rgb(0 0 0 / 28%);
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.personnel-picker-search {
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
margin: 14px 16px 10px;
|
||||
padding: 0 12px;
|
||||
color: #cbb171;
|
||||
background: #080a08;
|
||||
border: 1px solid #555949;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.personnel-picker-search input {
|
||||
min-width: 0;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
}
|
||||
.personnel-picker-search:focus-within {
|
||||
border-color: #c7a85e;
|
||||
box-shadow: 0 0 0 2px rgb(199 168 94 / 28%);
|
||||
}
|
||||
.personnel-picker-results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
min-height: 160px;
|
||||
padding: 6px 16px 18px;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
.personnel-picker-card {
|
||||
display: grid;
|
||||
grid-template-columns: 58px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
color: #f4f1e8;
|
||||
background: #1a1d18;
|
||||
border: 1px solid #474b3d;
|
||||
border-left: 4px solid #6f7560;
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.personnel-picker-card:hover {
|
||||
background: #24291f;
|
||||
border-color: #8d835f;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.personnel-picker-card:focus,
|
||||
.personnel-picker-card:focus-visible,
|
||||
.personnel-picker-close:focus,
|
||||
.personnel-picker-close:focus-visible {
|
||||
outline: 2px solid #f3d27d;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.personnel-picker-card.selected {
|
||||
background: #252919;
|
||||
border-color: #d2b45f;
|
||||
box-shadow: inset 0 0 0 1px rgb(210 180 95 / 45%);
|
||||
}
|
||||
.personnel-picker-card--current {
|
||||
border-left-color: #e36060;
|
||||
}
|
||||
.personnel-picker-card--assigned {
|
||||
border-left-color: #d7a83f;
|
||||
}
|
||||
.personnel-picker-card--available {
|
||||
border-left-color: #65a978;
|
||||
}
|
||||
.personnel-picker-portrait,
|
||||
.personnel-picker-city-icon,
|
||||
.vacancy-icon {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border: 1px solid #5c5f50;
|
||||
border-radius: 10px;
|
||||
background-color: #0b0c0a;
|
||||
}
|
||||
.personnel-picker-portrait {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.personnel-picker-city-icon,
|
||||
.vacancy-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #d8be79;
|
||||
background: radial-gradient(circle at 50% 30%, #353626, #11130f 72%);
|
||||
font: 700 24px/1 var(--sammo-font-sans);
|
||||
}
|
||||
.personnel-picker-card-body,
|
||||
.personnel-picker-card-title,
|
||||
.personnel-picker-card-title > span:first-child {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
.personnel-picker-card-title {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
}
|
||||
.personnel-picker-card-title strong,
|
||||
.vacancy-card strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
.personnel-picker-card-title small,
|
||||
.vacancy-card small {
|
||||
color: #b8b8b2;
|
||||
}
|
||||
.selection-check {
|
||||
align-self: start;
|
||||
padding: 2px 6px;
|
||||
color: #13150f;
|
||||
background: #d5bb6f;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.personnel-picker-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.personnel-picker-badges span {
|
||||
padding: 2px 6px;
|
||||
color: #ddd5c0;
|
||||
background: #32352d;
|
||||
border: 1px solid #555948;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.personnel-picker-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 5px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.personnel-picker-stats > span {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
padding: 4px 6px;
|
||||
background: #0e100d;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.personnel-picker-stats small,
|
||||
.personnel-picker-details small {
|
||||
color: #aaa99f;
|
||||
font-size: 10px;
|
||||
}
|
||||
.personnel-picker-stats strong {
|
||||
color: #f1d47e;
|
||||
}
|
||||
.personnel-picker-details {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 3px 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.personnel-picker-details > span {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
.personnel-picker-details > span > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vacancy-card {
|
||||
grid-template-columns: 58px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
}
|
||||
.vacancy-card > span:nth-child(2) {
|
||||
display: grid;
|
||||
}
|
||||
.personnel-picker-empty {
|
||||
grid-column: 1 / -1;
|
||||
margin: 40px 0;
|
||||
color: #bdbbb2;
|
||||
text-align: center;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
.personnel-picker-enter-active,
|
||||
.personnel-picker-leave-active {
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
.personnel-picker-enter-active .personnel-picker,
|
||||
.personnel-picker-leave-active .personnel-picker {
|
||||
transition:
|
||||
transform 150ms ease,
|
||||
opacity 150ms ease;
|
||||
}
|
||||
.personnel-picker-enter-from,
|
||||
.personnel-picker-leave-to,
|
||||
.personnel-picker-enter-from .personnel-picker,
|
||||
.personnel-picker-leave-to .personnel-picker {
|
||||
opacity: 0;
|
||||
}
|
||||
.personnel-picker-enter-from .personnel-picker,
|
||||
.personnel-picker-leave-to .personnel-picker {
|
||||
transform: translateY(10px) scale(0.985);
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.personnel-picker-backdrop {
|
||||
align-items: end;
|
||||
padding: 0;
|
||||
}
|
||||
.personnel-picker {
|
||||
width: 100vw;
|
||||
max-height: min(88vh, calc(100vh - env(safe-area-inset-top)));
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
.personnel-picker-header {
|
||||
padding: 16px;
|
||||
}
|
||||
.personnel-picker-results {
|
||||
grid-template-columns: 1fr;
|
||||
padding-bottom: max(18px, env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.personnel-picker-enter-active,
|
||||
.personnel-picker-leave-active,
|
||||
.personnel-picker-enter-active .personnel-picker,
|
||||
.personnel-picker-leave-active .personnel-picker {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
export const MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY = 'sam.mobileMainPanelOrder.v1';
|
||||
export const MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT = 'sam-mobile-main-panel-order-changed';
|
||||
|
||||
export const MOBILE_MAIN_PANEL_DEFINITIONS = [
|
||||
{ id: 'commands', label: '명령 목록' },
|
||||
{ id: 'nation-menu', label: '국가 메뉴' },
|
||||
{ id: 'nation', label: '국가 정보' },
|
||||
{ id: 'general', label: '장수 정보' },
|
||||
{ id: 'city', label: '도시 정보' },
|
||||
{ id: 'map', label: '지도' },
|
||||
{ id: 'records', label: '기록 영역' },
|
||||
{ id: 'global-menu', label: '공통 메뉴' },
|
||||
{ id: 'messages', label: '서신' },
|
||||
] as const;
|
||||
|
||||
export type MobileMainPanelId = (typeof MOBILE_MAIN_PANEL_DEFINITIONS)[number]['id'];
|
||||
|
||||
export const DEFAULT_MOBILE_MAIN_PANEL_ORDER: readonly MobileMainPanelId[] = MOBILE_MAIN_PANEL_DEFINITIONS.map(
|
||||
({ id }) => id
|
||||
);
|
||||
|
||||
const mobilePanelIds = new Set<string>(DEFAULT_MOBILE_MAIN_PANEL_ORDER);
|
||||
|
||||
export const normalizeMobileMainPanelOrder = (value: unknown): MobileMainPanelId[] => {
|
||||
const source = Array.isArray(value) ? value : [];
|
||||
const seen = new Set<string>();
|
||||
const normalized: MobileMainPanelId[] = [];
|
||||
|
||||
for (const item of source) {
|
||||
if (typeof item !== 'string' || !mobilePanelIds.has(item) || seen.has(item)) continue;
|
||||
seen.add(item);
|
||||
normalized.push(item as MobileMainPanelId);
|
||||
}
|
||||
|
||||
for (const item of DEFAULT_MOBILE_MAIN_PANEL_ORDER) {
|
||||
if (!seen.has(item)) normalized.push(item);
|
||||
}
|
||||
|
||||
return normalized;
|
||||
};
|
||||
|
||||
export const parseMobileMainPanelOrder = (raw: string | null): MobileMainPanelId[] => {
|
||||
if (!raw) return [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
|
||||
try {
|
||||
return normalizeMobileMainPanelOrder(JSON.parse(raw));
|
||||
} catch {
|
||||
return [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
|
||||
}
|
||||
};
|
||||
|
||||
export const loadMobileMainPanelOrder = (storage: Pick<Storage, 'getItem'> = window.localStorage) =>
|
||||
parseMobileMainPanelOrder(storage.getItem(MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY));
|
||||
|
||||
export const saveMobileMainPanelOrder = (
|
||||
value: readonly MobileMainPanelId[],
|
||||
storage: Pick<Storage, 'setItem'> = window.localStorage
|
||||
): MobileMainPanelId[] => {
|
||||
const normalized = normalizeMobileMainPanelOrder(value);
|
||||
storage.setItem(MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY, JSON.stringify(normalized));
|
||||
if (typeof document !== 'undefined') {
|
||||
document.dispatchEvent(new CustomEvent(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT));
|
||||
}
|
||||
return normalized;
|
||||
};
|
||||
|
||||
export const moveMobileMainPanel = (
|
||||
value: readonly MobileMainPanelId[],
|
||||
fromIndex: number,
|
||||
toIndex: number
|
||||
): MobileMainPanelId[] => {
|
||||
const normalized = normalizeMobileMainPanelOrder(value);
|
||||
if (
|
||||
fromIndex < 0 ||
|
||||
fromIndex >= normalized.length ||
|
||||
toIndex < 0 ||
|
||||
toIndex >= normalized.length ||
|
||||
fromIndex === toIndex
|
||||
) {
|
||||
return normalized;
|
||||
}
|
||||
const [moved] = normalized.splice(fromIndex, 1);
|
||||
if (!moved) return normalized;
|
||||
normalized.splice(toIndex, 0, moved);
|
||||
return normalized;
|
||||
};
|
||||
@@ -87,8 +87,20 @@ watch(viewMode, () => {
|
||||
</div>
|
||||
|
||||
<div class="view-selector" role="group" aria-label="장수 유형">
|
||||
<input type="button" value="유저 보기" :aria-pressed="viewMode === 'user'" @click="viewMode = 'user'" />
|
||||
<input type="button" value="NPC 보기" :aria-pressed="viewMode === 'npc'" @click="viewMode = 'npc'" />
|
||||
<input
|
||||
class="legacy-button"
|
||||
type="button"
|
||||
value="유저 보기"
|
||||
:aria-pressed="viewMode === 'user'"
|
||||
@click="viewMode = 'user'"
|
||||
/>
|
||||
<input
|
||||
class="legacy-button"
|
||||
type="button"
|
||||
value="NPC 보기"
|
||||
:aria-pressed="viewMode === 'npc'"
|
||||
@click="viewMode = 'npc'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="legacy-message error" role="alert">{{ errorMessage }}</div>
|
||||
|
||||
@@ -92,9 +92,7 @@ onMounted(loadDetail);
|
||||
<td class="phase-heading centered" colspan="6">
|
||||
<span class="large-text">
|
||||
{{ data.emperor.phase }}
|
||||
<template v-if="data.source === 'legacy'">
|
||||
[{{ data.sourceProfile.toUpperCase() }} 이전 서버]
|
||||
</template>
|
||||
<template v-if="data.source === 'legacy'"> [이전 서버] </template>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -98,9 +98,7 @@ watch(selectedSource, loadDynasty);
|
||||
<td class="phase-heading" colspan="8">
|
||||
<span class="large-text"
|
||||
>{{ entry.phase
|
||||
}}<template v-if="entry.source === 'legacy'">
|
||||
[{{ entry.sourceProfile.toUpperCase() }} 이전 서버]</template
|
||||
></span
|
||||
}}<template v-if="entry.source === 'legacy'"> [이전 서버]</template></span
|
||||
>
|
||||
<RouterLink
|
||||
:to="{
|
||||
|
||||
@@ -29,6 +29,12 @@ import { useMainDashboardStore } from '../stores/mainDashboard';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
import { trpc } from '../utils/trpc';
|
||||
import type { CommandPatternEntry } from '../components/command/types';
|
||||
import {
|
||||
loadMobileMainPanelOrder,
|
||||
MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT,
|
||||
MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY,
|
||||
type MobileMainPanelId,
|
||||
} from '../utils/mobileMainPanelOrder';
|
||||
|
||||
const session = useSessionStore();
|
||||
const dashboard = useMainDashboardStore();
|
||||
@@ -38,8 +44,20 @@ const isMobile = useMediaQuery('(max-width: 939.98px)');
|
||||
const npcMode = ref(0);
|
||||
const globalNavigation = ref<MainNavigationEntry[]>(defaultGlobalNavigation);
|
||||
const versionDialog = ref<HTMLDialogElement | null>(null);
|
||||
const mobilePanelOrder = ref(loadMobileMainPanelOrder());
|
||||
const navigationUrl = (import.meta.env.VITE_GATEWAY_API_URL ?? '/api/trpc').replace(/\/trpc\/?$/u, '/navigation');
|
||||
|
||||
const reloadMobilePanelOrder = () => {
|
||||
mobilePanelOrder.value = loadMobileMainPanelOrder();
|
||||
};
|
||||
const handleMobilePanelStorage = (event: StorageEvent) => {
|
||||
if (event.key === MOBILE_MAIN_PANEL_ORDER_STORAGE_KEY) reloadMobilePanelOrder();
|
||||
};
|
||||
const isFlushMobilePanel = (panelId: MobileMainPanelId, index: number): boolean => {
|
||||
const previous = mobilePanelOrder.value[index - 1];
|
||||
return (panelId === 'general' && previous === 'nation') || (panelId === 'city' && previous === 'general');
|
||||
};
|
||||
|
||||
const {
|
||||
loading,
|
||||
refreshing,
|
||||
@@ -100,10 +118,14 @@ onUnmounted(() => {
|
||||
clearTimeout(surveyNoticeTimer);
|
||||
}
|
||||
dashboard.stopRealtime();
|
||||
window.removeEventListener('storage', handleMobilePanelStorage);
|
||||
document.removeEventListener(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT, reloadMobilePanelOrder);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
dashboard.startRealtime();
|
||||
window.addEventListener('storage', handleMobilePanelStorage);
|
||||
document.addEventListener(MOBILE_MAIN_PANEL_ORDER_CHANGED_EVENT, reloadMobilePanelOrder);
|
||||
void fetch(navigationUrl, { headers: { Accept: 'application/json' } })
|
||||
.then(async (response) => {
|
||||
if (!response.ok) throw new Error(`메뉴 설정 조회 실패: HTTP ${response.status}`);
|
||||
@@ -130,10 +152,7 @@ const repeatGeneralTurns = (amount: number) => {
|
||||
};
|
||||
|
||||
const loadMainData = async () => {
|
||||
const [, worldState] = await Promise.all([
|
||||
dashboard.loadMainData(),
|
||||
trpc.world.getState.query().catch(() => null),
|
||||
]);
|
||||
const [, worldState] = await Promise.all([dashboard.loadMainData(), trpc.world.getState.query().catch(() => null)]);
|
||||
npcMode.value = worldState?.config.npcMode ?? 0;
|
||||
};
|
||||
|
||||
@@ -239,131 +258,155 @@ watch(
|
||||
</aside>
|
||||
|
||||
<section v-if="isMobile" class="layout-mobile">
|
||||
<div class="mobile-panel">
|
||||
<PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
|
||||
<CommandListPanel
|
||||
:command-table="commandTable"
|
||||
:loading="loading"
|
||||
:reserved-general-turns="reservedGeneralTurns"
|
||||
:general="general"
|
||||
:current-year="lobbyInfo?.year"
|
||||
:current-month="lobbyInfo?.month"
|
||||
:turn-term-minutes="lobbyInfo?.turnTerm"
|
||||
:server-time="lobbyInfo?.serverTime"
|
||||
:clock-mode="lobbyInfo?.clockMode"
|
||||
:autorun-limit="reservedGeneralAutorunLimit"
|
||||
:map-data="worldMap"
|
||||
:map-layout="mapLayout"
|
||||
@set-general-turns="reserveGeneralTurns"
|
||||
@shift-general-turns="shiftGeneralTurns"
|
||||
@repeat-general-turns="repeatGeneralTurns"
|
||||
<template v-for="(panelId, panelIndex) in mobilePanelOrder" :key="panelId">
|
||||
<div v-if="panelId === 'commands'" class="mobile-panel" data-mobile-panel-id="commands">
|
||||
<PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
|
||||
<CommandListPanel
|
||||
:command-table="commandTable"
|
||||
:loading="loading"
|
||||
:reserved-general-turns="reservedGeneralTurns"
|
||||
:general="general"
|
||||
:current-year="lobbyInfo?.year"
|
||||
:current-month="lobbyInfo?.month"
|
||||
:turn-term-minutes="lobbyInfo?.turnTerm"
|
||||
:server-time="lobbyInfo?.serverTime"
|
||||
:clock-mode="lobbyInfo?.clockMode"
|
||||
:autorun-limit="reservedGeneralAutorunLimit"
|
||||
:map-data="worldMap"
|
||||
:map-layout="mapLayout"
|
||||
@set-general-turns="reserveGeneralTurns"
|
||||
@shift-general-turns="shiftGeneralTurns"
|
||||
@repeat-general-turns="repeatGeneralTurns"
|
||||
/>
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div v-else-if="panelId === 'nation-menu'" class="mobile-panel" data-mobile-panel-id="nation-menu">
|
||||
<MainNationMenu
|
||||
class="nation-menu-middle"
|
||||
:access="nationAccess"
|
||||
:tournament-stage="tournamentStage"
|
||||
:nation-color="nationColor"
|
||||
/>
|
||||
</PanelCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-panel">
|
||||
<MainNationMenu
|
||||
class="nation-menu-middle"
|
||||
:access="nationAccess"
|
||||
:tournament-stage="tournamentStage"
|
||||
:nation-color="nationColor"
|
||||
<div v-else-if="panelId === 'nation'" class="mobile-panel" data-mobile-panel-id="nation">
|
||||
<PanelCard title="국가 정보" data-main-target="nation">
|
||||
<NationBasicCard :nation="nation" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="panelId === 'general'"
|
||||
class="mobile-panel"
|
||||
:class="{ 'mobile-panel--flush': isFlushMobilePanel(panelId, panelIndex) }"
|
||||
data-mobile-panel-id="general"
|
||||
>
|
||||
<PanelCard title="장수 스탯" data-main-target="general">
|
||||
<GeneralBasicCard :general="general" :loading="loading" :nation-color="nation?.color" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="panelId === 'city'"
|
||||
class="mobile-panel"
|
||||
:class="{ 'mobile-panel--flush': isFlushMobilePanel(panelId, panelIndex) }"
|
||||
data-mobile-panel-id="city"
|
||||
>
|
||||
<PanelCard title="도시 정보" data-main-target="city">
|
||||
<CityBasicCard :city="city" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div v-else-if="panelId === 'map'" class="mobile-panel" data-mobile-panel-id="map">
|
||||
<PanelCard title="지도" data-main-target="map">
|
||||
<MapViewer :map-data="worldMap" :map-layout="mapLayout" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="panelId === 'records'"
|
||||
class="mobile-panel record-zone-mobile"
|
||||
data-mobile-panel-id="records"
|
||||
>
|
||||
<RecordPanel title="장수 동향" data-main-target="global-records">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="global">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in globalRecords"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry)"
|
||||
/>
|
||||
<div v-if="globalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
<RecordPanel title="개인 기록" data-main-target="general-records">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="general">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in generalRecords"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry, true)"
|
||||
/>
|
||||
<div v-if="generalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
<RecordPanel title="중원 정세" data-main-target="world-history">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="history">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in worldHistory"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry)"
|
||||
/>
|
||||
<div v-if="worldHistory.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
</div>
|
||||
|
||||
<MainGlobalMenu
|
||||
v-else-if="panelId === 'global-menu'"
|
||||
class="common-menu-middle"
|
||||
data-menu-position="middle"
|
||||
data-mobile-panel-id="global-menu"
|
||||
:npc-mode="npcMode"
|
||||
:vote-active="voteActive"
|
||||
:entries="globalNavigation"
|
||||
@action="handleNavigationAction"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mobile-panel">
|
||||
<PanelCard title="국가 정보" data-main-target="nation">
|
||||
<NationBasicCard :nation="nation" :loading="loading" />
|
||||
</PanelCard>
|
||||
<PanelCard title="장수 스탯" data-main-target="general">
|
||||
<GeneralBasicCard :general="general" :loading="loading" :nation-color="nation?.color" />
|
||||
</PanelCard>
|
||||
<PanelCard title="도시 정보" data-main-target="city">
|
||||
<CityBasicCard :city="city" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div class="mobile-panel">
|
||||
<PanelCard title="지도" data-main-target="map">
|
||||
<MapViewer :map-data="worldMap" :map-layout="mapLayout" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div class="mobile-panel record-zone-mobile">
|
||||
<RecordPanel title="장수 동향" data-main-target="global-records">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="global">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in globalRecords"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry)"
|
||||
/>
|
||||
<div v-if="globalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
<RecordPanel title="개인 기록" data-main-target="general-records">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="general">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in generalRecords"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry, true)"
|
||||
/>
|
||||
<div v-if="generalRecords.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
<RecordPanel title="중원 정세" data-main-target="world-history">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else-if="recordsError" class="record-error" role="alert">{{ recordsError }}</div>
|
||||
<div v-else class="record-list" data-record-bucket="history">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div
|
||||
v-for="entry in worldHistory"
|
||||
:key="entry.id"
|
||||
class="record-line"
|
||||
v-html="formatRecord(entry)"
|
||||
/>
|
||||
<div v-if="worldHistory.length === 0" class="record-empty">기록이 없습니다.</div>
|
||||
</div>
|
||||
</RecordPanel>
|
||||
</div>
|
||||
|
||||
<MainGlobalMenu
|
||||
class="common-menu-middle"
|
||||
data-menu-position="middle"
|
||||
:npc-mode="npcMode"
|
||||
:vote-active="voteActive"
|
||||
:entries="globalNavigation"
|
||||
@action="handleNavigationAction"
|
||||
/>
|
||||
|
||||
<div class="mobile-panel">
|
||||
<MessagePanel
|
||||
class="mobile-message-panel"
|
||||
:messages="messages"
|
||||
:loading="loading"
|
||||
:target-mailbox="targetMailbox"
|
||||
:draft-text="messageDraftText"
|
||||
:mailbox-groups="mailboxGroups"
|
||||
:general-id="general?.id ?? 0"
|
||||
:general-name="general?.name ?? ''"
|
||||
:nation-id="general?.nationId ?? 0"
|
||||
:can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
|
||||
@update:target-mailbox="targetMailbox = $event"
|
||||
@update:draft-text="messageDraftText = $event"
|
||||
@send="dashboard.sendMessage"
|
||||
@load-older="dashboard.loadOlderMessages"
|
||||
@refresh="dashboard.refreshMessages"
|
||||
@respond="dashboard.respondToMessage"
|
||||
@read-latest="dashboard.readLatestMessage"
|
||||
@delete="dashboard.deleteMessage"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="mobile-panel" data-mobile-panel-id="messages">
|
||||
<MessagePanel
|
||||
class="mobile-message-panel"
|
||||
:messages="messages"
|
||||
:loading="loading"
|
||||
:target-mailbox="targetMailbox"
|
||||
:draft-text="messageDraftText"
|
||||
:mailbox-groups="mailboxGroups"
|
||||
:general-id="general?.id ?? 0"
|
||||
:general-name="general?.name ?? ''"
|
||||
:nation-id="general?.nationId ?? 0"
|
||||
:can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
|
||||
@update:target-mailbox="targetMailbox = $event"
|
||||
@update:draft-text="messageDraftText = $event"
|
||||
@send="dashboard.sendMessage"
|
||||
@load-older="dashboard.loadOlderMessages"
|
||||
@refresh="dashboard.refreshMessages"
|
||||
@respond="dashboard.respondToMessage"
|
||||
@read-latest="dashboard.readLatestMessage"
|
||||
@delete="dashboard.deleteMessage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section v-else class="layout-desktop">
|
||||
@@ -798,8 +841,8 @@ button {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.layout-mobile > .mobile-panel:nth-of-type(3) {
|
||||
gap: 0;
|
||||
.layout-mobile > .mobile-panel--flush {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.layout-mobile [data-main-target='commands'] {
|
||||
|
||||
@@ -9,11 +9,19 @@ import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIc
|
||||
import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
|
||||
import GeneralBasicCard from '../components/main/GeneralBasicCard.vue';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
import {
|
||||
DEFAULT_MOBILE_MAIN_PANEL_ORDER,
|
||||
loadMobileMainPanelOrder,
|
||||
MOBILE_MAIN_PANEL_DEFINITIONS,
|
||||
moveMobileMainPanel,
|
||||
saveMobileMainPanelOrder,
|
||||
type MobileMainPanelId,
|
||||
} from '../utils/mobileMainPanelOrder';
|
||||
|
||||
const SCREEN_MODE_KEY = 'sam.screenMode';
|
||||
const CUSTOM_CSS_KEY = 'sam_customCSS';
|
||||
const PENDING_DIE_ON_PRESTART_KEY = 'sam.pending.dieOnPrestart';
|
||||
const { error: showErrorToast, showDialog } = useGameFeedback();
|
||||
const { success: showSuccessToast, error: showErrorToast, showDialog } = useGameFeedback();
|
||||
type ScreenMode = 'auto' | '500px' | '1000px';
|
||||
type LogType = 'generalHistory' | 'battleDetail' | 'battleResult' | 'generalAction';
|
||||
type ItemSlotKey = 'horse' | 'weapon' | 'book' | 'item';
|
||||
@@ -48,6 +56,9 @@ const screenMode = ref<ScreenMode>('auto');
|
||||
const customCss = ref('');
|
||||
const selectedIconId = ref('');
|
||||
const cssSaving = ref(false);
|
||||
const mobileLayoutDialog = ref<HTMLDialogElement | null>(null);
|
||||
const mobileLayoutOrder = ref<MobileMainPanelId[]>(loadMobileMainPanelOrder());
|
||||
const mobileLayoutDragIndex = ref<number | null>(null);
|
||||
const session = useSessionStore();
|
||||
let cssTimer: number | null = null;
|
||||
const readPendingDieOnPrestartId = (): string => {
|
||||
@@ -169,6 +180,43 @@ const items = computed<Array<{ key: ItemSlotKey; slotName: string; displayName:
|
||||
);
|
||||
const iconChoices = computed(() => data.value?.iconChoices ?? []);
|
||||
const selectedIcon = computed(() => iconChoices.value.find((icon) => icon.id === selectedIconId.value) ?? null);
|
||||
const mobileLayoutLabels = Object.fromEntries(
|
||||
MOBILE_MAIN_PANEL_DEFINITIONS.map(({ id, label }) => [id, label])
|
||||
) as Record<MobileMainPanelId, string>;
|
||||
|
||||
const openMobileLayoutDialog = () => {
|
||||
mobileLayoutOrder.value = loadMobileMainPanelOrder();
|
||||
mobileLayoutDialog.value?.showModal();
|
||||
window.requestAnimationFrame(() => mobileLayoutDialog.value?.querySelector<HTMLButtonElement>('button')?.focus());
|
||||
};
|
||||
|
||||
const moveMobileLayoutItem = (fromIndex: number, toIndex: number) => {
|
||||
mobileLayoutOrder.value = moveMobileMainPanel(mobileLayoutOrder.value, fromIndex, toIndex);
|
||||
};
|
||||
|
||||
const startMobileLayoutDrag = (event: DragEvent, index: number) => {
|
||||
mobileLayoutDragIndex.value = index;
|
||||
event.dataTransfer?.setData('text/plain', mobileLayoutOrder.value[index] ?? '');
|
||||
if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
|
||||
const dropMobileLayoutItem = (event: DragEvent, targetIndex: number) => {
|
||||
event.preventDefault();
|
||||
const sourceIndex = mobileLayoutDragIndex.value;
|
||||
mobileLayoutDragIndex.value = null;
|
||||
if (sourceIndex === null) return;
|
||||
moveMobileLayoutItem(sourceIndex, targetIndex);
|
||||
};
|
||||
|
||||
const resetMobileLayoutOrder = () => {
|
||||
mobileLayoutOrder.value = [...DEFAULT_MOBILE_MAIN_PANEL_ORDER];
|
||||
};
|
||||
|
||||
const applyMobileLayoutOrder = () => {
|
||||
mobileLayoutOrder.value = saveMobileMainPanelOrder(mobileLayoutOrder.value);
|
||||
mobileLayoutDialog.value?.close();
|
||||
showSuccessToast('모바일 메인 레이아웃 순서를 저장했습니다.');
|
||||
};
|
||||
|
||||
const autorunUser = computed(() => asRecord(world.value?.meta.autorun_user));
|
||||
const showAutoNationTurn = computed(() => asRecord(autorunUser.value.options).chief !== false);
|
||||
@@ -581,6 +629,16 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-layout-setting-row">
|
||||
<span>
|
||||
모바일 레이아웃 순서 바꾸기<br />
|
||||
<small>500px 메인 화면의 패널 순서를 이 기기에 저장합니다.</small>
|
||||
</span>
|
||||
<button class="mobile-layout-open" type="button" @click="openMobileLayoutDialog">
|
||||
순서 바꾸기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item-title">아이템 파기</div>
|
||||
<div class="item-group">
|
||||
<button
|
||||
@@ -635,6 +693,61 @@ onMounted(() => {
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작: HideD / Credit
|
||||
</footer>
|
||||
</main>
|
||||
<dialog
|
||||
ref="mobileLayoutDialog"
|
||||
class="mobile-layout-dialog"
|
||||
aria-labelledby="mobile-layout-dialog-title"
|
||||
@close="mobileLayoutDragIndex = null"
|
||||
>
|
||||
<div class="mobile-layout-dialog__header">
|
||||
<h2 id="mobile-layout-dialog-title">모바일 레이아웃 순서 바꾸기</h2>
|
||||
<form method="dialog">
|
||||
<button type="submit" aria-label="모바일 레이아웃 순서 창 닫기">×</button>
|
||||
</form>
|
||||
</div>
|
||||
<p>항목을 끌어 놓거나 위·아래 버튼으로 상대 순서를 바꿉니다.</p>
|
||||
<ol class="mobile-layout-list">
|
||||
<li
|
||||
v-for="(panelId, index) in mobileLayoutOrder"
|
||||
:key="panelId"
|
||||
:data-mobile-layout-id="panelId"
|
||||
draggable="true"
|
||||
@dragstart="startMobileLayoutDrag($event, index)"
|
||||
@dragend="mobileLayoutDragIndex = null"
|
||||
@dragover.prevent
|
||||
@drop.stop="dropMobileLayoutItem($event, index)"
|
||||
>
|
||||
<span class="mobile-layout-handle" aria-hidden="true">≡</span>
|
||||
<span class="mobile-layout-label">
|
||||
<span class="mobile-layout-position">{{ index + 1 }}</span>
|
||||
{{ mobileLayoutLabels[panelId] }}
|
||||
</span>
|
||||
<span class="mobile-layout-move-buttons">
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="`${mobileLayoutLabels[panelId]} 위로`"
|
||||
:disabled="index === 0"
|
||||
@click="moveMobileLayoutItem(index, index - 1)"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="`${mobileLayoutLabels[panelId]} 아래로`"
|
||||
:disabled="index === mobileLayoutOrder.length - 1"
|
||||
@click="moveMobileLayoutItem(index, index + 1)"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="mobile-layout-dialog__actions">
|
||||
<button type="button" @click="resetMobileLayoutOrder">Ref 초깃값</button>
|
||||
<form method="dialog"><button type="submit">취소</button></form>
|
||||
<button class="mobile-layout-apply" type="button" @click="applyMobileLayoutOrder">적용</button>
|
||||
</div>
|
||||
</dialog>
|
||||
<div class="my-page-mobile-scroll-spacer" aria-hidden="true"></div>
|
||||
</template>
|
||||
|
||||
@@ -822,6 +935,125 @@ button:disabled {
|
||||
align-items: center;
|
||||
margin: 14px 0;
|
||||
}
|
||||
.mobile-layout-setting-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 128px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 14px 0;
|
||||
}
|
||||
.mobile-layout-setting-row small {
|
||||
color: orange;
|
||||
}
|
||||
.mobile-layout-open {
|
||||
min-height: 34px;
|
||||
background: #315f86;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mobile-layout-dialog {
|
||||
box-sizing: border-box;
|
||||
width: min(460px, calc(100vw - 24px));
|
||||
max-height: calc(100dvh - 24px);
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
border: 1px solid #777;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
background: #171717 var(--sammo-texture-walnut);
|
||||
color: #fff;
|
||||
font: 14px/1.3 var(--sammo-font-sans);
|
||||
}
|
||||
.mobile-layout-dialog::backdrop {
|
||||
background: rgb(0 0 0 / 72%);
|
||||
}
|
||||
.mobile-layout-dialog__header,
|
||||
.mobile-layout-dialog__actions,
|
||||
.mobile-layout-move-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.mobile-layout-dialog__header {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.mobile-layout-dialog__header h2,
|
||||
.mobile-layout-dialog p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.mobile-layout-dialog__header h2 {
|
||||
color: skyblue;
|
||||
font-size: 18px;
|
||||
}
|
||||
.mobile-layout-dialog__header form,
|
||||
.mobile-layout-dialog__actions form {
|
||||
margin: 0;
|
||||
}
|
||||
.mobile-layout-dialog__header button {
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mobile-layout-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.mobile-layout-list > li {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr) auto;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
border: 1px solid #777;
|
||||
background: #172a52 var(--sammo-texture-blue);
|
||||
cursor: grab;
|
||||
}
|
||||
.mobile-layout-list > li:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.mobile-layout-handle {
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mobile-layout-label {
|
||||
min-width: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mobile-layout-position {
|
||||
display: inline-grid;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
place-items: center;
|
||||
margin-right: 4px;
|
||||
border: 1px solid #7186a7;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.mobile-layout-move-buttons {
|
||||
gap: 4px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.mobile-layout-move-buttons button {
|
||||
width: 36px;
|
||||
min-height: 34px;
|
||||
background: #315f86;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mobile-layout-dialog__actions {
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.mobile-layout-dialog__actions button {
|
||||
min-height: 34px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.mobile-layout-dialog__actions .mobile-layout-apply {
|
||||
background: #225500;
|
||||
font-weight: 700;
|
||||
}
|
||||
.button-group {
|
||||
display: flex;
|
||||
}
|
||||
@@ -933,6 +1165,12 @@ button:disabled {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
.mobile-layout-setting-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.mobile-layout-open {
|
||||
width: 100%;
|
||||
}
|
||||
.button-group {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
import { getNpcColor } from '../utils/npcColor';
|
||||
import { legacyNationTextColor } from '../utils/legacyNationColor';
|
||||
import { cityLevelMap, regionMap } from '../utils/nationFormat';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type Result = Awaited<ReturnType<typeof trpc.nation.getCityOverview.query>>;
|
||||
type SecretResult = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;
|
||||
type PersonnelResult = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
|
||||
type City = Result['cities'][number];
|
||||
type SecretGeneral = SecretResult['generals'][number];
|
||||
type OfficerLevel = 2 | 3 | 4;
|
||||
type Sort = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
const data = ref<Result | null>(null);
|
||||
const secretData = ref<SecretResult | null>(null);
|
||||
const personnelData = ref<PersonnelResult | null>(null);
|
||||
const error = ref('');
|
||||
const integrationError = ref('');
|
||||
const secretLoading = ref(false);
|
||||
const personnelLoading = ref(false);
|
||||
const pendingAppointment = ref('');
|
||||
const sort = ref<Sort>(10);
|
||||
const extraSort = ref<
|
||||
| 'name'
|
||||
@@ -25,10 +37,16 @@ const extraSort = ref<
|
||||
| null
|
||||
>(null);
|
||||
const router = useRouter();
|
||||
const { error: showErrorToast, info: showInfoToast, success: showSuccessToast } = useGameFeedback();
|
||||
const options = ['기본', '인구', '인구율', '민심', '농업', '상업', '치안', '수비', '성벽', '시세', '지역', '규모'];
|
||||
const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
|
||||
const generalsForCity = (cityId: number) => data.value?.generals.filter((general) => general.cityId === cityId) ?? [];
|
||||
const secretGeneralsForCity = (cityId: number) =>
|
||||
secretData.value?.generals.filter((general) => general.cityId === cityId) ?? [];
|
||||
const displayGeneralName = (general: Result['generals'][number]) =>
|
||||
general.npcState > 0 && !/^[ⓜⓝ]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
|
||||
const displaySecretGeneralName = (general: SecretGeneral) =>
|
||||
general.npcState > 0 && !/^[ⓜⓝ㉥]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
|
||||
const generalCount = (cityId: number) =>
|
||||
data.value?.generals.filter((general) => general.cityId === cityId).length ?? 0;
|
||||
const cities = computed(() => {
|
||||
@@ -91,6 +109,138 @@ const developmentClass = (
|
||||
const isRegionBreak = (city: City, index: number) =>
|
||||
sort.value === 10 && extraSort.value === null && (index === 0 || cities.value[index - 1]?.region !== city.region);
|
||||
const officer = (city: City, level: 2 | 3 | 4) => city.officers[level]?.name ?? '-';
|
||||
const officerIsStationed = (city: City, level: OfficerLevel): boolean =>
|
||||
secretData.value !== null && city.officers[level]?.cityId === city.id;
|
||||
const personnelGeneralMap = computed(
|
||||
() => new Map((personnelData.value?.generals ?? []).map((general) => [general.id, general]))
|
||||
);
|
||||
const personnelCityMap = computed(
|
||||
() => new Map((personnelData.value?.cityAssignments ?? []).map((city) => [city.id, city]))
|
||||
);
|
||||
const officerLocked = (cityId: number, level: OfficerLevel): boolean => {
|
||||
const officerSet = personnelCityMap.value.get(cityId)?.officerSet ?? 0;
|
||||
return (officerSet & (1 << level)) !== 0;
|
||||
};
|
||||
const canAppoint = (cityId: number, generalId: number, level: OfficerLevel): boolean => {
|
||||
if (!personnelData.value?.me.canManage || officerLocked(cityId, level)) return false;
|
||||
const general = personnelGeneralMap.value.get(generalId);
|
||||
if (!general || general.officerLevel === 12) return false;
|
||||
if (level === 4) return general.stats.strength >= personnelData.value.chiefStatMin;
|
||||
if (level === 3) return general.stats.intelligence >= personnelData.value.chiefStatMin;
|
||||
return true;
|
||||
};
|
||||
const canShowAppointmentButtons = (generalId: number): boolean => {
|
||||
const general = personnelGeneralMap.value.get(generalId);
|
||||
return personnelData.value?.me.canManage === true && general !== undefined && general.officerLevel !== 12;
|
||||
};
|
||||
const isChief = (generalId: number): boolean => (personnelGeneralMap.value.get(generalId)?.officerLevel ?? 0) >= 5;
|
||||
const appointmentKey = (cityId: number, generalId: number, level: OfficerLevel): string =>
|
||||
`${cityId}:${generalId}:${level}`;
|
||||
const commandNeedsAttention = (city: City, command: string): boolean => {
|
||||
const normalized = command.replaceAll(/\s/gu, '');
|
||||
if (normalized.includes('정착장려')) {
|
||||
return city.population - city.populationMax > -20_000 || city.population > city.populationMax * 0.92;
|
||||
}
|
||||
if (normalized.includes('농지개간')) return city.agriculture - city.agricultureMax > -1_000;
|
||||
if (normalized.includes('상업투자')) return city.commerce - city.commerceMax > -1_000;
|
||||
if (normalized.includes('치안강화')) return city.security - city.securityMax > -1_000;
|
||||
if (normalized.includes('수비강화')) return city.defence - city.defenceMax > -700;
|
||||
if (normalized.includes('성벽보수')) return city.wall - city.wallMax > -700;
|
||||
return false;
|
||||
};
|
||||
|
||||
const loadSecretIntegration = async (): Promise<void> => {
|
||||
if (secretLoading.value) {
|
||||
showInfoToast('암행부 정보를 불러오는 중입니다.');
|
||||
return;
|
||||
}
|
||||
if (secretData.value) {
|
||||
showInfoToast('암행부 정보가 이미 연동되어 있습니다.');
|
||||
return;
|
||||
}
|
||||
secretLoading.value = true;
|
||||
integrationError.value = '';
|
||||
try {
|
||||
secretData.value = await trpc.nation.getSecretGeneralList.query();
|
||||
} catch (cause) {
|
||||
integrationError.value = cause instanceof Error ? cause.message : '암행부 연동에 실패했습니다.';
|
||||
showErrorToast(integrationError.value);
|
||||
} finally {
|
||||
secretLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadPersonnelIntegration = async (): Promise<void> => {
|
||||
if (personnelLoading.value) {
|
||||
showInfoToast('인사부 정보를 불러오는 중입니다.');
|
||||
return;
|
||||
}
|
||||
if (personnelData.value?.me.canManage) {
|
||||
showInfoToast('인사부 정보가 이미 연동되어 있습니다.');
|
||||
return;
|
||||
}
|
||||
personnelLoading.value = true;
|
||||
integrationError.value = '';
|
||||
try {
|
||||
const personnel = await trpc.nation.getPersonnelInfo.query();
|
||||
if (!personnel.me.canManage) {
|
||||
window.alert('수뇌가 아닙니다!');
|
||||
return;
|
||||
}
|
||||
personnelData.value = personnel;
|
||||
} catch (cause) {
|
||||
integrationError.value = cause instanceof Error ? cause.message : '인사부 연동에 실패했습니다.';
|
||||
showErrorToast(integrationError.value);
|
||||
} finally {
|
||||
personnelLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshIntegratedData = async (): Promise<void> => {
|
||||
const [overview, secret, personnel] = await Promise.all([
|
||||
trpc.nation.getCityOverview.query(),
|
||||
trpc.nation.getSecretGeneralList.query(),
|
||||
trpc.nation.getPersonnelInfo.query(),
|
||||
]);
|
||||
data.value = overview;
|
||||
secretData.value = secret;
|
||||
personnelData.value = personnel;
|
||||
};
|
||||
|
||||
const appointCityOfficer = async (city: City, general: SecretGeneral, level: OfficerLevel): Promise<void> => {
|
||||
if (!canAppoint(city.id, general.id, level)) return;
|
||||
const key = appointmentKey(city.id, general.id, level);
|
||||
if (pendingAppointment.value) {
|
||||
showInfoToast('다른 임명을 처리하는 중입니다.');
|
||||
return;
|
||||
}
|
||||
if (isChief(general.id) && !window.confirm('수뇌입니다. 임명할까요?')) return;
|
||||
|
||||
pendingAppointment.value = key;
|
||||
integrationError.value = '';
|
||||
try {
|
||||
await trpc.nation.appoint.mutate({
|
||||
destGeneralId: general.id,
|
||||
destCityId: city.id,
|
||||
officerLevel: level,
|
||||
});
|
||||
showSuccessToast(`${general.name}을(를) ${city.name} ${officerLabels[level]}로 임명했습니다.`);
|
||||
try {
|
||||
await refreshIntegratedData();
|
||||
} catch (cause) {
|
||||
integrationError.value =
|
||||
cause instanceof Error
|
||||
? `임명은 완료됐지만 화면을 갱신하지 못했습니다: ${cause.message}`
|
||||
: '임명은 완료됐지만 화면을 갱신하지 못했습니다.';
|
||||
showErrorToast(integrationError.value);
|
||||
}
|
||||
} catch (cause) {
|
||||
integrationError.value = cause instanceof Error ? cause.message : '임명에 실패했습니다.';
|
||||
showErrorToast(integrationError.value);
|
||||
} finally {
|
||||
pendingAppointment.value = '';
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
try {
|
||||
data.value = await trpc.nation.getCityOverview.query();
|
||||
@@ -121,7 +271,18 @@ onMounted(async () => {
|
||||
</option>
|
||||
</select>
|
||||
<input type="submit" value="정렬하기" />
|
||||
<button type="button">암행부 연동</button>
|
||||
<button type="button" :aria-busy="secretLoading" @click="loadSecretIntegration">
|
||||
암행부 연동
|
||||
</button>
|
||||
<button
|
||||
v-if="secretData"
|
||||
id="load-duty-button"
|
||||
type="button"
|
||||
:aria-busy="personnelLoading"
|
||||
@click="loadPersonnelIntegration"
|
||||
>
|
||||
인사부 연동
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -141,12 +302,14 @@ onMounted(async () => {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="error" class="error" role="alert">{{ error }}</p>
|
||||
<p v-if="integrationError" class="error integration-error" role="alert">{{ integrationError }}</p>
|
||||
<table
|
||||
v-for="(city, index) in cities"
|
||||
:key="city.id"
|
||||
class="legacy-table city legacy-bg2"
|
||||
:class="{ 'region-break': isRegionBreak(city, index) }"
|
||||
:data-city-id="city.id"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -223,18 +386,24 @@ onMounted(async () => {
|
||||
<th>시세</th>
|
||||
<td>{{ city.trade ?? '-' }}%</td>
|
||||
<th>태수</th>
|
||||
<td>{{ officer(city, 4) }}</td>
|
||||
<td class="officer-4-value" :class="{ 'effective-officer': officerIsStationed(city, 4) }">
|
||||
{{ officer(city, 4) }}
|
||||
</td>
|
||||
<th>군사</th>
|
||||
<td>{{ officer(city, 3) }}</td>
|
||||
<td class="officer-3-value" :class="{ 'effective-officer': officerIsStationed(city, 3) }">
|
||||
{{ officer(city, 3) }}
|
||||
</td>
|
||||
<th>종사</th>
|
||||
<td>{{ officer(city, 2) }}</td>
|
||||
<td class="officer-2-value" :class="{ 'effective-officer': officerIsStationed(city, 2) }">
|
||||
{{ officer(city, 2) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>장수</th>
|
||||
<td colspan="9" class="general-list">
|
||||
<template v-if="generalsForCity(city.id).length">
|
||||
<template v-for="(general, index) in generalsForCity(city.id)" :key="general.id">
|
||||
<span v-if="index">, </span
|
||||
<template v-for="(general, cityGeneralIndex) in generalsForCity(city.id)" :key="general.id">
|
||||
<span v-if="cityGeneralIndex">, </span
|
||||
><span :style="{ color: getNpcColor(general.npcState) }">{{
|
||||
displayGeneralName(general)
|
||||
}}</span>
|
||||
@@ -243,6 +412,108 @@ onMounted(async () => {
|
||||
<template v-else>-</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="secretData" class="secret-integration-row">
|
||||
<td colspan="10">
|
||||
<table class="city-user-table legacy-bg0">
|
||||
<colgroup>
|
||||
<col class="secret-name-column" />
|
||||
<col class="secret-stat-column" />
|
||||
<col class="secret-troop-column" />
|
||||
<col class="secret-gold-column" />
|
||||
<col class="secret-rice-column" />
|
||||
<col class="secret-defence-column" />
|
||||
<col class="secret-crew-type-column" />
|
||||
<col class="secret-crew-column" />
|
||||
<col class="secret-train-column" />
|
||||
<col class="secret-atmos-column" />
|
||||
<col class="secret-command-column" />
|
||||
<col class="secret-kill-column" />
|
||||
<col class="secret-turn-column" />
|
||||
</colgroup>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="general in secretGeneralsForCity(city.id)"
|
||||
:key="general.id"
|
||||
:data-general-id="general.id"
|
||||
>
|
||||
<td class="secret-name-cell">
|
||||
<span :style="{ color: getNpcColor(general.npcState) }">{{
|
||||
displaySecretGeneralName(general)
|
||||
}}</span
|
||||
><br />Lv {{ general.experienceLevel }}
|
||||
<template v-if="canShowAppointmentButtons(general.id)">
|
||||
<br class="for-duty" />
|
||||
<button
|
||||
v-for="level in [4, 3, 2] as const"
|
||||
:key="level"
|
||||
type="button"
|
||||
class="appointment-button for-duty"
|
||||
:class="[`mode-${level}`, { 'chief-target': isChief(general.id) }]"
|
||||
:disabled="
|
||||
!canAppoint(city.id, general.id, level) || pendingAppointment !== ''
|
||||
"
|
||||
:aria-label="`${general.name}을(를) ${city.name} ${officerLabels[level]}로 임명`"
|
||||
@click="appointCityOfficer(city, general, level)"
|
||||
>
|
||||
{{ officerLabels[level].slice(0, 1) }}
|
||||
</button>
|
||||
</template>
|
||||
</td>
|
||||
<td :class="{ injured: general.injury > 0 }">
|
||||
{{ general.stats.leadership
|
||||
}}<span v-if="general.leadershipBonus" class="bonus"
|
||||
>+{{ general.leadershipBonus }}</span
|
||||
>∥{{ general.stats.strength }}∥{{ general.stats.intelligence }}
|
||||
</td>
|
||||
<td>{{ general.troopName ?? '-' }}</td>
|
||||
<td>{{ general.gold }}</td>
|
||||
<td>{{ general.rice }}</td>
|
||||
<td>{{ general.defenceTrainText }}</td>
|
||||
<td>{{ general.crewTypeName }}</td>
|
||||
<td>{{ general.crew }}</td>
|
||||
<td>{{ general.train }}</td>
|
||||
<td>{{ general.atmos }}</td>
|
||||
<td class="secret-commands">
|
||||
<template v-if="general.npcState >= 2">NPC 장수</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(command, commandIndex) in general.reservedCommands"
|
||||
:key="commandIndex"
|
||||
>
|
||||
{{ commandIndex + 1 }} :
|
||||
<span
|
||||
:class="{
|
||||
'command-attention': commandNeedsAttention(city, command),
|
||||
}"
|
||||
>{{ command }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
<td>{{ general.killTurn }}</td>
|
||||
<td>{{ formatServerDateTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="legacy-table legacy-bg0 title footer">
|
||||
@@ -304,6 +575,81 @@ onMounted(async () => {
|
||||
.general-list {
|
||||
text-align: left !important;
|
||||
}
|
||||
.effective-officer {
|
||||
color: lightgreen;
|
||||
}
|
||||
.secret-integration-row > td {
|
||||
padding: 0;
|
||||
}
|
||||
.city-user-table {
|
||||
width: 940px;
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.city-user-table td,
|
||||
.city-user-table th {
|
||||
width: auto;
|
||||
border: 1px solid #808080;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
.city-user-table th {
|
||||
background-image: var(--sammo-texture-green);
|
||||
}
|
||||
.secret-name-column,
|
||||
.secret-stat-column,
|
||||
.secret-troop-column {
|
||||
width: 100px;
|
||||
}
|
||||
.secret-gold-column,
|
||||
.secret-rice-column,
|
||||
.secret-crew-type-column,
|
||||
.secret-crew-column,
|
||||
.secret-kill-column,
|
||||
.secret-turn-column {
|
||||
width: 60px;
|
||||
}
|
||||
.secret-defence-column {
|
||||
width: 30px;
|
||||
}
|
||||
.secret-train-column,
|
||||
.secret-atmos-column {
|
||||
width: 50px;
|
||||
}
|
||||
.secret-command-column {
|
||||
width: 150px;
|
||||
}
|
||||
.secret-name-cell {
|
||||
line-height: normal;
|
||||
}
|
||||
.secret-commands {
|
||||
text-align: left !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
.bonus {
|
||||
color: cyan;
|
||||
}
|
||||
.injured {
|
||||
color: red;
|
||||
}
|
||||
.command-attention {
|
||||
color: yellow;
|
||||
}
|
||||
.nation-cities-page .appointment-button {
|
||||
margin: 0;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
.nation-cities-page .appointment-button.chief-target:not(:disabled) {
|
||||
color: red;
|
||||
}
|
||||
.nation-cities-page .appointment-button:disabled {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: default;
|
||||
}
|
||||
.capital {
|
||||
color: #0ff;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { JosaUtil } from '@sammo-ts/common';
|
||||
|
||||
import PersonnelSelectionDialog from '../components/personnel/PersonnelSelectionDialog.vue';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
import { resolveGeneralIconBackgroundImage } from '../utils/generalIcon';
|
||||
import { trpc } from '../utils/trpc';
|
||||
@@ -11,13 +14,28 @@ import { legacyNationTextColor } from '../utils/legacyNationColor';
|
||||
type PersonnelResponse = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
|
||||
type GeneralEntry = PersonnelResponse['generals'][number];
|
||||
type OfficerLevel = 2 | 3 | 4;
|
||||
type SelectionDialogItem = {
|
||||
id: number;
|
||||
name: string;
|
||||
subtitle: string;
|
||||
searchText: string;
|
||||
accent: 'current' | 'assigned' | 'available';
|
||||
iconBackground?: string;
|
||||
badges: string[];
|
||||
stats?: Array<{ label: string; value: string }>;
|
||||
details: Array<{ label: string; value: string }>;
|
||||
};
|
||||
type SelectionContext =
|
||||
| { kind: 'chief-general'; level: number }
|
||||
| { kind: 'city'; level: OfficerLevel }
|
||||
| { kind: 'city-general'; level: OfficerLevel };
|
||||
|
||||
const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
|
||||
const cityOfficerLevels: OfficerLevel[] = [4, 3, 2];
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const status = ref<string | null>(null);
|
||||
const data = ref<PersonnelResponse | null>(null);
|
||||
const selectionContext = ref<SelectionContext | null>(null);
|
||||
const chiefAppointmentDraft = reactive<Record<number, number>>({});
|
||||
const cityDraft = reactive<Record<OfficerLevel, { cityId: number; generalId: number }>>({
|
||||
4: { cityId: 0, generalId: 0 },
|
||||
@@ -28,7 +46,7 @@ const kickTargetId = ref(0);
|
||||
const ambassadorSelection = ref<number[]>([]);
|
||||
const auditorSelection = ref<number[]>([]);
|
||||
const router = useRouter();
|
||||
const { error: showErrorToast } = useGameFeedback();
|
||||
const { success: showSuccessToast, error: showErrorToast } = useGameFeedback();
|
||||
|
||||
const resolveErrorMessage = (value: unknown): string =>
|
||||
value instanceof Error ? value.message : typeof value === 'string' ? value : 'unknown_error';
|
||||
@@ -39,7 +57,6 @@ const loadPersonnel = async () => {
|
||||
error.value = null;
|
||||
try {
|
||||
data.value = await trpc.nation.getPersonnelInfo.query();
|
||||
status.value = null;
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
} finally {
|
||||
@@ -72,8 +89,14 @@ const officerLocked = (value: number, level: number): boolean => (value & (1 <<
|
||||
const chiefLocked = (level: number): boolean => officerLocked(data.value?.nation.chiefSet ?? 0, level);
|
||||
const cityOfficerLocked = (city: PersonnelResponse['cityAssignments'][number], level: number): boolean =>
|
||||
officerLocked(city.officerSet, level);
|
||||
const candidateLabel = (general: GeneralEntry): string =>
|
||||
`${general.name} 【${cityNameMap.value.get(general.cityId) ?? '-'}】`;
|
||||
const currentOfficeText = (general: GeneralEntry): string => {
|
||||
if (general.officerLevel <= 1) return '일반 장수';
|
||||
const office = formatOfficerLevelText(general.officerLevel, nationLevel.value);
|
||||
if (general.officerLevel >= 2 && general.officerLevel <= 4 && general.officerCityName) {
|
||||
return `${general.officerCityName} ${office}`;
|
||||
}
|
||||
return office;
|
||||
};
|
||||
const chiefCandidates = (level: number): GeneralEntry[] => {
|
||||
const minimum = data.value?.chiefStatMin ?? 0;
|
||||
const candidates = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
|
||||
@@ -90,6 +113,12 @@ const cityCandidates = (level: OfficerLevel): GeneralEntry[] => {
|
||||
};
|
||||
const openCities = (level: OfficerLevel) =>
|
||||
(data.value?.cityAssignments ?? []).filter((city) => !cityOfficerLocked(city, level));
|
||||
const selectedChief = (level: number): GeneralEntry | undefined =>
|
||||
generalMap.value.get(chiefAppointmentDraft[level] ?? 0);
|
||||
const selectedCity = (level: OfficerLevel): PersonnelResponse['cityAssignments'][number] | undefined =>
|
||||
data.value?.cityAssignments.find((city) => city.id === cityDraft[level].cityId);
|
||||
const selectedCityGeneral = (level: OfficerLevel): GeneralEntry | undefined =>
|
||||
generalMap.value.get(cityDraft[level].generalId);
|
||||
const kickCandidates = computed(() =>
|
||||
(data.value?.generals ?? []).filter((general) => general.id !== data.value?.me.id)
|
||||
);
|
||||
@@ -114,14 +143,12 @@ watch(data, initializeDrafts);
|
||||
|
||||
const runMutation = async (action: () => Promise<unknown>, successMessage: string) => {
|
||||
error.value = null;
|
||||
status.value = null;
|
||||
try {
|
||||
await action();
|
||||
status.value = successMessage;
|
||||
await loadPersonnel();
|
||||
status.value = successMessage;
|
||||
showSuccessToast(successMessage);
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
showErrorToast(resolveErrorMessage(err));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -129,11 +156,13 @@ const appointChief = async (level: number) => {
|
||||
const targetId = chiefAppointmentDraft[level] ?? 0;
|
||||
const target = generalMap.value.get(targetId);
|
||||
const office = formatOfficerLevelText(level, nationLevel.value);
|
||||
const prompt = target ? `${target.name}을(를) ${office}직에 임명하시겠습니까?` : `${office}직을 비우시겠습니까?`;
|
||||
const prompt = target
|
||||
? `${JosaUtil.put(target.name, '을')} ${office}직에 임명하시겠습니까?`
|
||||
: `${office}직을 비우시겠습니까?`;
|
||||
if (!window.confirm(prompt)) return;
|
||||
await runMutation(
|
||||
() => trpc.nation.appoint.mutate({ destGeneralId: targetId, destCityId: 0, officerLevel: level }),
|
||||
target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
|
||||
target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
|
||||
);
|
||||
};
|
||||
|
||||
@@ -142,7 +171,7 @@ const appointCityOfficer = async (level: OfficerLevel) => {
|
||||
const city = data.value?.cityAssignments.find((entry) => entry.id === draft.cityId);
|
||||
const target = generalMap.value.get(draft.generalId);
|
||||
const prompt = target
|
||||
? `${target.name}을(를) ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
|
||||
? `${JosaUtil.put(target.name, '을')} ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
|
||||
: `${city?.name ?? ''} ${officerLabels[level]}직을 비우시겠습니까?`;
|
||||
if (!window.confirm(prompt)) return;
|
||||
await runMutation(
|
||||
@@ -152,10 +181,130 @@ const appointCityOfficer = async (level: OfficerLevel) => {
|
||||
destCityId: draft.cityId,
|
||||
officerLevel: level,
|
||||
}),
|
||||
target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
|
||||
target ? `${JosaUtil.put(target.name, '을')} 임명했습니다.` : '관직을 비웠습니다.'
|
||||
);
|
||||
};
|
||||
|
||||
const generalSelectionItem = (general: GeneralEntry, targetLevel: number): SelectionDialogItem => {
|
||||
const isCurrent = general.officerLevel === targetLevel;
|
||||
const isAssigned = general.officerLevel > 1 && !isCurrent;
|
||||
const office = currentOfficeText(general);
|
||||
const city = general.cityName ?? cityNameMap.value.get(general.cityId) ?? '-';
|
||||
const badges = [isCurrent ? '현재 임명 중' : isAssigned ? '다른 관직 재직' : '일반 장수'];
|
||||
if (general.npcState > 0) badges.push('NPC');
|
||||
if (general.personality?.name) badges.push(general.personality.name);
|
||||
if (general.specialDomestic?.name) badges.push(general.specialDomestic.name);
|
||||
if (general.specialWar?.name) badges.push(general.specialWar.name);
|
||||
return {
|
||||
id: general.id,
|
||||
name: general.name,
|
||||
subtitle: `${city} · ${office}`,
|
||||
searchText: [
|
||||
general.name,
|
||||
city,
|
||||
office,
|
||||
general.personality?.name,
|
||||
general.specialDomestic?.name,
|
||||
general.specialWar?.name,
|
||||
general.troopName,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' '),
|
||||
accent: isCurrent ? 'current' : isAssigned ? 'assigned' : 'available',
|
||||
iconBackground: imageBackground(general),
|
||||
badges,
|
||||
stats: [
|
||||
{ label: '통솔', value: general.stats.leadership.toLocaleString('ko-KR') },
|
||||
{ label: '무력', value: general.stats.strength.toLocaleString('ko-KR') },
|
||||
{ label: '지력', value: general.stats.intelligence.toLocaleString('ko-KR') },
|
||||
],
|
||||
details: [
|
||||
{ label: '소속', value: `${general.belong.toLocaleString('ko-KR')}년` },
|
||||
{ label: '병력', value: general.crew.toLocaleString('ko-KR') },
|
||||
{ label: '부대', value: general.troopName ?? '없음' },
|
||||
{ label: '부상', value: general.injury > 0 ? `${general.injury}%` : '없음' },
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
const citySelectionItem = (
|
||||
city: PersonnelResponse['cityAssignments'][number],
|
||||
level: OfficerLevel
|
||||
): SelectionDialogItem => {
|
||||
const current = city.officers[level];
|
||||
const region = regionMap[city.region] ?? '-';
|
||||
const scale = cityLevelMap[city.level] ?? '-';
|
||||
return {
|
||||
id: city.id,
|
||||
name: city.name,
|
||||
subtitle: `${region} · ${scale}도시`,
|
||||
searchText: `${city.name} ${region} ${scale} ${current?.name ?? '공석'}`,
|
||||
accent: current ? 'assigned' : 'available',
|
||||
badges: [current ? `${officerLabels[level]} 재직 중` : `${officerLabels[level]} 공석`],
|
||||
details: [
|
||||
{ label: '지역', value: region },
|
||||
{ label: '규모', value: `${scale}도시` },
|
||||
{ label: `현재 ${officerLabels[level]}`, value: current?.name ?? '공석' },
|
||||
{ label: '소재지', value: current?.cityName ?? '-' },
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
const selectionTitle = computed(() => {
|
||||
const context = selectionContext.value;
|
||||
if (!context) return '';
|
||||
if (context.kind === 'chief-general') {
|
||||
return `${formatOfficerLevelText(context.level, nationLevel.value)} 임명 대상 선택`;
|
||||
}
|
||||
if (context.kind === 'city') return `${officerLabels[context.level]} 임명 도시 선택`;
|
||||
return `${officerLabels[context.level]} 임명 대상 선택`;
|
||||
});
|
||||
const selectionDescription = computed(() => {
|
||||
const context = selectionContext.value;
|
||||
if (!context) return '';
|
||||
if (context.kind === 'city') {
|
||||
return '지역과 도시 규모, 현재 재직자를 확인한 뒤 임명할 도시를 선택하세요.';
|
||||
}
|
||||
if (context.kind === 'chief-general') {
|
||||
if (context.level === 11) return '군주를 제외한 장수 중에서 임명할 수 있습니다.';
|
||||
const stat = context.level % 2 === 0 ? '무력' : '지력';
|
||||
return `${stat} ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 주요 능력치를 함께 확인하세요.`;
|
||||
}
|
||||
if (context.level === 4) {
|
||||
return `무력 ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 소재지를 함께 확인하세요.`;
|
||||
}
|
||||
if (context.level === 3) {
|
||||
return `지력 ${data.value?.chiefStatMin ?? 0} 이상인 장수만 표시합니다. 현재 관직과 소재지를 함께 확인하세요.`;
|
||||
}
|
||||
return '현재 관직과 소재지, 주요 능력치를 확인한 뒤 임명할 장수를 선택하세요.';
|
||||
});
|
||||
const selectionItems = computed<SelectionDialogItem[]>(() => {
|
||||
const context = selectionContext.value;
|
||||
if (!context) return [];
|
||||
if (context.kind === 'chief-general') {
|
||||
return chiefCandidates(context.level).map((general) => generalSelectionItem(general, context.level));
|
||||
}
|
||||
if (context.kind === 'city') {
|
||||
return openCities(context.level).map((city) => citySelectionItem(city, context.level));
|
||||
}
|
||||
return cityCandidates(context.level).map((general) => generalSelectionItem(general, context.level));
|
||||
});
|
||||
const selectionId = computed(() => {
|
||||
const context = selectionContext.value;
|
||||
if (!context) return 0;
|
||||
if (context.kind === 'chief-general') return chiefAppointmentDraft[context.level] ?? 0;
|
||||
if (context.kind === 'city') return cityDraft[context.level].cityId;
|
||||
return cityDraft[context.level].generalId;
|
||||
});
|
||||
const applySelection = (id: number): void => {
|
||||
const context = selectionContext.value;
|
||||
if (!context) return;
|
||||
if (context.kind === 'chief-general') chiefAppointmentDraft[context.level] = id;
|
||||
else if (context.kind === 'city') cityDraft[context.level].cityId = id;
|
||||
else cityDraft[context.level].generalId = id;
|
||||
selectionContext.value = null;
|
||||
};
|
||||
|
||||
const enforcePermissionLimit = (selection: number[]) => {
|
||||
if (selection.length <= 2) return;
|
||||
selection.splice(0, selection.length - 2);
|
||||
@@ -173,10 +322,10 @@ const changePermissions = async (isAmbassador: boolean) => {
|
||||
|
||||
const kickGeneral = async () => {
|
||||
const target = generalMap.value.get(kickTargetId.value);
|
||||
if (!target || !window.confirm(`${target.name}을(를) 추방하시겠습니까?`)) return;
|
||||
if (!target || !window.confirm(`${JosaUtil.put(target.name, '을')} 추방하시겠습니까?`)) return;
|
||||
await runMutation(
|
||||
() => trpc.nation.kick.mutate({ destGeneralId: target.id }),
|
||||
`${target.name}을(를) 추방했습니다.`
|
||||
`${JosaUtil.put(target.name, '을')} 추방했습니다.`
|
||||
);
|
||||
};
|
||||
|
||||
@@ -198,7 +347,6 @@ onMounted(() => void loadPersonnel());
|
||||
</table>
|
||||
|
||||
<div v-if="error" class="feedback error" role="alert">{{ error }}</div>
|
||||
<div v-if="status" class="feedback status" role="status">{{ status }}</div>
|
||||
<div v-if="loading" class="loading">불러오는 중...</div>
|
||||
|
||||
<template v-if="data && !loading">
|
||||
@@ -263,39 +411,83 @@ onMounted(() => void loadPersonnel());
|
||||
<tr>
|
||||
<td colspan="4" class="section-title blue">수 뇌 부 임 명</td>
|
||||
</tr>
|
||||
<tr v-for="(pair, pairIndex) in chiefPairs" :key="pairIndex">
|
||||
<template v-for="level in pair" :key="level">
|
||||
<td class="green-cell appoint-label">{{ formatOfficerLevelText(level, nationLevel) }}</td>
|
||||
<td class="appoint-control">
|
||||
<template v-if="canManage && level !== 12 && !chiefLocked(level)">
|
||||
<select
|
||||
v-model.number="chiefAppointmentDraft[level]"
|
||||
:aria-label="`${formatOfficerLevelText(level, nationLevel)} 대상`"
|
||||
>
|
||||
<option :value="0">____공석____</option>
|
||||
<option
|
||||
v-for="candidate in chiefCandidates(level)"
|
||||
:key="candidate.id"
|
||||
:value="candidate.id"
|
||||
<tr>
|
||||
<td colspan="4" class="appointment-workspace-cell">
|
||||
<div class="appointment-card-grid">
|
||||
<article v-for="level in chiefLevels" :key="level" class="appointment-card">
|
||||
<header class="appointment-card-header">
|
||||
<span>{{ formatOfficerLevelText(level, nationLevel) }}</span>
|
||||
<small v-if="chiefLocked(level)" class="appointment-lock">변경 잠금</small>
|
||||
<small v-else> 현재 {{ chiefAssignments[level]?.name ?? '공석' }} </small>
|
||||
</header>
|
||||
|
||||
<template v-if="canManage && level !== 12 && !chiefLocked(level)">
|
||||
<button
|
||||
type="button"
|
||||
class="selection-trigger"
|
||||
:aria-label="`${formatOfficerLevelText(level, nationLevel)} 장수 선택`"
|
||||
aria-haspopup="dialog"
|
||||
@click="selectionContext = { kind: 'chief-general', level }"
|
||||
>
|
||||
{{ candidateLabel(candidate) }}
|
||||
</option>
|
||||
</select>
|
||||
<button type="button" @click="appointChief(level)">임명</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ chiefAssignments[level]?.name ?? '-' }}
|
||||
<template v-if="chiefAssignments[level]">
|
||||
【{{ chiefAssignments[level]?.cityName ?? '-' }}】</template
|
||||
>
|
||||
</template>
|
||||
</td>
|
||||
</template>
|
||||
<span
|
||||
v-if="selectedChief(level)"
|
||||
class="selection-trigger-portrait"
|
||||
:style="{ backgroundImage: imageBackground(selectedChief(level)) }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span v-else class="selection-trigger-empty" aria-hidden="true">＋</span>
|
||||
<span class="selection-trigger-copy">
|
||||
<small>임명 대상</small>
|
||||
<strong>{{ selectedChief(level)?.name ?? '공석으로 두기' }}</strong>
|
||||
<span v-if="selectedChief(level)">
|
||||
{{ selectedChief(level)?.cityName ?? '-' }} ·
|
||||
{{ currentOfficeText(selectedChief(level)!) }}
|
||||
</span>
|
||||
<span v-else>눌러서 장수를 선택하세요</span>
|
||||
</span>
|
||||
<span class="selection-trigger-chevron" aria-hidden="true">›</span>
|
||||
</button>
|
||||
<div v-if="selectedChief(level)" class="selected-general-stats">
|
||||
<span
|
||||
>통솔
|
||||
<strong>{{ selectedChief(level)?.stats.leadership }}</strong></span
|
||||
>
|
||||
<span
|
||||
>무력 <strong>{{ selectedChief(level)?.stats.strength }}</strong></span
|
||||
>
|
||||
<span
|
||||
>지력
|
||||
<strong>{{ selectedChief(level)?.stats.intelligence }}</strong></span
|
||||
>
|
||||
<span
|
||||
>소속 <strong>{{ selectedChief(level)?.belong }}년</strong></span
|
||||
>
|
||||
</div>
|
||||
<button type="button" class="appointment-submit" @click="appointChief(level)">
|
||||
{{ formatOfficerLevelText(level, nationLevel) }} 임명
|
||||
</button>
|
||||
</template>
|
||||
<div v-else class="appointment-readonly">
|
||||
<span
|
||||
v-if="chiefAssignments[level]"
|
||||
class="selection-trigger-portrait"
|
||||
:style="{ backgroundImage: imageBackground(chiefAssignments[level]) }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span v-else class="selection-trigger-empty" aria-hidden="true">－</span>
|
||||
<span>
|
||||
<strong>{{ chiefAssignments[level]?.name ?? '공석' }}</strong>
|
||||
<small>{{ chiefAssignments[level]?.cityName ?? '임명된 장수 없음' }}</small>
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="legend">
|
||||
※ <span class="red">빨간색</span>은 현재 임명중인 장수, <span class="orange">노란색</span>은
|
||||
다른 관직에 임명된 장수, 하얀색은 일반 장수를 뜻합니다.
|
||||
※ 장수 선택 창에서 현재 임명 중인 장수, 다른 관직 재직자와 일반 장수를 구분하고 주요
|
||||
능력치·소재지·부대 정보를 함께 확인할 수 있습니다.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -372,38 +564,97 @@ onMounted(() => void loadPersonnel());
|
||||
<tr>
|
||||
<td colspan="5" class="section-title orange-bg">도 시 관 직 임 명</td>
|
||||
</tr>
|
||||
<tr v-for="level in cityOfficerLevels" :key="level">
|
||||
<td colspan="3" class="blue-cell city-appoint-label">{{ officerLabels[level] }} 임명</td>
|
||||
<td colspan="2">
|
||||
<select
|
||||
v-model.number="cityDraft[level].cityId"
|
||||
:aria-label="`${officerLabels[level]} 도시`"
|
||||
>
|
||||
<option v-for="city in openCities(level)" :key="city.id" :value="city.id">
|
||||
【{{ regionMap[city.region] ?? '-' }}】 {{ city.name }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
v-model.number="cityDraft[level].generalId"
|
||||
:aria-label="`${officerLabels[level]} 장수`"
|
||||
>
|
||||
<option :value="0">____공석____</option>
|
||||
<option
|
||||
v-for="candidate in cityCandidates(level)"
|
||||
:key="candidate.id"
|
||||
:value="candidate.id"
|
||||
<tr>
|
||||
<td colspan="5" class="appointment-workspace-cell">
|
||||
<div class="city-appointment-grid">
|
||||
<article
|
||||
v-for="level in cityOfficerLevels"
|
||||
:key="level"
|
||||
class="appointment-card city-appointment-card"
|
||||
>
|
||||
{{ candidateLabel(candidate) }}
|
||||
</option>
|
||||
</select>
|
||||
<button type="button" @click="appointCityOfficer(level)">임명</button>
|
||||
<header class="appointment-card-header">
|
||||
<span>{{ officerLabels[level] }}</span>
|
||||
<small>도시 관직</small>
|
||||
</header>
|
||||
<button
|
||||
type="button"
|
||||
class="selection-trigger compact"
|
||||
:aria-label="`${officerLabels[level]} 도시 선택`"
|
||||
aria-haspopup="dialog"
|
||||
@click="selectionContext = { kind: 'city', level }"
|
||||
>
|
||||
<span class="selection-trigger-city" aria-hidden="true">城</span>
|
||||
<span class="selection-trigger-copy">
|
||||
<small>임명 도시</small>
|
||||
<strong>{{ selectedCity(level)?.name ?? '도시 선택' }}</strong>
|
||||
<span v-if="selectedCity(level)">
|
||||
{{ regionMap[selectedCity(level)?.region ?? 0] ?? '-' }} ·
|
||||
{{ cityLevelMap[selectedCity(level)?.level ?? 0] ?? '-' }}도시
|
||||
</span>
|
||||
</span>
|
||||
<span class="selection-trigger-chevron" aria-hidden="true">›</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="selection-trigger compact"
|
||||
:aria-label="`${officerLabels[level]} 장수 선택`"
|
||||
aria-haspopup="dialog"
|
||||
@click="selectionContext = { kind: 'city-general', level }"
|
||||
>
|
||||
<span
|
||||
v-if="selectedCityGeneral(level)"
|
||||
class="selection-trigger-portrait"
|
||||
:style="{
|
||||
backgroundImage: imageBackground(selectedCityGeneral(level)),
|
||||
}"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span v-else class="selection-trigger-empty" aria-hidden="true">＋</span>
|
||||
<span class="selection-trigger-copy">
|
||||
<small>임명 대상</small>
|
||||
<strong>{{
|
||||
selectedCityGeneral(level)?.name ?? '공석으로 두기'
|
||||
}}</strong>
|
||||
<span v-if="selectedCityGeneral(level)">
|
||||
{{ selectedCityGeneral(level)?.cityName ?? '-' }} ·
|
||||
{{ currentOfficeText(selectedCityGeneral(level)!) }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="selection-trigger-chevron" aria-hidden="true">›</span>
|
||||
</button>
|
||||
<div v-if="selectedCityGeneral(level)" class="selected-general-stats compact">
|
||||
<span
|
||||
>통
|
||||
<strong>{{
|
||||
selectedCityGeneral(level)?.stats.leadership
|
||||
}}</strong></span
|
||||
>
|
||||
<span
|
||||
>무
|
||||
<strong>{{ selectedCityGeneral(level)?.stats.strength }}</strong></span
|
||||
>
|
||||
<span
|
||||
>지
|
||||
<strong>{{
|
||||
selectedCityGeneral(level)?.stats.intelligence
|
||||
}}</strong></span
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="appointment-submit"
|
||||
:disabled="!selectedCity(level)"
|
||||
@click="appointCityOfficer(level)"
|
||||
>
|
||||
{{ officerLabels[level] }} 임명
|
||||
</button>
|
||||
</article>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5" class="legend">
|
||||
※ <span class="red">빨간색</span>은 현재 임명중인 장수,
|
||||
<span class="orange">노란색</span>은 다른 관직에 임명된 장수, 하얀색은 일반 장수를
|
||||
뜻합니다.
|
||||
※ 도시의 지역·규모·현재 재직자와 장수의 능력치·현재 관직을 확인한 뒤 임명할 수 있습니다.
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@@ -514,6 +765,20 @@ onMounted(() => void loadPersonnel());
|
||||
</table>
|
||||
</template>
|
||||
</main>
|
||||
|
||||
<PersonnelSelectionDialog
|
||||
:open="selectionContext !== null"
|
||||
:title="selectionTitle"
|
||||
:description="selectionDescription"
|
||||
:items="selectionItems"
|
||||
:selected-id="selectionId"
|
||||
:search-placeholder="
|
||||
selectionContext?.kind === 'city' ? '도시명·지역·재직자 검색' : '장수명·도시·관직·특성 검색'
|
||||
"
|
||||
:vacancy-label="selectionContext?.kind === 'city' ? null : '공석으로 두기'"
|
||||
@cancel="selectionContext = null"
|
||||
@select="applySelection"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -686,6 +951,179 @@ select[multiple] {
|
||||
.appointment-table .appoint-control {
|
||||
width: 398px;
|
||||
}
|
||||
.appointment-workspace-cell {
|
||||
padding: 12px !important;
|
||||
background: linear-gradient(rgb(7 9 7 / 72%), rgb(7 9 7 / 72%)), var(--sammo-texture-walnut);
|
||||
}
|
||||
.appointment-card-grid,
|
||||
.city-appointment-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
.appointment-card-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.city-appointment-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.appointment-card {
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
background: linear-gradient(145deg, rgb(36 40 31 / 96%), rgb(16 18 15 / 98%));
|
||||
border: 1px solid #555845;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 7px 18px rgb(0 0 0 / 28%);
|
||||
}
|
||||
.appointment-card-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 9px;
|
||||
color: #e4cc8a;
|
||||
}
|
||||
.appointment-card-header > span {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.appointment-card-header small {
|
||||
color: #aaa99f;
|
||||
}
|
||||
.appointment-card-header .appointment-lock {
|
||||
color: #e6aa45;
|
||||
}
|
||||
.selection-trigger,
|
||||
.appointment-readonly {
|
||||
display: grid;
|
||||
grid-template-columns: 48px minmax(0, 1fr) 18px;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 70px;
|
||||
border: 1px solid #5a5e4d;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
color: #f7f4eb;
|
||||
background: #10120f;
|
||||
text-align: left;
|
||||
}
|
||||
.selection-trigger {
|
||||
cursor: pointer;
|
||||
}
|
||||
.selection-trigger:hover {
|
||||
filter: none;
|
||||
background: #1d211a;
|
||||
border-color: #9f9063;
|
||||
}
|
||||
.selection-trigger:focus-visible {
|
||||
outline: 2px solid #f0cf75;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.selection-trigger.compact {
|
||||
grid-template-columns: 42px minmax(0, 1fr) 16px;
|
||||
min-height: 62px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.selection-trigger-portrait,
|
||||
.selection-trigger-empty,
|
||||
.selection-trigger-city {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 1px solid #5e6251;
|
||||
border-radius: 8px;
|
||||
background-color: #060706;
|
||||
}
|
||||
.selection-trigger-portrait {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.selection-trigger-empty,
|
||||
.selection-trigger-city {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #d9bf78;
|
||||
background: radial-gradient(circle at 50% 30%, #363828, #0d0f0c 75%);
|
||||
font: 700 22px/1 var(--sammo-font-sans);
|
||||
}
|
||||
.compact .selection-trigger-portrait,
|
||||
.compact .selection-trigger-empty,
|
||||
.compact .selection-trigger-city {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
.selection-trigger-copy,
|
||||
.appointment-readonly > span:last-child {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
.selection-trigger-copy small,
|
||||
.appointment-readonly small {
|
||||
color: #aaa99f;
|
||||
font-size: 10px;
|
||||
}
|
||||
.selection-trigger-copy strong,
|
||||
.appointment-readonly strong {
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.selection-trigger-copy > span:last-child {
|
||||
overflow: hidden;
|
||||
color: #c0c0b8;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.selection-trigger-chevron {
|
||||
color: #cdb56e;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
.appointment-readonly {
|
||||
grid-template-columns: 48px minmax(0, 1fr);
|
||||
color: #bbb;
|
||||
background: #0d0e0c;
|
||||
}
|
||||
.selected-general-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 5px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.selected-general-stats.compact {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.selected-general-stats > span {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
padding: 4px 3px;
|
||||
color: #aaa99f;
|
||||
background: rgb(0 0 0 / 32%);
|
||||
border-radius: 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.selected-general-stats strong {
|
||||
color: #ead27f;
|
||||
}
|
||||
.appointment-submit {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
border-color: #4f7959;
|
||||
color: #fff;
|
||||
background: #376846;
|
||||
font-weight: 800;
|
||||
}
|
||||
.appointment-submit:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
.city-appointment-card {
|
||||
padding: 10px;
|
||||
}
|
||||
.legend {
|
||||
line-height: 18px;
|
||||
}
|
||||
@@ -741,9 +1179,6 @@ select[multiple] {
|
||||
.error {
|
||||
color: #ff8080;
|
||||
}
|
||||
.status {
|
||||
color: #80ff80;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.legacy-office {
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user