devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

feat(WIP): 장비매매

Browse Source 
- 초성 검색을 일원화
This commit is contained in:
Hide_D
2021-12-23 00:48:53 +09:00
parent cfbaf60989
commit 41d5df60f4
12 changed files with 442 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/processing/General/che_임관.vue
+52 -8
View File
@@ -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
+191
View File
@@ -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
+2
View File
@@ -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
+2 -5
View File
@@ -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
+2 -6
View File
@@ -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
+2 -7
View File
@@ -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
+18 -3
View File
@@ -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[],
}>