304 lines
9.0 KiB
Vue
304 lines
9.0 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from 'vue';
|
||
import MapViewer from '../components/main/MapViewer.vue';
|
||
import { trpc } from '../utils/trpc';
|
||
|
||
type Result = Awaited<ReturnType<typeof trpc.world.getGlobalInfo.query>>;
|
||
type Layout = Awaited<ReturnType<typeof trpc.world.getMapLayout.query>>;
|
||
const data = ref<Result | null>(null);
|
||
const layout = ref<Layout | null>(null);
|
||
const error = ref('');
|
||
const state = (value: number) => ({ 0: '★', 1: '▲', 2: '', 7: '@' })[value] ?? 'ㆍ';
|
||
const stateClass = (value: number) => `state-${value}`;
|
||
const nationMap = computed(() => new Map(data.value?.nations.map((nation) => [nation.id, nation]) ?? []));
|
||
const isBrightColor = (color: string): boolean => {
|
||
const normalized = color.trim().replace(/^#/u, '');
|
||
if (!/^[0-9a-f]{6}$/iu.test(normalized)) return false;
|
||
const red = Number.parseInt(normalized.slice(0, 2), 16);
|
||
const green = Number.parseInt(normalized.slice(2, 4), 16);
|
||
const blue = Number.parseInt(normalized.slice(4, 6), 16);
|
||
return red * 0.299 + green * 0.587 + blue * 0.114 > 170;
|
||
};
|
||
const nationNameStyle = (color: string) => ({
|
||
backgroundColor: color,
|
||
color: isBrightColor(color) ? '#000' : '#fff',
|
||
});
|
||
onMounted(async () => {
|
||
try {
|
||
[data.value, layout.value] = await Promise.all([
|
||
trpc.world.getGlobalInfo.query(),
|
||
trpc.world.getMapLayout.query(),
|
||
]);
|
||
} catch (cause) {
|
||
error.value = cause instanceof Error ? cause.message : '중원 정보를 불러오지 못했습니다.';
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<main class="global-page legacy-bg0">
|
||
<table class="legacy-title">
|
||
<tbody>
|
||
<tr>
|
||
<td>중 원 정 보<br /><RouterLink to="/">돌아가기</RouterLink></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p v-if="error" class="error">{{ error }}</p>
|
||
<section v-if="data" class="section">
|
||
<h2 class="blue">외교 현황</h2>
|
||
<div class="matrix-wrap">
|
||
<table class="matrix">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th
|
||
v-for="nation in data.nations"
|
||
:key="nation.id"
|
||
class="vertical"
|
||
:style="{ backgroundColor: nation.color }"
|
||
>
|
||
{{ nation.name }}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="me in data.nations" :key="me.id">
|
||
<th :style="{ backgroundColor: me.color }">{{ me.name }}</th>
|
||
<td
|
||
v-for="you in data.nations"
|
||
:key="you.id"
|
||
:class="[
|
||
stateClass(data.diplomacy[me.id]?.[you.id] ?? 2),
|
||
{ mine: me.id === data.myNationId || you.id === data.myNationId },
|
||
]"
|
||
>
|
||
{{ me.id === you.id ? '＼' : state(data.diplomacy[me.id]?.[you.id] ?? 2) }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td :colspan="data.nations.length + 1">
|
||
불가침 : <b class="state-7">@</b>, 통상 : ㆍ, 선포 : <b class="state-1">▲</b>, 교전 :
|
||
<b class="state-0">★</b>
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<section v-if="data?.conflict.length" class="section">
|
||
<h2 class="magenta">분쟁 현황</h2>
|
||
<div v-for="conflict in data.conflict" :key="conflict.cityId" class="conflict">
|
||
<strong>{{ conflict.cityName }}</strong>
|
||
<div>
|
||
<div v-for="(percent, id) in conflict.nations" :key="id" class="conflict-row">
|
||
<span :style="{ backgroundColor: nationMap.get(Number(id))?.color }">{{
|
||
nationMap.get(Number(id))?.name
|
||
}}</span
|
||
><em>{{ percent.toFixed(1) }}%</em
|
||
><i :style="{ width: `${percent}%`, backgroundColor: nationMap.get(Number(id))?.color }" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section v-if="data && layout" class="section map-section">
|
||
<h2 class="green">중원 지도</h2>
|
||
<div class="map-grid">
|
||
<MapViewer :map-data="data.map" :map-layout="layout" :loading="false" />
|
||
<div class="nation-list">
|
||
<table class="simple-nation-list">
|
||
<thead>
|
||
<tr>
|
||
<th class="nation-name-column">국명</th>
|
||
<th class="nation-power-column">국력</th>
|
||
<th class="nation-count-column">장수</th>
|
||
<th class="nation-count-column">속령</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="nation in data.nations" :key="nation.id">
|
||
<td><span :style="nationNameStyle(nation.color)">{{ nation.name }}</span></td>
|
||
<td>{{ nation.power.toLocaleString() }}</td>
|
||
<td>{{ nation.generalCount.toLocaleString() }}</td>
|
||
<td
|
||
:title="nation.cities.join(', ')"
|
||
:aria-label="`속령 ${nation.cities.length}개: ${nation.cities.join(', ')}`"
|
||
>
|
||
{{ nation.cities.length.toLocaleString() }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<table class="legacy-title footer">
|
||
<tbody>
|
||
<tr>
|
||
<td><RouterLink to="/">돌아가기</RouterLink></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</main>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.global-page {
|
||
width: 1000px;
|
||
margin: 0 auto;
|
||
font-size: 14px;
|
||
}
|
||
.legacy-title {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: center;
|
||
}
|
||
.legacy-title td {
|
||
border: 1px solid #777;
|
||
padding: 4px;
|
||
}
|
||
.section {
|
||
margin-top: 21px;
|
||
}
|
||
.section h2 {
|
||
font-size: 16.8px;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
margin: 0;
|
||
border-block: 1px solid #777;
|
||
padding: 2px;
|
||
}
|
||
.blue {
|
||
background: #00f;
|
||
}
|
||
.magenta {
|
||
background: #f0f;
|
||
}
|
||
.green {
|
||
background: green;
|
||
}
|
||
.matrix-wrap {
|
||
overflow-x: auto;
|
||
}
|
||
.matrix {
|
||
margin: auto;
|
||
min-width: 400px;
|
||
border-collapse: collapse;
|
||
text-align: center;
|
||
}
|
||
.matrix th {
|
||
font-weight: 400;
|
||
}
|
||
.matrix .vertical {
|
||
writing-mode: vertical-rl;
|
||
text-align: end;
|
||
padding: 1ch 0;
|
||
min-width: 1ch;
|
||
max-width: 3ch;
|
||
}
|
||
.matrix tbody th {
|
||
padding: 2px 1ch;
|
||
text-align: right;
|
||
min-width: 10ch;
|
||
}
|
||
.matrix td {
|
||
border-left: 1px solid gray;
|
||
border-top: 1px solid gray;
|
||
padding: 0;
|
||
}
|
||
.matrix td.mine {
|
||
background: #600;
|
||
}
|
||
.state-0 {
|
||
color: red;
|
||
}
|
||
.state-1 {
|
||
color: #f0f;
|
||
}
|
||
.state-7 {
|
||
color: #32cd32;
|
||
}
|
||
.conflict {
|
||
display: grid;
|
||
grid-template-columns: 16ch 1fr;
|
||
}
|
||
.conflict > strong {
|
||
text-align: right;
|
||
padding-right: 1ch;
|
||
align-self: center;
|
||
}
|
||
.conflict-row {
|
||
display: grid;
|
||
grid-template-columns: 16ch 6ch 1fr;
|
||
align-items: center;
|
||
}
|
||
.conflict-row span {
|
||
padding-left: 1ch;
|
||
}
|
||
.conflict-row em {
|
||
text-align: right;
|
||
padding-right: 0.5ch;
|
||
font-style: normal;
|
||
}
|
||
.conflict-row i {
|
||
height: 1.2em;
|
||
}
|
||
.map-grid {
|
||
display: grid;
|
||
grid-template-columns: 700px 300px;
|
||
}
|
||
.simple-nation-list {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
.simple-nation-list thead {
|
||
background-color: #ccc;
|
||
color: #000;
|
||
text-align: center;
|
||
}
|
||
.simple-nation-list th {
|
||
border: 0;
|
||
border-left: 1px solid gray;
|
||
padding: 2px 6px;
|
||
font-weight: 700;
|
||
}
|
||
.simple-nation-list td {
|
||
border: 0;
|
||
border-left: 1px solid gray;
|
||
padding: 1px 6px;
|
||
text-align: right;
|
||
}
|
||
.simple-nation-list td:first-child {
|
||
text-align: left;
|
||
}
|
||
.nation-name-column {
|
||
width: 44%;
|
||
}
|
||
.nation-power-column {
|
||
width: 23%;
|
||
}
|
||
.nation-count-column {
|
||
width: 15%;
|
||
}
|
||
.footer {
|
||
margin-top: 20px;
|
||
}
|
||
.error {
|
||
text-align: center;
|
||
color: #ff7373;
|
||
}
|
||
@media (max-width: 700px) {
|
||
.global-page {
|
||
width: 500px;
|
||
}
|
||
.map-grid {
|
||
grid-template-columns: 500px;
|
||
}
|
||
.nation-list {
|
||
width: 500px;
|
||
}
|
||
}
|
||
</style>
|