77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
:class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
|
|
:style="{
|
|
left: `${city.x - 20}px`,
|
|
top: `${city.y - 15}px`,
|
|
}"
|
|
>
|
|
<div
|
|
v-if="city.color"
|
|
class="city_bg"
|
|
:style="{
|
|
backgroundImage: `url(${imagePath}/b${city.color.substring(1).toUpperCase()}.png)`,
|
|
}"
|
|
></div>
|
|
|
|
<a
|
|
class="city_link"
|
|
:data-text="city.text"
|
|
:data-nation="city.nation"
|
|
:data-id="city.id"
|
|
:href="props.href"
|
|
@click="clicked"
|
|
>
|
|
<div class="city_img">
|
|
<img :src="`${imagePath}/cast_${city.level}.gif`" />
|
|
<div :class="['city_filler', props.isMyCity ? 'my_city' : '']"></div>
|
|
|
|
<div v-if="city.nationID && city.nationID > 0" class="city_flag">
|
|
<img :src="`${imagePath}/${city.supply ? 'f' : 'd'}${city.color.substring(1).toUpperCase()}.gif`" />
|
|
<div v-if="city.isCapital" class="city_capital">
|
|
<img :src="`${imagePath}/event51.gif`" />
|
|
</div>
|
|
</div>
|
|
<span class="city_detail_name">{{ city.name }}</span>
|
|
</div>
|
|
<div v-if="city.state > 0" class="city_state">
|
|
<img :src="`${imagePath}/event${city.state}.gif`" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { MapCityParsed } from "@/map";
|
|
import { toRef, type PropType } from "vue";
|
|
const emit = defineEmits<{
|
|
(event: "click", evnet: MouseEvent): void;
|
|
}>();
|
|
const props = defineProps({
|
|
city: {
|
|
type: Object as PropType<MapCityParsed>,
|
|
required: true,
|
|
},
|
|
href: {
|
|
type: String,
|
|
default: undefined,
|
|
required: false,
|
|
},
|
|
isMyCity: {
|
|
type: Boolean,
|
|
required: false,
|
|
defeault: false,
|
|
},
|
|
imagePath: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
const city = toRef(props, "city");
|
|
const imagePath = toRef(props, "imagePath");
|
|
|
|
function clicked(event: MouseEvent) {
|
|
emit("click", event);
|
|
}
|
|
</script>
|