vue: NPCControl

- 외향  모사(딱히 의미는 없으나..)
- 약간 반응형

hwe/ts/NPCControl.vue

@@ -4,19 +4,18 @@
   <div
     id="container"
     class="tb_layout bg0"
-    :style="{ width: '1000px', margin: 'auto', border: 'solid 1px #888888' }"
+    :style="{ maxWidth: '1000px', margin: 'auto', border: 'solid 1px #888888' }"
   >
     <div class="bg1 section_bar">국가 정책</div>
-    <div class="px-3" style="text-align:right;">
+    <div class="px-3" style="text-align: right">
       <small class="form-text text-muted">
         최근 설정:
         {{ lastSetters.policy.setter ?? "-없음-" }}
         ({{ lastSetters.policy.date ?? "설정 기록 없음" }})
       </small>
     </div>
-    <div class="form_list">
-      <div class="form-group row">
-        <div class="col-sm-6">
+    <div class="form_list row row-cols-md-2 row-cols-1">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqNationGold"
           :step="100"
@@ -25,7 +24,7 @@
           제외)</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqNationRice"
           :step="100"
@@ -34,9 +33,7 @@
           제외)</NumberInputWithInfo
         >
       </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanWarUrgentGold"
           :step="100"
@@ -49,22 +46,20 @@
           }}입니다.</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanWarUrgentRice"
           :step="100"
           title="유저전투장 긴급포상 금"
           >유저장긴급포상시 이보다 쌀이 적은 장수에게 포상합니다.<br />0이면
-            기본 병종으로 {{ (defaultStatMax * 100).toLocaleString() }} * 6명
-            사살 가능한 쌀을 기준으로 하며, 그 수치는 현재
+          기본 병종으로 {{ (defaultStatMax * 100).toLocaleString() }} * 6명 사살
+          가능한 쌀을 기준으로 하며, 그 수치는 현재
           {{
             zeroPolicy.reqHumanWarUrgentRice.toLocaleString()
           }}입니다.</NumberInputWithInfo
         >
       </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanWarRecommandGold"
           :step="100"
@@ -76,7 +71,7 @@
           }}입니다.</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanWarRecommandRice"
           :step="100"
@@ -88,9 +83,7 @@
           }}입니다.</NumberInputWithInfo
         >
       </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanDevelGold"
           :step="100"
@@ -99,7 +92,7 @@
           포상합니다.</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanDevelRice"
           :step="100"
@@ -108,9 +101,7 @@
           포상합니다.</NumberInputWithInfo
         >
       </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqNPCWarGold"
           :step="100"
@@ -123,7 +114,7 @@
           }}입니다.</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqNPCWarRice"
           :step="100"
@@ -137,9 +128,7 @@
           }}입니다.</NumberInputWithInfo
         >
       </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqNPCDevelGold"
           :step="100"
@@ -149,7 +138,7 @@
           {{ zeroPolicy.reqNPCDevelGold }}입니다.</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqNPCDevelRice"
           :step="100"
@@ -158,18 +147,15 @@
           헌납합니다.</NumberInputWithInfo
         >
       </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.minimumResourceActionAmount"
           :step="100"
           title="포상/몰수/헌납/삼/팜 최소 단위"
-            >연산결과가 이 단위보다 적다면 수행하지
-            않습니다.</NumberInputWithInfo
+          >연산결과가 이 단위보다 적다면 수행하지 않습니다.</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.minWarCrew"
           :step="50"
@@ -177,9 +163,7 @@
           >이보다 적을 때에는 징병을 시도합니다.</NumberInputWithInfo
         >
       </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.minNPCRecruitCityPopulation"
           :step="100"
@@ -189,7 +173,7 @@
           정착장려를 합니다.</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           :modelValue="nationPolicy.safeRecruitCityPopulationRatio * 100"
           @update:modelValue="
@@ -205,9 +189,7 @@
           제자리에서 정착장려를 합니다.</NumberInputWithInfo
         >
       </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.minNPCWarLeadership"
           :step="5"
@@ -216,7 +198,7 @@
           분류됩니다.</NumberInputWithInfo
         >
       </div>
-        <div class="col-sm-6">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.properWarTrainAtmos"
           :step="5"
@@ -227,9 +209,9 @@
           출병합니다.</NumberInputWithInfo
         >
       </div>
-      </div>
       <!--allowNpcAttackCity는 현재 게임 내 비활성-->
-
+    </div>
+    <div style="padding: 0 8pt">
       <div class="alert alert-secondary">
         전투 부대는 작업중입니다(json양식:
         {부대번호:[시작도시번호(아국),도착도시번호(적군)],...})<br />
@@ -280,8 +262,8 @@
         설정
       </button>
     </div>
-    <div class="row">
-      <div class="col-sm-6 half_section_left">
+    <div class="row row-cols-md-2 row-cols-1 g-0">
+      <div class="col half_section_left">
         <div class="bg1 section_bar">NPC 사령턴 우선순위</div>
         <div class="float-right px-3">
           <small class="form-text text-muted">
@@ -296,16 +278,21 @@
             사령턴을 시도합니다.</small
           >
         </div>
-        <div class="form_list">
-          <div class="row">
-            <div class="col-sm-6">
+        <div>
+          <div class="row g-0">
+            <div class="col">
               <div class="bg2 sub_bar">비활성</div>
               <draggable
                 :list="chiefActionUnused"
                 group="chiefAction"
-                class="list-group col"
+                class="list-group col priority-list"
                 itemKey="id"
               >
+                <template #header>
+                  <div class="list-group-item list-group-item-dark">
+                    &lt;비활성화 항목들&gt;
+                  </div>
+                </template>
                 <template #item="{ element }">
                   <div class="list-group-item">
                     <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
@@ -320,12 +307,12 @@
                 </template>
               </draggable>
             </div>
-            <div class="col-sm-6">
+            <div class="col">
               <div class="bg2 sub_bar">활성</div>
               <draggable
                 :list="chiefActionPriority"
                 group="chiefAction"
-                class="list-group col"
+                class="list-group col priority-list"
                 itemKey="id"
               >
                 <template #item="{ element }">
@@ -369,7 +356,7 @@
           </div>
         </div>
       </div>
-      <div class="col-sm-6 half_section_right">
+      <div class="col half_section_right">
         <div class="bg1 section_bar">NPC 일반턴 우선순위</div>
         <div class="float-right px-3">
           <small class="form-text text-muted">
@@ -384,16 +371,21 @@
             물자조달이나 인재탐색을 합니다.</small
           >
         </div>
-        <div class="form_list">
-          <div class="row">
-            <div class="col-sm-6">
+        <div>
+          <div class="row g-0">
+            <div class="col">
               <div class="bg2 sub_bar">비활성</div>
               <draggable
                 :list="generalActionUnused"
                 group="generalAction"
-                class="list-group col"
+                class="list-group col priority-list"
                 itemKey="id"
               >
+                <template #header>
+                  <div class="list-group-item list-group-item-dark">
+                    &lt;비활성화 항목들&gt;
+                  </div>
+                </template>
                 <template #item="{ element }">
                   <div class="list-group-item">
                     <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
@@ -407,12 +399,12 @@
                 </template>
               </draggable>
             </div>
-            <div class="col-sm-6">
+            <div class="col">
               <div class="bg2 sub_bar">활성</div>
               <draggable
                 :list="generalActionPriority"
                 group="generalAction"
-                class="list-group col"
+                class="list-group col priority-list"
                 itemKey="id"
               >
                 <template #item="{ element }">
@@ -824,11 +816,30 @@ export default defineComponent({
   text-align: left;
 }
 
+.form_list {
+  margin: 8px;
+}
+
+.sub_bar {
+  text-align: center;
+  border: 0.5px solid #aaa;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.priority-list {
+  margin: 0 10px;
+}
+
 .control_bar {
-    margin-top: 8pt;
+  padding: 0 8pt 8pt 8pt;
   text-align: right;
 }
 
+.control_bar .btn {
+  margin-top: 8pt;
+}
+
 .reset_btn {
   width: 15ch;
 }
@@ -843,14 +854,9 @@ export default defineComponent({
 }
 
 .half_section_left {
-    padding-right: 0;
   border-right: 0.5px solid #aaa;
 }
 
-.half_section_right {
-    padding-left: 0;
-}
-
 .section_bar {
   text-align: center;
   border: 0.5px solid #aaa;

hwe/ts/components/NumberInputWithInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row form-group number-input-with-info">
-    <label class="col-sm-6 col-form-label">{{ title }}</label>
-    <div class="col-sm-6">
+    <label class="col-6 col-form-label">{{ title }}</label>
+    <div class="col-6">
       <input
         ref="input"
         type="number"

hwe/ts/components/TopBackBar.vue

@@ -1,15 +1,10 @@
 <template>
-  <table style="width: 1000px; margin: auto" class="tb_layout bg0">
-    <tr>
-      <td style="text-align: left">
-        {{title}}<br /><button
-          type="button"
-          class="btn btn-primary"
-          @click="back"
-        >돌아가기</button><br />
-      </td>
-    </tr>
-  </table>
+  <div class="tb_layout bg0 back_bar">
+    <button type="button" class="btn btn-primary back_btn" @click="back">
+      돌아가기
+    </button>
+    <h2 class="title">{{ title }}</h2>
+  </div>
 </template>
 
 <script lang="ts">
@@ -20,17 +15,15 @@ export default defineComponent({
   name: "TopBackBar",
   methods: {
     back() {
-      if(this.type === 'normal'){
-        location.href = './';
-      }
-      else if(this.type == 'chief'){
-        location.href = 'b_chiefcenter.php';
-      }
-      else{
+      if (this.type === "normal") {
+        location.href = "./";
+      } else if (this.type == "chief") {
+        location.href = "b_chiefcenter.php";
+      } else {
         //TODO: window.close하려면 부모창이 있어야함!
         window.close();
       }
-    }
+    },
   },
   props: {
     title: {
@@ -47,5 +40,27 @@ export default defineComponent({
 </script>
 
 
-<style>
+<style scoped>
+.back_bar {
+  max-width: 1000px;
+  width: 100%;
+  margin: auto;
+  position: relative;
+  border-left: 1px solid #888;
+  border-right: 1px solid #888;
+  height: 24pt;
+}
+
+.back_btn {
+  position: absolute;
+  left: 0;
+  height: 24pt;
+}
+
+.title {
+  text-align: center;
+  line-height: 24pt;
+  font-size: 18pt;
+  margin: 0;
+}
 </style>

hwe/v_NPCControl.php

@@ -89,7 +89,7 @@ $lastSetters = [
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=1024" />
+    <meta name="viewport" content="width=device-with" />
     <title><?= UniqueConst::$serverName ?>: 임시 NPC 정책</title>
     <?= WebUtil::printStaticValues([
         'nationID' => $nationID,