feat(WIP): 장비매매
- 초성 검색을 일원화
This commit is contained in:
@@ -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>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<TopBackBar :title="commandName" type="chief" />
|
||||
<div class="bg0">
|
||||
<div>
|
||||
장비를 구입하거나 매각합니다.<br />
|
||||
현재 구입 불가능한 것은 <span style="color: red">붉은색</span>으로
|
||||
표시됩니다.<br />
|
||||
현재 도시 치안 : {{ citySecu.toLocaleString() }} 현재
|
||||
자금 : {{ 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>
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user