feat(in-progress): 메인메뉴 지도를 500px 모드에 맞게 수정

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{

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));
+        }
     }
 
 

hwe/templates/map.php

@@ -16,6 +16,7 @@
                 두번 탭 해 도시 이동
             </button>
         </div>
+    </div>
     <div class="city_tooltip">
         <div class="city_name">
 
@@ -25,4 +26,3 @@
         </div>
     </div>
 </div>
-</div>

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 () {