vue: inheritPoint 샘플 작성

.eslintrc.cjs

@@ -1,22 +1,27 @@
 module.exports = {
   root: true,
-    parser: "@typescript-eslint/parser",
+  parser: "vue-eslint-parser",
   parserOptions: {
     "project": "./tsconfig.json"
   },
   ignorePatterns: ['*.test.ts', '.eslintrc.cjs', 'webpack.config.cjs', '*.js'],
   overrides: [{
-      files: ['*.ts', '*.tsx'],
+    files: ['*.ts', '*.tsx', "*.vue"],
   }],
   plugins: [
     "@typescript-eslint",
+
   ],
   extends: [
     "eslint:recommended",
+    'plugin:vue/essential',
+    '@vue/typescript',
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"
   ],
   rules: {
     '@typescript-eslint/no-floating-promises': 'error',
+    "vue/no-multiple-template-root": "off",
+    "vue/no-v-for-template-key": "off",
   }
 }

.phan/config.php

@@ -41,7 +41,7 @@ return [
         'hwe/b_dipcenter.php',
         'hwe/b_diplomacy.php',
         'hwe/b_genList.php',
-        'hwe/b_inheritPoint.php',
+        'hwe/v_inheritPoint.php',
         'hwe/b_myBossInfo.php',
         'hwe/b_myCityInfo.php',
         'hwe/b_myGenInfo.php',

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,97 +1,18 @@
 <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">
+      <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_sum_head"
+              :id="`inherit_${key}_head`"
               class="inherit_head col-sm-6 col-form-label"
-            >총 포인트</label
+              >{{ text.title }}</label
-          >
-          <div class="col-sm-6">
-            <input
-              type="text"
-              class="form-control inherit_value"
-              readonly
-              id="inherit_sum_value"
-              value=""
-            />
-          </div>
-        </div>
-
-        <div style="text-align: right">
-          <small class="form-text text-muted"></small>
-        </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
@@ -99,24 +20,31 @@
                 class="form-control inherit_value"
                 readonly
                 :id="`inherit_${key}_value`"
-              value=""
+                :value="Math.floor(items[key]).toLocaleString()"
               />
             </div>
           </div>
 
           <div style="text-align: right">
-          <small class="form-text text-muted"></small>
+            <small class="form-text text-muted" v-html="text.info"></small>
           </div>
         </div>
+        <div v-if="key == 'new'" style="width: 100%; padding: 0 10px">
+          <hr :style="{ opacity: 0.5 }" />
+        </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<
+declare const items: Record<InheritanceType, number>;
-  InheritanceType,
+
-  [boolean | [string, string], number, string]
+const inheritanceViewText: Record<
+  InheritanceViewType,
+  { title: string; info: string }
 > = {
-  previous: [true, 1, "기존 포인트"],
+  sum: {
-  lived_month: [true, 1, "생존"],
+    title: "총 포인트",
-  max_belong: [false, 10, "최대 임관년 수"],
+    info: "다음 플레이에서 사용할 수 있는 총 포인트입니다.",
-  max_domestic_critical: [true, 1, "최대 연속 내정 성공"],
+  },
-  snipe_combat: [true, 10, "병종 상성 우위 횟수"],
+  previous: {
-  combat: [["rank", "warnum"], 5, "전투 횟수"],
+    title: "기존 포인트",
-  sabotage: [["rank", "firenum"], 20, "계략 성공 횟수"],
+    info: "이전에 물려받은 포인트입니다.",
-  unifier: [true, 1, "천통 기여"],
+  },
-  dex: [false, 0.001, "숙련도"],
+  new: {
-  tournament: [true, 1, "토너먼트"],
+    title: "신규 포인트",
-  betting: [false, 10, "베팅 당첨"],
+    info: "이번 플레이에서 얻은 총 포인트입니다.",
-};
+  },
-const pointHelpText: Record<InheritanceViewType, string> = {
+  lived_month: {
-  sum: "다음 플레이에서 사용할 수 있는 총 포인트입니다.",
+    title: "생존",
-  new: "이번 플레이에서 얻은 총 포인트입니다.",
+    info: "살아남은 기간입니다. (1개월 단위)",
-  previous: "이전에 물려받은 포인트입니다.",
+  },
-  lived_month: "살아남은 기간입니다. (1개월 단위)",
+  max_belong: {
-  max_belong: "가장 오래 임관했던 국가의 연도입니다.",
+    title: "최대 임관년 수",
-  max_domestic_critical: "성공한 내정 중 최대 연속값입니다.",
+    info: "가장 오래 임관했던 국가의 연도입니다.",
-  snipe_combat: "유리한 상성을 가지고 전투했습니다.",
+  },
-  combat: "전투 횟수입니다.",
+  max_domestic_critical: {
-  sabotage: "계략 성공 횟수입니다.",
+    title: "최대 연속 내정 성공",
-  unifier:
+    info: "성공한 내정 중 최대 연속값입니다.",
-    "천통에 기여한 포인트입니다. <br>각 국의 군주, 천통 수뇌, 천통 군주가 받습니다.",
+  },
-  dex: "총 숙련도합입니다.",
+  snipe_combat: {
-  tournament: "토너먼트 입상 포인트입니다.",
+    title: "병종 상성 우위 횟수",
-  betting: "성공적인 베팅을 했습니다. <br>수익율과 베팅 성공 횟수를 따릅니다.",
+    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,
+      inheritanceViewText,
-      inheritanceKey,
+      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,21 +15,6 @@ $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;
@@ -48,10 +33,9 @@ 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>
+    <?= WebUtil::printStaticValues([
-    var items = <?=Json::encode($items)?>;
+        'items' => $items
-    var helpText = <?=Json::encode($pointHelpText)?>;
+    ]) ?>
-</script>
 </head>
 
 <body>

package.json

@@ -52,9 +52,11 @@
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "@vue/compiler-sfc": "^3.2.7",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-preset-modern-browsers": "^15.0.2",
+    "bootswatch": "^5.1.0",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "css-loader": "^6.2.0",
     "eslint": "^7.32.0",
@@ -67,6 +69,7 @@
     "ts-loader": "^9.2.5",
     "typescript": "^4.4.2",
     "url-loader": "^4.1.1",
+    "vue-eslint-parser": "^7.10.0",
     "vue-loader": "^16.5.0",
     "vue-style-loader": "^4.1.3",
     "webpack": "^5.51.2",

src/sammo/WebUtil.php

@@ -1,6 +1,8 @@
 <?php
 namespace sammo;
 
+use phpDocumentor\Reflection\Types\Boolean;
+
 class WebUtil
 {
     private function __construct()
@@ -176,6 +178,21 @@ class WebUtil
         return "<link rel='stylesheet' type='text/css' href='{$path}{$tail}' />\n";
     }
 
+    public static function printStaticValues(array $values, bool $pretty=true){
+        if(!count($values)){
+            return;
+        }
+        $lines = ["<script>"];
+
+        foreach($values as $key => $value){
+            $lines[] = "var {$key} = ".Json::encode($value, Json::EMPTY_ARRAY_IS_DICT | ($pretty?Json::PRETTY:0));
+        }
+
+        $lines[] = "</script>";
+
+        return join("\n", $lines);
+    }
+
     protected static $jsFilesList = [];
     public static function pushJSFile(string $path){
         static::$jsFilesList[] = $path;

webpack.config.cjs

@@ -3,6 +3,7 @@ const { VueLoaderPlugin } = require('vue-loader');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const { resolve } = require('path');
+const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
 
 module.exports = (env, argv) => {
     const target = env.target ?? 'hwe';
@@ -139,6 +140,7 @@ module.exports = (env, argv) => {
             ]
         },
         plugins: [
+            new CleanTerminalPlugin(),
             new VueLoaderPlugin(),
             new MiniCssExtractPlugin({
                 filename: '../dist_css/[name].css'
@@ -227,6 +229,7 @@ module.exports = (env, argv) => {
             }]
         },
         plugins: [
+            new CleanTerminalPlugin(),
             new MiniCssExtractPlugin({
                 filename: '../dist_css/[name].css'
             }),
@@ -307,7 +310,7 @@ module.exports = (env, argv) => {
     };
 
     if (target == 'hwe') {
-        return [ingame_vue, ingame, gateway];
+        return [gateway, ingame_vue, ingame];
     }
     else {
         return [ingame_vue, ingame];