inheritPoint: 가입폼

- 기본 동작
- 턴시간에는 버그 있음

hwe/ts/Join.vue

@@ -135,6 +135,129 @@
         임의의 도시에서 재야로 시작하며 건국과 임관은 게임 내에서 실행합니다.
       </div>
     </div>
+
+    <div class="row bg1">
+      <div class="col col-md-11 col-9 center align-self-center">
+        유산 포인트 사용
+      </div>
+      <div class="col col-md-1 col-3">
+        <label
+          ><input type="checkbox" v-model="displayInherit" />{{
+            displayTable ? "숨기기" : "보이기"
+          }}</label
+        >
+      </div>
+    </div>
+    <div class="inherit-block" v-if="displayInherit">
+      <div class="row">
+        <div class="col">
+          <NumberInputWithInfo
+            title="보유한 유산 포인트"
+            v-model="inheritTotalPoint"
+            :readonly="true"
+          />
+        </div>
+        <div class="col">
+          <NumberInputWithInfo
+            title="필요 유산 포인트"
+            v-model="inheritRequiredPoint"
+            :readonly="true"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <NumberInputWithInfo
+            title="통솔"
+            v-model="args.inheritBonusStat[0]"
+          />
+        </div>
+        <div class="col">
+          <NumberInputWithInfo
+            title="무력"
+            v-model="args.inheritBonusStat[1]"
+          />
+        </div>
+        <div class="col">
+          <NumberInputWithInfo
+            title="지력"
+            v-model="args.inheritBonusStat[2]"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">천재로 생성</div>
+        <div class="col align-self-center">
+          <select
+            class="form-select form-inline"
+            style="max-width: 20ch"
+            v-model="args.inheritSpecial"
+          >
+            <option :value="undefined">사용안함</option>
+            <option
+              v-for="(inheritSpecial, key) in availableInheritSpecial"
+              :key="key"
+              :value="key"
+            >
+              {{ inheritSpecial.name }}
+            </option>
+          </select>
+        </div>
+        <div class="col align-self-center">
+          <small
+            class="text-muted"
+            v-html="
+              (availableInheritSpecial[args.inheritSpecial] ?? { info: '' })
+                .info
+            "
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">도시</div>
+        <div class="col">
+          <select
+            class="form-select form-inline"
+            style="max-width: 20ch"
+            v-model="args.inheritCity"
+          >
+            <option :value="undefined">사용안함</option>
+            <option
+              v-for="city in availableInheritCity"
+              :key="city[0]"
+              :value="city[0]"
+            >
+              {{ `[${city[1]}] ${city[2]}` }}
+            </option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <label
+            ><input type="checkbox" v-model="inheritTurnTimeSet" />턴 시간
+            수정</label
+          >
+        </div>
+        <div class="col">
+          <NumberInputWithInfo
+            :readonly="!inheritTurnTimeSet"
+            :min="0"
+            :max="1 - turnterm"
+            title="분"
+          />
+        </div>
+        <div class="col">
+          <NumberInputWithInfo
+            :readonly="!inheritTurnTimeSet"
+            :min="0"
+            :max="60"
+            title="초"
+          />
+        </div>
+      </div>
+    </div>
+
     <div class="row" style="border-top: solid 1px #aaa">
       <div class="col a-center" style="margin: 0.5em">
         <CButton color="primary" @click="submitForm">장수 생성</CButton
@@ -147,7 +270,7 @@
 import "../scss/bootstrap5.scss";
 import "../scss/game_bg.scss";
 
-import { defineComponent, unref } from "vue";
+import { defineComponent } from "vue";
 import TopBackBar from "./components/TopBackBar.vue";
 import {
   CButton,
@@ -165,9 +288,10 @@ import {
   abilityPowint,
   abilityRand,
 } from "./util/generalStats";
-import { clone, shuffle } from "lodash";
+import { clone, shuffle, sum } from "lodash";
 import axios from "axios";
 import { InvalidResponse } from "./defs";
+import NumberInputWithInfo from "./components/NumberInputWithInfo.vue";
 
 declare const nationList: {
   nation: number;
@@ -183,6 +307,17 @@ declare const availablePersonality: {
   };
 };
 
+declare const availableInheritSpecial: {
+  [key: string]: {
+    name: string;
+    info: string;
+  };
+};
+
+declare const availableInheritCity: [number, string, string][];
+
+declare const turnterm: number;
+
 declare const member: {
   name: string;
   grade: number;
@@ -198,7 +333,15 @@ declare const stats: {
   bonusMax: number;
 };
 
+declare const inheritPoints: {
+  special: number;
+  turnTime: number;
+  city: number;
+  stat: number;
+};
+
 declare const serverID: string;
+declare const inheritTotalPoint: number;
 
 declare module "@vue/runtime-core" {
   interface ComponentCustomProperties {
@@ -229,11 +372,15 @@ export default defineComponent({
     CTableRow,
     CTableHeaderCell,
     CTableDataCell,
+    NumberInputWithInfo,
   },
   data() {
     const displayTable = JSON.parse(
       localStorage.getItem(`conf.${serverID}.join.displayTable`) ?? "true"
     );
+    const displayInherit = JSON.parse(
+      localStorage.getItem(`conf.${serverID}.join.displayInherit`) ?? "true"
+    );
     const nationListShuffled = shuffle(nationList);
     const args: APIArgs = {
       name: member.name,
@@ -242,15 +389,33 @@ export default defineComponent({
       intel: Math.floor(stats.total / 3),
       pic: true,
       character: "Random",
+
+      inheritCity: undefined,
+      inheritBonusStat: [0, 0, 0],
+      inheritSpecial: undefined,
+      inheritTurntime: undefined,
     };
+    availableInheritCity.sort((lhs, rhs) => {
+      const rC = lhs[1].localeCompare(rhs[1]);
+      if (rC != 0) return rC;
+      return lhs[2].localeCompare(rhs[2]);
+    });
     return {
-      displayTable: displayTable,
+      displayTable,
+      displayInherit,
       availablePersonality,
+      availableInheritSpecial,
+      availableInheritCity,
       member: member,
       stats,
       args,
       nationList: nationListShuffled,
       isBrightColor,
+      inheritTotalPoint,
+      inheritTurnTimeSet: false,
+      inheritTurnTimeMinute: 0,
+      inheritTurnTimeSecond: 0,
+      turnterm,
     };
   },
   watch: {
@@ -260,6 +425,31 @@ export default defineComponent({
         JSON.stringify(newValue)
       );
     },
+    displayInherit(newValue: boolean) {
+      localStorage.setItem(
+        `conf.${serverID}.join.displayInherit`,
+        JSON.stringify(newValue)
+      );
+    },
+    inheritTurnTimeMinute(newValue: number) {
+      if (!this.inheritTurnTimeSet) {
+        this.args.inheritTurntime = 0;
+      }
+      this.args.inheritTurntime = newValue * 60 + this.inheritTurnTimeSecond;
+    },
+    inheritTurnTimeSecond(newValue: number) {
+      if (!this.inheritTurnTimeSet) {
+        this.args.inheritTurntime = 0;
+      }
+      this.args.inheritTurntime = this.inheritTurnTimeMinute * 60 + newValue;
+    },
+    inheritTurnTimeSet(newValue: boolean) {
+      if (!newValue) {
+        this.args.inheritTurntime = 0;
+      }
+      this.args.inheritTurntime =
+        this.inheritTurnTimeMinute * 60 + this.inheritTurnTimeSecond;
+    },
   },
   computed: {
     iconPath() {
@@ -268,6 +458,25 @@ export default defineComponent({
       }
       return getIconPath(0, "default.jpg");
     },
+    inheritRequiredPoint() {
+      let inheritRequiredPoint = 0;
+      if (this.args.inheritCity !== undefined) {
+        inheritRequiredPoint += inheritPoints.city;
+      }
+      if (this.args.inheritSpecial !== undefined) {
+        inheritRequiredPoint += inheritPoints.special;
+      }
+      if (this.args.inheritTurntime !== undefined) {
+        inheritRequiredPoint += inheritPoints.turnTime;
+      }
+      if (
+        this.args.inheritBonusStat !== undefined &&
+        sum(this.args.inheritBonusStat) != 0
+      ) {
+        inheritRequiredPoint += inheritPoints.stat;
+      }
+      return inheritRequiredPoint;
+    },
   },
   methods: {
     randStatRandom() {
@@ -295,7 +504,7 @@ export default defineComponent({
       this.args.intel = Math.floor(stats.total / 3);
     },
     async submitForm() {
-        //검증은 언제 되어야 하는가?
+      //검증은 언제 되어야 하는가?
       const args = clone(this.args);
       let result: InvalidResponse;
       try {
@@ -309,8 +518,8 @@ export default defineComponent({
           },
         });
         result = response.data;
-        if(!result.result){
-            throw result.reason;
+        if (!result.result) {
+          throw result.reason;
         }
       } catch (e) {
         console.error(e);
@@ -318,8 +527,10 @@ export default defineComponent({
         return;
       }
 
-      alert('정상적으로 생성되었습니다. \n위키와 팁/강좌 게시판을 꼭 읽어보세요!');
-      location.href = './';
+      alert(
+        "정상적으로 생성되었습니다. \n위키와 팁/강좌 게시판을 꼭 읽어보세요!"
+      );
+      location.href = "./";
     },
   },
 });

hwe/ts/components/NumberInputWithInfo.vue

@@ -17,6 +17,7 @@
       <input
         type="text"
         class="form-control"
+        :readonly="readonly"
         :value="printValue"
         @focus="onFocusText"
         :style="{ display: !editmode ? undefined : 'none' }"
@@ -33,6 +34,11 @@ import { defineComponent } from "vue";
 export default defineComponent({
   name: "NumberInputWithInfo",
   props: {
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     int: {
       type: Boolean,
       required: false,
@@ -76,6 +82,9 @@ export default defineComponent({
   },
   methods: {
     updateValue() {
+      if(this.readonly){
+        return;
+      }
       if (this.int) {
         this.rawValue = Math.floor(this.rawValue);
       }
@@ -87,6 +96,9 @@ export default defineComponent({
       this.printValue = this.rawValue.toLocaleString();
     },
     onFocusText() {
+      if(this.readonly){
+        return;
+      }
       this.editmode = true;
       setTimeout(() => {
         (this.$refs.input as HTMLInputElement).focus();