feat,wip: 도시 터치&클릭 완료

hwe/ts/components/MapCityBasic.vue

@@ -18,6 +18,7 @@
         cursor: city.clickable ? 'pointer' : 'default',
       }"
       @click="clicked"
+      @touchend="touchend"
       @mouseenter="mouseenter"
       @mouseleave="mouseleave"
     >
@@ -42,7 +43,7 @@
 import type { MapCityParsed } from "@/map";
 import { toRef, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", evnet: MouseEvent): void;
+  (event: "click", evnet: MouseEvent|TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
 }>();
@@ -92,6 +93,11 @@ function mouseleave(event: MouseEvent) {
   emit("mouseleave", event);
 }
 
+function touchend(event: TouchEvent) {
+  event.stopPropagation();
+  emit("click", event);
+}
+
 function silent(event: MouseEvent) {
   event.stopPropagation();
 }

hwe/ts/components/MapCityDetail.vue

@@ -26,6 +26,7 @@
         cursor: city.clickable?'pointer':'default',
       }"
       @click="clicked"
+      @touchend="touchend"
       @mouseenter="mouseenter"
       @mouseleave="mouseleave"
     >
@@ -52,7 +53,7 @@
 import type { MapCityParsed } from "@/map";
 import { toRef, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", e: MouseEvent): void;
+  (event: "click", e: MouseEvent|TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
 }>();
@@ -93,6 +94,11 @@ function mouseleave(event: MouseEvent) {
   emit("mouseleave", event);
 }
 
+function touchend(event: TouchEvent) {
+  event.stopPropagation();
+  emit("click", event);
+}
+
 function silent(event: MouseEvent){
   event.stopPropagation();
 }

hwe/ts/components/StaticMapTemplate.vue

@@ -22,7 +22,7 @@
       >
       <span class="tooltiptext" />
     </div>
-    <div ref="map_area" class="map_body">
+    <div ref="map_area" class="map_body" @click="clickOutside">
       <div class="map_bglayer1" />
       <div class="map_bglayer2" />
       <div class="map_bgroad" />
@@ -42,7 +42,7 @@
             display: deviceType != 'mouseOnly' ? 'block' : 'none',
           }"
           type="button"
-          :class="['btn btn-secondary map_toggle_double_tap btn-sm btn-minimum', toggleSingleTap ? 'active' : '']"
+          :class="['btn btn-secondary map_toggle_single_tap btn-sm btn-minimum', toggleSingleTap ? 'active' : '']"
           data-bs-toggle="button"
           :aria-pressed="toggleSingleTap"
           autocomplete="off"
@@ -59,9 +59,9 @@
           :city="city"
           :image-path="imagePath"
           :is-my-city="city.id === drawableMap.myCity"
-          @click="emit('city-click', city, $event)"
-          @mouseenter="activatedCity = city"
-          @mouseleave="activatedCity = undefined"
+          @click="cityClick(city, $event)"
+          @mouseenter="mouseenter(city, $event)"
+          @mouseleave="mouseleave(city, $event)"
         />
       </template>
       <template v-else
@@ -70,9 +70,9 @@
           :key="city.id"
           :city="city"
           :is-my-city="city.id === drawableMap.myCity"
-          @click="emit('city-click', city, $event)"
-          @mouseenter="activatedCity = city"
-          @mouseleave="activatedCity = undefined"
+          @click="cityClick(city, $event)"
+          @mouseenter="mouseenter(city, $event)"
+          @mouseleave="mouseleave(city, $event)"
       /></template>
     </div>
     <div
@@ -160,11 +160,10 @@ import type { GameConstStore } from "@/GameConstStore";
 import { unwrap_err } from "@/util/unwrap_err";
 import { getMaxRelativeTechLevel, TECH_LEVEL_YEAR_GAP } from "@/utilGame/techLevel";
 import { deviceType } from "detect-it";
-import { unwrap } from "@/util/unwrap";
 import MapCityBasic from "./MapCityBasic.vue";
 import MapCityDetail from "./MapCityDetail.vue";
 import { convertDictById } from "@/common_legacy";
-import { useElementSize, useMouseInElement } from "@vueuse/core";
+import { useElementSize, useMouse, useMouseInElement } from "@vueuse/core";
 import { hideMapCityName, toggleSingleTap } from "@/state/mapViewer";
 const uuid = uuidv4();
 const gameConstStore = unwrap_err(
@@ -177,9 +176,9 @@ const tooltipDom = ref<ComponentPublicInstance<HTMLDivElement>>();
 const map_area = ref<ComponentPublicInstance<HTMLDivElement>>();
 const { elementX: cursorX, elementY: cursorY, isOutside } = useMouseInElement(map_area);
 const { width: tooltipWidth } = useElementSize(tooltipDom);
-
+const { sourceType: cursorType } = useMouse();
 const emit = defineEmits<{
-  (event: "city-click", city: MapCityParsed, e: MouseEvent): void;
+  (event: "city-click", city: MapCityParsed, e: MouseEvent | TouchEvent): void;
   (event: "parsed", drawable: MapCityDrawable): void;
 }>();
 
@@ -201,7 +200,7 @@ const props = defineProps({
     required: true,
   },
   isDetailMap: { type: Boolean, default: undefined, required: false },
-  clickableAll: { type: Boolean, default: undefined, required: false },
+  disallowClick: { type: Boolean, default: undefined, required: false },
   hrefTemplate: { type: String, default: "#", required: false },
   /// clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정
   neutralView: { type: Boolean, default: false, required: false },
@@ -362,9 +361,14 @@ function convertCityObjs(obj: MapResult): MapCityDrawable {
   }
 
   function mergeClickable(city: MapCityParsedNation): MapCityParsedClickable {
-    //clickable = (defaultCity << 4 ) | (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1) | clickableAll
+    //clickable = (defaultCity << 4 ) | (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1)
     const id = city.id;
     const nationID = city.nationID;
+
+    if (props.disallowClick) {
+      return { ...city, clickable: 0 };
+    }
+
     let clickable = 16;
     if (id in spyList) {
       clickable |= spyList[id] << 3;
@@ -378,9 +382,6 @@ function convertCityObjs(obj: MapResult): MapCityDrawable {
     if (myCity !== null && id == myCity) {
       clickable |= 2;
     }
-    if (props.clickableAll) {
-      clickable |= 1;
-    }
 
     return {
       ...city,
@@ -410,6 +411,46 @@ watch(
     drawableMap.value = convertCityObjs(mapInfo);
   }
 );
+
+const touchState = ref(0);
+function cityClick(city: MapCityParsed, $event: MouseEvent | TouchEvent): void {
+  if (cursorType.value == "touch") {
+    if (touchState.value == 1 && activatedCity.value?.id !== city.id) {
+      touchState.value = 0;
+      activatedCity.value = undefined;
+    }
+    if (touchState.value == 0) {
+      touchState.value = 1;
+      activatedCity.value = city;
+      $event.preventDefault();
+      if (!toggleSingleTap.value) {
+        return;
+      }
+    }
+  }
+  emit("city-click", city, $event);
+}
+
+function clickOutside($event: MouseEvent): void {
+  $event.preventDefault();
+  $event.stopPropagation();
+  touchState.value = 0;
+  activatedCity.value = undefined;
+}
+
+function mouseenter(city: MapCityParsed, $event: MouseEvent): void {
+  if (cursorType.value == "mouse") {
+    activatedCity.value = city;
+    touchState.value = 0;
+  }
+}
+
+function mouseleave(city: MapCityParsed, $event: MouseEvent): void {
+  if (cursorType.value == "mouse") {
+    activatedCity.value = undefined;
+    touchState.value = 0;
+  }
+}
 /*
 function setMouseWork(obj: MapCityDrawable) {
   initTooltip($(drawTarget));