feat,misc: 지도 툴팁 on/off

hwe/css/map.css

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 .world_map {
     width: 700px;
     background: black;
@@ -69,11 +67,11 @@
 }
 
 .map_body .map_toggle_cityname::after {
-    content: "끄기"
+    content: " 끄기"
 }
 
 .map_body .map_toggle_cityname.active::after {
-    content: "켜기"
+    content: " 켜기"
 }
 
 .map_body .map_toggle_single_tap {
@@ -81,11 +79,11 @@
 }
 
 .map_body .map_toggle_single_tap::after {
-    content: "끄기"
+    content: " 끄기"
 }
 
 .map_body .map_toggle_single_tap.active::after {
-    content: "켜기"
+    content: " 켜기"
 }
 
 .world_map .city_tooltip {

hwe/ts/components/MapCityBasic.vue

@@ -85,18 +85,15 @@ function clicked(event: MouseEvent) {
 function mouseenter(event: MouseEvent) {
   event.stopPropagation();
   emit("mouseenter", event);
-  console.log("enter");
 }
 
 function mouseleave(event: MouseEvent) {
   event.stopPropagation();
   emit("mouseleave", event);
-  console.log("out");
 }
 
 function silent(event: MouseEvent) {
   event.stopPropagation();
-  console.log(city.value.name);
 }
 </script>
 

hwe/ts/components/MapCityDetail.vue

@@ -86,18 +86,15 @@ function clicked(event: MouseEvent) {
 function mouseenter(event: MouseEvent) {
   event.stopPropagation();
   emit("mouseenter", event);
-  console.log('enter');
 }
 
 function mouseleave(event: MouseEvent) {
   event.stopPropagation();
   emit("mouseleave", event);
-  console.log('out');
 }
 
 function silent(event: MouseEvent){
   event.stopPropagation();
-  console.log(city.value.name);
 }
 </script>
 

hwe/ts/components/StaticMapTemplate.vue

@@ -6,6 +6,7 @@
       `map_theme_${mapTheme}`,
       drawableMap ? '' : 'draw_required',
       props.isDetailMap ? 'map_detail' : 'map_basic',
+      hideMapCityName ? 'hide_cityname' : '',
       getMapSeasonClassName(),
     ]"
   >
@@ -28,20 +29,24 @@
       <div class="map_button_stack">
         <button
           type="button"
-          class="btn btn-primary map_toggle_cityname btn-sm btn-minimum"
+          :class="['btn btn-primary map_toggle_cityname btn-sm btn-minimum', hideMapCityName ? 'active' : '']"
           data-bs-toggle="button"
-          aria-pressed="false"
+          :aria-pressed="hideMapCityName"
           autocomplete="off"
+          @click="hideMapCityName = !hideMapCityName"
         >
           도시명 표기</button
         ><br />
         <button
-          v-if="deviceType != 'mouseOnly'"
+          :style="{
+            display: deviceType != 'mouseOnly' ? 'block' : 'none',
+          }"
           type="button"
-          class="btn btn-secondary map_toggle_single_tap btn-sm btn-minimum"
+          :class="['btn btn-secondary map_toggle_double_tap btn-sm btn-minimum', toggleSingleTap ? 'active' : '']"
           data-bs-toggle="button"
-          aria-pressed="false"
+          :aria-pressed="toggleSingleTap"
           autocomplete="off"
+          @click="toggleSingleTap = !toggleSingleTap"
         >
           두번 탭 해 도시 이동
         </button>
@@ -160,7 +165,7 @@ import MapCityBasic from "./MapCityBasic.vue";
 import MapCityDetail from "./MapCityDetail.vue";
 import { convertDictById } from "@/common_legacy";
 import { useElementSize, useMouseInElement } from "@vueuse/core";
-
+import { hideMapCityName, toggleSingleTap } from "@/state/mapViewer";
 const uuid = uuidv4();
 const gameConstStore = unwrap_err(
   inject<Ref<GameConstStore>>("gameConstStore"),

hwe/ts/state/mapViewer.ts

@@ -0,0 +1,11 @@
+import { watch, ref } from "vue";
+
+export const hideMapCityName = ref<boolean>(localStorage.getItem('sam.hideMapCityName') == 'yes');
+watch(hideMapCityName, (value) => {
+    localStorage.setItem('sam.hideMapCityName', value ? 'yes' : 'no');
+});
+
+export const toggleSingleTap = ref<boolean>(localStorage.getItem('sam.toggleSingleTap') == 'yes');
+watch(toggleSingleTap, (value) => {
+    localStorage.setItem('sam.toggleSingleTap', value ? 'yes' : 'no');
+});