feat: enhance MapViewer with city selection and layout integration

- Added support for city selection in MapViewer, allowing users to click on cities to view details.
- Integrated map layout data to improve city rendering and positioning.
- Introduced SelectedCityPanel to display information about the selected city.
- Updated map asset handling with utility functions for building asset URLs.
- Enhanced state management in mapViewer store to track selected city.
- Improved responsiveness and styling of map components.
- Added new API endpoint for loading map layouts from legacy data.

app/game-frontend/src/components/main/MapCityBasic.vue

@@ -1,40 +1,62 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 interface MapCityView {
     id: number;
     name: string;
     level: number;
     state: number;
-    nationId: number;
+    stateClass: 'good' | 'bad' | 'war' | 'wrong';
     nationName: string;
     color: string;
     x: number;
     y: number;
     isCapital: boolean;
     isMyCity: boolean;
+    supply: boolean;
+    selected: boolean;
 }
 
 const props = defineProps<{
     city: MapCityView;
     showName: boolean;
+    mapScale: number;
 }>();
 
 const emit = defineEmits<{
     (event: 'hover', cityId: number): void;
     (event: 'leave'): void;
+    (event: 'select', cityId: number): void;
 }>();
+
+const size = computed(() => (6 + props.city.level * 2) * props.mapScale);
+const stateSize = computed(() => 8 * props.mapScale);
+const stateOffset = computed(() => -6 * props.mapScale);
 </script>
 
 <template>
     <div
         class="map-city"
-        :class="{ mine: props.city.isMyCity }"
+        :class="[
+            `state-${props.city.stateClass}`,
+            { mine: props.city.isMyCity, selected: props.city.selected, 'supply-off': !props.city.supply },
+        ]"
         :style="{ left: `${props.city.x}px`, top: `${props.city.y}px` }"
         @mouseenter="emit('hover', props.city.id)"
         @mouseleave="emit('leave')"
+        @click.stop="emit('select', props.city.id)"
     >
-        <div class="city-dot" :style="{ backgroundColor: props.city.color }">
+        <div
+            class="city-dot"
+            :style="{ backgroundColor: props.city.color, width: `${size}px`, height: `${size}px` }"
+        >
             <span v-if="props.city.isCapital" class="capital" />
         </div>
+        <div
+            v-if="props.city.state > 0"
+            class="city-state"
+            :class="`state-${props.city.stateClass}`"
+            :style="{ width: `${stateSize}px`, height: `${stateSize}px`, left: `${stateOffset}px`, top: `${stateOffset}px` }"
+        />
         <div v-if="props.showName" class="city-name">{{ props.city.name }}</div>
     </div>
 </template>
@@ -52,17 +74,16 @@ const emit = defineEmits<{
 }
 
 .city-dot {
-    width: 12px;
-    height: 12px;
     border: 1px solid rgba(232, 221, 196, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
 }
 
 .capital {
-    width: 6px;
-    height: 6px;
+    width: 5px;
+    height: 5px;
     background: rgba(232, 221, 196, 0.9);
 }
 
@@ -70,6 +91,47 @@ const emit = defineEmits<{
     box-shadow: 0 0 0 2px rgba(201, 164, 90, 0.6);
 }
 
+.map-city.selected .city-dot {
+    box-shadow: 0 0 0 2px rgba(255, 235, 150, 0.9);
+}
+
+.map-city.supply-off {
+    opacity: 0.6;
+}
+
+.map-city.state-good .city-dot {
+    border-color: rgba(120, 220, 120, 0.9);
+}
+
+.map-city.state-bad .city-dot {
+    border-color: rgba(240, 190, 90, 0.9);
+}
+
+.map-city.state-war .city-dot {
+    border-color: rgba(240, 90, 90, 0.9);
+}
+
+.map-city.state-wrong .city-dot {
+    border-color: rgba(150, 150, 150, 0.8);
+}
+
+.city-state {
+    position: absolute;
+    background: rgba(232, 221, 196, 0.8);
+}
+
+.city-state.state-war {
+    background: rgba(240, 90, 90, 0.9);
+}
+
+.city-state.state-bad {
+    background: rgba(240, 190, 90, 0.9);
+}
+
+.city-state.state-good {
+    background: rgba(90, 160, 255, 0.9);
+}
+
 .city-name {
     white-space: nowrap;
 }