From 8eda98ff4cd09231b6e4ab6a0c2e2b3d8992462f Mon Sep 17 00:00:00 2001
From: hide_d <hided62@gmail.com>
Date: Sun, 28 Nov 2021 18:54:37 +0900
Subject: [PATCH] =?UTF-8?q?feat(in-progress):=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=A7=80=EB=8F=84=EB=A5=BC=20500px=20?=
 =?UTF-8?q?=EB=AA=A8=EB=93=9C=EC=97=90=20=EB=A7=9E=EA=B2=8C=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/css/map.css       |  4 +++-
 hwe/scss/main.scss    | 17 +++++++++++++++++
 hwe/templates/map.php | 24 ++++++++++++------------
 hwe/ts/map.ts         | 24 ++++++------------------
 4 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/hwe/css/map.css b/hwe/css/map.css
index 44ff4fb9..7ff54243 100644
--- a/hwe/css/map.css
+++ b/hwe/css/map.css
@@ -5,6 +5,7 @@
     background:black;
     font-size:13px;
     color:white;
+    position: relative;
 }
 
 .map_title{
@@ -33,6 +34,7 @@
     width:700px;
     height:500px;
     position:relative;
+    overflow: hidden;
 }
 
 .map_body .map_bglayer1{
@@ -99,7 +101,7 @@
     z-index: 6;
     line-height:15px;
     height:15px;
-    
+
 }
 .world_map .nation_name{
     background-color: rgb(30, 164, 255);
diff --git a/hwe/scss/main.scss b/hwe/scss/main.scss
index e871e3d5..7fe458a9 100644
--- a/hwe/scss/main.scss
+++ b/hwe/scss/main.scss
@@ -131,6 +131,23 @@ body {
         grid-column-end: 2;
         grid-row-start: 1;
         grid-row-end: 2;
+
+
+        .world_map{
+            width:500px;
+            height: calc((500px + 20px) * 500 / 700);
+        }
+
+        .map_title{
+            transform-origin: 0px 0px;
+            transform: scale(calc(500 / 700));
+            margin-bottom: -20px * 200 / 700;
+        }
+
+        .map_body{
+            transform-origin: 0px 0px;
+            transform: scale(calc(500 / 700));
+        }
     }
 
 
diff --git a/hwe/templates/map.php b/hwe/templates/map.php
index bc50e3b0..d5e8a202 100644
--- a/hwe/templates/map.php
+++ b/hwe/templates/map.php
@@ -1,4 +1,4 @@
-<div class="world_map map_theme_<?=$mapTheme?> draw_required">
+<div class="world_map map_theme_<?= $mapTheme ?> draw_required">
     <div class="map_title obj_tooltip" data-toggle="tooltip" data-placement="top" data-tooltip-class="map_title_tooltiptext">
         <span class="map_title_text ">
         </span>
@@ -9,20 +9,20 @@
         <div class="map_bglayer2"></div>
         <div class="map_bgroad"></div>
         <div class="map_button_stack">
-        <button type="button" class="btn btn-primary map_toggle_cityname btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
-            도시명 표기
-        </button><br>
-        <button type="button" class="btn btn-secondary map_toggle_single_tap btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
-            두번 탭 해 도시 이동
-        </button>
+            <button type="button" class="btn btn-primary map_toggle_cityname btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
+                도시명 표기
+            </button><br>
+            <button type="button" class="btn btn-secondary map_toggle_single_tap btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
+                두번 탭 해 도시 이동
+            </button>
         </div>
-        <div class="city_tooltip">
-            <div class="city_name">
+    </div>
+    <div class="city_tooltip">
+        <div class="city_name">
 
-            </div>
-            <div class="nation_name">
+        </div>
+        <div class="nation_name">
 
-            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/hwe/ts/map.ts b/hwe/ts/map.ts
index 61cd1ff2..15524be3 100644
--- a/hwe/ts/map.ts
+++ b/hwe/ts/map.ts
@@ -552,16 +552,10 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
                     $tooltip_nation.html('').hide();
                 }
 
-                let left = position.left;
-                let top = position.top;
+                const left = position.left;
+                const top = position.top;
 
-                const scale = $map_body.data('scale');
-                if (scale) {
-                    left /= scale;
-                    top /= scale;
-                }
-
-                $tooltip.css({ 'top': top + 25, 'left': left + 35 }).show();
+                $tooltip.css({ 'top': top + 45, 'left': left + 35 }).show();
 
                 const touchMode = $this.data('touchMode') as number;
                 if (touchMode <= 1) {
@@ -590,16 +584,10 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
             }
 
             const rect = this.getBoundingClientRect();
-            let left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft);
-            let top = (e.clientY - rect.top - this.clientTop + this.scrollTop);
+            const left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft);
+            const top = (e.clientY - rect.top - this.clientTop + this.scrollTop);
 
-            const scale = $map_body.data('scale');
-            if (scale) {
-                left /= scale;
-                top /= scale;
-            }
-
-            $tooltip.css({ 'top': top + 10, 'left': left + 10 });
+            $tooltip.css({ 'top': top + 30, 'left': left + 10 });
         });
 
         $objs.on('mouseenter', function () {