feat(WIP): 장비매매

- 초성 검색을 일원화

hwe/sammo/Command/General/che_장비매매.php

@@ -1,13 +1,17 @@
 <?php
+
 namespace sammo\Command\General;
 
 //TODO: 아이템 클래스 재확정 후 재 구현!
 
 use \sammo\{
-    DB, Util, JosaUtil,
+    DB,
+    Util,
+    JosaUtil,
     General,
     ActionLogger,
-    GameConst, GameUnitConst,
+    GameConst,
+    GameUnitConst,
     LastTurn,
     Command
 };
@@ -18,49 +22,52 @@ use function sammo\tryUniqueItemLottery;
 use \sammo\Constraint\Constraint;
 use \sammo\Constraint\ConstraintHelper;
 
-class che_장비매매 extends Command\GeneralCommand{
+class che_장비매매 extends Command\GeneralCommand
+{
     static protected $actionName = '장비매매';
     static public $reqArg = true;
 
     static $itemMap = [
-        'horse'=>'명마',
-        'weapon'=>'무기',
-        'book'=>'서적',
-        'item'=>'도구',
+        'horse' => '명마',
+        'weapon' => '무기',
+        'book' => '서적',
+        'item' => '도구',
     ];
 
-    protected function argTest():bool{
-        if($this->arg === null){
+    protected function argTest(): bool
+    {
+        if ($this->arg === null) {
             return false;
         }
-        $itemType = $this->arg['itemType']??null;
-        if(!in_array($itemType, array_keys(static::$itemMap))){
+        $itemType = $this->arg['itemType'] ?? null;
+        if (!in_array($itemType, array_keys(static::$itemMap))) {
             return false;
         }
-        $itemCode = $this->arg['itemCode']??null;
-        if(!key_exists($itemCode, GameConst::$allItems[$itemType]) && $itemCode !== 'None'){
+        $itemCode = $this->arg['itemCode'] ?? null;
+        if (!key_exists($itemCode, GameConst::$allItems[$itemType]) && $itemCode !== 'None') {
             return false;
         }
         $itemClass = buildItemClass($itemCode);
-        if(!$itemClass->isBuyable()){
+        if (!$itemClass->isBuyable()) {
             return false;
         }
 
         $this->arg = [
-            'itemType'=>$itemType,
-            'itemCode'=>$itemCode
+            'itemType' => $itemType,
+            'itemCode' => $itemCode
         ];
         return true;
     }
 
-    protected function init(){
+    protected function init()
+    {
 
         $general = $this->generalObj;
 
         $this->setCity();
         $this->setNation();
 
-        $this->minConditionConstraints=[
+        $this->minConditionConstraints = [
             ConstraintHelper::ReqCityTrader($general->getNPCType()),
         ];
     }
@@ -76,26 +83,25 @@ class che_장비매매 extends Command\GeneralCommand{
 
         [$reqGold, $reqRice] = $this->getCost();
 
-        $this->fullConditionConstraints=[
+        $this->fullConditionConstraints = [
             ConstraintHelper::ReqCityTrader($general->getNPCType()),
             ConstraintHelper::ReqCityCapacity('secu', '치안 수치', $itemClass->getReqSecu()),
             ConstraintHelper::ReqGeneralGold($reqGold),
             ConstraintHelper::ReqGeneralRice($reqRice),
         ];
 
-        if($itemCode === 'None'){
+        if ($itemCode === 'None') {
             $this->fullConditionConstraints[] = ConstraintHelper::ReqGeneralValue($itemType, $itemTypeName, '!=', 'None');
-        }
-        else if($itemCode == $general->getVar($itemType)){
+        } else if ($itemCode == $general->getVar($itemType)) {
             $this->fullConditionConstraints[] = ConstraintHelper::AlwaysFail('이미 가지고 있습니다.');
-        }
-        else if(!buildItemClass($general->getVar($itemType))->isBuyable()){
+        } else if (!buildItemClass($general->getVar($itemType))->isBuyable()) {
             $this->fullConditionConstraints[] = ConstraintHelper::AlwaysFail('이미 진귀한 것을 가지고 있습니다.');
         }
     }
 
-    public function getCost():array{
-        if(!$this->isArgValid){
+    public function getCost(): array
+    {
+        if (!$this->isArgValid) {
             return [0, 0];
         }
 
@@ -106,19 +112,22 @@ class che_장비매매 extends Command\GeneralCommand{
         return [$reqGold, 0];
     }
 
-    public function getPreReqTurn():int{
+    public function getPreReqTurn(): int
+    {
         return 0;
     }
 
-    public function getPostReqTurn():int{
+    public function getPostReqTurn(): int
+    {
         return 0;
     }
 
-    public function getBrief():string{
+    public function getBrief(): string
+    {
         $itemType = $this->arg['itemType'];
         $itemCode = $this->arg['itemCode'];
 
-        if($itemCode === 'None'){
+        if ($itemCode === 'None') {
             $itemTypeName = static::$itemMap[$itemType];
             $josaUl = JosaUtil::pick($itemTypeName, '을');
             return "{$itemTypeName}{$josaUl} 판매";
@@ -132,8 +141,9 @@ class che_장비매매 extends Command\GeneralCommand{
         return "【{$itemName}】{$josaUl} 구입";
     }
 
-    public function run():bool{
-        if(!$this->hasFullConditionMet()){
+    public function run(): bool
+    {
+        if (!$this->hasFullConditionMet()) {
             throw new \RuntimeException('불가능한 커맨드를 강제로 실행 시도');
         }
 
@@ -145,11 +155,10 @@ class che_장비매매 extends Command\GeneralCommand{
         $itemType = $this->arg['itemType'];
         $itemCode = $this->arg['itemCode'];
 
-        if($itemCode === 'None'){
+        if ($itemCode === 'None') {
             $buying = false;
             $itemCode = $general->getVar($itemType);
-        }
-        else{
+        } else {
             $buying = true;
         }
         $itemObj = buildItemClass($itemCode);
@@ -161,12 +170,11 @@ class che_장비매매 extends Command\GeneralCommand{
 
         $logger = $general->getLogger();
 
-        if($buying){
+        if ($buying) {
             $logger->pushGeneralActionLog("<C>{$itemName}</>{$josaUl} 구입했습니다. <1>$date</>");
             $general->increaseVarWithLimit('gold', -$cost, 0);
             $general->setVar($itemType, $itemCode);
-        }
-        else{
+        } else {
             $logger->pushGeneralActionLog("<C>{$itemName}</>{$josaUl} 판매했습니다. <1>$date</>");
             $general->increaseVarWithLimit('gold', $cost / 2);
             $general->deleteItem($itemType);
@@ -183,6 +191,60 @@ class che_장비매매 extends Command\GeneralCommand{
         return true;
     }
 
+    public function exportJSVars(): array
+    {
+        $general = $this->generalObj;
+        $db = DB::db();
+        $citySecu = $db->queryFirstField('SELECT secu FROM city WHERE city = %i', $this->generalObj->getCityID());
+        $itemList = [];
+        foreach (GameConst::$allItems as $itemType => $itemCategories) {
+            $typeName = static::$itemMap[$itemType];
+            $values = [];
+            foreach ($itemCategories as $itemCode => $cnt) {
+                if ($cnt > 0) {
+                    continue;
+                }
+                $item = buildItemClass($itemCode);
+                if (!$item->isBuyable()) {
+                    continue;
+                }
+                $values[] = [
+                    'id'=>$itemCode,
+                    'name'=>$item->getName(),
+                    'reqSecu'=>$item->getReqSecu(),
+                    'cost'=>$item->getCost(),
+                    'info'=>$item->getInfo(),
+                    'isBuyable'=>$item->isBuyable(),//항상 true지만, 일관성을 위해
+                ];
+            }
+            $itemList[$itemType] = [
+                'typeName'=>$typeName,
+                'values'=>$values
+            ];
+        }
+
+        $ownItem = [];
+        foreach($general->getItems() as $itemType => $item){
+            $ownItem[$itemType] = [
+                'id'=>$item->getRawClassName(),
+                'name'=>$item->getName(),
+                'reqSecu'=>$item->getReqSecu(),
+                'cost'=>$item->getCost(),
+                'info'=>$item->getInfo(),
+                'isBuyable'=>$item->isBuyable(),
+            ];
+        }
+
+        return [
+            'procRes' => [
+                'citySecu'=>$citySecu,
+                'gold'=>$general->getVar('gold'),
+                'itemList'=>$itemList,
+                'ownItem'=>$ownItem,
+            ]
+        ];
+    }
+
     public function getForm(): string
     {
         $form = [];
@@ -194,49 +256,49 @@ class che_장비매매 extends Command\GeneralCommand{
 
         ob_start();
 ?>
-<script>
-function updateItemType(){
-    $('#itemType').val($('#itemCode option:selected').data('item_type'));
-}
-$(function(){
-$('#customSubmit').click(function(){
-    updateItemType();
-    submitAction();
-});
-});
-</script>
-<input type="hidden" class="formInput" name="itemType" id="itemType" value="item">
-장비를 구입하거나 매각합니다.<br>
-현재 구입 불가능한 것은 <font color=red>붉은색</font>으로 표시됩니다.<br>
-현재 도시 치안 : <?=$citySecu?> &nbsp;&nbsp;&nbsp;현재 자금 : <?=$gold?><br>
-장비 : <select class='formInput' name="itemCode" id="itemCode" onchange='updateItemType();' size='1' style='color:white;background-color:black;'>
-<?php foreach(GameConst::$allItems as $itemType=>$itemCategories):
-    //매각
-    $typeName = static::$itemMap[$itemType];
-?>
-    <option value='None' data-item_type='<?=$itemType?>' style='color:skyblue'>_____<?=$typeName?>매각(반값)____</option>
-    <?php foreach($itemCategories as $itemCode=>$cnt) :
-            if($cnt > 0){
-                continue;
+        <script>
+            function updateItemType() {
+                $('#itemType').val($('#itemCode option:selected').data('item_type'));
             }
-            $itemClass = buildItemClass($itemCode);
-            if(!$itemClass->isBuyable()){
-                continue;
-            }
-            $itemName = $itemClass->getName();
-            $reqSecu = $itemClass->getReqSecu();
-            $reqGold = $itemClass->getCost();
-            $css = '';
-            if($reqSecu > $citySecu){
-                $css = 'color:red;';
-            }
-?>
-        <option value='<?=$itemCode?>' data-item_type='<?=$itemType?>' style='<?=$css?>'><?=$itemName?> 가격: <?=$reqGold?></option>
-    <?php endforeach; ?>
-<?php endforeach; ?>
-</select>
-<input type=button id="customSubmit" value="<?=$this->getName()?>"><br>
+            $(function() {
+                $('#customSubmit').click(function() {
+                    updateItemType();
+                    submitAction();
+                });
+            });
+        </script>
+        <input type="hidden" class="formInput" name="itemType" id="itemType" value="item">
+        장비를 구입하거나 매각합니다.<br>
+        현재 구입 불가능한 것은 <font color=red>붉은색</font>으로 표시됩니다.<br>
+        현재 도시 치안 : <?= $citySecu ?> &nbsp;&nbsp;&nbsp;현재 자금 : <?= $gold ?><br>
+        장비 : <select class='formInput' name="itemCode" id="itemCode" onchange='updateItemType();' size='1' style='color:white;background-color:black;'>
+            <?php foreach (GameConst::$allItems as $itemType => $itemCategories) :
+                //매각
+                $typeName = static::$itemMap[$itemType];
+            ?>
+                <option value='None' data-item_type='<?= $itemType ?>' style='color:skyblue'>_____<?= $typeName ?>매각(반값)____</option>
+                <?php foreach ($itemCategories as $itemCode => $cnt) :
+                    if ($cnt > 0) {
+                        continue;
+                    }
+                    $itemClass = buildItemClass($itemCode);
+                    if (!$itemClass->isBuyable()) {
+                        continue;
+                    }
+                    $itemName = $itemClass->getName();
+                    $reqSecu = $itemClass->getReqSecu();
+                    $reqGold = $itemClass->getCost();
+                    $css = '';
+                    if ($reqSecu > $citySecu) {
+                        $css = 'color:red;';
+                    }
+                ?>
+                    <option value='<?= $itemCode ?>' data-item_type='<?= $itemType ?>' style='<?= $css ?>'><?= $itemName ?> 가격: <?= $reqGold ?></option>
+                <?php endforeach; ?>
+            <?php endforeach; ?>
+        </select>
+        <input type=button id="customSubmit" value="<?= $this->getName() ?>"><br>
 <?php
         return ob_get_clean();
     }
-}
+}

hwe/ts/PartialReservedCommand.vue

@@ -209,8 +209,7 @@ import { mb_strwidth } from "@util/mb_strwidth";
 import { parseTime } from "@util/parseTime";
 import { parseYearMonth } from "@util/parseYearMonth";
 import { sammoAPI } from "@util/sammoAPI";
-import { filter초성withAlphabet } from "@util/filter초성withAlphabet";
-import { automata초성All } from "@util/automata초성";
+import { convertSearch초성 } from "./util/convertSearch초성";
 type commandItem = {
   value: string;
   title: string;
@@ -499,11 +498,7 @@ export default defineComponent({
         if (command.searchText) {
           continue;
         }
-        const [filteredTextH, filteredTextA] = filter초성withAlphabet(
-          command.simpleName.replace(/\s+/g, "")
-        );
-        const [filteredTextHL1, filteredTextHL2] = automata초성All(filteredTextH);
-        command.searchText = `${command.simpleName} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`;
+        command.searchText = convertSearch초성(command.simpleName).join('|');
       }
     }
 

hwe/ts/defs.ts

@@ -133,6 +133,14 @@ export type NationPolicy = {
     properWarTrainAtmos: number,
 }
 
+export type ItemTypeKey = 'horse' | 'weapon' | 'book' | 'item';
+export const ItemTypeNameMap: Record<ItemTypeKey, string> = {
+    horse: '명마',
+    weapon: '무기',
+    book: '서적',
+    item: '도구',
+}
+
 export declare type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';
 
 export type IDItem<T> = {
@@ -147,4 +155,8 @@ export type ToastType = {
 }
 
 export const keyScreenMode = 'sam.screenMode';
-export type ScreenModeType = 'auto'|'500px'|'1000px';
+export type ScreenModeType = 'auto'|'500px'|'1000px';
+
+export declare type ValuesOf<T> = T[keyof T];
+
+export const NoneValue = 'None' as const;

hwe/ts/processing/General/che_임관.vue

@@ -20,11 +20,20 @@
       <div class="nation-header nation-row bg1 center">
         <div>국가명</div>
         <div>임관권유문</div>
+        <div class="zoom-toggle d-grid">
+          <b-button
+            :pressed="toggleZoom"
+            :variant="toggleZoom ? 'info' : 'secondary'"
+            v-model="toggleZoom"
+            @click="toggleZoom = !toggleZoom"
+            >{{ toggleZoom ? "작게 보기" : "크게 보기" }}</b-button
+          >
+        </div>
       </div>
       <div
         v-for="[, nation] in nationList"
         :key="nation.id"
-        class="nation-row s-border-b"
+        :class="['nation-row', 's-border-b', toggleZoom ? 'on-zoom' : 'on-fit']"
         @click="selectedNationID = nation.id"
       >
         <div
@@ -73,6 +82,7 @@ export default defineComponent({
       nationList.set(nationItem.id, nationItem);
     }
 
+    const toggleZoom = ref(true);
     const selectedNationID = ref(procRes.nationList[0].id);
 
     function selectedNation(nationID: number) {
@@ -92,6 +102,7 @@ export default defineComponent({
       nationList: ref(nationList),
       selectedNationID,
       commandName,
+      toggleZoom,
       isBrightColor,
       selectedNation,
       submit,
@@ -108,24 +119,57 @@ export default defineComponent({
     display: grid;
     grid-template-columns: 130px 870px;
   }
+
+  .zoom-toggle {
+    display: none;
+  }
+
+  .zoom-toggle > * {
+    display: none;
+  }
 }
 
 @include media-500px {
+  .nation-list .nation-row.nation-header {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
+    .zoom-toggle {
+      grid-column: 2/3;
+      grid-row: 1/3;
+    }
+  }
+
   .nation-list .nation-row {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr minmax(1fr, calc(200px * 500 / 870));
   }
 
-  .nation-scout-plate {
-    max-height: calc(200px * 500 / 870);
-    overflow: hidden;
+  .on-fit {
+    .nation-scout-plate {
+      max-height: calc(200px * 500 / 870);
+      overflow: hidden;
+    }
+
+    .nation-scout-msg {
+      width: 870px;
+      transform-origin: 0px 0px;
+      transform: scale(calc(500 / 870));
+    }
   }
 
-  .nation-scout-msg {
-    width: 870px;
-    transform-origin: 0px 0px;
-    transform: scale(calc(500 / 870));
+  .on-zoom {
+    .nation-scout-plate {
+      max-height: 200px;
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+
+    .nation-scout-msg {
+      max-width: 870px;
+    }
   }
 }
 </style>

hwe/ts/processing/General/che_장비매매.vue

@@ -0,0 +1,191 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div>
+      장비를 구입하거나 매각합니다.<br />
+      현재 구입 불가능한 것은 <span style="color: red">붉은색</span>으로
+      표시됩니다.<br />
+      현재 도시 치안 : {{ citySecu.toLocaleString() }} &nbsp;&nbsp;&nbsp;현재
+      자금 : {{ gold.toLocaleString() }}<br />
+    </div>
+    <div class="row">
+      <div class="col-8 col-md-4">
+        장비:
+        <v-multiselect
+          v-model="selectedItemObj"
+          class="selectedItemObj"
+          :allow-empty="false"
+          :options="forFind"
+          :group-select="false"
+          group-values="values"
+          group-label="category"
+          label="searchText"
+          track-by="simpleName"
+          :show-labels="false"
+          selectLabel="선택(엔터)"
+          selectGroupLabel=""
+          selectedLabel="선택됨"
+          deselectLabel="해제(엔터)"
+          deselectGroupLabel=""
+          placeholder="아이템 선택"
+          :maxHeight="400"
+          :searchable="searchMode"
+        >
+          <template v-slot:option="props">
+            <div
+              v-if="props.option.html"
+              v-html="
+                `${props.option.html} ${
+                  props.option.notAvailable ? '(불가)' : ''
+                }`
+              "
+              :style="{
+                color: props.option.notAvailable ? 'red' : undefined,
+              }"
+            ></div>
+            <div
+              v-else-if="props.option.simpleName"
+              :style="{
+                color: props.option.notAvailable ? 'red' : undefined,
+              }"
+            >
+              {{ props.option.simpleName }}
+              {{ props.option.notAvailable ? "(불가)" : undefined }}
+            </div>
+          </template>
+          <template v-slot:singleLabel="props">
+            [{{ ItemTypeNameMap[props.option.type] }}]
+            {{ props.option.simpleName }}
+          </template>
+        </v-multiselect>
+      </div>
+      <div class="col-4 col-md-2 d-grid">
+        <b-button @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+    <div v-if="selectedItemObj.obj.id != NoneValue" class="row">
+      <div class="col-4 col-md-2 align-self-center text-center">
+        {{ selectedItemObj.obj.name }}
+      </div>
+      <div class="col" v-html="selectedItemObj.obj.info"></div>
+    </div>
+  </div>
+
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import { entriesWithType } from "@util/entriesWithType";
+import { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import { procItemList, procItemType } from "../processingRes";
+import { ItemTypeKey, ItemTypeNameMap, NoneValue, ValuesOf } from "@/defs";
+import { convertSearch초성 } from "@/util/convertSearch초성";
+
+declare const commandName: string;
+
+declare const procRes: {
+  citySecu: number;
+  gold: number;
+  itemList: procItemList;
+  ownItem: Record<ItemTypeKey, procItemType>;
+};
+
+type selectItemKey = {
+  type: ItemTypeKey;
+  id: string;
+  html: string;
+  simpleName: string;
+  searchText: string;
+  notAvailable?: boolean;
+  obj: procItemType;
+};
+
+export default defineComponent({
+  components: {
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    const forFind: {
+      category: ValuesOf<typeof ItemTypeNameMap> | "판매";
+      values: selectItemKey[];
+    }[] = [];
+
+    //판매 처리
+    const forSell: typeof forFind[0] = {
+      category: "소유 물품 판매",
+      values: [],
+    };
+    for (const [type, ownItem] of entriesWithType(procRes.ownItem)) {
+      const typeName = ItemTypeNameMap[type];
+      const itemNameHelp =
+        ownItem.id == NoneValue
+          ? ""
+          : ` [${ownItem.name}, ${(ownItem.cost / 2).toLocaleString()}금]`;
+      forSell.values.push({
+        type,
+        id: NoneValue,
+        html: `${typeName} 판매${itemNameHelp}`,
+        simpleName: `${ownItem.id == NoneValue ? typeName : ownItem.name} 판매`,
+        searchText: convertSearch초성(typeName).join("|"),
+        notAvailable: ownItem.id == NoneValue,
+        obj: ownItem,
+      });
+    }
+    forFind.push(forSell);
+
+    const selectedItemObj = ref<selectItemKey>(forSell.values[0]);
+
+    for (const [type, itemSubList] of entriesWithType(procRes.itemList)) {
+      const values: selectItemKey[] = [];
+      const forBuy: typeof forFind[0] = {
+        category: `${ItemTypeNameMap[type]} 구매`,
+        values,
+      };
+
+      for (const itemObj of itemSubList.values) {
+        values.push({
+          type,
+          id: itemObj.id,
+          html: `${
+            itemObj.name
+          } 구매 [${itemObj.cost.toLocaleString()}금, 필요 치안 ${itemObj.reqSecu.toLocaleString()}]`,
+          simpleName: `${itemObj.name} 구매`,
+          searchText: convertSearch초성(itemObj.name).join("|"),
+          notAvailable:
+            itemObj.reqSecu > procRes.citySecu || procRes.gold < itemObj.cost,
+          obj: itemObj,
+        });
+      }
+
+      forFind.push(forBuy);
+    }
+    const searchMode = ref(true);
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          itemType: selectedItemObj.value.type,
+          itemCode: selectedItemObj.value.id,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      ...procRes,
+      searchMode,
+      forFind,
+      NoneValue,
+      ItemTypeNameMap,
+      selectedItemObj,
+      commandName,
+      submit,
+    };
+  },
+});
+</script>

hwe/ts/processing/General/index.ts

@@ -4,6 +4,7 @@ import { default as che_등용 } from "./che_등용.vue";
 import { default as che_선양 } from "./che_선양.vue";
 import { default as che_숙련전환 } from "./che_숙련전환.vue";
 import { default as che_임관 } from "./che_임관.vue";
+import { default as che_장비매매 } from "./che_장비매매.vue";
 import { default as che_장수대상임관 } from "./che_장수대상임관.vue";
 import { default as che_징병 } from "./che_징병.vue";
 import { default as che_헌납 } from "./che_헌납.vue";
@@ -25,6 +26,7 @@ export const commandMap: Record<string, typeof ProcessCity> = {
     che_숙련전환,
     che_이동: ProcessCity,
     che_임관,
+    che_장비매매,
     che_장수대상임관,
     che_징병,
     che_증여: ProcessGeneralAmount,

hwe/ts/processing/SelectCity.vue

@@ -36,8 +36,7 @@
   </v-multiselect>
 </template>
 <script lang="ts">
-import { automata초성All } from "@/util/automata초성";
-import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
+import { convertSearch초성 } from "@/util/convertSearch초성";
 import { defineComponent, PropType } from "vue";
 
 type SelectedCity = {
@@ -75,14 +74,12 @@ export default defineComponent({
     const targets = new Map<number, SelectedCity>();
     let selectedCity;
     for (const [value, { name, info }] of this.cities.entries()) {
-      const [filteredTextH, filteredTextA] = filter초성withAlphabet(name);
-      const [filteredTextHL1, filteredTextHL2] = automata초성All(filteredTextH);
       const obj: SelectedCity = {
         value,
         title: name,
         info: info,
         simpleName: name,
-        searchText: `${name} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`,
+        searchText: convertSearch초성(name).join('|'),
       };
       if (value == this.modelValue) {
         selectedCity = obj;

hwe/ts/processing/SelectGeneral.vue

@@ -43,8 +43,7 @@
 </template>
 <script lang="ts">
 import { getNpcColor } from "@/common_legacy";
-import { automata초성All } from "@/util/automata초성";
-import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
+import { convertSearch초성 } from "@/util/convertSearch초성";
 import { isBrightColor } from "@/util/isBrightColor";
 import { unwrap } from "@/util/unwrap";
 import { defineComponent, PropType } from "vue";
@@ -130,15 +129,13 @@ export default defineComponent({
         ? `<span style="color:${nameColor}">${gen.name}</span>`
         : gen.name;
 
-      const [filteredTextH, filteredTextA] = filter초성withAlphabet(gen.name);
-      const [filteredTextHL1, filteredTextHL2] = automata초성All(filteredTextH);
       const obj: SelectedGeneral = {
         value: gen.no,
         title: this.textHelper
           ? this.textHelper(gen)
           : `${name} (${gen.leadership}/${gen.leadership}/${gen.intel})`,
         simpleName: gen.name,
-        searchText: `${gen.name} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`,
+        searchText: convertSearch초성(gen.name).join('|'),
         obj: gen,
       };
       if (gen.no == this.modelValue) {
@@ -157,7 +154,6 @@ export default defineComponent({
   },
 });
 </script>
-
 <style lang="scss">
 @import "@scss/common/break_500px.scss";
 @import "@scss/common/variables.scss";

hwe/ts/processing/SelectNation.vue

@@ -40,8 +40,7 @@
   </v-multiselect>
 </template>
 <script lang="ts">
-import { automata초성All } from "@/util/automata초성";
-import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
+import { convertSearch초성 } from "@/util/convertSearch초성";
 import { defineComponent, PropType } from "vue";
 import { procNationItem } from "./processingRes";
 
@@ -80,17 +79,13 @@ export default defineComponent({
     const targets = new Map<number, SelectedNation>();
     let selectedNation;
     for (const nationItem of this.nations.values()) {
-      const [filteredTextH, filteredTextA] = filter초성withAlphabet(
-        nationItem.name
-      );
-      const [filteredTextHL1, filteredTextHL2] = automata초성All(filteredTextH);
       const obj: SelectedNation = {
         value: nationItem.id,
         title: nationItem.name,
         info: nationItem.info,
         simpleName: nationItem.name,
         notAvailable: nationItem.notAvailable,
-        searchText: `${nationItem.name} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`,
+        searchText: convertSearch초성(nationItem.name).join('|'),
       };
       if (nationItem.id == this.modelValue) {
         selectedNation = obj;

hwe/ts/processing/processingRes.ts

@@ -1,3 +1,4 @@
+import { ItemTypeKey } from "@/defs";
 import { combineArray } from "@/util/combineArray";
 
 export type procGeneralItem = {
@@ -20,7 +21,7 @@ export type procGeneralItem = {
 
 export type procGeneralList = procGeneralItem[];
 
-export type procGeneralKey = 'no'| 'name'| 'nationID' | 'officerLevel'| 'npc'| 'gold'| 'rice'| 'leadership'| 'strength'| 'intel'| 'cityID'| 'crew'| 'train'| 'atmos'| 'troopID';
+export type procGeneralKey = 'no' | 'name' | 'nationID' | 'officerLevel' | 'npc' | 'gold' | 'rice' | 'leadership' | 'strength' | 'intel' | 'cityID' | 'crew' | 'train' | 'atmos' | 'troopID';
 
 export type procGeneralRawItem = procGeneralItem[procGeneralKey][];
 
@@ -33,7 +34,7 @@ export type procTroopList = Record<number, procTroopItem>;
 
 export type procGeneralRawItemList = procGeneralRawItem[];
 
-export function convertGeneralList(keys: procGeneralKey[], rawList: procGeneralRawItemList): procGeneralList{
+export function convertGeneralList(keys: procGeneralKey[], rawList: procGeneralRawItemList): procGeneralList {
     return combineArray(rawList, keys) as procGeneralList;
 }
 
@@ -80,4 +81,18 @@ export type procCrewTypeItem = {
     avoid: number,
     img: string,
     info: string[],
-}
+}
+
+export type procItemType = {
+    id: string,
+    name: string,
+    reqSecu: number,
+    cost: number,
+    info: string,//<br>
+    isBuyable: boolean,
+}
+
+export type procItemList = Record<ItemTypeKey, {
+    typeName: string,
+    values: procItemType[],
+}>

hwe/ts/util/convertSearch초성.ts

@@ -0,0 +1,9 @@
+import { automata초성All } from "./automata초성";
+import { filter초성withAlphabet } from "./filter초성withAlphabet";
+
+export function convertSearch초성(text: string): string[]{
+    const [filteredTextH, filteredTextA] = filter초성withAlphabet(text.replace(/\s+/g, ""));
+    const [filteredTextHL1, filteredTextHL2] = automata초성All(filteredTextH);
+
+    return [text, filteredTextA, filteredTextH, filteredTextHL1, filteredTextHL2];
+}

hwe/ts/util/entriesWithType.ts

@@ -0,0 +1,7 @@
+type Entries<T> = {
+    [K in keyof T]: [K, T[K]];
+}[keyof T][];
+
+export function entriesWithType<T>(value: T): Entries<T>{
+    return Object.entries(value) as unknown as Entries<T>;
+}