vue: join

hwe/ts/Join.vue

@@ -0,0 +1,348 @@
+<template>
+  <top-back-bar title="장수 생성" />
+
+  <div id="container" class="bg0">
+    <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="displayTable" />{{
+            displayTable ? "숨기기" : "보이기"
+          }}</label
+        >
+      </div>
+    </div>
+    <CTable responsive v-if="displayTable">
+      <CTableBody>
+        <CTableRow
+          class="nation-row"
+          v-for="nation in nationList"
+          :key="nation.nation"
+        >
+          <CTableHeaderCell
+            scope="row"
+            class="a-center p-0"
+            :style="{
+              backgroundColor: nation.color,
+              color: isBrightColor(nation.color) ? 'black' : 'white',
+            }"
+            ><div class="nation-name">
+              {{ nation.name }}
+            </div>
+          </CTableHeaderCell>
+          <CTableDataCell class="p-0">
+            <div
+              class="nation-info"
+              v-html="nation.scoutmsg ?? '-'"
+            ></div></CTableDataCell></CTableRow
+      ></CTableBody>
+    </CTable>
+    <!-- 국가 설명 -->
+    <div class="row bg1"><div class="col center">장수 생성</div></div>
+    <div class="forms">
+      <div class="row">
+        <div class="col col-md-4 col-3 a-right align-self-center">장수명</div>
+        <div class="col col-md-3 col-9 align-self-center">
+          <input v-model="args.name" class="form-control" />
+        </div>
+        <div class="col col-md-1 col-3 a-right align-self-center">
+          전콘 사용
+        </div>
+        <div class="col col-md-4 col-9 align-self-center">
+          <img style="height: 64px; width: 64px" :src="iconPath" /><label
+            ><input type="checkbox" v-model="args.pic" /> 사용</label
+          >
+        </div>
+        <div class="col col-md-4 col-3 align-self-center a-right">성격</div>
+
+        <div class="col col-md-8 col-9 align-self-center">
+          <div class="row">
+            <div class="col col-md-3 col-4 align-self-center">
+              <select
+                class="form-select form-inline"
+                style="max-width: 20ch"
+                v-model="args.character"
+              >
+                <option
+                  v-for="(personalityObj, key) in availablePersonality"
+                  :key="key"
+                  :value="key"
+                >
+                  {{ personalityObj.name }}
+                </option>
+              </select>
+            </div>
+            <div class="col col-md-9 col-8 align-self-center">
+              <small class="text-muted">{{
+                availablePersonality[args.character].info
+              }}</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--<div class="row">
+      <div class="col">
+        계정관리에서 자신만을 표현할 수 있는 아이콘을 업로드 해보세요!
+      </div>
+    </div>-->
+      <div class="row" style="margin-top: 1em">
+        <div class="col col-md-4 col-3 a-right align-self-center">
+          능력치<br /><small class="text-muted">통/무/지</small>
+        </div>
+        <div class="col col-md-2 col-3 align-self-center">
+          <input type="number" class="form-control" v-model="args.leadership" />
+        </div>
+        <div class="col col-md-2 col-3 align-self-center">
+          <input type="number" class="form-control" v-model="args.strength" />
+        </div>
+        <div class="col col-md-2 col-3 align-self-center">
+          <input type="number" class="form-control" v-model="args.intel" />
+        </div>
+      </div>
+      <div class="row" style="margin-top: 1em">
+        <div class="col col-md-4 col-3 a-right align-self-center">
+          능력치 조절
+        </div>
+        <div class="col col-md-8 col-9">
+          <CButton color="secondary" class="stat-btn" @click="randStatRandom"
+            >랜덤형</CButton
+          >
+          <CButton color="secondary" class="stat-btn" @click="randStatLeadPow"
+            >통솔무력형</CButton
+          >
+          <CButton color="secondary" class="stat-btn" @click="randStatLeadInt"
+            >통솔지력형</CButton
+          >
+          <CButton color="secondary" class="stat-btn" @click="randStatPowInt"
+            >무력지력형</CButton
+          >
+        </div>
+      </div>
+    </div>
+    <div class="row" style="border-top: solid 1px #aaa; margin-top: 0.5em">
+      <div class="col a-center" style="color: orange">
+        모든 능력치는 ( {{ stats.min }} &lt;= 능력치 &lt;= {{ stats.max }} )
+        사이로 잡으셔야 합니다.<br />
+        그 외의 능력치는 가입되지 않습니다.
+      </div>
+    </div>
+    <div class="row">
+      <div class="col a-center">
+        능력치의 총합은 {{ stats.total }} 입니다. 가입후 {{ stats.bonusMin }} ~
+        {{ stats.bonusMax }} 의 능력치 보너스를 받게 됩니다.<br />
+        임의의 도시에서 재야로 시작하며 건국과 임관은 게임 내에서 실행합니다.
+      </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
+        >&nbsp;<CButton color="secondary" @click="resetArgs">다시 입력</CButton>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import "../scss/bootstrap5.scss";
+import "../scss/game_bg.scss";
+
+import { defineComponent, unref } from "vue";
+import TopBackBar from "./components/TopBackBar.vue";
+import {
+  CButton,
+  CTable,
+  CTableBody,
+  CTableRow,
+  CTableHeaderCell,
+  CTableDataCell,
+} from "@coreui/vue/src";
+import { getIconPath } from "./util/getIconPath";
+import { isBrightColor } from "./util/isBrightColor";
+import {
+  abilityLeadint,
+  abilityLeadpow,
+  abilityPowint,
+  abilityRand,
+} from "./util/generalStats";
+import { clone, shuffle } from "lodash";
+import axios from "axios";
+import { InvalidResponse } from "./defs";
+
+declare const nationList: {
+  nation: number;
+  name: string;
+  color: string;
+  scout: number;
+  scoutmsg?: string;
+}[];
+declare const availablePersonality: {
+  [key: string]: {
+    name: string;
+    info: string;
+  };
+};
+
+declare const member: {
+  name: string;
+  grade: number;
+  picture: string;
+  imgsvr: 0 | 1;
+};
+
+declare const stats: {
+  min: number;
+  max: number;
+  total: number;
+  bonusMin: number;
+  bonusMax: number;
+};
+
+declare const serverID: string;
+
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    member: typeof member;
+  }
+}
+
+type APIArgs = {
+  name: string;
+  leadership: number;
+  strength: number;
+  intel: number;
+  pic: boolean;
+  character: string;
+  inheritSpecial?: string;
+  inheritTurntime?: number;
+  inheritCity?: number;
+  inheritBonusStat?: [number, number, number];
+};
+
+export default defineComponent({
+  name: "Join",
+  components: {
+    TopBackBar,
+    CButton,
+    CTable,
+    CTableBody,
+    CTableRow,
+    CTableHeaderCell,
+    CTableDataCell,
+  },
+  data() {
+    const displayTable = JSON.parse(
+      localStorage.getItem(`conf.${serverID}.join.displayTable`) ?? "true"
+    );
+    const nationListShuffled = shuffle(nationList);
+    const args: APIArgs = {
+      name: member.name,
+      leadership: stats.total - 2 * Math.floor(stats.total / 3),
+      strength: Math.floor(stats.total / 3),
+      intel: Math.floor(stats.total / 3),
+      pic: true,
+      character: "Random",
+    };
+    return {
+      displayTable: displayTable,
+      availablePersonality,
+      member: member,
+      stats,
+      args,
+      nationList: nationListShuffled,
+      isBrightColor,
+    };
+  },
+  watch: {
+    displayTable(newValue: boolean) {
+      localStorage.setItem(
+        `conf.${serverID}.join.displayTable`,
+        JSON.stringify(newValue)
+      );
+    },
+  },
+  computed: {
+    iconPath() {
+      if (this.args.pic) {
+        return getIconPath(this.member.imgsvr, this.member.picture);
+      }
+      return getIconPath(0, "default.jpg");
+    },
+  },
+  methods: {
+    randStatRandom() {
+      [this.args.leadership, this.args.strength, this.args.intel] =
+        abilityRand();
+    },
+    randStatLeadPow() {
+      [this.args.leadership, this.args.strength, this.args.intel] =
+        abilityLeadpow();
+    },
+    randStatLeadInt() {
+      [this.args.leadership, this.args.strength, this.args.intel] =
+        abilityLeadint();
+    },
+    randStatPowInt() {
+      [this.args.leadership, this.args.strength, this.args.intel] =
+        abilityPowint();
+    },
+    resetArgs() {
+      this.args.name = member.name;
+      this.args.pic = true;
+      this.args.character = "Random";
+      this.args.leadership = stats.total - 2 * Math.floor(stats.total / 3);
+      this.args.strength = Math.floor(stats.total / 3);
+      this.args.intel = Math.floor(stats.total / 3);
+    },
+    async submitForm() {
+      const args = clone(this.args);
+      console.log(args);
+      const response = await axios({
+        url: "api.php",
+        method: 'post',
+        responseType: 'json',
+        data: {
+          path: ["General", "Join"],
+          args,
+        },
+      });
+      console.log(response);
+      const result:InvalidResponse = response.data;
+      console.log(result);
+    },
+  },
+});
+</script>
+<style scoped>
+#container {
+  width: 100%;
+  max-width: 1000px;
+  margin: auto;
+  border: solid 1px #888888;
+  overflow: hidden;
+}
+
+.forms {
+  padding: 0 6px;
+}
+
+.stat-btn {
+  width: 8em;
+  margin-right: 1px;
+  margin-bottom: 1px;
+}
+
+.nation-row {
+  max-height: 200px;
+}
+
+.nation-name {
+  width: 128px;
+}
+
+.nation-info {
+  max-height: 200px;
+  overflow-y: hidden;
+  width: 870px;
+}
+</style>

hwe/ts/battle_simulator.ts

@@ -6,7 +6,8 @@ import 'bootstrap';
 import download from 'downloadjs';
 import { unwrap } from "./util/unwrap";
 import { isInteger } from 'lodash';
-import { combineArray, errUnknown, getNpcColor, isBrightColor } from './common_legacy';
+import { combineArray, errUnknown, getNpcColor } from './common_legacy';
+import { isBrightColor } from "./util/isBrightColor";
 import { numberWithCommas } from "./util/numberWithCommas";
 import { unwrap_any } from './util/unwrap_any';
 import { BasicGeneralListResponse, InvalidResponse } from './defs';

hwe/ts/common_deprecated.ts

@@ -1,5 +1,7 @@
 import { exportWindow } from "./util/exportWindow";
-import { activateFlip, isBrightColor, getIconPath, errUnknown, errUnknownToast, quickReject, initTooltip } from "./common_legacy";
+import { activateFlip, errUnknown, errUnknownToast, quickReject, initTooltip } from "./common_legacy";
+import { isBrightColor } from "./util/isBrightColor";
+import { getIconPath } from "./util/getIconPath";
 import { mb_strwidth } from "./util/mb_strwidth";
 import { TemplateEngine } from "./util/TemplateEngine";
 import { escapeHtml } from "./legacy/escapeHtml";

hwe/ts/common_legacy.ts

@@ -1,4 +1,3 @@
-import { unwrap } from "./util/unwrap";
 import $ from "jquery";
 import axios from "axios";
 
@@ -31,24 +30,6 @@ export function stringFormat(text: string, ...args: (string | number)[]): string
     });
 }
 
-export function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-    } : null;
-}
-
-export function isBrightColor(color: string): boolean {
-    const cv = unwrap(hexToRgb(color));
-    if ((cv.r * 0.299 + cv.g * 0.587 + cv.b * 0.114) > 140) {
-        return true;
-    } else {
-        return false;
-    }
-}
-
 /**
  * 게임내에서 지원하는 color type만 선택할 수 있도록 해주는 함수
  * @param {string} color #AAAAAA 또는 AAAAAA 형태로 작성된 RGB hex color string
@@ -82,15 +63,6 @@ declare global {
         linkifyStr: (v: string, k?: Record<string, string | number>) => string;
     }
 }
-export function getIconPath(imgsvr: boolean | 1 | 0, picture: string): string {
-    // ../d_shared/common_path.js 필요
-    if (!imgsvr) {
-        return window.pathConfig.sharedIcon + '/' + picture;
-    } else {
-        return window.pathConfig.root + '/d_pic/' + picture;
-    }
-}
-
 export function activateFlip($obj?: JQuery<HTMLElement>): void {
     let $result: JQuery<HTMLElement>;
     if ($obj === undefined) {

hwe/ts/diplomacy.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { unwrap_any } from './util/unwrap_any';
 import axios from 'axios';
-import { isBrightColor } from './common_legacy';
+import { isBrightColor } from "./util/isBrightColor";
 import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
 import { isString } from 'lodash';
 import { convertFormData } from './util/convertFormData';

hwe/ts/gateway/entrance.ts

@@ -61,7 +61,7 @@ const serverLoginBtn = "<a href='<%serverPath%>/' class='item'\
 ></a>";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const serverCreateBtn = "<a href='<%serverPath%>/join.php' class='item'\
+const serverCreateBtn = "<a href='<%serverPath%>/v_join.php' class='item'\
 ><button type='button' class='fill_box with_skin'>장수생성</button\
 ></a>";
 
@@ -79,7 +79,7 @@ const serverCreateTemplate = "\
 <td colspan='2' class='not_registered'>- 미 등 록 -</div>\
 <td class='ignore_border vertical_flex BtnPlate'>\
 <%if(canCreate) {%>\
-<a href='<%serverPath%>/join.php' class='item'><button type='button' class='fill_box with_skin'>장수생성</button></a>\
+<a href='<%serverPath%>/v_join.php' class='item'><button type='button' class='fill_box with_skin'>장수생성</button></a>\
 <%}%>\
 <%if(canSelectNPC) {%>\
 <a href='<%serverPath%>/select_npc.php' class='item'><button type='button' class='fill_box with_skin'>장수빙의</button></a>\

hwe/ts/msg.ts

@@ -4,7 +4,7 @@ import { InvalidResponse } from './defs';
 import { getDateTimeNow } from './util/getDateTimeNow';
 import axios from 'axios';
 import { convertFormData } from './util/convertFormData';
-import { isBrightColor } from './common_legacy';
+import { isBrightColor } from "./util/isBrightColor";
 import { unwrap } from './util/unwrap';
 import _ from 'lodash';
 import { addMinutes } from 'date-fns';

hwe/ts/select_general_from_pool.ts

@@ -2,7 +2,8 @@ import $ from 'jquery';
 import axios from 'axios';
 import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
 import { InvalidResponse } from './defs';
-import { getIconPath, initTooltip } from './common_legacy';
+import { initTooltip } from './common_legacy';
+import { getIconPath } from "./util/getIconPath";
 import { convertFormData } from './util/convertFormData';
 import { unwrap_any } from './util/unwrap_any';
 import { unwrap } from './util/unwrap';

hwe/ts/select_npc.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
-import { errUnknown, getIconPath } from './common_legacy';
+import { errUnknown } from './common_legacy';
+import { getIconPath } from "./util/getIconPath";
 import { TemplateEngine } from "./util/TemplateEngine";
 import { GeneralListResponse, InvalidResponse } from './defs';
 import { convertFormData } from './util/convertFormData';

hwe/ts/util/generalStats.ts

@@ -0,0 +1,146 @@
+declare const stats: {
+    min: number;
+    max: number;
+    total: number;
+    bonusMin: number;
+    bonusMax: number;
+  };
+
+export function abilityRand(): [number, number, number] {
+    let leadership = Math.random() * 65 + 10;
+    let strength = Math.random() * 65 + 10;
+    let intel = Math.random() * 65 + 10;
+    const rate = leadership + strength + intel;
+
+    leadership = Math.floor((leadership / rate) * stats.total);
+    strength = Math.floor((strength / rate) * stats.total);
+    intel = Math.floor((intel / rate) * stats.total);
+
+    while (leadership + strength + intel < stats.total) {
+        leadership += 1;
+    }
+
+    if (
+        leadership > stats.max ||
+        strength > stats.max ||
+        intel > stats.max ||
+        leadership < stats.min ||
+        strength < stats.min ||
+        intel < stats.min
+    ) {
+        return abilityRand();
+    }
+
+    return [leadership, strength, intel];
+}
+
+export function abilityLeadpow(): [number, number, number] {
+    let leadership = Math.random() * 6;
+    let strength = Math.random() * 6;
+    let intel = Math.random() * 1;
+    const rate = leadership + strength + intel;
+
+    leadership = Math.floor((leadership / rate) * stats.total);
+    strength = Math.floor((strength / rate) * stats.total);
+    intel = Math.floor((intel / rate) * stats.total);
+
+    while (leadership + strength + intel < stats.total) {
+        strength += 1;
+    }
+
+    if (intel < stats.min) {
+        leadership -= stats.min - intel;
+        intel = stats.min;
+    }
+
+    if (leadership > stats.max) {
+        strength += leadership - stats.max;
+        leadership = stats.max;
+    }
+
+    if (strength > stats.max) {
+        leadership += strength - stats.max;
+        strength = stats.max;
+    }
+
+    if (leadership > stats.max) {
+        intel += leadership - stats.max;
+        leadership = stats.max;
+    }
+
+    return [leadership, strength, intel];
+}
+
+export function abilityLeadint(): [number, number, number] {
+    let leadership = Math.random() * 6;
+    let strength = Math.random() * 1;
+    let intel = Math.random() * 6;
+    const rate = leadership + strength + intel;
+
+    leadership = Math.floor((leadership / rate) * stats.total);
+    strength = Math.floor((strength / rate) * stats.total);
+    intel = Math.floor((intel / rate) * stats.total);
+
+    while (leadership + strength + intel < stats.total) {
+        intel += 1;
+    }
+
+    if (strength < stats.min) {
+        leadership -= stats.min - strength;
+        strength = stats.min;
+    }
+
+    if (leadership > stats.max) {
+        intel += leadership - stats.max;
+        leadership = stats.max;
+    }
+
+    if (intel > stats.max) {
+        leadership += intel - stats.max;
+        intel = stats.max;
+    }
+
+    if (leadership > stats.max) {
+        strength += leadership - stats.max;
+        leadership = stats.max;
+    }
+
+    return [leadership, strength, intel];
+}
+
+export function abilityPowint(): [number, number, number] {
+    let leadership = Math.random() * 1;
+    let strength = Math.random() * 6;
+    let intel = Math.random() * 6;
+    const rate = leadership + strength + intel;
+
+    leadership = Math.floor((leadership / rate) * stats.total);
+    strength = Math.floor((strength / rate) * stats.total);
+    intel = Math.floor((intel / rate) * stats.total);
+
+    while (leadership + strength + intel < stats.total) {
+        intel += 1;
+    }
+
+    if (leadership < stats.min) {
+        strength -= stats.min - leadership;
+        leadership = stats.min;
+    }
+
+    if (strength > stats.max) {
+        intel += strength - stats.max;
+        strength = stats.max;
+    }
+
+    if (intel > stats.max) {
+        strength += intel - stats.max;
+        intel = stats.max;
+    }
+
+    if (strength > stats.max) {
+        leadership += strength - stats.max;
+        strength = stats.max;
+    }
+
+    return [leadership, strength, intel];
+}

hwe/ts/util/getIconPath.ts

@@ -0,0 +1,8 @@
+export function getIconPath(imgsvr: boolean | 1 | 0, picture: string): string {
+    // ../d_shared/common_path.js 필요
+    if (!imgsvr) {
+        return `${window.pathConfig.sharedIcon}/${picture}`;
+    } else {
+        return `${window.pathConfig.root}/d_pic/${picture}`;
+    }
+}

hwe/ts/util/hexToRgb.ts

@@ -0,0 +1,8 @@
+export function hexToRgb(hex: string): { r: number; g: number; b: number; } | null {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}

hwe/ts/util/isBrightColor.ts

@@ -0,0 +1,11 @@
+import { unwrap } from "./unwrap";
+import { hexToRgb } from "./hexToRgb";
+
+export function isBrightColor(color: string): boolean {
+    const cv = unwrap(hexToRgb(color));
+    if ((cv.r * 0.299 + cv.g * 0.587 + cv.b * 0.114) > 140) {
+        return true;
+    } else {
+        return false;
+    }
+}

hwe/ts/v_join.ts

@@ -1 +1,4 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue'
+import Join from './Join.vue';
+
+createApp(Join).mount('#app')