feat(wip): 순수 vue3로 작성하는 지도 모듈

2022-04-20 03:27:24 +09:00
parent 328ca82242
commit 132cd8fe9f
3 changed files with 772 additions and 0 deletions
@@ -0,0 +1,75 @@
+<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>