76 lines
1.7 KiB
Vue
76 lines
1.7 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`,
|
|
}"
|
|
>
|
|
<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"
|
|
:style="{
|
|
backgroundColor: city.color,
|
|
}"
|
|
>
|
|
<div :class="['city_filler', props.isMyCity ? 'my_city' : '']"></div>
|
|
<div v-if="city.state > 0" :class="['city_state', `city_state_${getCityState()}`]"></div>
|
|
<div v-if="city.nationID && city.nationID > 0" class="city_flag">
|
|
<div v-if="city.isCapital" class="city_capital"></div>
|
|
</div>
|
|
<span class="city_detail_name">{{ city.name }}</span>
|
|
</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,
|
|
},
|
|
});
|
|
const city = toRef(props, "city");
|
|
|
|
function getCityState(): string {
|
|
const state = city.value.state;
|
|
if (state < 10) {
|
|
return "good";
|
|
}
|
|
if (state < 40) {
|
|
return "bad";
|
|
}
|
|
if (state < 50) {
|
|
return "war";
|
|
}
|
|
return "wrong";
|
|
}
|
|
|
|
function clicked(event: MouseEvent) {
|
|
emit("click", event);
|
|
}
|
|
</script>
|