feat: add ranking and hall of fame features
- Implemented new routes for Best General and Hall of Fame views in the frontend. - Created BestGeneralView and HallOfFameView components to display rankings based on game data. - Added new database models for RankData and HallOfFame to store ranking information. - Introduced ranking types and hall of fame types in common types for better type safety. - Developed ranking router to handle fetching of best general and hall of fame data. - Updated database schema with migrations to include new tables for rank data and hall of fame. - Enhanced the main view with links to the new ranking features.
This commit is contained in:
@@ -20,6 +20,8 @@ import BoardView from '../views/BoardView.vue';
|
||||
import NationAffairsView from '../views/NationAffairsView.vue';
|
||||
import ScoutMessageView from '../views/ScoutMessageView.vue';
|
||||
import DiplomacyView from '../views/DiplomacyView.vue';
|
||||
import BestGeneralView from '../views/BestGeneralView.vue';
|
||||
import HallOfFameView from '../views/HallOfFameView.vue';
|
||||
import { useSessionStore } from '../stores/session';
|
||||
|
||||
const routes = [
|
||||
@@ -163,6 +165,19 @@ const routes = [
|
||||
requiresGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/best-general',
|
||||
name: 'best-general',
|
||||
component: BestGeneralView,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/hall-of-fame',
|
||||
name: 'hall-of-fame',
|
||||
component: HallOfFameView,
|
||||
},
|
||||
{
|
||||
path: '/my-page',
|
||||
name: 'my-page',
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type RankEntry = {
|
||||
id: number;
|
||||
name: string;
|
||||
ownerName: string | null;
|
||||
nationName: string;
|
||||
bgColor: string;
|
||||
fgColor: string;
|
||||
picture: string | null;
|
||||
imageServer: number;
|
||||
value: number;
|
||||
printValue: string;
|
||||
};
|
||||
|
||||
type RankSection = {
|
||||
title: string;
|
||||
valueType: 'int' | 'percent';
|
||||
entries: RankEntry[];
|
||||
};
|
||||
|
||||
type UniqueOwner = {
|
||||
id: number;
|
||||
name: string;
|
||||
nationName: string;
|
||||
bgColor: string;
|
||||
fgColor: string;
|
||||
};
|
||||
|
||||
type UniqueItemSection = {
|
||||
title: string;
|
||||
slot: string;
|
||||
owners: UniqueOwner[];
|
||||
};
|
||||
|
||||
type BestGeneralPayload = {
|
||||
isUnited: boolean;
|
||||
sections: RankSection[];
|
||||
uniqueItems: UniqueItemSection[];
|
||||
};
|
||||
|
||||
const viewMode = ref<'user' | 'npc'>('user');
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const data = ref<BestGeneralPayload | null>(null);
|
||||
|
||||
const refresh = async () => {
|
||||
loading.value = true;
|
||||
errorMessage.value = '';
|
||||
try {
|
||||
data.value = await trpc.ranking.getBestGeneral.query({ view: viewMode.value });
|
||||
} catch (error) {
|
||||
errorMessage.value = error instanceof Error ? error.message : '명장일람을 불러오지 못했습니다.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const emptyLabel = computed(() => (loading.value ? '불러오는 중...' : '표시할 데이터가 없습니다.'));
|
||||
|
||||
onMounted(() => {
|
||||
void refresh();
|
||||
});
|
||||
|
||||
watch(viewMode, () => {
|
||||
void refresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="main-page">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">명장일람</h1>
|
||||
<p class="page-subtitle">전장 기록을 기준으로 장수 순위를 확인합니다.</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="ghost" :class="{ active: viewMode === 'user' }" @click="viewMode = 'user'">
|
||||
유저 보기
|
||||
</button>
|
||||
<button class="ghost" :class="{ active: viewMode === 'npc' }" @click="viewMode = 'npc'">
|
||||
NPC 보기
|
||||
</button>
|
||||
<button class="ghost" @click="refresh">새로고침</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="errorMessage" class="error">{{ errorMessage }}</div>
|
||||
<div v-else-if="!data" class="placeholder">{{ emptyLabel }}</div>
|
||||
|
||||
<section v-if="data" class="grid gap-4">
|
||||
<div v-for="section in data.sections" :key="section.title" class="bg-zinc-900 border border-zinc-800 rounded p-4">
|
||||
<h2 class="text-base font-semibold mb-3">{{ section.title }}</h2>
|
||||
<div v-if="section.entries.length === 0" class="text-xs text-zinc-500">{{ emptyLabel }}</div>
|
||||
<ul v-else class="space-y-2">
|
||||
<li
|
||||
v-for="entry in section.entries"
|
||||
:key="entry.id"
|
||||
class="flex items-center justify-between bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full" :style="{ backgroundColor: entry.bgColor }" />
|
||||
<span class="font-semibold">{{ entry.name }}</span>
|
||||
<span class="text-xs text-zinc-400">{{ entry.nationName }}</span>
|
||||
</div>
|
||||
<div class="text-xs text-zinc-200">{{ entry.printValue }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="data" class="mt-6 bg-zinc-900 border border-zinc-800 rounded p-4">
|
||||
<h2 class="text-base font-semibold mb-3">유니크 아이템 소유자</h2>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div v-for="item in data.uniqueItems" :key="item.title" class="bg-zinc-950 border border-zinc-800 rounded p-3">
|
||||
<h3 class="text-sm font-semibold mb-2">{{ item.title }}</h3>
|
||||
<ul class="space-y-1 text-xs">
|
||||
<li v-for="owner in item.owners" :key="owner.id" class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full" :style="{ backgroundColor: owner.bgColor }" />
|
||||
<span>{{ owner.name }}</span>
|
||||
<span class="text-zinc-500">{{ owner.nationName }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type HallOption = {
|
||||
season: number;
|
||||
scenarios: Array<{ id: number; name: string; count: number }>;
|
||||
};
|
||||
|
||||
type HallEntry = {
|
||||
generalId: number;
|
||||
name: string;
|
||||
nationName: string;
|
||||
bgColor: string;
|
||||
fgColor: string;
|
||||
value: number;
|
||||
printValue: string;
|
||||
serverName: string;
|
||||
serverIdx: number;
|
||||
scenarioName: string;
|
||||
startTime: string | null;
|
||||
unitedTime: string | null;
|
||||
};
|
||||
|
||||
type HallSection = {
|
||||
title: string;
|
||||
valueType: 'int' | 'percent';
|
||||
entries: HallEntry[];
|
||||
};
|
||||
|
||||
type HallPayload = {
|
||||
sections: HallSection[];
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const options = ref<HallOption[]>([]);
|
||||
const selectedSeason = ref<number | null>(null);
|
||||
const selectedScenario = ref<number | null>(null);
|
||||
const data = ref<HallPayload | null>(null);
|
||||
|
||||
const selectedSeasonOptions = computed(() => {
|
||||
if (selectedSeason.value === null) {
|
||||
return [];
|
||||
}
|
||||
return options.value.find((season) => season.season === selectedSeason.value)?.scenarios ?? [];
|
||||
});
|
||||
|
||||
const loadOptions = async () => {
|
||||
try {
|
||||
options.value = await trpc.ranking.getHallOfFameOptions.query();
|
||||
if (options.value.length > 0 && selectedSeason.value === null) {
|
||||
selectedSeason.value = options.value[0]!.season;
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage.value = error instanceof Error ? error.message : '명예의 전당 옵션을 불러오지 못했습니다.';
|
||||
}
|
||||
};
|
||||
|
||||
const loadHall = async () => {
|
||||
if (selectedSeason.value === null) {
|
||||
data.value = null;
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
errorMessage.value = '';
|
||||
try {
|
||||
const result = await trpc.ranking.getHallOfFame.query({
|
||||
season: selectedSeason.value,
|
||||
scenario: selectedScenario.value ?? undefined,
|
||||
});
|
||||
data.value = result as HallPayload;
|
||||
} catch (error) {
|
||||
errorMessage.value = error instanceof Error ? error.message : '명예의 전당 데이터를 불러오지 못했습니다.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch(selectedSeason, () => {
|
||||
selectedScenario.value = null;
|
||||
void loadHall();
|
||||
});
|
||||
|
||||
watch(selectedScenario, () => {
|
||||
void loadHall();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await loadOptions();
|
||||
await loadHall();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="main-page">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">명예의 전당</h1>
|
||||
<p class="page-subtitle">시즌별 최고 기록을 확인합니다.</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="ghost" @click="loadOptions">목록 새로고침</button>
|
||||
<button class="ghost" @click="loadHall">데이터 새로고침</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="bg-zinc-900 border border-zinc-800 rounded p-4 mb-4">
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<label class="flex flex-col gap-2 text-sm">
|
||||
<span class="text-xs text-zinc-400">시즌 선택</span>
|
||||
<select v-model.number="selectedSeason" class="bg-zinc-950 border border-zinc-700 rounded px-3 py-2">
|
||||
<option v-for="season in options" :key="season.season" :value="season.season">
|
||||
시즌 {{ season.season }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex flex-col gap-2 text-sm">
|
||||
<span class="text-xs text-zinc-400">시나리오 선택</span>
|
||||
<select v-model.number="selectedScenario" class="bg-zinc-950 border border-zinc-700 rounded px-3 py-2">
|
||||
<option :value="null">전체</option>
|
||||
<option v-for="scenario in selectedSeasonOptions" :key="scenario.id" :value="scenario.id">
|
||||
{{ scenario.name }} ({{ scenario.count }}회)
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="error">{{ errorMessage }}</div>
|
||||
<div v-else-if="loading" class="placeholder">불러오는 중...</div>
|
||||
<div v-else-if="!data" class="placeholder">표시할 데이터가 없습니다.</div>
|
||||
|
||||
<section v-if="data" class="grid gap-4">
|
||||
<div v-for="section in data.sections" :key="section.title" class="bg-zinc-900 border border-zinc-800 rounded p-4">
|
||||
<h2 class="text-base font-semibold mb-3">{{ section.title }}</h2>
|
||||
<div v-if="section.entries.length === 0" class="text-xs text-zinc-500">표시할 데이터가 없습니다.</div>
|
||||
<ul v-else class="space-y-2">
|
||||
<li
|
||||
v-for="entry in section.entries"
|
||||
:key="entry.generalId"
|
||||
class="flex items-center justify-between bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full" :style="{ backgroundColor: entry.bgColor }" />
|
||||
<span class="font-semibold">{{ entry.name }}</span>
|
||||
<span class="text-xs text-zinc-400">{{ entry.nationName }}</span>
|
||||
</div>
|
||||
<div class="text-xs text-zinc-200">{{ entry.printValue }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
@@ -98,6 +98,8 @@ watch(
|
||||
<RouterLink class="ghost" to="/diplomacy">외교부</RouterLink>
|
||||
<RouterLink class="ghost" to="/chief-center">사령부</RouterLink>
|
||||
<RouterLink class="ghost" to="/battle-center">감찰부</RouterLink>
|
||||
<RouterLink class="ghost" to="/best-general">명장일람</RouterLink>
|
||||
<RouterLink class="ghost" to="/hall-of-fame">명예의 전당</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>
|
||||
|
||||
Reference in New Issue
Block a user