vue: inheritPoint 샘플 작성

hwe/scss/bootstrap5.scss

@@ -0,0 +1,7 @@
+
+$font-family-sans-serif:  '나눔 고딕', 'Nanum Gothic';
+$body-bg:  #000;
+
+@import "../../node_modules/bootswatch/dist/darkly/_variables.scss";
+@import "../../node_modules/bootstrap5/scss/bootstrap.scss";
+@import "../../node_modules/bootswatch/dist/darkly/_bootswatch.scss";

hwe/scss/game_bg.scss

@@ -17,6 +17,10 @@ table.tb_layout {
     word-break: break-all;
 }
 
+html, body{
+    font-size: 13px;
+}
+
 .tb_layout td,
 .tb_layout th {
     border: solid 1px gray;

hwe/templates/commandButton.php

@@ -16,7 +16,7 @@
     <a href='b_diplomacy.php'><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>중원 정보</button></a>
     <a href='b_currentCity.php'><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>현재 도시</button></a>
     <a href='b_battleCenter.php' target='_blank'><button type="button" class='commandButton' <?=$showSecret?'':'disabled'?> style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>감 찰 부</button></a>
-    <a href='b_inheritPoint.php'><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>유산 관리</button></a>
+    <a href='v_inheritPoint.php'><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>유산 관리</button></a>
     <a href='b_myPage.php'><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>내 정보&amp;설정</button></a>
     <a href='b_auction.php' target='_blank'><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>거 래 장</button></a>
     <a href='b_betting.php' target='_blank'><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>베 팅 장</button></a>

hwe/ts/components/TopBackBar.vue

@@ -4,6 +4,7 @@
       <td style="text-align: left">
         {{title}}<br /><button
           type="button"
+          class="btn btn-primary"
           @click="back"
         >돌아가기</button><br />
       </td>

hwe/ts/inheritPoint.vue

@@ -1,122 +1,50 @@
 <template>
   <top-back-bar :title="title" />
-
   <div
     id="container"
     class="tb_layout bg0"
     style="width: 1000px; margin: auto; border: solid 1px #888888"
   >
     <div id="inheritance_list">
-      <div id="inherit_sum" class="inherit_item">
-        <div class="row">
-          <label
-            id="inherit_sum_head"
-            class="inherit_head col-sm-6 col-form-label"
-            >총 포인트</label
-          >
-          <div class="col-sm-6">
-            <input
-              type="text"
-              class="form-control inherit_value"
-              readonly
-              id="inherit_sum_value"
-              value=""
-            />
+      <template v-for="(text, key) in inheritanceViewText" :key="key">
+        <div :id="`inherit_${key}`" class="inherit_item inherit_template_item">
+          <div class="row">
+            <label
+              :id="`inherit_${key}_head`"
+              class="inherit_head col-sm-6 col-form-label"
+              >{{ text.title }}</label
+            >
+            <div class="col-sm-6">
+              <input
+                type="text"
+                class="form-control inherit_value"
+                readonly
+                :id="`inherit_${key}_value`"
+                :value="Math.floor(items[key]).toLocaleString()"
+              />
+            </div>
+          </div>
+
+          <div style="text-align: right">
+            <small class="form-text text-muted" v-html="text.info"></small>
           </div>
         </div>
-
-        <div style="text-align: right">
-          <small class="form-text text-muted"></small>
+        <div v-if="key == 'new'" style="width: 100%; padding: 0 10px">
+          <hr :style="{ opacity: 0.5 }" />
         </div>
-      </div>
-
-      <div id="inherit_previous" class="inherit_item">
-        <div class="row">
-          <label
-            id="inherit_sum_head"
-            class="inherit_head col-sm-6 col-form-label"
-            >기존 포인트</label
-          >
-          <div class="col-sm-6">
-            <input
-              type="text"
-              class="form-control inherit_value"
-              readonly
-              id="inherit_previous_value"
-              value=""
-            />
-          </div>
-        </div>
-
-        <div style="text-align: right">
-          <small class="form-text text-muted"></small>
-        </div>
-      </div>
-
-      <div id="inherit_new" class="inherit_item">
-        <div class="row">
-          <label
-            id="inherit_sum_head"
-            class="inherit_head col-sm-6 col-form-label"
-            >신규 포인트</label
-          >
-          <div class="col-sm-6">
-            <input
-              type="text"
-              class="form-control inherit_value"
-              readonly
-              id="inherit_new_value"
-              value=""
-            />
-          </div>
-        </div>
-
-        <div style="text-align: right">
-          <small class="form-text text-muted"></small>
-        </div>
-      </div>
-      <div style="width: 100%; padding: 0 10px">
-        <hr style="border-top: 1px solid #888888" />
-      </div>
-      <!--<?php if ($key == 'previous') {
-                    continue;
-                } ?>-->
-      <div
-        v-for="(vals, key) in inheritanceKey"
-        :key="key"
-        :id="`inherit_${key}`"
-        class="inherit_item inherit_template_item"
-      >
-        <div class="row">
-          <label
-            id="inherit_<?= $key ?>_head"
-            class="inherit_head col-sm-6 col-form-label"
-            >{{ vals[2] }}</label
-          >
-          <div class="col-sm-6">
-            <input
-              type="text"
-              class="form-control inherit_value"
-              readonly
-              :id="`inherit_${key}_value`"
-              value=""
-            />
-          </div>
-        </div>
-
-        <div style="text-align: right">
-          <small class="form-text text-muted"></small>
-        </div>
-      </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
+import "../scss/bootstrap5.scss";
 import "../scss/inheritPoint.scss";
 import "../scss/game_bg.scss";
 import TopBackBar from "./components/TopBackBar.vue";
+import { sum } from "lodash";
+import _ from "lodash";
 
 type InheritanceType =
   | "previous"
@@ -133,37 +61,64 @@ type InheritanceType =
 
 type InheritanceViewType = InheritanceType | "sum" | "new";
 
-const inheritanceKey: Record<
-  InheritanceType,
-  [boolean | [string, string], number, string]
+declare const items: Record<InheritanceType, number>;
+
+const inheritanceViewText: Record<
+  InheritanceViewType,
+  { title: string; info: string }
 > = {
-  previous: [true, 1, "기존 포인트"],
-  lived_month: [true, 1, "생존"],
-  max_belong: [false, 10, "최대 임관년 수"],
-  max_domestic_critical: [true, 1, "최대 연속 내정 성공"],
-  snipe_combat: [true, 10, "병종 상성 우위 횟수"],
-  combat: [["rank", "warnum"], 5, "전투 횟수"],
-  sabotage: [["rank", "firenum"], 20, "계략 성공 횟수"],
-  unifier: [true, 1, "천통 기여"],
-  dex: [false, 0.001, "숙련도"],
-  tournament: [true, 1, "토너먼트"],
-  betting: [false, 10, "베팅 당첨"],
-};
-const pointHelpText: Record<InheritanceViewType, string> = {
-  sum: "다음 플레이에서 사용할 수 있는 총 포인트입니다.",
-  new: "이번 플레이에서 얻은 총 포인트입니다.",
-  previous: "이전에 물려받은 포인트입니다.",
-  lived_month: "살아남은 기간입니다. (1개월 단위)",
-  max_belong: "가장 오래 임관했던 국가의 연도입니다.",
-  max_domestic_critical: "성공한 내정 중 최대 연속값입니다.",
-  snipe_combat: "유리한 상성을 가지고 전투했습니다.",
-  combat: "전투 횟수입니다.",
-  sabotage: "계략 성공 횟수입니다.",
-  unifier:
-    "천통에 기여한 포인트입니다. <br>각 국의 군주, 천통 수뇌, 천통 군주가 받습니다.",
-  dex: "총 숙련도합입니다.",
-  tournament: "토너먼트 입상 포인트입니다.",
-  betting: "성공적인 베팅을 했습니다. <br>수익율과 베팅 성공 횟수를 따릅니다.",
+  sum: {
+    title: "총 포인트",
+    info: "다음 플레이에서 사용할 수 있는 총 포인트입니다.",
+  },
+  previous: {
+    title: "기존 포인트",
+    info: "이전에 물려받은 포인트입니다.",
+  },
+  new: {
+    title: "신규 포인트",
+    info: "이번 플레이에서 얻은 총 포인트입니다.",
+  },
+  lived_month: {
+    title: "생존",
+    info: "살아남은 기간입니다. (1개월 단위)",
+  },
+  max_belong: {
+    title: "최대 임관년 수",
+    info: "가장 오래 임관했던 국가의 연도입니다.",
+  },
+  max_domestic_critical: {
+    title: "최대 연속 내정 성공",
+    info: "성공한 내정 중 최대 연속값입니다.",
+  },
+  snipe_combat: {
+    title: "병종 상성 우위 횟수",
+    info: "유리한 상성을 가지고 전투했습니다.",
+  },
+  combat: {
+    title: "전투 횟수",
+    info: "전투 횟수입니다.",
+  },
+  sabotage: {
+    title: "계략 성공 횟수",
+    info: "계략 성공 횟수입니다.",
+  },
+  unifier: {
+    title: "천통 기여",
+    info: "천통에 기여한 포인트입니다. <br>각 국의 군주, 천통 수뇌, 천통 군주가 받습니다.",
+  },
+  dex: {
+    title: "숙련도",
+    info: "총 숙련도합입니다.",
+  },
+  tournament: {
+    title: "토너먼트",
+    info: "토너먼트 입상 포인트입니다.",
+  },
+  betting: {
+    title: "베팅 당첨",
+    info: "성공적인 베팅을 했습니다. <br>수익율과 베팅 성공 횟수를 따릅니다.",
+  },
 };
 
 export default defineComponent({
@@ -171,8 +126,18 @@ export default defineComponent({
   data() {
     return {
       title: "유산 관리",
-      pointHelpText,
-      inheritanceKey,
+      inheritanceViewText,
+      items: (() => {
+        const totalPoint = Math.floor(_.sum(Object.values(items)));
+        const previousPoint = Math.floor(items["previous"]);
+        const newPoint = Math.floor(totalPoint - previousPoint);
+        const result: Record<InheritanceViewType, number> = {
+          ...items,
+          sum: totalPoint,
+          new: newPoint,
+        };
+        return result;
+      })(),
     };
   },
   components: {

hwe/ts/legacy/inheritPoint.ts

@@ -1,4 +1,4 @@
-import "../scss/inheritPoint.scss";
+import "../../scss/inheritPoint.scss";
 
 import { sum } from "lodash";
 import { unwrap } from "../util/unwrap";

hwe/v_inheritPoint.php

@@ -15,24 +15,9 @@ $gameStor = KVStorage::getStorage($db, 'game_env');
 $me = General::createGeneralObjFromDB($generalID);
 
 
-$pointHelpText = [
-    'sum' => '다음 플레이에서 사용할 수 있는 총 포인트입니다.',
-    'new' => '이번 플레이에서 얻은 총 포인트입니다.',
-    'previous' => '이전에 물려받은 포인트입니다.',
-    'lived_month' => '살아남은 기간입니다. (1개월 단위)',
-    'max_belong' => '가장 오래 임관했던 국가의 연도입니다.',
-    'max_domestic_critical' => '성공한 내정 중 최대 연속값입니다.',
-    'snipe_combat' => '유리한 상성을 가지고 전투했습니다.',
-    'combat' => '전투 횟수입니다.',
-    'sabotage' => '계략 성공 횟수입니다.',
-    'unifier' => '천통에 기여한 포인트입니다. <br>각 국의 군주, 천통 수뇌, 천통 군주가 받습니다.',
-    'dex' => '총 숙련도합입니다.',
-    'tournament' => '토너먼트 입상 포인트입니다.',
-    'betting' => '성공적인 베팅을 했습니다. <br>수익율과 베팅 성공 횟수를 따릅니다.',
-];
 $items = [];
-foreach(array_keys(General::INHERITANCE_KEY) as $key){
-    $items[$key] = $me->getInheritancePoint($key)??0;
+foreach (array_keys(General::INHERITANCE_KEY) as $key) {
+    $items[$key] = $me->getInheritancePoint($key) ?? 0;
 }
 ?>
 <!DOCTYPE html>
@@ -48,14 +33,13 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
     <?= WebUtil::printCSS('dist_css/v_inheritPoint.css') ?>
     <?= WebUtil::printJS('../d_shared/common_path.js') ?>
     <?= WebUtil::printJS('dist_js/vendors_vue.js') ?>
-<script>
-    var items = <?=Json::encode($items)?>;
-    var helpText = <?=Json::encode($pointHelpText)?>;
-</script>
+    <?= WebUtil::printStaticValues([
+        'items' => $items
+    ]) ?>
 </head>
 
 <body>
-<div id="app"></div>
+    <div id="app"></div>
 
     <?= WebUtil::printJS('dist_js/v_inheritPoint.js') ?>
 </body>