merge: 최신 main 정렬 제어 변경을 갱신 제어 작업에 통합
This commit is contained in:
@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import GeneralDirectoryTable from '../components/directory/GeneralDirectoryTable.vue';
|
||||
import LegacySortControls from '../components/ui/LegacySortControls.vue';
|
||||
import type { GeneralDirectoryGeneral } from '../types/directory';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
@@ -45,6 +46,15 @@ const loadDirectory = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const updateSort = (value: number): void => {
|
||||
sort.value = value as SortKey;
|
||||
};
|
||||
|
||||
const sortByHeader = (value: number): void => {
|
||||
updateSort(value);
|
||||
void loadDirectory();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
void loadDirectory();
|
||||
});
|
||||
@@ -63,22 +73,21 @@ onMounted(() => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<form class="sort-form" @submit.prevent="loadDirectory">
|
||||
<label for="viewType">정렬순서 : </label>
|
||||
<select id="viewType" v-model.number="sort" name="type" size="1">
|
||||
<option v-for="option in sortOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
<input type="submit" value="정렬하기" />
|
||||
</form>
|
||||
<LegacySortControls
|
||||
control-id="viewType"
|
||||
:model-value="sort"
|
||||
:options="sortOptions"
|
||||
:busy="loading"
|
||||
@update:model-value="updateSort"
|
||||
@submit="loadDirectory"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p v-if="error" class="directory-error" role="alert">{{ error }}</p>
|
||||
<GeneralDirectoryTable :generals="generals" :loading="loading" />
|
||||
<GeneralDirectoryTable :generals="generals" :loading="loading" :active-sort="sort" @sort="sortByHeader" />
|
||||
|
||||
<table class="directory-table title-table legacy-bg0">
|
||||
<tbody>
|
||||
@@ -121,13 +130,6 @@ onMounted(() => {
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.sort-form {
|
||||
margin: 0;
|
||||
}
|
||||
.sort-form select,
|
||||
.sort-form button {
|
||||
font-size: 14px;
|
||||
}
|
||||
.directory-error {
|
||||
width: 998px;
|
||||
margin: 0;
|
||||
|
||||
@@ -4,6 +4,7 @@ import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { formatReservedCommandBrief } from '../components/command/reservedCommandBrief';
|
||||
import type { CommandTable } from '../components/command/types';
|
||||
import LegacySortControls from '../components/ui/LegacySortControls.vue';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
import { getNpcColor } from '../utils/npcColor';
|
||||
import { legacyNationTextColor } from '../utils/legacyNationColor';
|
||||
@@ -28,6 +29,7 @@ const secretLoading = ref(false);
|
||||
const personnelLoading = ref(false);
|
||||
const pendingAppointment = ref('');
|
||||
const sort = ref<Sort>(10);
|
||||
const selectedSort = ref<Sort>(10);
|
||||
const extraSort = ref<
|
||||
| 'name'
|
||||
| 'populationRate'
|
||||
@@ -42,7 +44,20 @@ const extraSort = ref<
|
||||
>(null);
|
||||
const router = useRouter();
|
||||
const { error: showErrorToast, info: showInfoToast, success: showSuccessToast } = useGameFeedback();
|
||||
const options = ['기본', '인구', '인구율', '민심', '농업', '상업', '치안', '수비', '성벽', '시세', '지역', '규모'];
|
||||
const sortOptions = [
|
||||
'기본',
|
||||
'인구',
|
||||
'인구율',
|
||||
'민심',
|
||||
'농업',
|
||||
'상업',
|
||||
'치안',
|
||||
'수비',
|
||||
'성벽',
|
||||
'시세',
|
||||
'지역',
|
||||
'규모',
|
||||
].map((label, index) => ({ value: index + 1, label }));
|
||||
const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
|
||||
const generalsForCity = (cityId: number) => data.value?.generals.filter((general) => general.cityId === cityId) ?? [];
|
||||
const secretGeneralsForCity = (cityId: number) =>
|
||||
@@ -89,6 +104,20 @@ const cities = computed(() => {
|
||||
const setExtraSort = (value: NonNullable<typeof extraSort.value>) => {
|
||||
extraSort.value = value;
|
||||
};
|
||||
const updateSelectedSort = (value: number): void => {
|
||||
selectedSort.value = value as Sort;
|
||||
};
|
||||
const applySelectedSort = (): void => {
|
||||
sort.value = selectedSort.value;
|
||||
extraSort.value = null;
|
||||
};
|
||||
const sortByHeader = (value: Sort): void => {
|
||||
selectedSort.value = value;
|
||||
sort.value = value;
|
||||
extraSort.value = null;
|
||||
};
|
||||
const sortIndicator = (value: Sort, direction: 'ascending' | 'descending'): string =>
|
||||
sort.value === value && extraSort.value === null ? (direction === 'ascending' ? '▲' : '▼') : '↕';
|
||||
const remain = (value: number, maximum: number) => value - maximum;
|
||||
const warnRemain = (
|
||||
kind: 'agriculture' | 'commerce' | 'security' | 'defence' | 'wall',
|
||||
@@ -272,14 +301,14 @@ onMounted(async () => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<form @submit.prevent="extraSort = null">
|
||||
정렬순서 :
|
||||
<select v-model.number="sort">
|
||||
<option v-for="(label, index) in options" :key="label" :value="index + 1">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
<input type="submit" value="정렬하기" />
|
||||
<div class="city-sort-actions">
|
||||
<LegacySortControls
|
||||
control-id="nation-city-sort"
|
||||
:model-value="selectedSort"
|
||||
:options="sortOptions"
|
||||
@update:model-value="updateSelectedSort"
|
||||
@submit="applySelectedSort"
|
||||
/>
|
||||
<button type="button" :aria-busy="secretLoading" @click="loadSecretIntegration">
|
||||
암행부 연동
|
||||
</button>
|
||||
@@ -292,7 +321,7 @@ onMounted(async () => {
|
||||
>
|
||||
인사부 연동
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -337,11 +366,29 @@ onMounted(async () => {
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>주민</th>
|
||||
<th :aria-sort="sort === 2 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="주민 기준 정렬"
|
||||
@click="sortByHeader(2)"
|
||||
>
|
||||
주민<span class="legacy-sort-indicator">{{ sortIndicator(2, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td :class="developmentClass('population', city.population, city.populationMax)">
|
||||
{{ city.population }}/{{ city.populationMax }}
|
||||
</td>
|
||||
<th>인구율</th>
|
||||
<th :aria-sort="sort === 3 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="인구율 기준 정렬"
|
||||
@click="sortByHeader(3)"
|
||||
>
|
||||
인구율<span class="legacy-sort-indicator">{{ sortIndicator(3, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td :class="developmentClass('population', city.population, city.populationMax)">
|
||||
{{ Number(((city.population / city.populationMax) * 100).toFixed(2)) }}%
|
||||
</td>
|
||||
@@ -353,35 +400,80 @@ onMounted(async () => {
|
||||
<td>{{ city.incomes.wall.toLocaleString() }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>농업</th>
|
||||
<th :aria-sort="sort === 5 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="농업 기준 정렬"
|
||||
@click="sortByHeader(5)"
|
||||
>
|
||||
농업<span class="legacy-sort-indicator">{{ sortIndicator(5, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td :class="developmentClass('agriculture', city.agriculture, city.agricultureMax)">
|
||||
{{ city.agriculture }}/{{ city.agricultureMax
|
||||
}}<span v-if="warnRemain('agriculture', city.agriculture, city.agricultureMax)" class="remain"
|
||||
>[{{ remain(city.agriculture, city.agricultureMax) }}]</span
|
||||
>
|
||||
</td>
|
||||
<th>상업</th>
|
||||
<th :aria-sort="sort === 6 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="상업 기준 정렬"
|
||||
@click="sortByHeader(6)"
|
||||
>
|
||||
상업<span class="legacy-sort-indicator">{{ sortIndicator(6, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td :class="developmentClass('commerce', city.commerce, city.commerceMax)">
|
||||
{{ city.commerce }}/{{ city.commerceMax
|
||||
}}<span v-if="warnRemain('commerce', city.commerce, city.commerceMax)" class="remain"
|
||||
>[{{ remain(city.commerce, city.commerceMax) }}]</span
|
||||
>
|
||||
</td>
|
||||
<th>치안</th>
|
||||
<th :aria-sort="sort === 7 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="치안 기준 정렬"
|
||||
@click="sortByHeader(7)"
|
||||
>
|
||||
치안<span class="legacy-sort-indicator">{{ sortIndicator(7, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td :class="developmentClass('security', city.security, city.securityMax)">
|
||||
{{ city.security }}/{{ city.securityMax
|
||||
}}<span v-if="warnRemain('security', city.security, city.securityMax)" class="remain"
|
||||
>[{{ remain(city.security, city.securityMax) }}]</span
|
||||
>
|
||||
</td>
|
||||
<th>수비</th>
|
||||
<th :aria-sort="sort === 8 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="수비 기준 정렬"
|
||||
@click="sortByHeader(8)"
|
||||
>
|
||||
수비<span class="legacy-sort-indicator">{{ sortIndicator(8, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td :class="developmentClass('defence', city.defence, city.defenceMax)">
|
||||
{{ city.defence }}/{{ city.defenceMax
|
||||
}}<span v-if="warnRemain('defence', city.defence, city.defenceMax)" class="remain"
|
||||
>[{{ remain(city.defence, city.defenceMax) }}]</span
|
||||
>
|
||||
</td>
|
||||
<th>성벽</th>
|
||||
<th :aria-sort="sort === 9 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="성벽 기준 정렬"
|
||||
@click="sortByHeader(9)"
|
||||
>
|
||||
성벽<span class="legacy-sort-indicator">{{ sortIndicator(9, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td :class="developmentClass('wall', city.wall, city.wallMax)">
|
||||
{{ city.wall }}/{{ city.wallMax
|
||||
}}<span v-if="warnRemain('wall', city.wall, city.wallMax)" class="remain"
|
||||
@@ -390,9 +482,27 @@ onMounted(async () => {
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>민심</th>
|
||||
<th :aria-sort="sort === 4 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="민심 기준 정렬"
|
||||
@click="sortByHeader(4)"
|
||||
>
|
||||
민심<span class="legacy-sort-indicator">{{ sortIndicator(4, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td>{{ city.trust.toFixed(1) }}</td>
|
||||
<th>시세</th>
|
||||
<th :aria-sort="sort === 10 && extraSort === null ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="시세 기준 정렬"
|
||||
@click="sortByHeader(10)"
|
||||
>
|
||||
시세<span class="legacy-sort-indicator">{{ sortIndicator(10, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<td>{{ city.trade ?? '-' }}%</td>
|
||||
<th>태수</th>
|
||||
<td class="officer-4-value" :class="{ 'effective-officer': officerIsStationed(city, 4) }">
|
||||
@@ -567,6 +677,13 @@ onMounted(async () => {
|
||||
.title {
|
||||
text-align: left;
|
||||
}
|
||||
.city-sort-actions {
|
||||
min-height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.city {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -669,7 +786,7 @@ onMounted(async () => {
|
||||
.footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
.nation-cities-page button,
|
||||
.nation-cities-page button:not(.legacy-sort-submit, .legacy-sort-header),
|
||||
.nation-cities-page input[type='submit'] {
|
||||
border: 2px outset #fff;
|
||||
background-color: buttonface;
|
||||
|
||||
@@ -3,6 +3,7 @@ import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { formatReservedCommandBrief } from '../components/command/reservedCommandBrief';
|
||||
import type { CommandTable } from '../components/command/types';
|
||||
import LegacySortControls from '../components/ui/LegacySortControls.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
type Result = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;
|
||||
type ReservedCommand = Result['generals'][number]['reservedCommands'][number];
|
||||
@@ -12,7 +13,11 @@ const commandTable = ref<CommandTable | null>(null);
|
||||
const error = ref('');
|
||||
const loading = ref(false);
|
||||
const sort = ref<Sort>(7);
|
||||
const options = ['자금', '군량', '도시', '병종', '병사', '삭제턴', '턴', '부대'];
|
||||
const selectedSort = ref<Sort>(7);
|
||||
const sortOptions = ['자금', '군량', '도시', '병종', '병사', '삭제턴', '턴', '부대'].map((label, index) => ({
|
||||
value: index + 1,
|
||||
label,
|
||||
}));
|
||||
const load = async () => {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
@@ -44,6 +49,18 @@ const displayName = (general: { name: string; npcState: number }) =>
|
||||
general.npcState > 0 && !/^[ⓜⓝ㉥]/u.test(general.name) ? `ⓝ${general.name}` : general.name;
|
||||
const commandBrief = (command: ReservedCommand): string =>
|
||||
formatReservedCommandBrief('general', command.action, command.args, commandTable.value);
|
||||
const updateSelectedSort = (value: number): void => {
|
||||
selectedSort.value = value as Sort;
|
||||
};
|
||||
const applySelectedSort = (): void => {
|
||||
sort.value = selectedSort.value;
|
||||
};
|
||||
const sortByHeader = (value: Sort): void => {
|
||||
selectedSort.value = value;
|
||||
sort.value = value;
|
||||
};
|
||||
const sortIndicator = (value: Sort, direction: 'ascending' | 'descending'): string =>
|
||||
sort.value === value ? (direction === 'ascending' ? '▲' : '▼') : '↕';
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
@@ -58,13 +75,13 @@ onMounted(load);
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
정렬순서 :
|
||||
<select v-model.number="sort" aria-label="암행부 정렬">
|
||||
<option v-for="(label, index) in options" :key="label" :value="index + 1">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
<input type="submit" value="정렬하기" />
|
||||
<LegacySortControls
|
||||
control-id="secret-list-sort"
|
||||
:model-value="selectedSort"
|
||||
:options="sortOptions"
|
||||
@update:model-value="updateSelectedSort"
|
||||
@submit="applySelectedSort"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -117,22 +134,94 @@ onMounted(load);
|
||||
<tr>
|
||||
<th width="98">이 름</th>
|
||||
<th width="98">통무지</th>
|
||||
<th width="98">부 대</th>
|
||||
<th width="53">자 금</th>
|
||||
<th width="53">군 량</th>
|
||||
<th width="48">도시</th>
|
||||
<th width="98" :aria-sort="sort === 8 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="부대 기준 정렬"
|
||||
@click="sortByHeader(8)"
|
||||
>
|
||||
부 대<span class="legacy-sort-indicator">{{ sortIndicator(8, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th width="53" :aria-sort="sort === 1 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="자금 기준 정렬"
|
||||
@click="sortByHeader(1)"
|
||||
>
|
||||
자 금<span class="legacy-sort-indicator">{{ sortIndicator(1, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th width="53" :aria-sort="sort === 2 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="군량 기준 정렬"
|
||||
@click="sortByHeader(2)"
|
||||
>
|
||||
군 량<span class="legacy-sort-indicator">{{ sortIndicator(2, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th width="48" :aria-sort="sort === 3 ? 'ascending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="도시 기준 정렬"
|
||||
@click="sortByHeader(3)"
|
||||
>
|
||||
도시<span class="legacy-sort-indicator">{{ sortIndicator(3, 'ascending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th width="28">守</th>
|
||||
<th width="58">병 종</th>
|
||||
<th width="63">병 사</th>
|
||||
<th width="58" :aria-sort="sort === 4 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="병종 기준 정렬"
|
||||
@click="sortByHeader(4)"
|
||||
>
|
||||
병 종<span class="legacy-sort-indicator">{{ sortIndicator(4, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th width="63" :aria-sort="sort === 5 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="병사 기준 정렬"
|
||||
@click="sortByHeader(5)"
|
||||
>
|
||||
병 사<span class="legacy-sort-indicator">{{ sortIndicator(5, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th width="38">훈련</th>
|
||||
<th width="38">사기</th>
|
||||
<th width="213">명 령</th>
|
||||
<th width="38">삭턴</th>
|
||||
<th width="48">턴</th>
|
||||
<th width="38" :aria-sort="sort === 6 ? 'ascending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="삭제턴 기준 정렬"
|
||||
@click="sortByHeader(6)"
|
||||
>
|
||||
삭턴<span class="legacy-sort-indicator">{{ sortIndicator(6, 'ascending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th width="48" :aria-sort="sort === 7 ? 'ascending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="턴 기준 정렬"
|
||||
@click="sortByHeader(7)"
|
||||
>
|
||||
턴<span class="legacy-sort-indicator">{{ sortIndicator(7, 'ascending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="general in generals" :key="general.id">
|
||||
<tr v-for="general in generals" :key="general.id" :data-general-id="general.id">
|
||||
<td>{{ displayName(general) }}<br />Lv {{ general.experienceLevel }}</td>
|
||||
<td>
|
||||
{{ general.stats.leadership
|
||||
@@ -235,19 +324,6 @@ th,
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
cursor: pointer;
|
||||
padding: 1px 6px;
|
||||
border: 2px outset #fff;
|
||||
background: rgb(107, 107, 107);
|
||||
color: #fff;
|
||||
}
|
||||
select {
|
||||
padding: 0;
|
||||
border: 1px solid rgb(133, 133, 133);
|
||||
background: rgb(107, 107, 107);
|
||||
color: #fff;
|
||||
}
|
||||
.legacy-bg0 {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import LegacySortControls from '../components/ui/LegacySortControls.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type NpcList = Awaited<ReturnType<typeof trpc.public.getNpcList.query>>;
|
||||
@@ -10,6 +11,10 @@ const sort = ref<NpcListSort>(1);
|
||||
const data = ref<NpcList | null>(null);
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const sortOptions = ['이름', '국가', '종능', '통솔', '무력', '지력', '명성', '계급'].map((label, index) => ({
|
||||
value: index + 1,
|
||||
label,
|
||||
}));
|
||||
|
||||
const getErrorMessage = (error: unknown): string => {
|
||||
if (error instanceof Error) {
|
||||
@@ -35,6 +40,15 @@ const load = async () => {
|
||||
};
|
||||
|
||||
const closeWindow = () => window.close();
|
||||
const updateSort = (value: number): void => {
|
||||
sort.value = value as NpcListSort;
|
||||
};
|
||||
const sortByHeader = (value: NpcListSort): void => {
|
||||
updateSort(value);
|
||||
void load();
|
||||
};
|
||||
const sortIndicator = (value: NpcListSort, direction: 'ascending' | 'descending'): string =>
|
||||
sort.value === value ? (direction === 'ascending' ? '▲' : '▼') : '↕';
|
||||
|
||||
onMounted(() => {
|
||||
void load();
|
||||
@@ -53,20 +67,14 @@ onMounted(() => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<form class="sort-form" @submit.prevent="load">
|
||||
<label for="npc-list-sort">정렬순서 :</label>
|
||||
<select id="npc-list-sort" v-model.number="sort" name="type" size="1">
|
||||
<option :value="1">이름</option>
|
||||
<option :value="2">국가</option>
|
||||
<option :value="3">종능</option>
|
||||
<option :value="4">통솔</option>
|
||||
<option :value="5">무력</option>
|
||||
<option :value="6">지력</option>
|
||||
<option :value="7">명성</option>
|
||||
<option :value="8">계급</option>
|
||||
</select>
|
||||
<input type="submit" value="정렬하기" :disabled="loading" />
|
||||
</form>
|
||||
<LegacySortControls
|
||||
control-id="npc-list-sort"
|
||||
:model-value="sort"
|
||||
:options="sortOptions"
|
||||
:busy="loading"
|
||||
@update:model-value="updateSort"
|
||||
@submit="load"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -92,18 +100,90 @@ onMounted(() => {
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr class="legacy-bg1">
|
||||
<th>희생된 장수</th>
|
||||
<th :aria-sort="sort === 1 ? 'ascending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="이름 기준 정렬"
|
||||
@click="sortByHeader(1)"
|
||||
>
|
||||
희생된 장수<span class="legacy-sort-indicator">{{ sortIndicator(1, 'ascending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th>악령 이름</th>
|
||||
<th>레벨</th>
|
||||
<th>국가</th>
|
||||
<th :aria-sort="sort === 2 ? 'ascending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="국가 기준 정렬"
|
||||
@click="sortByHeader(2)"
|
||||
>
|
||||
국가<span class="legacy-sort-indicator">{{ sortIndicator(2, 'ascending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th>성격</th>
|
||||
<th>특기</th>
|
||||
<th>종능</th>
|
||||
<th>통솔</th>
|
||||
<th>무력</th>
|
||||
<th>지력</th>
|
||||
<th>명성</th>
|
||||
<th>계급</th>
|
||||
<th :aria-sort="sort === 3 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="종능 기준 정렬"
|
||||
@click="sortByHeader(3)"
|
||||
>
|
||||
종능<span class="legacy-sort-indicator">{{ sortIndicator(3, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th :aria-sort="sort === 4 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="통솔 기준 정렬"
|
||||
@click="sortByHeader(4)"
|
||||
>
|
||||
통솔<span class="legacy-sort-indicator">{{ sortIndicator(4, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th :aria-sort="sort === 5 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="무력 기준 정렬"
|
||||
@click="sortByHeader(5)"
|
||||
>
|
||||
무력<span class="legacy-sort-indicator">{{ sortIndicator(5, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th :aria-sort="sort === 6 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="지력 기준 정렬"
|
||||
@click="sortByHeader(6)"
|
||||
>
|
||||
지력<span class="legacy-sort-indicator">{{ sortIndicator(6, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th :aria-sort="sort === 7 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="명성 기준 정렬"
|
||||
@click="sortByHeader(7)"
|
||||
>
|
||||
명성<span class="legacy-sort-indicator">{{ sortIndicator(7, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th :aria-sort="sort === 8 ? 'descending' : undefined">
|
||||
<button
|
||||
class="legacy-sort-header"
|
||||
type="button"
|
||||
aria-label="계급 기준 정렬"
|
||||
@click="sortByHeader(8)"
|
||||
>
|
||||
계급<span class="legacy-sort-indicator">{{ sortIndicator(8, 'descending') }}</span>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -202,32 +282,6 @@ onMounted(() => {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.sort-form {
|
||||
min-height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sort-form select,
|
||||
.sort-form input[type='submit'] {
|
||||
height: 23px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.sort-form select {
|
||||
background: #ddd;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.sort-form input[type='submit'] {
|
||||
border: 2px outset #fff;
|
||||
background: #6b6b6b;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.npc-table {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -321,8 +375,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.legacy-close:focus-visible,
|
||||
.sort-form select:focus-visible,
|
||||
.sort-form input[type='submit']:focus-visible {
|
||||
.trait-tooltip:focus-visible {
|
||||
outline: 2px solid #f39c12;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user