Merge remote-tracking branch 'origin/main' into fix/command-editor-followup-20260812
This commit is contained in:
@@ -31,15 +31,19 @@ const props = defineProps<{
|
||||
class="title"
|
||||
:style="{ backgroundColor: props.nation.color, color: legacyNationTextColor(props.nation.color) }"
|
||||
>
|
||||
{{ props.nation.name }} (Lv {{ props.nation.level }})
|
||||
{{ props.nation.name }}<template v-if="props.nation.id > 0"> (Lv {{ props.nation.level }})</template>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<span>국고</span><strong>{{ props.nation.gold.toLocaleString() }}</strong> <span>국량</span
|
||||
><strong>{{ props.nation.rice.toLocaleString() }}</strong> <span>기술</span
|
||||
><strong>{{ props.nation.tech.toLocaleString() }}</strong> <span>체제</span
|
||||
><strong>{{ props.nation.typeCode }}</strong> <span>수도</span
|
||||
><strong>{{ props.nation.capitalCityId ?? '-' }}</strong> <span>국가 등급</span
|
||||
><strong>{{ props.nation.level }}</strong>
|
||||
<span>국고</span
|
||||
><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.gold.toLocaleString() }}</strong>
|
||||
<span>국량</span
|
||||
><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.rice.toLocaleString() }}</strong>
|
||||
<span>기술</span
|
||||
><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.tech.toLocaleString() }}</strong>
|
||||
<span>체제</span><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.typeCode }}</strong>
|
||||
<span>수도</span
|
||||
><strong>{{ props.nation.id === 0 ? '해당 없음' : (props.nation.capitalCityId ?? '-') }}</strong>
|
||||
<span>국가 등급</span><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.level }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import MapViewer from '../components/main/MapViewer.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
@@ -10,6 +10,8 @@ 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 matrixElement = ref<HTMLTableElement | null>(null);
|
||||
const matrixHeight = ref<number | null>(null);
|
||||
const router = useRouter();
|
||||
const goBack = () => router.push('/');
|
||||
const state = (value: number) => ({ 0: '★', 1: '▲', 2: '', 7: '@' })[value] ?? 'ㆍ';
|
||||
@@ -19,6 +21,23 @@ const nationNameStyle = (color: string) => ({
|
||||
backgroundColor: color,
|
||||
color: legacyNationTextColor(color),
|
||||
});
|
||||
watch(
|
||||
matrixElement,
|
||||
(element, _previousElement, onCleanup) => {
|
||||
if (!element) {
|
||||
matrixHeight.value = null;
|
||||
return;
|
||||
}
|
||||
const updateHeight = () => {
|
||||
matrixHeight.value = element.getBoundingClientRect().height;
|
||||
};
|
||||
const observer = new ResizeObserver(updateHeight);
|
||||
observer.observe(element);
|
||||
updateHeight();
|
||||
onCleanup(() => observer.disconnect());
|
||||
},
|
||||
{ flush: 'post' }
|
||||
);
|
||||
onMounted(async () => {
|
||||
try {
|
||||
[data.value, layout.value] = await Promise.all([
|
||||
@@ -39,8 +58,8 @@ onMounted(async () => {
|
||||
<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">
|
||||
<div class="matrix-wrap" :style="{ height: matrixHeight === null ? undefined : `${matrixHeight}px` }">
|
||||
<table ref="matrixElement" class="matrix">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -194,7 +213,6 @@ onMounted(async () => {
|
||||
background: green;
|
||||
}
|
||||
.matrix-wrap {
|
||||
height: 1212.5px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user