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

feat(WIP): process 등용 등

Browse Source 
- ColorSelect 색을 가득 채움,
- ColorSelect 결과값을 둥글게
- procGeneralList의 column 가변형 정의
- 등용 brief 조사 처리 버그 수정
This commit is contained in:
Hide_D
2021-12-20 01:08:08 +09:00
parent 5d8e2c16f5
commit 6ac021ff12
9 changed files with 325 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/processing/ColorSelect.vue
+4 -9
View File
@@ -26,7 +26,7 @@
<div
class="sam-nation-own-bgcolor"
:style="{
padding: '0.375rem 0.75rem',
padding: '0.545rem 0.75rem',
}"
>
{{ props.option.title }}
@@ -37,12 +37,13 @@
<div
:class="`sam-color-${props.option.title.slice(1)}`"
:style="{
margin: '-0.375rem -0.75rem',
margin: '-0.25rem -0.75rem',
}"
><div
class="sam-nation-own-bgcolor"
:style="{
padding: '0.375rem 0.75rem',
padding: '0.30rem 0.75rem',
borderRadius: '0.25rem',
}"
>{{ props.option.title }}</div
></div
@@ -102,9 +103,3 @@ export default defineComponent({
},
});
</script>
<style scoped>
.multiselect__option {
padding: 0;
}
</style>
hwe/ts/processing/General/che_군량매매.vue
+78
View File
@@ -0,0 +1,78 @@
<template>
<TopBackBar :title="commandName" type="chief" />
<div class="bg0">
<div>
자신의 군량을 사거나 팝니다.<br />
</div>
<div class="row">
<div class="col-2 col-md-1">
군량을 :
<b-button-group>
<b-button :pressed="buyRice" @click="buyRice=true">삼</b-button>
<b-button :pressed="!buyRice" @click="buyRice=false">팜</b-button>
</b-button-group>
</div>
<div class="col-10 col-md-4">
금액 :
<AmountSelect
:amountGuide="amountGuide"
v-model="amount"
:maxAmount="maxAmount"
:minAmount="minAmount"
/>
</div>
<div class="col-4 col-md-2 d-grid">
<b-button variant="primary" @click="submit">{{ commandName }}</b-button>
</div>
</div>
</div>
<BottomBar :title="commandName" />
</template>
<script lang="ts">
import AmountSelect from "@/processing/AmountSelect.vue";
import { defineComponent, ref } from "vue";
import { unwrap } from "@/util/unwrap";
import { Args } from "@/processing/args";
import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
declare const commandName: string;
declare const procRes: {
minAmount: number;
maxAmount: number;
amountGuide: number[];
};
export default defineComponent({
components: {
AmountSelect,
TopBackBar,
BottomBar,
},
setup() {
const amount = ref(1000);
const buyRice = ref(true);
async function submit(e: Event) {
const event = new CustomEvent<Args>("customSubmit", {
detail: {
amount: amount.value,
buyRice: buyRice.value,
},
});
unwrap(e.target).dispatchEvent(event);
}
return {
buyRice,
amount,
minAmount: ref(procRes.minAmount),
maxAmount: ref(procRes.maxAmount),
amountGuide: procRes.amountGuide,
commandName,
submit,
};
},
});
</script>
hwe/ts/processing/General/che_등용.vue
+99
View File
@@ -0,0 +1,99 @@
<template>
<TopBackBar :title="commandName" type="chief" />
<div class="bg0">
<div>
재야나 타국의 장수를 등용합니다.<br />
서신은 개인 메세지로 전달됩니다.<br />
등용할 장수를 목록에서 선택하세요.<br />
</div>
<div class="row">
<div class="col-12 col-md-6">
장수 :
<GeneralSelect
:generals="generalList"
:groupByNation="nationList"
:textHelper="textHelpGeneral"
v-model="selectedGeneralID"
/>
</div>
<div class="col-4 col-md-2 d-grid">
<b-button variant="primary" @click="submit">{{ commandName }}</b-button>
</div>
</div>
</div>
<BottomBar :title="commandName" />
</template>
<script lang="ts">
import GeneralSelect from "@/processing/GeneralSelect.vue";
import { defineComponent, ref } from "vue";
import { unwrap } from "@/util/unwrap";
import { Args } from "@/processing/args";
import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import {
convertGeneralList,
procGeneralItem,
procGeneralKey,
procGeneralRawItemList,
procNationItem,
procNationList,
} from "../processingRes";
import { getNpcColor } from "@/common_legacy";
declare const mapTheme: string;
declare const commandName: string;
declare const procRes: {
generals: procGeneralRawItemList;
generalsKey: procGeneralKey[];
nationList: procNationList,
};
export default defineComponent({
components: {
GeneralSelect,
TopBackBar,
BottomBar,
},
setup() {
const generalList = convertGeneralList(
procRes.generalsKey,
procRes.generals
);
const selectedGeneralID = ref(generalList[0].no);
function textHelpGeneral(gen: procGeneralItem): string {
const nameColor = getNpcColor(gen.npc);
const name = nameColor
? `<span style="color:${nameColor}">${gen.name}</span>`
: gen.name;
return name;
}
async function submit(e: Event) {
const event = new CustomEvent<Args>("customSubmit", {
detail: {
destGeneralID: selectedGeneralID.value,
},
});
unwrap(e.target).dispatchEvent(event);
}
const nationList = new Map<number, procNationItem>();
for(const nationItem of procRes.nationList){
nationList.set(nationItem.id, nationItem);
}
return {
mapTheme: ref(mapTheme),
selectedGeneralID,
generalList,
nationList,
commandName,
textHelpGeneral,
submit,
};
},
});
</script>
hwe/ts/processing/General/index.ts
+4
View File
@@ -1,9 +1,13 @@
import { default as che_건국} from "./che_건국.vue";
import { default as che_군량매매} from "./che_군량매매.vue";
import { default as che_등용} from "./che_등용.vue";
import { default as CityProcess} from "./che_이동.vue";
export const commandMap: Record<string, typeof CityProcess> = {
che_강행: CityProcess,
che_군량매매,
che_건국,
che_등용,
che_이동: CityProcess,
che_출병: CityProcess,
}
hwe/ts/processing/GeneralSelect.vue
+64 -7
View File
@@ -5,6 +5,8 @@
:allow-empty="false"
:options="forFind"
:group-select="false"
:group-values="groupByNation ? 'values' : undefined"
group-label="nationID"
label="searchText"
track-by="value"
:show-labels="false"
@@ -18,7 +20,21 @@
:searchable="searchMode"
>
<template v-slot:option="props">
<div v-html="props.option.title"></div>
<div v-if="props.option.title" v-html="props.option.title"></div>
<div
v-if="props.option.$groupLabel !== undefined"
class="margin-filler"
:style="{
backgroundColor: groupByNation.get(props.option.$groupLabel).color,
color: isBrightColor(
groupByNation.get(props.option.$groupLabel).color
)
? 'black'
: 'white',
}"
>
{{ groupByNation.get(props.option.$groupLabel).name }}
</div>
</template>
<template v-slot:singleLabel="props">
{{ props.option.simpleName }}
@@ -29,10 +45,13 @@
import { getNpcColor } from "@/common_legacy";
import { automata초성All } from "@/util/automata초성";
import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
import { isBrightColor } from "@/util/isBrightColor";
import { unwrap } from "@/util/unwrap";
import { defineComponent, PropType } from "vue";
import {
procGeneralItem,
procGeneralList,
procNationItem,
} from "./processingRes";
type SelectedGeneral = {
@@ -58,6 +77,11 @@ export default defineComponent({
required: false,
default: undefined,
},
groupByNation: {
type: Map as PropType<Map<number, procNationItem>>,
required: false,
default: undefined,
},
},
emits: ["update:modelValue"],
watch: {
@@ -70,15 +94,41 @@ export default defineComponent({
},
},
data() {
const forFind = [];
const forFind: (
| SelectedGeneral
| {
values: SelectedGeneral[];
nationID: number;
}
)[] = [];
const forFindGroup = new Map<number, SelectedGeneral[]>();
const targets = new Map<number, SelectedGeneral>();
let selectedGeneral;
for (const gen of this.generals) {
let groupArray = forFind;
if (this.groupByNation) {
const nationID = gen.nationID ?? 0;
if (!forFindGroup.has(nationID)) {
const nationItem = unwrap(this.groupByNation.get(nationID));
let tmpArr: SelectedGeneral[] = [];
forFindGroup.set(nationID, tmpArr);
groupArray = tmpArr;
forFind.push({
nationID: nationItem.id,
values: tmpArr,
});
} else {
groupArray = unwrap(forFindGroup.get(nationID));
}
}
const nameColor = getNpcColor(gen.npc);
const name = nameColor?`<span style="color:${nameColor}">${gen.name}</span>`:gen.name;
const name = nameColor
? `<span style="color:${nameColor}">${gen.name}</span>`
: gen.name;
const [filteredTextH, filteredTextA] = filter초성withAlphabet(gen.name);
const [filteredTextHL1, filteredTextHL2] = automata초성All(filteredTextH);
@@ -86,9 +136,7 @@ export default defineComponent({
value: gen.no,
title: this.textHelper
? this.textHelper(gen)
: `${name} (${gen.leadership}/${gen.leadership}/${
gen.intel
})`,
: `${name} (${gen.leadership}/${gen.leadership}/${gen.intel})`,
simpleName: gen.name,
searchText: `${gen.name} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`,
obj: gen,
@@ -96,14 +144,16 @@ export default defineComponent({
if (gen.no == this.modelValue) {
selectedGeneral = obj;
}
forFind.push(obj);
groupArray.push(obj);
targets.set(gen.no, obj);
}
console.log(forFind);
return {
selectedGeneral,
searchMode: true,
forFind,
targets,
isBrightColor,
};
},
});
@@ -128,5 +178,12 @@ export default defineComponent({
input {
color: $vue-multiselect-color;
}
.multiselect__option--group {
padding: 0;
}
.margin-filler {
padding: calc($vue-multiselect-padding-y + 0.17em) $vue-multiselect-padding-x;
}
}
</style>
hwe/ts/processing/Nation/che_발령.vue
+3 -3
View File
@@ -52,7 +52,7 @@ import BottomBar from "@/components/BottomBar.vue";
import {
convertGeneralList,
procGeneralItem,
procGeneralKeyList,
procGeneralKey,
procGeneralRawItemList,
procTroopList,
} from "../processingRes";
@@ -66,7 +66,7 @@ declare const procRes: {
cities: [number, string][];
troops: procTroopList;
generals: procGeneralRawItemList;
generalsKey: procGeneralKeyList;
generalsKey: procGeneralKey[];
};
export default defineComponent({
@@ -110,7 +110,7 @@ export default defineComponent({
const troops = (!gen.troopID)?'':`,${procRes.troops[gen.troopID].name}`;
const nameColor = getNpcColor(gen.npc);
const name = nameColor?`<span style="color:${nameColor}">${gen.name}</span>`:gen.name;
return `${name} [${citiesMap.get(gen.cityID)?.name}${troops}] (${gen.leadership}/${gen.leadership}/${gen.intel}) <병${gen.crew.toLocaleString()}/훈${gen.train}/사${gen.atmos}>`;
return `${name} [${citiesMap.get(unwrap(gen.cityID))?.name}${troops}] (${gen.leadership}/${gen.leadership}/${gen.intel}) <병${unwrap(gen.crew).toLocaleString()}/훈${gen.train}/사${gen.atmos}>`;
}
async function submit(e: Event) {
hwe/ts/processing/processingRes.ts
+11 -27
View File
@@ -3,42 +3,26 @@ import { combineArray } from "@/util/combineArray";
export type procGeneralItem = {
no: number,
name: string,
nationID?: number,
officerLevel: number,
npc: number,
gold: number,
rice: number,
gold?: number,
rice?: number,
leadership: number,
strength: number,
intel: number,
cityID: number,
crew: number,
train: number,
atmos: number,
troopID: number,
cityID?: number,
crew?: number,
train?: number,
atmos?: number,
troopID?: number,
}
export type procGeneralList = procGeneralItem[];
export type procGeneralKeyList = [
'no', 'name', '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[procGeneralKeyList[0]],
procGeneralItem[procGeneralKeyList[1]],
procGeneralItem[procGeneralKeyList[2]],
procGeneralItem[procGeneralKeyList[3]],
procGeneralItem[procGeneralKeyList[4]],
procGeneralItem[procGeneralKeyList[5]],
procGeneralItem[procGeneralKeyList[6]],
procGeneralItem[procGeneralKeyList[7]],
procGeneralItem[procGeneralKeyList[8]],
procGeneralItem[procGeneralKeyList[9]],
procGeneralItem[procGeneralKeyList[10]],
procGeneralItem[procGeneralKeyList[11]],
procGeneralItem[procGeneralKeyList[12]],
procGeneralItem[procGeneralKeyList[13]],
];
export type procGeneralRawItem = procGeneralItem[procGeneralKey][];
export type procTroopItem = {
troop_leader: number,
@@ -49,7 +33,7 @@ export type procTroopList = Record<number, procTroopItem>;
export type procGeneralRawItemList = procGeneralRawItem[];
export function convertGeneralList(keys: procGeneralKeyList, rawList: procGeneralRawItemList): procGeneralList{
export function convertGeneralList(keys: procGeneralKey[], rawList: procGeneralRawItemList): procGeneralList{
return combineArray(rawList, keys) as procGeneralList;
}