From 328ca82242ec34268baa7b726271ae769015d568 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Tue, 19 Apr 2022 02:23:33 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=ED=84=B0=EC=B9=98=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A6=B0=20=ED=99=95=EC=9D=B8=EC=9A=A9=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index a519dc2e..54ee0b53 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,7 @@
         "css-loader": "^6.7.1",
         "cssnano": "^5.1.3",
         "date-fns": "^2.28.0",
+        "detect-it": "^4.0.1",
         "downloadjs": "^1.4.7",
         "esbuild-loader": "^2.18.0",
         "eslint": "^8.11.0",
@@ -4248,6 +4249,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/detect-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/detect-it/-/detect-it-4.0.1.tgz",
+      "integrity": "sha512-dg5YBTJYvogK1+dA2mBUDKzOWfYZtHVba89SyZUhc4+e3i2tzgjANFg5lDRCd3UOtRcw00vUTMK8LELcMdicug=="
+    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -13664,6 +13670,11 @@
         "object-keys": "^1.0.12"
       }
     },
+    "detect-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/detect-it/-/detect-it-4.0.1.tgz",
+      "integrity": "sha512-dg5YBTJYvogK1+dA2mBUDKzOWfYZtHVba89SyZUhc4+e3i2tzgjANFg5lDRCd3UOtRcw00vUTMK8LELcMdicug=="
+    },
     "diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
diff --git a/package.json b/package.json
index 4bfd6640..b2ac1b87 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.3",
     "date-fns": "^2.28.0",
+    "detect-it": "^4.0.1",
     "downloadjs": "^1.4.7",
     "esbuild-loader": "^2.18.0",
     "eslint": "^8.11.0",
-- 
2.54.0


From 132cd8fe9f17656cf1636d2ca056077a59ffcbce Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Tue, 19 Apr 2022 02:44:50 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat(wip):=20=EC=88=9C=EC=88=98=20vue3?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9E=91=EC=84=B1=ED=95=98=EB=8A=94=20=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=20=EB=AA=A8=EB=93=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/MapCityBasic.vue      |  75 +++
 hwe/ts/components/MapCityDetail.vue     |  76 +++
 hwe/ts/components/StaticMapTemplate.vue | 621 ++++++++++++++++++++++++
 3 files changed, 772 insertions(+)
 create mode 100644 hwe/ts/components/MapCityBasic.vue
 create mode 100644 hwe/ts/components/MapCityDetail.vue
 create mode 100644 hwe/ts/components/StaticMapTemplate.vue

diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
new file mode 100644
index 00000000..7a14910a
--- /dev/null
+++ b/hwe/ts/components/MapCityBasic.vue
@@ -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>
diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue
new file mode 100644
index 00000000..0aab9193
--- /dev/null
+++ b/hwe/ts/components/MapCityDetail.vue
@@ -0,0 +1,76 @@
+<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>
diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/StaticMapTemplate.vue
new file mode 100644
index 00000000..99faa522
--- /dev/null
+++ b/hwe/ts/components/StaticMapTemplate.vue
@@ -0,0 +1,621 @@
+<template>
+  <div
+    :id="uuid"
+    :class="[
+      'world_map',
+      `map_theme_${mapTheme}`,
+      drawableMap ? '' : 'draw_required',
+      props.isDetailMap ? 'map_detail' : 'map_basic',
+      getMapSeasonClassName(),
+    ]"
+  >
+    <div
+      v-my-tooltip.hover.top="{
+        class: 'map_title_tooltiptext',
+      }"
+      class="map_title"
+      :title="getTitleTooltip()"
+    >
+      <span class="map_title_text" :style="{ color: getTitleColor() }"
+        >{{ mapResult?.year }}年 {{ mapResult?.month }}月</span
+      >
+      <span class="tooltiptext" />
+    </div>
+    <div class="map_body">
+      <div class="map_bglayer1" />
+      <div class="map_bglayer2" />
+      <div class="map_bgroad" />
+      <div class="map_button_stack">
+        <button
+          type="button"
+          class="btn btn-primary map_toggle_cityname btn-sm btn-minimum"
+          data-bs-toggle="button"
+          aria-pressed="false"
+          autocomplete="off"
+        >
+          도시명 표기</button
+        ><br />
+        <button
+          v-if="deviceType != 'mouseOnly'"
+          type="button"
+          class="btn btn-secondary map_toggle_single_tap btn-sm btn-minimum"
+          data-bs-toggle="button"
+          aria-pressed="false"
+          autocomplete="off"
+        >
+          두번 탭 해 도시 이동
+        </button>
+      </div>
+      <template v-if="drawableMap === undefined"><!--로딩중?--></template>
+      <template v-else-if="props.isDetailMap">
+        <MapCityDetail
+          v-for="city of drawableMap.cityList"
+          :key="city.id"
+          :city="city"
+          :image-path="imagePath"
+          :is-my-city="city.id === drawableMap.myCity"
+          @click="emit('city-click', city, $event)"
+        />
+      </template>
+      <template v-else
+        ><MapCityBasic
+          v-for="city of drawableMap.cityList"
+          :key="city.id"
+          :city="city"
+          :is-my-city="city.id === drawableMap.myCity"
+          @click="emit('city-click', city, $event)"
+      /></template>
+    </div>
+    <div class="city_tooltip">
+      <div class="city_name" />
+      <div class="nation_name" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export type MapCityParsedRaw = {
+  id: number;
+  level: number;
+  state: number;
+  nationID?: number;
+  region: number;
+  supply: boolean;
+};
+
+type MapCityParsedName = MapCityParsedRaw & {
+  name: string;
+  x: number;
+  y: number;
+};
+
+type MapCityParsedNation = MapCityParsedName & {
+  nationID?: number;
+  nation?: string;
+  color?: string;
+  isCapital: boolean;
+};
+
+type MapCityParsedClickable = MapCityParsedNation & {
+  clickable: number;
+};
+
+type MapCityParsedRegionLevelText = MapCityParsedClickable & {
+  region_str: string;
+  level_str: string;
+  text: string;
+};
+
+export type MapCityParsed = MapCityParsedRegionLevelText;
+
+type MapCityDrawable = {
+  cityList: MapCityParsed[];
+  myCity?: number;
+};
+
+type MapNationParsed = {
+  id: number;
+  name: string;
+  color: string;
+  capital: number;
+};
+
+export type CityPositionMap = {
+  [cityID: number]: [string, number, number];
+};
+</script>
+<script lang="ts" setup>
+import "@/../css/map.css";
+import type { loadMapOption } from "@/map";
+import { type PropType, toRef, inject, type Ref, ref, watch } from "vue";
+import { v4 as uuidv4 } from "uuid";
+import type { MapResult } from "@/defs";
+import { joinYearMonth } from "@/util/joinYearMonth";
+import { parseYearMonth } from "@/util/parseYearMonth";
+import vMyTooltip from "@/directives/vMyTooltip";
+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";
+const uuid = uuidv4();
+const gameConstStore = unwrap_err(
+  inject<Ref<GameConstStore>>("gameConstStore"),
+  Error,
+  "gameConstStore가 주입되지 않았습니다."
+);
+
+const emit = defineEmits<{
+  (event: "city-click", city: MapCityParsed, e: MouseEvent): void;
+  (event: "parsed", drawable: MapCityDrawable): void;
+}>();
+
+const props = defineProps({
+  serverNick: {
+    type: String,
+    required: true,
+  },
+  serverID: {
+    type: String,
+    required: true,
+  },
+  imagePath: {
+    type: String,
+    required: true,
+  },
+  mapName: {
+    type: String,
+    required: true,
+  },
+  isDetailMap: { type: Boolean, default: undefined, required: false },
+  clickableAll: { type: Boolean, default: undefined, required: false },
+  hrefTemplate: { type: String, default: "#", required: false },
+  /// clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정
+  neutralView: { type: Boolean, default: false, required: false },
+  ///반환 값에 본인이 위치한 도시 값을 반환하도록 설정. neutralView와 별개
+  showMe: { type: Boolean, default: true, required: false },
+
+  callback: {
+    type: Function as PropType<loadMapOption["callback"]>,
+    default: undefined,
+  },
+  startYear: { type: Number, default: undefined, required: false },
+
+  cityPosition: {
+    type: Object as PropType<CityPositionMap>,
+    required: true,
+  },
+  formatCityInfo: {
+    type: Function as PropType<(city: MapCityParsed) => MapCityParsed>,
+    required: true,
+  },
+
+  modelValue: {
+    type: Object as PropType<MapResult>,
+    required: true,
+  },
+});
+
+const mapResult = toRef(props, "modelValue");
+
+const mapTheme = toRef(props, "mapName");
+function getTitleColor(): string | undefined {
+  const { startYear, year } = mapResult.value;
+
+  if (year < startYear + 1) {
+    return "magenta";
+  }
+  if (year < startYear + 2) {
+    return "orange";
+  }
+  if (year < startYear + 3) {
+    return "yellow";
+  }
+}
+
+const drawableMap = ref<MapCityDrawable>(convertCityObjs(props.modelValue));
+
+function getBeginGameLimitTooltip(): string | undefined {
+  const { startYear, year, month } = mapResult.value;
+  if (year > startYear + 3) return undefined;
+
+  const [remainYear, remainMonth] = parseYearMonth(joinYearMonth(startYear + 3, 0) - joinYearMonth(year, month));
+
+  return `초반제한 기간 : ${remainYear}년${remainMonth > 0 ? ` ${remainMonth}개월` : ""} (${startYear + 3}년)`;
+}
+
+function getTitleTooltip(): string {
+  const result: string[] = [];
+  const beginLimit = getBeginGameLimitTooltip();
+  if (beginLimit) {
+    result.push(beginLimit);
+  }
+
+  const { startYear, year } = mapResult.value;
+
+  const maxTechLevel = gameConstStore.value.gameConst.maxTechLevel;
+  const currentTechLimit = getMaxRelativeTechLevel(startYear, year, maxTechLevel);
+
+  if (currentTechLimit == maxTechLevel) {
+    result.push(`기술등급 제한 : ${currentTechLimit}등급 (최종)`);
+  } else {
+    const nextTechLimitYear = currentTechLimit * TECH_LEVEL_YEAR_GAP + startYear;
+    result.push(`기술등급 제한 : ${currentTechLimit}등급 (${nextTechLimitYear}년 해제)`);
+  }
+
+  return result.join("<br>");
+}
+
+function getMapSeasonClassName(): string {
+  const { month } = mapResult.value;
+
+  if (month <= 3) {
+    return "map_spring";
+  }
+  if (month <= 6) {
+    return "map_summer";
+  }
+  if (month <= 9) {
+    return "map_fall";
+  }
+  return "map_winter";
+}
+
+function convertCityObjs(obj: MapResult): MapCityDrawable {
+  //원본 Obj는 굉장히 간소하게 온다, Object 형태로 변환해서 사용한다.
+
+  function toCityObj([id, level, state, nationID, region, supply]: MapResult["cityList"][0]): MapCityParsedRaw {
+    return {
+      id: id,
+      level: level,
+      state: state,
+      nationID: nationID > 0 ? nationID : undefined,
+      region: region,
+      supply: supply != 0,
+    };
+  }
+
+  function toNationObj([id, name, color, capital]: MapResult["nationList"][0]): MapNationParsed {
+    return {
+      id,
+      name,
+      color,
+      capital,
+    };
+  }
+
+  const nationList = convertDictById(obj.nationList.map(toNationObj)); //array of object -> dict
+
+  const spyList = obj.spyList;
+  const shownByGeneralList = new Set(obj.shownByGeneralList);
+
+  const myCity = obj.myCity;
+  const myNation = obj.myNation;
+
+  function mergePositionInfo(city: MapCityParsedRaw): MapCityParsedName {
+    const id = city.id;
+    if (!(id in props.cityPosition)) {
+      throw TypeError(`알수 없는 cityID: ${id}`);
+    }
+    const [name, x, y] = props.cityPosition[id];
+
+    return {
+      ...city,
+      name,
+      x,
+      y,
+    };
+  }
+
+  function mergeNationInfo(city: MapCityParsedName): MapCityParsedNation {
+    //nationID 값으로 isCapital, color, nation을 통합
+
+    const nationID = city.nationID;
+    if (nationID === undefined || !(nationID in nationList)) {
+      return {
+        ...city,
+        isCapital: false,
+      };
+    }
+
+    const nationObj = nationList[nationID];
+    return {
+      ...city,
+      nation: nationObj.name,
+      color: nationObj.color,
+      isCapital: nationObj.capital == city.id,
+    };
+  }
+
+  function mergeClickable(city: MapCityParsedNation): MapCityParsedClickable {
+    //clickable = (defaultCity << 4 ) | (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1) | clickableAll
+    const id = city.id;
+    const nationID = city.nationID;
+    let clickable = 16;
+    if (id in spyList) {
+      clickable |= spyList[id] << 3;
+    }
+    if (myNation !== null && nationID == myNation) {
+      clickable |= 4;
+    }
+    if (shownByGeneralList.has(id)) {
+      clickable |= 2;
+    }
+    if (myCity !== null && id == myCity) {
+      clickable |= 2;
+    }
+    if (props.clickableAll) {
+      clickable |= 1;
+    }
+
+    return {
+      ...city,
+      clickable,
+    };
+  }
+
+  const cityList = obj.cityList
+    .map(toCityObj)
+    .map(mergePositionInfo)
+    .map(mergeNationInfo)
+    .map(mergeClickable)
+    .map(window.formatCityInfo);
+
+  const result = {
+    cityList: cityList,
+    myCity: myCity,
+  };
+  emit("parsed", result);
+
+  return result;
+}
+watch(
+  () => props.modelValue,
+  (mapInfo) => {
+    drawableMap.value = convertCityObjs(mapInfo);
+  }
+);
+/*
+function setMouseWork(obj: MapCityDrawable) {
+  initTooltip($(drawTarget));
+
+  const $tooltip = $(drawTarget + " .city_tooltip");
+  const $tooltip_city = $tooltip.find(".city_name");
+  const $tooltip_nation = $tooltip.find(".nation_name");
+
+  const $objs = $(drawTarget + " .city_link");
+
+  const $map_body = $(drawTarget + " .map_body");
+
+  //터치스크린 탭
+
+  if (!option.neutralView && is_touch_device()) {
+    $objs.on("touchstart", function () {
+      if (window.sam_toggleSingleTap) {
+        return true;
+      }
+      const $this = $(this);
+
+      const touchMode = $this.data("touchMode") as number;
+      if ($tooltip_city.data("target") != $this.data("id")) {
+        $this.data("touchMode", 1);
+      } else if (touchMode === undefined) {
+        $this.data("touchMode", 1);
+      } else {
+        $this.data("touchMode", touchMode + 1);
+      }
+      $map_body.data("touchMode", 1);
+
+      $tooltip_city.data("target", $this.data("id"));
+    });
+
+    $objs.on("touchend", function () {
+      if (window.sam_toggleSingleTap) {
+        return true;
+      }
+      const $this = $(this);
+      const position = $this.parent().position();
+      $tooltip_city.html($this.data("text") as string);
+
+      const nation_text = $this.data("nation") as string;
+      if (nation_text) {
+        $tooltip_nation.html(nation_text).show();
+      } else {
+        $tooltip_nation.html("").hide();
+      }
+
+      const left = position.left;
+      const top = position.top;
+
+      const tooltipWidth = unwrap($tooltip.width());
+
+      if (left + tooltipWidth + 35 > window.innerWidth) {
+        $tooltip.css({ top: top + 45, left: left - tooltipWidth - 10 }).show();
+      } else {
+        $tooltip.css({ top: top + 45, left: left + 35 }).show();
+      }
+
+      const touchMode = $this.data("touchMode") as number;
+      if (touchMode <= 1) {
+        return false;
+      }
+
+      //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
+      $this.data("touchMode", 0);
+    });
+
+    $map_body.on("touchend", function () {
+      if (window.sam_toggleSingleTap) {
+        return true;
+      }
+      //위의 touchend bind에 해당하지 않는 경우 -> 빈 지도 터치
+      $tooltip.hide();
+    });
+  }
+
+  //Mouse over 모드 작동
+
+  $map_body.on("mousemove", function (e) {
+    if ($(this).data("touchMode")) {
+      return true;
+    }
+
+    const rect = this.getBoundingClientRect();
+    const left = e.clientX - rect.left - this.clientLeft + this.scrollLeft;
+    const top = e.clientY - rect.top - this.clientTop + this.scrollTop;
+
+    const tooltipWidth = unwrap($tooltip.width());
+
+    if (e.clientX + rect.left + tooltipWidth + 10 > window.innerWidth) {
+      $tooltip.css({ top: top + 30, left: left - tooltipWidth - 10 });
+    } else {
+      $tooltip.css({ top: top + 30, left: left + 10 });
+    }
+  });
+
+  $objs.on("mouseenter", function () {
+    if ($map_body.data("touchMode")) {
+      return true;
+    }
+
+    const $this = $(this);
+
+    $tooltip_city.data("target", $this.data("id"));
+    $tooltip_city.html($this.data("text"));
+    const nation_text = $this.data("nation");
+    if (nation_text) {
+      $tooltip_nation.html(nation_text).show();
+    } else {
+      $tooltip_nation.html("").hide();
+    }
+
+    $tooltip.show();
+  });
+
+  $objs.on("mouseleave", function () {
+    $tooltip.hide();
+  });
+
+  $objs.on("click", function () {
+    //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
+    const touchMode = $(this).data("touchMode") as number | undefined;
+    if (touchMode === undefined) {
+      return;
+    }
+
+    if (touchMode === 1) {
+      return false;
+    }
+  });
+
+  return obj;
+}
+
+function setCityClickable(obj: MapCityDrawable) {
+  obj.cityList.forEach(function (city) {
+    const $cityLink = $world_map.find(`.city_base_${city.id} .city_link`);
+
+    if ("clickable" in city && city.clickable > 0) {
+      $cityLink.attr("href", stringFormat(hrefTemplate, city.id));
+    }
+
+    if (selectCallback) {
+      $cityLink.on("click", function (e) {
+        e.preventDefault();
+        return selectCallback(city);
+      });
+    }
+  });
+
+  return obj;
+}
+
+async function reloadWorldMap(option: loadMapOption, drawTarget = ".world_map"): Promise<void> {
+  const $world_map = $(drawTarget);
+
+  const defaultOption: loadMapOption = {
+    isDetailMap: true, //복잡 지도, 단순 지도
+    clickableAll: false, //어떤 경우든 클릭을 가능하게 함. 해당 동작의 동작 가능성 여부와는 별도.
+    selectCallback: undefined, //callback을 지정시 clickable과 관계 없이 해당 함수를 실행.
+    hrefTemplate: "#", //도시가 클릭가능할 경우 지정할 href값. {0}은 도시 id로 변환됨
+
+    //아래부터는 post query에 들어갈 녀석
+    year: undefined, //year값, 연감등에 사용
+    month: undefined, //month값, 연감등에 사용
+    neutralView: false, //clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정
+    showMe: true, //반환 값에 본인이 위치한 도시 값을 반환하도록 설정. neutralView와 별개
+
+    callback: undefined,
+
+    //기타 보조 값
+    startYear: undefined,
+  };
+
+  const isDetailMap = props.isDetailMap ?? true;
+  const clickableAll = props.clickableAll ?? false;
+  const selectCallback = props.selectCallback;
+  const hrefTemplate = props.hrefTemplate;
+
+  const cityPosition = window.getCityPosition();
+
+  const storedOldMapKey = `sam.${props.serverNick}.map`;
+  const storedStartYear = `sam.${props.serverNick}.startYear`;
+  //OBJ : startYear, year, month, cityList, nationList, spyList, shownByGeneralList, myCity
+
+  const $hideCityNameBtn = $world_map.find(".map_toggle_cityname");
+  if (localStorage.getItem("sam.hideMapCityName") == "yes") {
+    $world_map.addClass("hide_cityname");
+    $hideCityNameBtn.addClass("active").attr("aria-pressed", "true");
+  }
+
+  $hideCityNameBtn.on("click", function () {
+    //이전 상태 확인
+    const state = localStorage.getItem("sam.hideMapCityName") == "no";
+    if (state) {
+      $world_map.addClass("hide_cityname");
+      localStorage.setItem("sam.hideMapCityName", "yes");
+    } else {
+      $world_map.removeClass("hide_cityname");
+      localStorage.setItem("sam.hideMapCityName", "no");
+    }
+  });
+
+  const $toggleSingleTapBtn = $world_map.find(".map_toggle_single_tap");
+  if (localStorage.getItem("sam.toggleSingleTap") == "yes") {
+    window.sam_toggleSingleTap = true;
+    $toggleSingleTapBtn.addClass("active").attr("aria-pressed", "true");
+  } else {
+    window.sam_toggleSingleTap = false;
+  }
+
+  const $map_body = $(drawTarget + " .map_body");
+
+  $toggleSingleTapBtn.on("click", function () {
+    //이전 상태 확인
+    const state = localStorage.getItem("sam.toggleSingleTap") == "no";
+    if (state) {
+      $map_body.removeData("touchMode");
+      localStorage.setItem("sam.toggleSingleTap", "yes");
+      window.sam_toggleSingleTap = true;
+    } else {
+      localStorage.setItem("sam.toggleSingleTap", "no");
+      window.sam_toggleSingleTap = false;
+    }
+  });
+
+  const computedResult = await convertCityObjs(rawObject)
+    .then(isDetailMap ? drawDetailWorldMap : drawBasicWorldMap)
+    .then(setMouseWork)
+    .then(setCityClickable);
+
+  if (option.callback) {
+    option.callback(computedResult, rawObject);
+  }
+}
+*/
+</script>
+
+<style scoped lang="scss"></style>
-- 
2.54.0


From d1af95fd3c8137759d3efa3b2c22f7bba90eae30 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Tue, 19 Apr 2022 03:31:48 +0900
Subject: [PATCH 03/10] =?UTF-8?q?fix(wip):=20=EC=9B=90=EB=9E=98=EC=9D=98?=
 =?UTF-8?q?=20=EC=A7=80=EB=8F=84=EC=99=80=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=EC=9D=B4=20=EB=8B=A4=EB=A5=B8=20=EB=B2=84=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20-=20line-height,=20font-size?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/MapCityBasic.vue  |  9 +++++++++
 hwe/ts/components/MapCityDetail.vue | 10 ++++++++++
 2 files changed, 19 insertions(+)

diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
index 7a14910a..3004b62a 100644
--- a/hwe/ts/components/MapCityBasic.vue
+++ b/hwe/ts/components/MapCityBasic.vue
@@ -73,3 +73,12 @@ function clicked(event: MouseEvent) {
   emit("click", event);
 }
 </script>
+
+<style lang="scss" scoped>
+a,
+div,
+span {
+  line-height: 1.3;
+  font-size: 14px;
+}
+</style>
diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue
index 0aab9193..470eedec 100644
--- a/hwe/ts/components/MapCityDetail.vue
+++ b/hwe/ts/components/MapCityDetail.vue
@@ -74,3 +74,13 @@ function clicked(event: MouseEvent) {
   emit("click", event);
 }
 </script>
+
+<style lang="scss" scoped>
+a,
+div,
+img,
+span {
+  line-height: 1.3;
+  font-size: 14px;
+}
+</style>
-- 
2.54.0


From ce8d1cbeb2a3cb1dc12c6eefeed7ccedfa168960 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Tue, 19 Apr 2022 03:33:17 +0900
Subject: [PATCH 04/10] =?UTF-8?q?dep:=20=ED=8E=B8=EC=9D=B4=EB=A5=BC=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=B4=20vueuse=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 113 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 2 files changed, 114 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 54ee0b53..ffa99a27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "@typescript-eslint/parser": "^5.14.0",
         "@vue/compiler-sfc": "^3.2.31",
         "@vue/eslint-config-typescript": "^10.0.0",
+        "@vueuse/core": "^8.2.6",
         "ag-grid-community": "^27.1.0",
         "ag-grid-vue3": "^27.1.0",
         "async-validator": "^4.0.7",
@@ -2861,6 +2862,87 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.2.6.tgz",
+      "integrity": "sha512-fzlpM3B5oVe+UhCT1mXlhG1Zxdq2lq1Z2AvddSB8+RxrsSFzII7DKfsQEz8Vop7Lzc++4m8drTNbhPovYoFqHw==",
+      "dependencies": {
+        "@vueuse/metadata": "8.2.6",
+        "@vueuse/shared": "8.2.6",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.2.6.tgz",
+      "integrity": "sha512-J/W4CMfdL8TahELuSOgtfVO4eQXTjhigp7dVWIBsLUVFCeY9d49gvHUcQN3y5xYLZ6iNP57TjTQjMMT/zhklkw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
+      "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.2.6.tgz",
+      "integrity": "sha512-OBKtafCt+4RcEJlYDCjp1vl65pBCL2g4TmipEtdZ8/qphKlW6nakJbkY7XRN5grPmjqU99/ahJGtyGk5NHS2hw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -12641,6 +12723,37 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
     },
+    "@vueuse/core": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.2.6.tgz",
+      "integrity": "sha512-fzlpM3B5oVe+UhCT1mXlhG1Zxdq2lq1Z2AvddSB8+RxrsSFzII7DKfsQEz8Vop7Lzc++4m8drTNbhPovYoFqHw==",
+      "requires": {
+        "@vueuse/metadata": "8.2.6",
+        "@vueuse/shared": "8.2.6",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "@vueuse/shared": {
+          "version": "8.2.6",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.2.6.tgz",
+          "integrity": "sha512-J/W4CMfdL8TahELuSOgtfVO4eQXTjhigp7dVWIBsLUVFCeY9d49gvHUcQN3y5xYLZ6iNP57TjTQjMMT/zhklkw==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
+        "vue-demi": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
+          "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.2.6.tgz",
+      "integrity": "sha512-OBKtafCt+4RcEJlYDCjp1vl65pBCL2g4TmipEtdZ8/qphKlW6nakJbkY7XRN5grPmjqU99/ahJGtyGk5NHS2hw=="
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
diff --git a/package.json b/package.json
index b2ac1b87..0dcb29d7 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@typescript-eslint/parser": "^5.14.0",
     "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-typescript": "^10.0.0",
+    "@vueuse/core": "^8.2.6",
     "ag-grid-community": "^27.1.0",
     "ag-grid-vue3": "^27.1.0",
     "async-validator": "^4.0.7",
-- 
2.54.0


From 6d8151df5f3befbe8049a7f0eb23ac529ffa9cc8 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 20 Apr 2022 00:17:31 +0900
Subject: [PATCH 05/10] =?UTF-8?q?feat(wip):=20=EC=A7=80=EB=8F=84=20?=
 =?UTF-8?q?=ED=88=B4=ED=8C=81=20=EA=B8=B0=EB=8A=A5=20=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/MapCityBasic.vue      | 26 +++++++++++++++++
 hwe/ts/components/MapCityDetail.vue     | 28 ++++++++++++++++++-
 hwe/ts/components/StaticMapTemplate.vue | 37 +++++++++++++++++++++----
 3 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
index 3004b62a..399d9caf 100644
--- a/hwe/ts/components/MapCityBasic.vue
+++ b/hwe/ts/components/MapCityBasic.vue
@@ -5,6 +5,8 @@
       left: `${city.x - 20}px`,
       top: `${city.y - 15}px`,
     }"
+    @mouseenter="silent"
+    @mouseleave="silent"
   >
     <a
       class="city_link"
@@ -12,7 +14,12 @@
       :data-nation="city.nation"
       :data-id="city.id"
       :href="props.href"
+      :style="{
+        cursor: city.clickable ? 'pointer' : 'default',
+      }"
       @click="clicked"
+      @mouseenter="mouseenter"
+      @mouseleave="mouseleave"
     >
       <div
         class="city_img"
@@ -36,6 +43,8 @@ import type { MapCityParsed } from "@/map";
 import { toRef, type PropType } from "vue";
 const emit = defineEmits<{
   (event: "click", evnet: MouseEvent): void;
+  (event: "mouseenter", e: MouseEvent): void;
+  (event: "mouseleave", e: MouseEvent): void;
 }>();
 const props = defineProps({
   city: {
@@ -72,6 +81,23 @@ function getCityState(): string {
 function clicked(event: MouseEvent) {
   emit("click", event);
 }
+
+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>
 
 <style lang="scss" scoped>
diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue
index 470eedec..45852a59 100644
--- a/hwe/ts/components/MapCityDetail.vue
+++ b/hwe/ts/components/MapCityDetail.vue
@@ -5,6 +5,8 @@
       left: `${city.x - 20}px`,
       top: `${city.y - 15}px`,
     }"
+    @mouseenter="silent"
+    @mouseleave="silent"
   >
     <div
       v-if="city.color"
@@ -20,7 +22,12 @@
       :data-nation="city.nation"
       :data-id="city.id"
       :href="props.href"
+      :style="{
+        cursor: city.clickable?'pointer':'default',
+      }"
       @click="clicked"
+      @mouseenter="mouseenter"
+      @mouseleave="mouseleave"
     >
       <div class="city_img">
         <img :src="`${imagePath}/cast_${city.level}.gif`" />
@@ -45,7 +52,9 @@
 import type { MapCityParsed } from "@/map";
 import { toRef, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", evnet: MouseEvent): void;
+  (event: "click", e: MouseEvent): void;
+  (event: "mouseenter", e: MouseEvent): void;
+  (event: "mouseleave", e: MouseEvent): void;
 }>();
 const props = defineProps({
   city: {
@@ -73,6 +82,23 @@ const imagePath = toRef(props, "imagePath");
 function clicked(event: MouseEvent) {
   emit("click", event);
 }
+
+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>
 
 <style lang="scss" scoped>
diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/StaticMapTemplate.vue
index 99faa522..7bb2a7b2 100644
--- a/hwe/ts/components/StaticMapTemplate.vue
+++ b/hwe/ts/components/StaticMapTemplate.vue
@@ -21,7 +21,7 @@
       >
       <span class="tooltiptext" />
     </div>
-    <div class="map_body">
+    <div ref="map_area" class="map_body">
       <div class="map_bglayer1" />
       <div class="map_bglayer2" />
       <div class="map_bgroad" />
@@ -55,6 +55,8 @@
           :image-path="imagePath"
           :is-my-city="city.id === drawableMap.myCity"
           @click="emit('city-click', city, $event)"
+          @mouseenter="activatedCity = city"
+          @mouseleave="activatedCity = undefined"
         />
       </template>
       <template v-else
@@ -64,11 +66,27 @@
           :city="city"
           :is-my-city="city.id === drawableMap.myCity"
           @click="emit('city-click', city, $event)"
+          @mouseenter="activatedCity = city"
+          @mouseleave="activatedCity = undefined"
       /></template>
     </div>
-    <div class="city_tooltip">
-      <div class="city_name" />
-      <div class="nation_name" />
+    <div
+      ref="tooltipDom"
+      class="city_tooltip"
+      :style="{
+        display: isOutside || !activatedCity ? 'none' : 'block',
+        position: 'absolute',
+        left: `${(() => {
+          if (cursorX + tooltipWidth + 10 > 700) {
+            return cursorX - tooltipWidth - 5;
+          }
+          return cursorX + 10;
+        })()}px`,
+        top: `${cursorY + 30}px`,
+      }"
+    >
+      <div class="city_name">{{ activatedCity?.text }}</div>
+      <div class="nation_name">{{ activatedCity?.nation }}</div>
     </div>
   </div>
 </template>
@@ -127,7 +145,7 @@ export type CityPositionMap = {
 <script lang="ts" setup>
 import "@/../css/map.css";
 import type { loadMapOption } from "@/map";
-import { type PropType, toRef, inject, type Ref, ref, watch } from "vue";
+import { type PropType, toRef, inject, type Ref, ref, watch, type ComponentPublicInstance } from "vue";
 import { v4 as uuidv4 } from "uuid";
 import type { MapResult } from "@/defs";
 import { joinYearMonth } from "@/util/joinYearMonth";
@@ -141,6 +159,8 @@ 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";
+
 const uuid = uuidv4();
 const gameConstStore = unwrap_err(
   inject<Ref<GameConstStore>>("gameConstStore"),
@@ -148,6 +168,11 @@ const gameConstStore = unwrap_err(
   "gameConstStore가 주입되지 않았습니다."
 );
 
+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 emit = defineEmits<{
   (event: "city-click", city: MapCityParsed, e: MouseEvent): void;
   (event: "parsed", drawable: MapCityDrawable): void;
@@ -217,6 +242,7 @@ function getTitleColor(): string | undefined {
 }
 
 const drawableMap = ref<MapCityDrawable>(convertCityObjs(props.modelValue));
+const activatedCity = ref<MapCityParsed>();
 
 function getBeginGameLimitTooltip(): string | undefined {
   const { startYear, year, month } = mapResult.value;
@@ -375,6 +401,7 @@ function convertCityObjs(obj: MapResult): MapCityDrawable {
 watch(
   () => props.modelValue,
   (mapInfo) => {
+    activatedCity.value = undefined;
     drawableMap.value = convertCityObjs(mapInfo);
   }
 );
-- 
2.54.0


From f5694292bd0dee6c69c325127c83a71aa9333b79 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 20 Apr 2022 03:28:22 +0900
Subject: [PATCH 06/10] =?UTF-8?q?feat,misc:=20=EC=A7=80=EB=8F=84=20?=
 =?UTF-8?q?=ED=88=B4=ED=8C=81=20on/off?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/css/map.css                         | 10 ++++------
 hwe/ts/components/MapCityBasic.vue      |  3 ---
 hwe/ts/components/MapCityDetail.vue     |  3 ---
 hwe/ts/components/StaticMapTemplate.vue | 17 +++++++++++------
 hwe/ts/state/mapViewer.ts               | 11 +++++++++++
 5 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 hwe/ts/state/mapViewer.ts

diff --git a/hwe/css/map.css b/hwe/css/map.css
index 0b3dcca8..c50898ca 100644
--- a/hwe/css/map.css
+++ b/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 {
diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
index 399d9caf..9c6fb700 100644
--- a/hwe/ts/components/MapCityBasic.vue
+++ b/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>
 
diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue
index 45852a59..81814f9b 100644
--- a/hwe/ts/components/MapCityDetail.vue
+++ b/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>
 
diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/StaticMapTemplate.vue
index 7bb2a7b2..dca27591 100644
--- a/hwe/ts/components/StaticMapTemplate.vue
+++ b/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"),
diff --git a/hwe/ts/state/mapViewer.ts b/hwe/ts/state/mapViewer.ts
new file mode 100644
index 00000000..f5a2764b
--- /dev/null
+++ b/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');
+});
\ No newline at end of file
-- 
2.54.0


From f2499675ab9493eaeb63805679a588770e0ee947 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 20 Apr 2022 01:27:00 +0900
Subject: [PATCH 07/10] =?UTF-8?q?feat,wip:=20=EB=8F=84=EC=8B=9C=20?=
 =?UTF-8?q?=ED=84=B0=EC=B9=98&=ED=81=B4=EB=A6=AD=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/MapCityBasic.vue      |  8 ++-
 hwe/ts/components/MapCityDetail.vue     |  8 ++-
 hwe/ts/components/StaticMapTemplate.vue | 75 +++++++++++++++++++------
 3 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
index 9c6fb700..43b47e22 100644
--- a/hwe/ts/components/MapCityBasic.vue
+++ b/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();
 }
diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue
index 81814f9b..886d717d 100644
--- a/hwe/ts/components/MapCityDetail.vue
+++ b/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();
 }
diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/StaticMapTemplate.vue
index dca27591..eeb86db5 100644
--- a/hwe/ts/components/StaticMapTemplate.vue
+++ b/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));
-- 
2.54.0


From e33c7ecd360c8df9ab7aefa576260c2acb8f76de Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 20 Apr 2022 03:02:53 +0900
Subject: [PATCH 08/10] =?UTF-8?q?feat,wip:=20=EC=A7=80=EB=8F=84=EC=97=90?=
 =?UTF-8?q?=20=EC=9E=90=EC=B2=B4=20700px,=20500px=20=EB=AA=A8=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/scss/map.scss                       | 665 ++++++++++++++++++++++++
 hwe/ts/components/MapCityBasic.vue      |  32 +-
 hwe/ts/components/MapCityDetail.vue     |  67 ++-
 hwe/ts/components/StaticMapTemplate.vue |  26 +-
 hwe/ts/state/is1000pxMode.ts            |   3 +
 5 files changed, 771 insertions(+), 22 deletions(-)
 create mode 100644 hwe/scss/map.scss
 create mode 100644 hwe/ts/state/is1000pxMode.ts

diff --git a/hwe/scss/map.scss b/hwe/scss/map.scss
new file mode 100644
index 00000000..7bb08f96
--- /dev/null
+++ b/hwe/scss/map.scss
@@ -0,0 +1,665 @@
+.map_title_tooltiptext .tooltip-inner {
+  max-width: 220px;
+  width: 220px;
+  text-align: left;
+}
+
+.map_title_text {
+  margin: auto;
+  text-align: center;
+  width: 160px;
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.map_body .map_bglayer1 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_bglayer2 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_bgroad {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_button_stack {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  text-align: right;
+}
+
+.map_body .map_toggle_cityname::after {
+  content: " 끄기";
+}
+
+.map_body .map_toggle_cityname.active::after {
+  content: " 켜기";
+}
+
+.map_body .map_toggle_single_tap::after {
+  content: " 끄기";
+}
+
+.map_body .map_toggle_single_tap.active::after {
+  content: " 켜기";
+}
+
+.world_map .city_tooltip {
+  position: absolute;
+  z-index: 16;
+  display: none;
+  min-width: 120px;
+  border: 0.02em gray solid;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.world_map .city_name {
+  background-color: rgb(30, 164, 255);
+  z-index: 6;
+  line-height: 15px;
+  height: 15px;
+}
+
+.world_map .nation_name {
+  background-color: rgb(30, 164, 255);
+  z-index: 6;
+  line-height: 15px;
+  height: 15px;
+  border-top: 0.02em gray solid;
+  text-align: right;
+}
+
+@keyframes blink-my-city-d1 {
+  0% {
+    outline: solid 4px transparent;
+  }
+
+  50% {
+    outline: solid 4px rgba(255, 0, 0, 1);
+  }
+
+  100% {
+    outline: solid 4px transparent;
+  }
+}
+
+@keyframes blink-my-city-d2 {
+  0% {
+    outline: double 4px transparent;
+  }
+
+  50% {
+    outline: double 4px rgba(192, 192, 192, 1);
+  }
+
+  100% {
+    outline: double 4px transparent;
+  }
+}
+
+/* Basic */
+
+@keyframes blink-my-city {
+  0% {
+    outline: dashed 5px transparent;
+  }
+
+  50% {
+    outline: dashed 5px white;
+  }
+
+  100% {
+    outline: dashed 5px transparent;
+  }
+}
+
+@keyframes blink-my-city2 {
+  0% {
+    outline: dashed 4px transparent;
+  }
+
+  50% {
+    outline: dashed 4px red;
+  }
+
+  100% {
+    outline: dashed 4px transparent;
+  }
+}
+
+.btn.btn-minimum {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.world_map.hide_cityname .city_detail_name {
+  display: none;
+}
+
+.city_base .city_bg {
+  z-index: 1;
+  position: absolute;
+  background-position: center;
+}
+
+.city_base div {
+  z-index: 2;
+}
+
+$cityBaseWidth: 40px;
+$cityBaseHeight: 30px;
+
+$detailMapCitySizes: (
+  (1, 48px, 45px, 16px, 15px, -8px, -4px),
+  (2, 60px, 42px, 20px, 14px, -8px, -4px),
+  (3, 42px, 42px, 14px, 14px, -8px, -4px),
+  (4, 60px, 45px, 20px, 15px, -6px, -3px),
+  (5, 72px, 48px, 24px, 16px, -6px, -4px),
+  (6, 78px, 54px, 26px, 18px, -6px, -4px),
+  (7, 84px, 60px, 28px, 20px, -6px, -4px),
+  (8, 96px, 72px, 32px, 24px, -6px, -3px)
+);
+
+$basicMapCitySize: (
+  (1, 12px, 12px),
+  (2, 12px, 12px),
+  (3, 14px, 14px),
+  (4, 16px, 14px),
+  (5, 18px, 16px),
+  (6, 20px, 16px),
+  (7, 22px, 18px),
+  (8, 24px, 18px)
+);
+.city_img {
+  position: absolute;
+}
+
+.world_map.full_width_map {
+  width: 700px;
+  background: black;
+  font-size: 14px;
+  color: white;
+  position: relative;
+
+  .map_title {
+    width: 700px;
+    height: 20px;
+    text-align: center;
+  }
+
+  .map_body {
+    width: 700px;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .city_base {
+    position: absolute;
+    width: $cityBaseWidth;
+    height: $cityBaseHeight;
+  }
+
+  .city_detail_name {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    white-space: nowrap;
+    left: 70%;
+    font-size: 10px;
+    bottom: -10px;
+    color: white;
+  }
+
+  &.map_detail {
+    @each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
+      $flagTop in $detailMapCitySizes
+    {
+      .my_city {
+        border-radius: 33%;
+      }
+
+      .my_city:before {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d1;
+        animation-iteration-count: infinite;
+      }
+
+      .my_city:after {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d2;
+        animation-iteration-count: infinite;
+      }
+
+      .city_filler {
+        position: absolute;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        left: -1px;
+        top: -1px;
+        background: transparent;
+      }
+
+      .city_base.city_level_#{$cityIdx} {
+        .city_bg {
+          width: $cityAreaWidth;
+          height: $cityAreaHeight;
+          background-size: $cityAreaWidth $cityAreaHeight;
+          left: calc(($cityBaseWidth - $cityAreaWidth) / 2);
+          top: calc(($cityBaseHeight - $cityAreaHeight) / 2);
+        }
+        .city_img {
+          width: $cityIconWidth;
+          height: $cityIconHeight;
+          background-size: $cityIconWidth $cityIconHeight;
+          left: calc(($cityBaseWidth - $cityIconWidth) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight) / 2);
+
+          > img {
+            width: $cityIconWidth;
+            height: $cityIconHeight;
+          }
+        }
+        .city_flag {
+          right: $flagRight;
+          top: $flagTop;
+        }
+      }
+    }
+
+    .city_base {
+      .city_state {
+        position: absolute;
+        top: 5px;
+        /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
+        left: 0;
+      }
+
+      .city_flag {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+
+        .city_capital {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          top: 0;
+          right: -1px;
+
+          > img {
+            width: 10px;
+            height: 10px;
+          }
+        }
+      }
+
+      .city_flag > img {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  &.map_basic {
+    .city_filler {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: transparent;
+    }
+
+    .my_city:before {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city;
+      animation-iteration-count: infinite;
+    }
+
+    .my_city:after {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city2;
+      animation-iteration-count: infinite;
+    }
+
+    .city_img {
+      background-color: white;
+    }
+
+    @each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
+      .city_base.city_level_#{$cityIdx} {
+        .city_img {
+          width: $cityIconWidth;
+          height: $cityIconHeight;
+          left: calc(($cityBaseWidth - $cityIconWidth) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight) / 2);
+        }
+      }
+    }
+
+    .city_base {
+      .city_capital {
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        top: -2px;
+        right: -2px;
+        background-color: yellow;
+      }
+
+      .city_state {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        top: -2px;
+        left: -4px;
+        background-color: white;
+      }
+
+      .city_state.city_state_war {
+        background-color: red;
+      }
+
+      .city_state.city_state_bad {
+        background-color: orange;
+      }
+
+      .city_state.city_state_good {
+        background-color: blue;
+      }
+    }
+  }
+}
+
+$smV: calc(500 / 700);
+
+.world_map.small_width_map {
+  width: 500px;
+  background: black;
+  font-size: 12px;
+  color: white;
+  position: relative;
+
+  .map_body {
+    .map_bglayer1,
+    .map_bglayer2,
+    .map_bgroad {
+      background-size: calc(700px * $smV) calc(500px * $smV);
+    }
+  }
+
+  .map_title {
+    width: 700px * $smV;
+    height: 20px;
+    text-align: center;
+  }
+
+  .map_body {
+    width: 700px * $smV;
+    height: 500px * $smV;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .city_base {
+    position: absolute;
+    width: $cityBaseWidth;
+    height: $cityBaseHeight;
+  }
+
+  .city_detail_name {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    white-space: nowrap;
+    left: 70%;
+    font-size: 10px;
+    bottom: -12px;
+    color: white;
+  }
+
+  &.map_detail {
+    @each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
+      $flagTop in $detailMapCitySizes
+    {
+      .my_city {
+        border-radius: 33%;
+      }
+
+      .my_city:before {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d1;
+        animation-iteration-count: infinite;
+      }
+
+      .my_city:after {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d2;
+        animation-iteration-count: infinite;
+      }
+
+      .city_filler {
+        position: absolute;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        left: -1px;
+        top: -1px;
+        background: transparent;
+      }
+
+      .city_base.city_level_#{$cityIdx} {
+        .city_bg {
+          width: $cityAreaWidth * $smV;
+          height: $cityAreaHeight * $smV;
+          background-size: calc($cityAreaWidth * $smV) calc($cityAreaHeight * $smV);
+          left: calc(($cityBaseWidth - $cityAreaWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityAreaHeight * $smV) / 2);
+        }
+        .city_img {
+          width: $cityIconWidth * $smV;
+          height: $cityIconHeight * $smV;
+          background-size: calc($cityIconWidth * $smV) calc($cityIconHeight * $smV);
+          left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
+
+          > img {
+            width: $cityIconWidth * $smV;
+            height: $cityIconHeight * $smV;
+          }
+        }
+        .city_flag {
+          right: $flagRight;
+          top: $flagTop;
+        }
+      }
+    }
+
+    .city_base {
+      .city_state {
+        position: absolute;
+        top: 8px;
+        /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
+        left: 5px;
+        > img {
+          width: 10px;
+          object-fit: contain;
+        }
+      }
+
+      .city_flag {
+        position: absolute;
+        width: 12px * $smV;
+        height: 12px * $smV;
+
+        > img {
+          width: 12px * $smV;
+          height: 12px * $smV;
+        }
+
+        .city_capital {
+          position: absolute;
+          width: 10px * $smV;
+          height: 10px * $smV;
+          top: 0;
+          right: -1px;
+
+          > img {
+            width: 10px * $smV;
+            height: 10px * $smV;
+          }
+        }
+      }
+    }
+  }
+
+  &.map_basic {
+    .city_filler {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: transparent;
+    }
+
+    .my_city:before {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city;
+      animation-iteration-count: infinite;
+    }
+
+    .my_city:after {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city2;
+      animation-iteration-count: infinite;
+    }
+
+    .city_img {
+      background-color: white;
+    }
+
+    @each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
+      .city_base.city_level_#{$cityIdx} {
+        .city_img {
+          width: $cityIconWidth * $smV;
+          height: $cityIconHeight * $smV;
+          left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
+        }
+      }
+    }
+
+    .city_base {
+      .city_capital {
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        top: -2px;
+        right: -2px;
+        background-color: yellow;
+      }
+
+      .city_state {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        top: -2px;
+        left: -4px;
+        background-color: white;
+      }
+
+      .city_state.city_state_war {
+        background-color: red;
+      }
+
+      .city_state.city_state_bad {
+        background-color: orange;
+      }
+
+      .city_state.city_state_good {
+        background-color: blue;
+      }
+    }
+  }
+}
diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
index 43b47e22..21a192e0 100644
--- a/hwe/ts/components/MapCityBasic.vue
+++ b/hwe/ts/components/MapCityBasic.vue
@@ -1,10 +1,7 @@
 <template>
   <div
     :class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
-    :style="{
-      left: `${city.x - 20}px`,
-      top: `${city.y - 15}px`,
-    }"
+    :style="cityPos"
     @mouseenter="silent"
     @mouseleave="silent"
   >
@@ -41,9 +38,9 @@
 
 <script lang="ts" setup>
 import type { MapCityParsed } from "@/map";
-import { toRef, type PropType } from "vue";
+import { ref, toRef, watch, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", evnet: MouseEvent|TouchEvent): void;
+  (event: "click", evnet: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
 }>();
@@ -62,8 +59,31 @@ const props = defineProps({
     required: false,
     defeault: false,
   },
+  isFullWidth: {
+    type: Boolean,
+    required: true,
+  },
 });
+
+
 const city = toRef(props, "city");
+const cityPos = ref({
+  left: "0px",
+  top: "0px",
+});
+watch(
+  () => props.isFullWidth,
+  (isFullWidth) => {
+    const { x, y } = city.value;
+    if (isFullWidth) {
+      cityPos.value = {
+        left: `${x - 20}px`,
+        top: `${y - 15}px`,
+      };
+    }
+  },
+  { immediate: true }
+);
 
 function getCityState(): string {
   const state = city.value.state;
diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue
index 886d717d..42836431 100644
--- a/hwe/ts/components/MapCityDetail.vue
+++ b/hwe/ts/components/MapCityDetail.vue
@@ -1,10 +1,7 @@
 <template>
   <div
     :class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
-    :style="{
-      left: `${city.x - 20}px`,
-      top: `${city.y - 15}px`,
-    }"
+    :style="cityPos"
     @mouseenter="silent"
     @mouseleave="silent"
   >
@@ -23,7 +20,7 @@
       :data-id="city.id"
       :href="props.href"
       :style="{
-        cursor: city.clickable?'pointer':'default',
+        cursor: city.clickable ? 'pointer' : 'default',
       }"
       @click="clicked"
       @touchend="touchend"
@@ -51,9 +48,9 @@
 
 <script lang="ts" setup>
 import type { MapCityParsed } from "@/map";
-import { toRef, type PropType } from "vue";
+import { ref, toRef, watch, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", e: MouseEvent|TouchEvent): void;
+  (event: "click", e: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
 }>();
@@ -76,8 +73,35 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isFullWidth: {
+    type: Boolean,
+    required: true,
+  },
 });
 const city = toRef(props, "city");
+const cityPos = ref({
+  left: "0px",
+  top: "0px",
+});
+watch(
+  () => props.isFullWidth,
+  (isFullWidth) => {
+    const { x, y } = city.value;
+    if (isFullWidth) {
+      cityPos.value = {
+        left: `${x - 20}px`,
+        top: `${y - 15}px`,
+      };
+    } else {
+      cityPos.value = {
+        left: `${(x * 5) / 7 - 20}px`,
+        top: `${(y * 5) / 7 - 18}px`,
+      };
+    }
+  },
+  { immediate: true }
+);
+
 const imagePath = toRef(props, "imagePath");
 
 function clicked(event: MouseEvent) {
@@ -99,17 +123,32 @@ function touchend(event: TouchEvent) {
   emit("click", event);
 }
 
-function silent(event: MouseEvent){
+function silent(event: MouseEvent) {
   event.stopPropagation();
 }
 </script>
 
 <style lang="scss" scoped>
-a,
-div,
-img,
-span {
-  line-height: 1.3;
-  font-size: 14px;
+.full_width_map{
+  a,
+  div,
+  img,
+  span {
+    line-height: 1.3;
+    font-size: 14px;
+  }
+}
+.small_width_map {
+  a,
+  div,
+  img {
+    line-height: 1.3;
+    font-size: 14px;
+  }
+
+  span {
+    line-height: 1.0;
+    font-size: 11px;
+  }
 }
 </style>
diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/StaticMapTemplate.vue
index eeb86db5..f50b183a 100644
--- a/hwe/ts/components/StaticMapTemplate.vue
+++ b/hwe/ts/components/StaticMapTemplate.vue
@@ -7,6 +7,7 @@
       drawableMap ? '' : 'draw_required',
       props.isDetailMap ? 'map_detail' : 'map_basic',
       hideMapCityName ? 'hide_cityname' : '',
+      isFullWidth ? 'full_width_map' : 'small_width_map',
       getMapSeasonClassName(),
     ]"
   >
@@ -59,6 +60,7 @@
           :city="city"
           :image-path="imagePath"
           :is-my-city="city.id === drawableMap.myCity"
+          :isFullWidth="isFullWidth"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -70,6 +72,7 @@
           :key="city.id"
           :city="city"
           :is-my-city="city.id === drawableMap.myCity"
+          :isFullWidth="isFullWidth"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -82,7 +85,7 @@
         display: isOutside || !activatedCity ? 'none' : 'block',
         position: 'absolute',
         left: `${(() => {
-          if (cursorX + tooltipWidth + 10 > 700) {
+          if (cursorX + tooltipWidth + 10 > (isFullWidth ? 700 : 500)) {
             return cursorX - tooltipWidth - 5;
           }
           return cursorX + 10;
@@ -148,7 +151,7 @@ export type CityPositionMap = {
 };
 </script>
 <script lang="ts" setup>
-import "@/../css/map.css";
+import "@/../scss/map.scss";
 import type { loadMapOption } from "@/map";
 import { type PropType, toRef, inject, type Ref, ref, watch, type ComponentPublicInstance } from "vue";
 import { v4 as uuidv4 } from "uuid";
@@ -165,6 +168,7 @@ import MapCityDetail from "./MapCityDetail.vue";
 import { convertDictById } from "@/common_legacy";
 import { useElementSize, useMouse, useMouseInElement } from "@vueuse/core";
 import { hideMapCityName, toggleSingleTap } from "@/state/mapViewer";
+import { is1000pxMode } from "@/state/is1000pxMode";
 const uuid = uuidv4();
 const gameConstStore = unwrap_err(
   inject<Ref<GameConstStore>>("gameConstStore"),
@@ -182,7 +186,25 @@ const emit = defineEmits<{
   (event: "parsed", drawable: MapCityDrawable): void;
 }>();
 
+const isFullWidth = ref(true);
+
+function setWidthMode([widthMode, is1000pxMode]: ["auto" | "full" | "small" | undefined, boolean]): void {
+  if (widthMode == "full") {
+    isFullWidth.value = true;
+  }
+  if (widthMode == "small") {
+    isFullWidth.value = false;
+  }
+  isFullWidth.value = is1000pxMode;
+}
+watch([() => props.width, is1000pxMode], setWidthMode, { immediate: true });
+
 const props = defineProps({
+  width: {
+    type: String as PropType<"full" | "small" | "auto" | undefined>,
+    default: undefined,
+    required: false,
+  },
   serverNick: {
     type: String,
     required: true,
diff --git a/hwe/ts/state/is1000pxMode.ts b/hwe/ts/state/is1000pxMode.ts
new file mode 100644
index 00000000..cd062030
--- /dev/null
+++ b/hwe/ts/state/is1000pxMode.ts
@@ -0,0 +1,3 @@
+import { useMediaQuery } from "@vueuse/core";
+
+export const is1000pxMode = useMediaQuery('(min-width:900px');
\ No newline at end of file
-- 
2.54.0


From 5a9322f00376d46fe72785facb953e75aa36b91f Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 20 Apr 2022 03:06:25 +0900
Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=EC=A7=80=EB=8F=84=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=ED=81=B4=EB=A6=AD=20=EB=AC=B4=ED=9A=A8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/StaticMapTemplate.vue | 248 +-----------------------
 1 file changed, 5 insertions(+), 243 deletions(-)

diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/StaticMapTemplate.vue
index f50b183a..75d68b0b 100644
--- a/hwe/ts/components/StaticMapTemplate.vue
+++ b/hwe/ts/components/StaticMapTemplate.vue
@@ -456,8 +456,10 @@ function cityClick(city: MapCityParsed, $event: MouseEvent | TouchEvent): void {
 function clickOutside($event: MouseEvent): void {
   $event.preventDefault();
   $event.stopPropagation();
-  touchState.value = 0;
-  activatedCity.value = undefined;
+  if(touchState.value == 1) {
+    touchState.value = 0;
+    activatedCity.value = undefined;
+  }
 }
 
 function mouseenter(city: MapCityParsed, $event: MouseEvent): void {
@@ -473,244 +475,4 @@ function mouseleave(city: MapCityParsed, $event: MouseEvent): void {
     touchState.value = 0;
   }
 }
-/*
-function setMouseWork(obj: MapCityDrawable) {
-  initTooltip($(drawTarget));
-
-  const $tooltip = $(drawTarget + " .city_tooltip");
-  const $tooltip_city = $tooltip.find(".city_name");
-  const $tooltip_nation = $tooltip.find(".nation_name");
-
-  const $objs = $(drawTarget + " .city_link");
-
-  const $map_body = $(drawTarget + " .map_body");
-
-  //터치스크린 탭
-
-  if (!option.neutralView && is_touch_device()) {
-    $objs.on("touchstart", function () {
-      if (window.sam_toggleSingleTap) {
-        return true;
-      }
-      const $this = $(this);
-
-      const touchMode = $this.data("touchMode") as number;
-      if ($tooltip_city.data("target") != $this.data("id")) {
-        $this.data("touchMode", 1);
-      } else if (touchMode === undefined) {
-        $this.data("touchMode", 1);
-      } else {
-        $this.data("touchMode", touchMode + 1);
-      }
-      $map_body.data("touchMode", 1);
-
-      $tooltip_city.data("target", $this.data("id"));
-    });
-
-    $objs.on("touchend", function () {
-      if (window.sam_toggleSingleTap) {
-        return true;
-      }
-      const $this = $(this);
-      const position = $this.parent().position();
-      $tooltip_city.html($this.data("text") as string);
-
-      const nation_text = $this.data("nation") as string;
-      if (nation_text) {
-        $tooltip_nation.html(nation_text).show();
-      } else {
-        $tooltip_nation.html("").hide();
-      }
-
-      const left = position.left;
-      const top = position.top;
-
-      const tooltipWidth = unwrap($tooltip.width());
-
-      if (left + tooltipWidth + 35 > window.innerWidth) {
-        $tooltip.css({ top: top + 45, left: left - tooltipWidth - 10 }).show();
-      } else {
-        $tooltip.css({ top: top + 45, left: left + 35 }).show();
-      }
-
-      const touchMode = $this.data("touchMode") as number;
-      if (touchMode <= 1) {
-        return false;
-      }
-
-      //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
-      $this.data("touchMode", 0);
-    });
-
-    $map_body.on("touchend", function () {
-      if (window.sam_toggleSingleTap) {
-        return true;
-      }
-      //위의 touchend bind에 해당하지 않는 경우 -> 빈 지도 터치
-      $tooltip.hide();
-    });
-  }
-
-  //Mouse over 모드 작동
-
-  $map_body.on("mousemove", function (e) {
-    if ($(this).data("touchMode")) {
-      return true;
-    }
-
-    const rect = this.getBoundingClientRect();
-    const left = e.clientX - rect.left - this.clientLeft + this.scrollLeft;
-    const top = e.clientY - rect.top - this.clientTop + this.scrollTop;
-
-    const tooltipWidth = unwrap($tooltip.width());
-
-    if (e.clientX + rect.left + tooltipWidth + 10 > window.innerWidth) {
-      $tooltip.css({ top: top + 30, left: left - tooltipWidth - 10 });
-    } else {
-      $tooltip.css({ top: top + 30, left: left + 10 });
-    }
-  });
-
-  $objs.on("mouseenter", function () {
-    if ($map_body.data("touchMode")) {
-      return true;
-    }
-
-    const $this = $(this);
-
-    $tooltip_city.data("target", $this.data("id"));
-    $tooltip_city.html($this.data("text"));
-    const nation_text = $this.data("nation");
-    if (nation_text) {
-      $tooltip_nation.html(nation_text).show();
-    } else {
-      $tooltip_nation.html("").hide();
-    }
-
-    $tooltip.show();
-  });
-
-  $objs.on("mouseleave", function () {
-    $tooltip.hide();
-  });
-
-  $objs.on("click", function () {
-    //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
-    const touchMode = $(this).data("touchMode") as number | undefined;
-    if (touchMode === undefined) {
-      return;
-    }
-
-    if (touchMode === 1) {
-      return false;
-    }
-  });
-
-  return obj;
-}
-
-function setCityClickable(obj: MapCityDrawable) {
-  obj.cityList.forEach(function (city) {
-    const $cityLink = $world_map.find(`.city_base_${city.id} .city_link`);
-
-    if ("clickable" in city && city.clickable > 0) {
-      $cityLink.attr("href", stringFormat(hrefTemplate, city.id));
-    }
-
-    if (selectCallback) {
-      $cityLink.on("click", function (e) {
-        e.preventDefault();
-        return selectCallback(city);
-      });
-    }
-  });
-
-  return obj;
-}
-
-async function reloadWorldMap(option: loadMapOption, drawTarget = ".world_map"): Promise<void> {
-  const $world_map = $(drawTarget);
-
-  const defaultOption: loadMapOption = {
-    isDetailMap: true, //복잡 지도, 단순 지도
-    clickableAll: false, //어떤 경우든 클릭을 가능하게 함. 해당 동작의 동작 가능성 여부와는 별도.
-    selectCallback: undefined, //callback을 지정시 clickable과 관계 없이 해당 함수를 실행.
-    hrefTemplate: "#", //도시가 클릭가능할 경우 지정할 href값. {0}은 도시 id로 변환됨
-
-    //아래부터는 post query에 들어갈 녀석
-    year: undefined, //year값, 연감등에 사용
-    month: undefined, //month값, 연감등에 사용
-    neutralView: false, //clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정
-    showMe: true, //반환 값에 본인이 위치한 도시 값을 반환하도록 설정. neutralView와 별개
-
-    callback: undefined,
-
-    //기타 보조 값
-    startYear: undefined,
-  };
-
-  const isDetailMap = props.isDetailMap ?? true;
-  const clickableAll = props.clickableAll ?? false;
-  const selectCallback = props.selectCallback;
-  const hrefTemplate = props.hrefTemplate;
-
-  const cityPosition = window.getCityPosition();
-
-  const storedOldMapKey = `sam.${props.serverNick}.map`;
-  const storedStartYear = `sam.${props.serverNick}.startYear`;
-  //OBJ : startYear, year, month, cityList, nationList, spyList, shownByGeneralList, myCity
-
-  const $hideCityNameBtn = $world_map.find(".map_toggle_cityname");
-  if (localStorage.getItem("sam.hideMapCityName") == "yes") {
-    $world_map.addClass("hide_cityname");
-    $hideCityNameBtn.addClass("active").attr("aria-pressed", "true");
-  }
-
-  $hideCityNameBtn.on("click", function () {
-    //이전 상태 확인
-    const state = localStorage.getItem("sam.hideMapCityName") == "no";
-    if (state) {
-      $world_map.addClass("hide_cityname");
-      localStorage.setItem("sam.hideMapCityName", "yes");
-    } else {
-      $world_map.removeClass("hide_cityname");
-      localStorage.setItem("sam.hideMapCityName", "no");
-    }
-  });
-
-  const $toggleSingleTapBtn = $world_map.find(".map_toggle_single_tap");
-  if (localStorage.getItem("sam.toggleSingleTap") == "yes") {
-    window.sam_toggleSingleTap = true;
-    $toggleSingleTapBtn.addClass("active").attr("aria-pressed", "true");
-  } else {
-    window.sam_toggleSingleTap = false;
-  }
-
-  const $map_body = $(drawTarget + " .map_body");
-
-  $toggleSingleTapBtn.on("click", function () {
-    //이전 상태 확인
-    const state = localStorage.getItem("sam.toggleSingleTap") == "no";
-    if (state) {
-      $map_body.removeData("touchMode");
-      localStorage.setItem("sam.toggleSingleTap", "yes");
-      window.sam_toggleSingleTap = true;
-    } else {
-      localStorage.setItem("sam.toggleSingleTap", "no");
-      window.sam_toggleSingleTap = false;
-    }
-  });
-
-  const computedResult = await convertCityObjs(rawObject)
-    .then(isDetailMap ? drawDetailWorldMap : drawBasicWorldMap)
-    .then(setMouseWork)
-    .then(setCityClickable);
-
-  if (option.callback) {
-    option.callback(computedResult, rawObject);
-  }
-}
-*/
-</script>
-
-<style scoped lang="scss"></style>
+</script>
\ No newline at end of file
-- 
2.54.0


From 6bee1c144048fb27b99f845e7f86ca35da840993 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 20 Apr 2022 03:21:04 +0900
Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=EC=83=88=20=EC=A7=80=EB=8F=84=20?=
 =?UTF-8?q?=EB=AA=A8=EB=93=88=20=EB=A7=88=EB=AC=B4=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/scss/map.scss                             |  8 +++---
 hwe/ts/components/MapCityBasic.vue            |  6 ++++-
 .../{StaticMapTemplate.vue => MapViewer.vue}  | 27 +++++--------------
 3 files changed, 16 insertions(+), 25 deletions(-)
 rename hwe/ts/components/{StaticMapTemplate.vue => MapViewer.vue} (94%)

diff --git a/hwe/scss/map.scss b/hwe/scss/map.scss
index 7bb08f96..26d500ba 100644
--- a/hwe/scss/map.scss
+++ b/hwe/scss/map.scss
@@ -642,10 +642,10 @@ $smV: calc(500 / 700);
 
       .city_state {
         position: absolute;
-        width: 10px;
-        height: 10px;
-        top: -2px;
-        left: -4px;
+        width: 8px;
+        height: 8px;
+        top: -3px;
+        left: -5px;
         background-color: white;
       }
 
diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
index 21a192e0..e7182383 100644
--- a/hwe/ts/components/MapCityBasic.vue
+++ b/hwe/ts/components/MapCityBasic.vue
@@ -80,11 +80,15 @@ watch(
         left: `${x - 20}px`,
         top: `${y - 15}px`,
       };
+    } else {
+      cityPos.value = {
+        left: `${(x * 5) / 7 - 20}px`,
+        top: `${(y * 5) / 7 - 18}px`,
+      };
     }
   },
   { immediate: true }
 );
-
 function getCityState(): string {
   const state = city.value.state;
   if (state < 10) {
diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/MapViewer.vue
similarity index 94%
rename from hwe/ts/components/StaticMapTemplate.vue
rename to hwe/ts/components/MapViewer.vue
index 75d68b0b..c75802dc 100644
--- a/hwe/ts/components/StaticMapTemplate.vue
+++ b/hwe/ts/components/MapViewer.vue
@@ -61,6 +61,7 @@
           :image-path="imagePath"
           :is-my-city="city.id === drawableMap.myCity"
           :isFullWidth="isFullWidth"
+          :href="props.genHref?.call(city, city.id)"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -73,6 +74,7 @@
           :city="city"
           :is-my-city="city.id === drawableMap.myCity"
           :isFullWidth="isFullWidth"
+          :href="props.genHref?.call(city, city.id)"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -152,7 +154,6 @@ export type CityPositionMap = {
 </script>
 <script lang="ts" setup>
 import "@/../scss/map.scss";
-import type { loadMapOption } from "@/map";
 import { type PropType, toRef, inject, type Ref, ref, watch, type ComponentPublicInstance } from "vue";
 import { v4 as uuidv4 } from "uuid";
 import type { MapResult } from "@/defs";
@@ -205,14 +206,6 @@ const props = defineProps({
     default: undefined,
     required: false,
   },
-  serverNick: {
-    type: String,
-    required: true,
-  },
-  serverID: {
-    type: String,
-    required: true,
-  },
   imagePath: {
     type: String,
     required: true,
@@ -223,17 +216,11 @@ const props = defineProps({
   },
   isDetailMap: { 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 },
-  ///반환 값에 본인이 위치한 도시 값을 반환하도록 설정. neutralView와 별개
-  showMe: { type: Boolean, default: true, required: false },
-
-  callback: {
-    type: Function as PropType<loadMapOption["callback"]>,
+  genHref: {
+    type: Function as PropType<(cityID: number) => string>,
     default: undefined,
+    required: false,
   },
-  startYear: { type: Number, default: undefined, required: false },
 
   cityPosition: {
     type: Object as PropType<CityPositionMap>,
@@ -456,7 +443,7 @@ function cityClick(city: MapCityParsed, $event: MouseEvent | TouchEvent): void {
 function clickOutside($event: MouseEvent): void {
   $event.preventDefault();
   $event.stopPropagation();
-  if(touchState.value == 1) {
+  if (touchState.value == 1) {
     touchState.value = 0;
     activatedCity.value = undefined;
   }
@@ -475,4 +462,4 @@ function mouseleave(city: MapCityParsed, $event: MouseEvent): void {
     touchState.value = 0;
   }
 }
-</script>
\ No newline at end of file
+</script>
-- 
2.54.0