Merge remote-tracking branch 'origin/main' into feat/ref-nation-card-20260813

This commit is contained in:
2026-08-13 17:55:25 +00:00
9 changed files with 527 additions and 162 deletions
@@ -109,6 +109,26 @@ const mapSelectedCityId = computed<number | null>(() => {
return null;
});
const currentCityName = computed(() => {
const cityId = props.mapData?.myCity;
if (!cityId) return '-';
return props.mapLayout?.cityList.find((city) => city.id === cityId)?.name ?? '-';
});
const selectedMapTargetName = computed(() => {
if (presentation.value.mapTarget === 'city') {
const cityId = mapSelectedCityId.value;
if (!cityId) return '-';
return props.mapLayout?.cityList.find((city) => city.id === cityId)?.name ?? '-';
}
if (presentation.value.mapTarget === 'nation' && nationTargetField.value) {
const nationId = values[nationTargetField.value.key];
if (typeof nationId !== 'number') return '-';
return props.mapData?.nationList.find((nation) => nation[0] === nationId)?.[1] ?? '-';
}
return '-';
});
const distanceFromMyCity = (destination: number): number | null => {
const start = props.mapData?.myCity;
if (!start || !props.mapLayout) return null;
@@ -260,9 +280,23 @@ watch(
:selected-city-id="mapSelectedCityId"
:detail-mode="true"
:fit-container="true"
:show-current-city-marker="true"
@select-city="selectMapCity"
/>
<small>지도에서 도시를 클릭하거나 아래 목록에서 대상을 선택하세요.</small>
<div class="map-selection-status" aria-live="polite" data-testid="command-map-selection-status">
<span class="current-city-status">
<span class="status-key">현재 도시</span>
<strong>{{ currentCityName }}</strong>
</span>
<span aria-hidden="true"></span>
<span class="selected-target-status">
<span class="status-key">{{
presentation.mapTarget === 'nation' ? '선택 국가' : '선택 도시'
}}</span>
<strong>{{ selectedMapTargetName }}</strong>
</span>
</div>
<div v-if="mapTargetSummary" class="map-target-summary" data-testid="command-map-target-summary">
{{ mapTargetSummary }}
</div>
@@ -376,6 +410,41 @@ watch(
line-height: 1.35;
}
.map-selection-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 7px;
padding: 0 8px 5px;
color: rgba(232, 221, 196, 0.82);
line-height: 18px;
}
.map-selection-status > span:not([aria-hidden='true']) {
display: inline-flex;
gap: 4px;
align-items: center;
}
.status-key {
border-radius: 2px;
padding: 0 4px;
font-size: 10px;
font-weight: 700;
}
.current-city-status .status-key {
border: 1px solid #82cfff;
background: rgba(5, 27, 43, 0.92);
color: #d9f3ff;
}
.selected-target-status .status-key {
border: 1px solid rgba(255, 235, 150, 0.9);
background: rgba(201, 164, 90, 0.18);
color: #ffe996;
}
.command-guidance {
display: grid;
gap: 3px;
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { formatServerDateTime } from '@sammo-ts/common';
import { computed } from 'vue';
import { resolveTournamentStageName } from '../../utils/tournamentStatus';
@@ -19,11 +20,17 @@ const props = defineProps<{
}>();
const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
const lastExecutedStatus = computed(() =>
formatServerDateTime(props.status?.lastExecuted, { format: 'monthDayTime', fallback: '기록 없음' })
);
</script>
<template>
<section class="front-status" aria-label="접속 현황과 국가 방침">
<div class="activity-status" aria-label="설문 토너먼트 진행 현황">
<div class="activity-status" aria-label="동작 시각, 토너먼트와 설문 진행 현황">
<div class="status-row execution-status" :class="{ 'execution-status--empty': !status?.lastExecuted }">
동작 시각: {{ lastExecutedStatus }}
</div>
<div class="status-row tournament-status">
<RouterLink to="/tournament">
<span class="tournament-label">토너먼트: </span>{{ tournamentStatus }}
@@ -86,9 +93,8 @@ const tournamentStatus = computed(() => resolveTournamentStageName(props.tournam
.activity-status {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 66.666667%;
margin-left: auto;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
}
.activity-status .status-row {
@@ -106,6 +112,14 @@ const tournamentStatus = computed(() => resolveTournamentStageName(props.tournam
color: #ffc107;
}
.execution-status {
color: cyan;
}
.execution-status--empty {
color: magenta;
}
.vote-label {
color: cyan;
}
@@ -113,10 +127,4 @@ const tournamentStatus = computed(() => resolveTournamentStageName(props.tournam
.vote-empty {
color: magenta;
}
@media (max-width: 991px) {
.activity-status {
width: 100%;
}
}
</style>
@@ -71,6 +71,7 @@ const props = withDefaults(
selectedCityId?: number | null;
detailMode?: boolean;
fitContainer?: boolean;
showCurrentCityMarker?: boolean;
}>(),
{
// Vue casts an absent Boolean prop to false unless undefined is an explicit default.
@@ -214,6 +215,20 @@ const cityViews = computed<CityView[]>(() => {
});
});
const currentCityMarker = computed(() =>
props.showCurrentCityMarker ? (cityViews.value.find((city) => city.isMyCity) ?? null) : null
);
const currentCityMarkerStyle = computed(() => {
const city = currentCityMarker.value;
if (!city) return undefined;
const verticalOffset = (effectiveDetailMode.value ? 22 : 14) * mapScale.value;
return {
left: `${city.x}px`,
top: `${city.y - verticalOffset}px`,
};
});
const mapSeason = computed(() => {
if (!props.mapData) {
return 'spring';
@@ -433,6 +448,16 @@ const selectCity = (cityId: number) => {
@leave="setHoveredCity(null)"
@select="selectCity"
/>
<div
v-if="currentCityMarker"
class="current-city-marker"
:style="currentCityMarkerStyle"
data-testid="current-city-marker"
role="note"
:aria-label="`현재 도시 ${currentCityMarker.name}`"
>
현재
</div>
<div v-if="hoveredCity" class="map-tooltip" :style="tooltipPosition">
<div class="tooltip-title">{{ hoveredCityTitle }}</div>
<div class="tooltip-body">{{ hoveredCity.nationId > 0 ? hoveredCity.nationName : '' }}</div>
@@ -583,6 +608,38 @@ const selectCity = (cityId: number) => {
white-space: nowrap;
}
.current-city-marker {
position: absolute;
z-index: 12;
box-sizing: border-box;
min-width: 30px;
border: 1px solid #82cfff;
border-radius: 2px;
padding: 1px 4px;
background: rgba(5, 27, 43, 0.92);
color: #d9f3ff;
font-size: 10px;
font-weight: 700;
line-height: 14px;
pointer-events: none;
text-align: center;
text-shadow: 0 1px #000;
transform: translate(-50%, -100%);
white-space: nowrap;
}
.current-city-marker::after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border: 4px solid transparent;
border-top-color: #82cfff;
content: '';
transform: translateX(-50%);
}
.tooltip-title {
height: 15px;
}