feat(frontend): restore betting and NPC list pages
This commit is contained in:
@@ -28,6 +28,8 @@ import DynastyDetailView from '../views/DynastyDetailView.vue';
|
||||
import SurveyView from '../views/SurveyView.vue';
|
||||
import TroopView from '../views/TroopView.vue';
|
||||
import YearbookView from '../views/YearbookView.vue';
|
||||
import NationBettingView from '../views/NationBettingView.vue';
|
||||
import NpcListView from '../views/NpcListView.vue';
|
||||
import { useSessionStore } from '../stores/session';
|
||||
|
||||
const routes = [
|
||||
@@ -220,6 +222,20 @@ const routes = [
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/nation-betting',
|
||||
name: 'nation-betting',
|
||||
component: NationBettingView,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
requiresGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/npc-list',
|
||||
name: 'npc-list',
|
||||
component: NpcListView,
|
||||
},
|
||||
{
|
||||
path: '/my-page',
|
||||
name: 'my-page',
|
||||
|
||||
@@ -103,6 +103,8 @@ watch(
|
||||
<RouterLink class="ghost" to="/hall-of-fame">명예의 전당</RouterLink>
|
||||
<RouterLink class="ghost" to="/dynasty">왕조일람</RouterLink>
|
||||
<RouterLink class="ghost" to="/yearbook">연감</RouterLink>
|
||||
<RouterLink class="ghost" to="/nation-betting">천통국 베팅</RouterLink>
|
||||
<RouterLink class="ghost" to="/npc-list">빙의일람</RouterLink>
|
||||
<a class="ghost" href="/xe/community" target="_blank" rel="noopener">게시판</a>
|
||||
<RouterLink class="ghost" to="/battle-simulator">전투 시뮬레이터</RouterLink>
|
||||
<RouterLink class="ghost" to="/my-page">내 정보</RouterLink>
|
||||
|
||||
@@ -0,0 +1,640 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type BettingListItem = {
|
||||
id: number;
|
||||
type: string;
|
||||
name: string;
|
||||
finished: boolean;
|
||||
selectCnt: number;
|
||||
isExclusive: boolean | null;
|
||||
reqInheritancePoint: boolean;
|
||||
openYearMonth: number;
|
||||
closeYearMonth: number;
|
||||
winner: unknown;
|
||||
totalAmount: number;
|
||||
};
|
||||
type BettingList = {
|
||||
bettingList: Record<string, BettingListItem>;
|
||||
year: number;
|
||||
month: number;
|
||||
};
|
||||
type BettingDetail = {
|
||||
bettingInfo: Omit<BettingListItem, 'totalAmount'> & {
|
||||
candidates: unknown;
|
||||
};
|
||||
bettingDetail: ReadonlyArray<readonly [string, number]>;
|
||||
myBetting: ReadonlyArray<readonly [string, number]>;
|
||||
remainPoint: number;
|
||||
year: number;
|
||||
month: number;
|
||||
};
|
||||
const bettingApi = trpc.betting as unknown as {
|
||||
getList: {
|
||||
query: (input: { req: 'bettingNation' }) => Promise<BettingList>;
|
||||
};
|
||||
getDetail: {
|
||||
query: (input: { bettingId: number }) => Promise<BettingDetail>;
|
||||
};
|
||||
bet: {
|
||||
mutate: (input: { bettingId: number; bettingType: number[]; amount: number }) => Promise<{ result: boolean }>;
|
||||
};
|
||||
};
|
||||
type Candidate = {
|
||||
title: string;
|
||||
info: string;
|
||||
};
|
||||
|
||||
const list = ref<BettingList | null>(null);
|
||||
const detail = ref<BettingDetail | null>(null);
|
||||
const selectedBettingId = ref<number | null>(null);
|
||||
const selectedCandidates = ref<number[]>([]);
|
||||
const amount = ref(0);
|
||||
const loadingList = ref(false);
|
||||
const loadingDetail = ref(false);
|
||||
const submitting = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const noticeMessage = ref('');
|
||||
|
||||
const currentYearMonth = computed(() => {
|
||||
if (!detail.value) {
|
||||
return 0;
|
||||
}
|
||||
return detail.value.year * 12 + detail.value.month - 1;
|
||||
});
|
||||
|
||||
const listYearMonth = computed(() => {
|
||||
if (!list.value) {
|
||||
return 0;
|
||||
}
|
||||
return list.value.year * 12 + list.value.month - 1;
|
||||
});
|
||||
|
||||
const listItems = computed(() =>
|
||||
list.value
|
||||
? Object.values(list.value.bettingList).sort((left, right) => right.id - left.id)
|
||||
: []
|
||||
);
|
||||
|
||||
const info = computed(() => detail.value?.bettingInfo ?? null);
|
||||
|
||||
const candidates = computed<Candidate[]>(() => {
|
||||
const value = info.value?.candidates;
|
||||
if (!Array.isArray(value)) {
|
||||
return [];
|
||||
}
|
||||
return value.map((candidate) => {
|
||||
if (!candidate || typeof candidate !== 'object' || Array.isArray(candidate)) {
|
||||
return { title: '-', info: '' };
|
||||
}
|
||||
return {
|
||||
title: typeof candidate.title === 'string' ? candidate.title : '-',
|
||||
info: typeof candidate.info === 'string' ? candidate.info : '',
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const winner = computed(() => {
|
||||
const value = info.value?.winner;
|
||||
if (!Array.isArray(value)) {
|
||||
return new Set<number>();
|
||||
}
|
||||
return new Set(value.filter((item): item is number => typeof item === 'number' && Number.isInteger(item)));
|
||||
});
|
||||
|
||||
const detailRows = computed(() =>
|
||||
(detail.value?.bettingDetail ?? [])
|
||||
.filter(([key]) => readSelection(key).every((value) => value >= 0))
|
||||
.sort((left, right) => right[1] - left[1])
|
||||
);
|
||||
|
||||
const myBetMap = computed(() => new Map(detail.value?.myBetting ?? []));
|
||||
|
||||
const totalAmount = computed(() =>
|
||||
(detail.value?.bettingDetail ?? []).reduce((sum, [, value]) => sum + value, 0)
|
||||
);
|
||||
|
||||
const pureAmount = computed(() =>
|
||||
(detail.value?.bettingDetail ?? []).reduce(
|
||||
(sum, [key, value]) => sum + (readSelection(key).some((item) => item < 0) ? 0 : value),
|
||||
0
|
||||
)
|
||||
);
|
||||
|
||||
const candidateAmounts = computed(() => {
|
||||
const result = new Map<number, number>();
|
||||
for (const [key, value] of detail.value?.bettingDetail ?? []) {
|
||||
const selection = readSelection(key);
|
||||
if (selection.some((item) => item < 0)) {
|
||||
continue;
|
||||
}
|
||||
for (const item of selection) {
|
||||
result.set(item, (result.get(item) ?? 0) + value);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
const usedAmount = computed(() =>
|
||||
Array.from(myBetMap.value.values()).reduce((sum, value) => sum + value, 0)
|
||||
);
|
||||
|
||||
const selectedKey = computed(() => JSON.stringify([...selectedCandidates.value].sort((a, b) => a - b)));
|
||||
|
||||
const getErrorMessage = (error: unknown): string => {
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
return typeof error === 'string' ? error : '요청을 처리하지 못했습니다.';
|
||||
};
|
||||
|
||||
const parseYearMonth = (yearMonth: number): [number, number] => [
|
||||
Math.floor(yearMonth / 12),
|
||||
(yearMonth % 12) + 1,
|
||||
];
|
||||
|
||||
const readSelection = (value: string): number[] => {
|
||||
try {
|
||||
const parsed: unknown = JSON.parse(value);
|
||||
return Array.isArray(parsed)
|
||||
? parsed.filter((item): item is number => typeof item === 'number' && Number.isInteger(item))
|
||||
: [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const selectionLabel = (value: string): string =>
|
||||
readSelection(value)
|
||||
.map((index) => candidates.value[index]?.title ?? '-')
|
||||
.join(', ');
|
||||
|
||||
const isListOpen = (item: BettingListItem): boolean =>
|
||||
!item.finished && listYearMonth.value <= item.closeYearMonth;
|
||||
|
||||
const isDetailOpen = computed(() =>
|
||||
Boolean(info.value && !info.value.finished && currentYearMonth.value <= info.value.closeYearMonth)
|
||||
);
|
||||
|
||||
const matchCount = (key: string): number =>
|
||||
readSelection(key).reduce((count, value) => count + (winner.value.has(value) ? 1 : 0), 0);
|
||||
|
||||
const rowColor = (key: string): string => {
|
||||
if (!info.value?.finished) {
|
||||
return '';
|
||||
}
|
||||
const matched = matchCount(key);
|
||||
if (info.value.isExclusive) {
|
||||
return matched === info.value.selectCnt ? 'green' : 'red';
|
||||
}
|
||||
return matched === 0 ? 'red' : matched < info.value.selectCnt ? 'yellow' : 'green';
|
||||
};
|
||||
|
||||
const expectedMultiplier = (key: string, betAmount: number): string => {
|
||||
if (betAmount <= 0) {
|
||||
return '0.0';
|
||||
}
|
||||
if (!info.value?.finished) {
|
||||
const reward = info.value?.isExclusive || info.value?.selectCnt === 1 ? totalAmount.value : totalAmount.value / 2;
|
||||
return (reward / betAmount).toFixed(1);
|
||||
}
|
||||
const matched = matchCount(key);
|
||||
const matchedAmount = detailRows.value
|
||||
.filter(([candidateKey]) => matchCount(candidateKey) === matched)
|
||||
.reduce((sum, [, value]) => sum + value, 0);
|
||||
return matchedAmount > 0 ? (totalAmount.value / matchedAmount).toFixed(1) : '0.0';
|
||||
};
|
||||
|
||||
const loadList = async () => {
|
||||
if (loadingList.value) {
|
||||
return;
|
||||
}
|
||||
loadingList.value = true;
|
||||
errorMessage.value = '';
|
||||
try {
|
||||
list.value = await bettingApi.getList.query({ req: 'bettingNation' });
|
||||
} catch (error) {
|
||||
errorMessage.value = getErrorMessage(error);
|
||||
} finally {
|
||||
loadingList.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadDetail = async (bettingId: number, resetSelection = true, preserveNotice = false) => {
|
||||
selectedBettingId.value = bettingId;
|
||||
loadingDetail.value = true;
|
||||
errorMessage.value = '';
|
||||
if (!preserveNotice) {
|
||||
noticeMessage.value = '';
|
||||
}
|
||||
try {
|
||||
detail.value = await bettingApi.getDetail.query({ bettingId });
|
||||
if (resetSelection) {
|
||||
selectedCandidates.value = [];
|
||||
amount.value = 0;
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage.value = getErrorMessage(error);
|
||||
} finally {
|
||||
loadingDetail.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleCandidate = (index: number) => {
|
||||
if (!info.value || !isDetailOpen.value) {
|
||||
return;
|
||||
}
|
||||
const current = selectedCandidates.value;
|
||||
if (current.includes(index)) {
|
||||
selectedCandidates.value = current.filter((value) => value !== index);
|
||||
return;
|
||||
}
|
||||
if (info.value.selectCnt === 1) {
|
||||
selectedCandidates.value = [index];
|
||||
return;
|
||||
}
|
||||
if (current.length >= info.value.selectCnt) {
|
||||
errorMessage.value = `이미 ${info.value.selectCnt}개를 선택했습니다.`;
|
||||
return;
|
||||
}
|
||||
selectedCandidates.value = [...current, index];
|
||||
};
|
||||
|
||||
const submitBet = async () => {
|
||||
if (!info.value || submitting.value) {
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
errorMessage.value = '';
|
||||
noticeMessage.value = '';
|
||||
try {
|
||||
await bettingApi.bet.mutate({
|
||||
bettingId: info.value.id,
|
||||
bettingType: [...selectedCandidates.value],
|
||||
amount: amount.value,
|
||||
});
|
||||
noticeMessage.value = '베팅했습니다';
|
||||
await loadDetail(info.value.id, true, true);
|
||||
await loadList();
|
||||
} catch (error) {
|
||||
// Legacy form keeps the selected candidates and amount after a failed request.
|
||||
errorMessage.value = getErrorMessage(error);
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
void loadList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main id="nation-betting-container" class="nation-betting-page legacy-bg0">
|
||||
<header class="legacy-top-bar">
|
||||
<RouterLink class="legacy-nav-button" to="/">돌아가기</RouterLink>
|
||||
<button class="legacy-nav-button" type="button" :disabled="loadingList" @click="loadList">갱신</button>
|
||||
<h1>국가 베팅장</h1>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</header>
|
||||
|
||||
<div v-if="errorMessage" class="betting-notice error" role="alert">{{ errorMessage }}</div>
|
||||
<div v-if="noticeMessage" class="betting-notice success" role="status">{{ noticeMessage }}</div>
|
||||
|
||||
<section v-if="detail && info" class="betting-detail">
|
||||
<div class="section-title legacy-bg2">
|
||||
{{ info.name }}
|
||||
<span v-if="info.finished">(종료)</span>
|
||||
<span v-else-if="currentYearMonth <= info.closeYearMonth">
|
||||
({{ parseYearMonth(info.closeYearMonth)[0] }}년
|
||||
{{ parseYearMonth(info.closeYearMonth)[1] }}월까지)
|
||||
</span>
|
||||
<span v-else>(베팅 마감)</span>
|
||||
(총액: {{ totalAmount.toLocaleString('ko-KR') }})
|
||||
</div>
|
||||
|
||||
<div class="betting-candidates">
|
||||
<button
|
||||
v-for="(candidate, index) in candidates"
|
||||
:key="`${info.id}-${index}`"
|
||||
type="button"
|
||||
class="betting-candidate"
|
||||
:class="{ picked: selectedCandidates.includes(index) || (info.finished && winner.has(index)) }"
|
||||
:disabled="!isDetailOpen"
|
||||
@click="toggleCandidate(index)"
|
||||
>
|
||||
<span class="candidate-title legacy-bg1">{{ candidate.title }}</span>
|
||||
<span class="candidate-info">
|
||||
<span v-for="line in candidate.info.split('<br>')" :key="line">{{ line }}</span>
|
||||
</span>
|
||||
<span class="candidate-rate">
|
||||
선택율:
|
||||
{{ (((candidateAmounts.get(index) ?? 0) / Math.max(1, pureAmount)) * 100).toFixed(1) }}%
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form v-if="isDetailOpen" class="betting-form" @submit.prevent="submitBet">
|
||||
<div>
|
||||
잔여 {{ info.reqInheritancePoint ? '포인트' : '금' }}:
|
||||
{{ detail.remainPoint.toLocaleString('ko-KR') }}
|
||||
</div>
|
||||
<div>사용 포인트: {{ usedAmount.toLocaleString('ko-KR') }}</div>
|
||||
<div>대상: {{ selectionLabel(selectedKey) }}</div>
|
||||
<input v-model.number="amount" aria-label="베팅 금액" type="number" min="10" max="1000" step="10" />
|
||||
<button type="submit" :disabled="submitting">베팅</button>
|
||||
</form>
|
||||
|
||||
<div class="payout-table">
|
||||
<div class="section-title legacy-bg2">배당 순위</div>
|
||||
<div class="payout-row payout-head">
|
||||
<div>대상</div>
|
||||
<div>베팅액</div>
|
||||
<div>내 베팅</div>
|
||||
<div>{{ info.finished ? '배율' : '기대 배율' }}</div>
|
||||
</div>
|
||||
<div v-for="[key, betAmount] in detailRows" :key="key" class="payout-row">
|
||||
<div :style="{ color: rowColor(key), fontWeight: myBetMap.has(key) ? 'bold' : undefined }">
|
||||
{{ selectionLabel(key) }}
|
||||
</div>
|
||||
<div>{{ betAmount.toLocaleString('ko-KR') }}</div>
|
||||
<div>{{ myBetMap.get(key)?.toLocaleString('ko-KR') ?? '' }}</div>
|
||||
<div>{{ expectedMultiplier(key, betAmount) }}배</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="loadingDetail && !detail" class="betting-loading">불러오는 중...</div>
|
||||
<section class="betting-list">
|
||||
<div class="section-title legacy-bg2">베팅 목록</div>
|
||||
<button
|
||||
v-for="item in listItems"
|
||||
:key="item.id"
|
||||
type="button"
|
||||
class="betting-item"
|
||||
:class="{ active: selectedBettingId === item.id }"
|
||||
@click="loadDetail(item.id)"
|
||||
>
|
||||
[{{ parseYearMonth(item.openYearMonth)[0] }}년 {{ parseYearMonth(item.openYearMonth)[1] }}월]
|
||||
{{ item.name }}
|
||||
<span v-if="item.finished">(종료)</span>
|
||||
<span v-else-if="isListOpen(item)">
|
||||
({{ parseYearMonth(item.closeYearMonth)[0] }}년
|
||||
{{ parseYearMonth(item.closeYearMonth)[1] }}월까지)
|
||||
</span>
|
||||
<span v-else>(베팅 마감)</span>
|
||||
</button>
|
||||
<div v-if="loadingList && !list" class="betting-loading">로딩 중...</div>
|
||||
</section>
|
||||
|
||||
<footer class="betting-footer">
|
||||
<RouterLink class="legacy-nav-button" to="/">돌아가기</RouterLink>
|
||||
</footer>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nation-betting-page {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.legacy-top-bar {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: 90px 90px 1fr 90px 90px;
|
||||
}
|
||||
|
||||
.legacy-top-bar h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.legacy-nav-button,
|
||||
.betting-form button {
|
||||
height: 32px;
|
||||
border: 1px solid #004f28;
|
||||
background: #00582c;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.legacy-nav-button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.legacy-nav-button:hover,
|
||||
.legacy-nav-button:focus,
|
||||
.betting-form button:hover,
|
||||
.betting-form button:focus {
|
||||
filter: brightness(1.18);
|
||||
}
|
||||
|
||||
.legacy-nav-button:focus-visible,
|
||||
.betting-form button:focus-visible,
|
||||
.betting-candidate:focus-visible,
|
||||
.betting-item:focus-visible {
|
||||
outline: 2px solid #f39c12;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
min-height: 22px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.betting-candidates {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.betting-candidate {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 1px solid gray;
|
||||
border-radius: 0.5em;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.betting-candidate:disabled {
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.betting-candidate.picked {
|
||||
border: 1px solid white;
|
||||
outline: 1.5px solid white;
|
||||
}
|
||||
|
||||
.candidate-title,
|
||||
.candidate-info,
|
||||
.candidate-rate {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.candidate-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.picked .candidate-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.candidate-info,
|
||||
.candidate-rate {
|
||||
padding: 1ch;
|
||||
}
|
||||
|
||||
.candidate-info span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.betting-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.betting-form > div {
|
||||
grid-column: span 3;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.betting-form input {
|
||||
grid-column: span 4;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
border: 1px solid #777;
|
||||
background: #ddd;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.betting-form button {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.payout-table {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.payout-row {
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 2fr 3fr 2fr;
|
||||
}
|
||||
|
||||
.payout-row > div {
|
||||
min-width: 0;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.payout-row > div:not(:first-child) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.payout-head {
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
|
||||
.payout-head > div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.betting-list {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.betting-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0.25em;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.betting-item:hover,
|
||||
.betting-item:focus,
|
||||
.betting-item.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.betting-footer {
|
||||
min-height: 52px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.betting-footer .legacy-nav-button {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.betting-notice,
|
||||
.betting-loading {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.betting-notice.error {
|
||||
border: 1px solid #9b4848;
|
||||
color: #ffd0d0;
|
||||
}
|
||||
|
||||
.betting-notice.success {
|
||||
border: 1px solid #477a47;
|
||||
color: #d8f5d8;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.nation-betting-page {
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
.betting-candidates {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.betting-form {
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
.betting-form > div {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.betting-form input {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.betting-form button {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,321 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type NpcList = Awaited<ReturnType<typeof trpc.public.getNpcList.query>>;
|
||||
type NpcListSort = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
||||
|
||||
const sort = ref<NpcListSort>(1);
|
||||
const data = ref<NpcList | null>(null);
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
|
||||
const getErrorMessage = (error: unknown): string => {
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
return typeof error === 'string' ? error : '요청을 처리하지 못했습니다.';
|
||||
};
|
||||
|
||||
const load = async () => {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
errorMessage.value = '';
|
||||
try {
|
||||
data.value = await trpc.public.getNpcList.query({ sort: sort.value });
|
||||
} catch (error) {
|
||||
// Keep both the selected sort and the last successful table after a failed refresh.
|
||||
errorMessage.value = getErrorMessage(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main id="npc-list-container" class="npc-list-page">
|
||||
<table class="legacy-table title-table legacy-bg0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
빙 의 일 람<br />
|
||||
<RouterLink class="legacy-close" to="/">돌아가기</RouterLink>
|
||||
</td>
|
||||
</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>
|
||||
<button type="submit" :disabled="loading">정렬하기</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-if="errorMessage" class="npc-error" role="alert">{{ errorMessage }}</div>
|
||||
<div v-if="loading && !data" class="npc-loading">불러오는 중...</div>
|
||||
|
||||
<table v-if="data" class="legacy-table npc-table legacy-bg0">
|
||||
<colgroup>
|
||||
<col class="col-name" />
|
||||
<col class="col-owner" />
|
||||
<col class="col-level" />
|
||||
<col class="col-nation" />
|
||||
<col class="col-personality" />
|
||||
<col class="col-special" />
|
||||
<col class="col-stat" />
|
||||
<col class="col-leadership" />
|
||||
<col class="col-strength" />
|
||||
<col class="col-intelligence" />
|
||||
<col class="col-experience" />
|
||||
<col class="col-dedication" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr class="legacy-bg1">
|
||||
<th>희생된 장수</th>
|
||||
<th>악령 이름</th>
|
||||
<th>레벨</th>
|
||||
<th>국가</th>
|
||||
<th>성격</th>
|
||||
<th>특기</th>
|
||||
<th>종능</th>
|
||||
<th>통솔</th>
|
||||
<th>무력</th>
|
||||
<th>지력</th>
|
||||
<th>명성</th>
|
||||
<th>계급</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="general in data.generals" :key="general.id" :data-general-id="general.id">
|
||||
<td :class="{ possessed: general.npcState === 1 }">{{ general.name }}</td>
|
||||
<td>{{ general.ownerName }}</td>
|
||||
<td>Lv {{ general.level }}</td>
|
||||
<td>{{ general.nationName }}</td>
|
||||
<td>
|
||||
<span v-if="general.personality" class="trait-tooltip" tabindex="0">
|
||||
{{ general.personality.name }}
|
||||
<span role="tooltip">{{ general.personality.info }}</span>
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="general.specialDomestic" class="trait-tooltip" tabindex="0">
|
||||
{{ general.specialDomestic.name }}
|
||||
<span role="tooltip">{{ general.specialDomestic.info }}</span>
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
/
|
||||
<span v-if="general.specialWar" class="trait-tooltip" tabindex="0">
|
||||
{{ general.specialWar.name }}
|
||||
<span role="tooltip">{{ general.specialWar.info }}</span>
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td>{{ general.statTotal }}</td>
|
||||
<td>{{ general.leadership }}</td>
|
||||
<td>{{ general.strength }}</td>
|
||||
<td>{{ general.intelligence }}</td>
|
||||
<td>{{ general.experience }}</td>
|
||||
<td>{{ general.dedication }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="legacy-table footer-table legacy-bg0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><RouterLink class="legacy-close" to="/">돌아가기</RouterLink></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="banner">SAMMO · Legacy compatible NPC list</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.npc-list-page {
|
||||
width: 1000px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.legacy-table {
|
||||
width: 1000px;
|
||||
border-collapse: collapse;
|
||||
padding: 0;
|
||||
table-layout: fixed;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.legacy-table td,
|
||||
.legacy-table th {
|
||||
border: 1px solid gray;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.title-table td {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.sort-form {
|
||||
min-height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sort-form select,
|
||||
.sort-form button {
|
||||
height: 23px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.sort-form select {
|
||||
background: #ddd;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.sort-form button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.npc-table {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.npc-table th {
|
||||
height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.npc-table td {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.col-name,
|
||||
.col-owner {
|
||||
width: 102px;
|
||||
}
|
||||
|
||||
.col-level,
|
||||
.col-personality,
|
||||
.col-stat,
|
||||
.col-leadership,
|
||||
.col-strength,
|
||||
.col-intelligence {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.col-nation {
|
||||
width: 118px;
|
||||
}
|
||||
|
||||
.col-special {
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.col-experience,
|
||||
.col-dedication {
|
||||
width: 78px;
|
||||
}
|
||||
|
||||
.possessed {
|
||||
color: skyblue;
|
||||
}
|
||||
|
||||
.trait-tooltip {
|
||||
position: relative;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.trait-tooltip [role='tooltip'] {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 4px);
|
||||
width: 220px;
|
||||
padding: 5px 7px;
|
||||
transform: translateX(-50%);
|
||||
border: 1px solid #888;
|
||||
background: #202020;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.trait-tooltip:hover [role='tooltip'],
|
||||
.trait-tooltip:focus [role='tooltip'] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.legacy-close {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.legacy-close:hover,
|
||||
.legacy-close:focus {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.legacy-close:focus-visible,
|
||||
.sort-form select:focus-visible,
|
||||
.sort-form button:focus-visible {
|
||||
outline: 2px solid #f39c12;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.footer-table {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.footer-table td {
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.npc-error,
|
||||
.npc-loading {
|
||||
width: 1000px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.npc-error {
|
||||
border: 1px solid #9b4848;
|
||||
color: #ffd0d0;
|
||||
}
|
||||
</style>
|
||||
@@ -107,6 +107,7 @@ onMounted(() => {
|
||||
<RouterLink v-if="!session.isAuthed" class="ghost" to="/login">로그인</RouterLink>
|
||||
<RouterLink v-else-if="session.needsGeneral" class="ghost" to="/join">장수 생성/빙의</RouterLink>
|
||||
<RouterLink v-else class="ghost" to="/">메인으로</RouterLink>
|
||||
<RouterLink class="ghost" to="/npc-list">빙의일람</RouterLink>
|
||||
<button class="ghost" @click="refreshPublicData">새로고침</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user