feat: 메인화면의 도시정보를 500px, 700px 가변

hwe/scss/main.scss

@@ -35,6 +35,37 @@ body {
     display: grid;
 }
 
+.mainCityInfo {
+    display: grid;
+    border-right: solid 1px gray;
+    border-bottom: solid 1px gray;
+
+    .gPanel {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        border-top: solid 1px gray;
+        border-left: solid 1px gray;
+
+        .gHead {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    .cityNamePanel,
+    .nationNamePanel {
+        font-weight: bold;
+        text-align: center;
+        border-top: solid 1px gray;
+        border-left: solid 1px gray;
+    }
+
+    .popPanel {
+        grid-column: 1 / 3;
+        grid-template-columns: 1fr 5fr;
+    }
+}
 
 @include media-breakpoint-up(md) {
     #map_view {
@@ -98,6 +129,31 @@ body {
         margin: 0;
         display: block;
     }
+
+
+    .mainCityInfo {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+
+        .cityNamePanel,
+        .nationNamePanel {
+            grid-column: 1 / 5;
+        }
+
+        .officer4Panel {
+            grid-column: 4 / 5;
+            grid-row: 3 / 4;
+        }
+
+        .officer3Panel {
+            grid-column: 4 / 5;
+            grid-row: 4 / 5;
+        }
+
+        .officer2Panel {
+            grid-column: 4 / 5;
+            grid-row: 5 / 6;
+        }
+    }
 }
 
 @include media-breakpoint-down(md) {
@@ -172,6 +228,16 @@ body {
         grid-row-start: 4;
         grid-row-end: 5;
     }
+
+    .mainCityInfo {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+
+        .cityNamePanel,
+        .nationNamePanel {
+            grid-column: 1 / 4;
+        }
+    }
 }
 
 .toolbarButton {
@@ -251,11 +317,13 @@ body {
     margin: auto;
     font-size: 13px;
 }
+
 /*임시용 끝*/
 
 #message_board {
     position: relative;
 }
+
 /*
 #message_board section{
     overflow-y:auto;
@@ -286,15 +354,18 @@ body {
 
 }
 
-.msg_plate_national, .msg_plate_diplomacy{
+.msg_plate_national,
+.msg_plate_diplomacy {
     background-color: #00582c;
 }
 
-.msg_plate_national.msg_plate_dest, .msg_plate_diplomacy.msg_plate_dest {
+.msg_plate_national.msg_plate_dest,
+.msg_plate_diplomacy.msg_plate_dest {
     background-color: #704615;
 }
 
-.msg_plate_national.msg_plate_src, .msg_plate_diplomacy.msg_plate_src {
+.msg_plate_national.msg_plate_src,
+.msg_plate_diplomacy.msg_plate_src {
     background-color: #70153b;
 }
 
@@ -367,6 +438,7 @@ body {
     outline-width: 1px;
     outline-color: gray;
 }
+
 /*
 .board_side{
     position:absolute;

hwe/templates/mainCityInfo.php

@@ -1,47 +1,48 @@
-<table style='width:100%;' class='tb_layout bg2'>
+<div style='width:100%;' class='tb_layout bg2 mainCityInfo'>
-    <tr><td colspan=8 style='text-align:center;height:20px;color:<?=$nationTextColor?>;background-color:<?=$nationColor?>;font-weight:bold;font-size:13px;'>【 <?=$region?> | <?=$levelText?> 】 <?=$name?></td></tr>
+    <div class="cityNamePanel" style="color:<?= $nationTextColor ?>;background-color:<?= $nationColor ?>;"><div>【 <?= $region ?> | <?= $levelText ?> 】 <?= $name ?></div></div>
-    <tr><td colspan=8 style='text-align:center;height:20px;color:<?=$nationTextColor?>;background-color:<?=$nationColor?>'><b><?=$nationName?"지배 국가 【 {$nationName} 】":'공 백 지'?></b></td>
+    <div class="nationNamePanel" style="color:<?= $nationTextColor ?>;background-color:<?= $nationColor ?>;"><?= $nationName ? "지배 국가 【 {$nationName} 】" : '공 백 지' ?></div>
-    </tr>
+    <div class="gPanel popPanel">
-    <tr>
+        <div class="gHead bg1">주민</div>
-        <td rowspan=2 style='text-align:center;' class='bg1'><b>주민</b></td>
+        <div class="gBody"><?= $this->bar($pop / $pop_max * 100) ?><?= $pop ?>/<?= $pop_max ?></div>
-        <td height=7 colspan=3><?=$this->bar($pop/$pop_max*100)?></td>
+    </div>
-        <td rowspan=2 style='text-align:center;' class='bg1'><b>민심</b></td>
+    <div class="gPanel trustPanel">
-        <td height=7><?=$this->bar($trust)?></td>
+        <div class="gHead bg1">민심</div>
-        <td rowspan=2 style='text-align:center;' class='bg1'><b>태수</b></td>
+        <div class="gBody"><?= $this->bar($trust) ?><?= round($trust, 1) ?></div>
-        <td rowspan=2 style='text-align:center;'><?=$officerName[4]?></td>
+    </div>
-    </tr>
+    <div class="gPanel agriPanel">
-    <tr>
+        <div class="gHead bg1">농업</div>
-        <td colspan=3 style='text-align:center;'><?=$pop?>/<?=$pop_max?></td>
+        <div class="gBody"><?= $this->bar($agri / $agri_max * 100) ?><?= $agri ?>/<?= $agri_max ?></div>
-        <td style='text-align:center;'><?=round($trust, 1)?></td>
+    </div>
-    </tr>
+    <div class="gPanel commPanel">
-    <tr>
+        <div class="gHead bg1">상업</div>
-        <td width=50  rowspan=2 style='text-align:center;' class='bg1'><b>농업</b></td>
+        <div class="gBody"><?= $this->bar($comm / $comm_max * 100) ?><?= $comm ?>/<?= $comm_max ?></div>
-        <td width=100 height=7><?=$this->bar($agri/$agri_max*100)?></td>
+    </div>
-        <td width=50  rowspan=2 style='text-align:center;' class='bg1'><b>상업</b></td>
+    <div class="gPanel secuPanel">
-        <td width=100 height=7><?=$this->bar($comm/$comm_max*100)?></td>
+        <div class="gHead bg1">치안</div>
-        <td width=50  rowspan=2 style='text-align:center;' class='bg1'><b>치안</b></td>
+        <div class="gBody"><?= $this->bar($secu / $secu_max * 100) ?><?= $secu ?>/<?= $secu_max ?></div>
-        <td width=100 height=7><?=$this->bar($secu/$secu_max*100)?></td>
+    </div>
-        <td width=50  rowspan=2 style='text-align:center;' class='bg1'><b>군사</b></td>
+    <div class="gPanel defPanel">
-        <td rowspan=2 style='text-align:center;'><?=$officerName[3]?></td>
+        <div class="gHead bg1">수비</div>
-    </tr>
+        <div class="gBody"><?= $this->bar($def / $def_max * 100) ?><?= $def ?>/<?= $def_max ?></div>
-    <tr>
+    </div>
-        <td style='text-align:center;'><?=$agri?>/<?=$agri_max?></td>
+    <div class="gPanel wallPanel">
-        <td style='text-align:center;'><?=$comm?>/<?=$comm_max?></td>
+        <div class="gHead bg1">성벽</div>
-        <td style='text-align:center;'><?=$secu?>/<?=$secu_max?></td>
+        <div class="gBody"><?= $this->bar($wall / $wall_max * 100) ?><?= $wall ?>/<?= $wall_max ?></div>
-    </tr>
+    </div>
-    <tr>
+    <div class="gPanel tradePanel">
-        <td rowspan=2 style='text-align:center;' class='bg1'><b>수비</b></td>
+        <div class="gHead bg1">시세</div>
-        <td height=7><?=$this->bar($def/$def_max*100)?></td>
+        <div class="gBody"><?= $this->bar(($trade - 95) * 10) ?><?= $trade ? "{$trade}%" : '상인없음' ?></div>
-        <td rowspan=2 style='text-align:center;' class='bg1'><b>성벽</b></td>
+    </div>
-        <td height=7><?=$this->bar($wall/$wall_max*100)?></td>
+    <div class="gPanel officer4Panel">
-        <td rowspan=2 style='text-align:center;' class='bg1'><b>시세</b></td>
+        <div class="gHead bg1">태수</div>
-        <td height=7><?=$this->bar(($trade-95)*10)?></td>
+        <div class="gBody"><?= $officerName[4] ?></div>
-        <td rowspan=2 style='text-align:center;' class='bg1'><b>종사</b></td>
+    </div>
-        <td rowspan=2 style='text-align:center;'><?=$officerName[2]?></td>
+    <div class="gPanel officer3Panel">
-    </tr>
+        <div class="gHead bg1">군사</div>
-    <tr>
+        <div class="gBody"><?= $officerName[3] ?></div>
-        <td style='text-align:center;'><?=$def?>/<?=$def_max?></td>
+    </div>
-        <td style='text-align:center;'><?=$wall?>/<?=$wall_max?></td>
+    <div class="gPanel officer2Panel">
-        <td style='text-align:center;'><?=$trade?"{$trade}%":'상인없음'?></td>
+        <div class="gHead bg1">종사</div>
-    </tr>
+        <div class="gBody"><?= $officerName[2] ?></div>
-</table>
+    </div>
+</div>

hwe/ts/map.ts

@@ -537,7 +537,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
 
             });
 
-            $objs.on('touchend', function (e) {
+            $objs.on('touchend', function () {
                 if (window.sam_toggleSingleTap) {
                     return true;
                 }