feat(WIP): processing, 몰수

- 초성에서 Windows 겹받침, Mac 된소리 자음(automata 초성)
- 장수 선택에에서 검은색 테마
- 양 선택기에 숫자 추가
This commit is contained in:
2021-12-19 04:28:44 +09:00
parent 9bd151cdc2
commit a01e5df650
18 changed files with 447 additions and 88 deletions
+100
View File
@@ -0,0 +1,100 @@
<template>
<div class="col-10 col-md-4">
<div class="input-group">
<b-button
v-if="maxAmount > 30000"
@click="amount = Math.max(amount - 10000, minAmount)"
>-1</b-button
>
<b-button
v-if="maxAmount > 3000"
@click="amount = Math.max(amount - 1000, minAmount)"
>-1</b-button
>
<b-button
v-if="maxAmount > 300"
@click="amount = Math.max(amount - 100, minAmount)"
>-1</b-button
>
<input
type="number"
class="form-control"
:max="maxAmount"
:min="minAmount"
v-model="amount"
placeholder="금액"
/>
<b-dropdown right text="" class="amount-dropdown" v-if="amountGuide">
<b-dropdown-item
v-for="guide in amountGuide"
:key="guide"
@click="amount = guide"
><div class="text-end">
{{ guide.toLocaleString() }}
</div></b-dropdown-item
>
</b-dropdown>
<b-button
v-if="maxAmount > 300"
@click="amount = Math.min(amount + 100, maxAmount)"
>+1</b-button
>
<b-button
v-if="maxAmount > 3000"
@click="amount = Math.min(amount + 1000, maxAmount)"
>+1</b-button
>
<b-button
v-if="maxAmount > 30000"
@click="amount = Math.min(amount + 10000, maxAmount)"
>+1</b-button
>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
props: {
modelValue: {
type: Number,
required: true,
},
minAmount: {
type: Number,
required: true,
},
maxAmount: {
type: Number,
required: true,
},
amountGuide: {
type: Array as PropType<number[]>,
reqquired: false,
},
},
emits: ["update:modelValue"],
watch: {
amount(val: number) {
this.$emit("update:modelValue", val);
},
},
data() {
return {
amount: this.modelValue,
}
},
});
</script>
<style lang="scss">
.btn-group.amount-dropdown > .btn{
border-radius: 0;
}
.btn-group.amount-dropdown .dropdown-menu.show {
min-width: 6rem;
}
</style>
+3 -1
View File
@@ -32,6 +32,7 @@
</v-multiselect>
</template>
<script lang="ts">
import { automata초성All } from "@/util/automata초성";
import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
import { defineComponent, PropType } from "vue";
@@ -71,12 +72,13 @@ export default defineComponent({
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}`,
searchText: `${name} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`,
};
if (value == this.modelValue) {
selectedCity = obj;
+50 -13
View File
@@ -1,6 +1,7 @@
<template>
<v-multiselect
v-model="selectedGeneral"
class="selectedGeneral"
:allow-empty="false"
:options="forFind"
:group-select="false"
@@ -17,7 +18,7 @@
:searchable="searchMode"
>
<template v-slot:option="props">
{{ props.option.title }}
<div v-html="props.option.title"></div>
</template>
<template v-slot:singleLabel="props">
{{ props.option.simpleName }}
@@ -25,15 +26,21 @@
</v-multiselect>
</template>
<script lang="ts">
import { getNpcColor } from "@/common_legacy";
import { automata초성All } from "@/util/automata초성";
import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
import { defineComponent, PropType } from "vue";
import { procGeneralList, procTroopList } from './processingRes';
import {
procGeneralItem,
procGeneralList,
} from "./processingRes";
type SelectedGeneral = {
value: number;
searchText: string;
title: string;
simpleName: string;
obj: procGeneralItem;
};
export default defineComponent({
@@ -46,13 +53,11 @@ export default defineComponent({
type: Array as PropType<procGeneralList>,
required: true,
},
cities: {
type: Map as PropType<Map<number, { name: string; info?: string }>>,
required: true,
textHelper: {
type: Function as PropType<(item: procGeneralItem) => string>,
required: false,
default: undefined,
},
troops: {
type: Object as PropType<procTroopList>,
}
},
emits: ["update:modelValue"],
watch: {
@@ -60,9 +65,9 @@ export default defineComponent({
const target = this.targets.get(val);
this.selectedGeneral = target;
},
selectedGeneral(val: SelectedGeneral){
this.$emit('update:modelValue', val.value);
}
selectedGeneral(val: SelectedGeneral) {
this.$emit("update:modelValue", val.value);
},
},
data() {
const forFind = [];
@@ -71,12 +76,22 @@ export default defineComponent({
let selectedGeneral;
for (const gen of this.generals) {
const nameColor = getNpcColor(gen.npc);
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);
const obj: SelectedGeneral = {
value: gen.no,
title: `${gen.name}[${this.cities.get(gen.cityID)?.name}] (${gen.leadership}/${gen.leadership}/${gen.intel}) <병${gen.crew.toLocaleString()}/훈${gen.train}/사${gen.atmos}`,
title: this.textHelper
? this.textHelper(gen)
: `${name} (${gen.leadership}/${gen.leadership}/${
gen.intel
})`,
simpleName: gen.name,
searchText: `${gen.name} ${filteredTextH} ${filteredTextA}`
searchText: `${gen.name} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`,
obj: gen,
};
if (gen.no == this.modelValue) {
selectedGeneral = obj;
@@ -93,3 +108,25 @@ export default defineComponent({
},
});
</script>
<style lang="scss">
@import "@scss/common/variables.scss";
@import "@scss/common/bootswatch_custom_variables.scss";
@import "bootstrap/scss/bootstrap-utilities.scss";
.selectedGeneral {
$vue-multiselect-bg: $gray-700;
$vue-multiselect-color: $gray-100;
$form-select-color: $gray-100;
$text-muted: $gray-400;
$dark: $gray-100;
$light: $gray-700;
$vue-multiselect-option-selected-bg: $gray-600;
@import "@scss/common/vue-multiselect.scss";
color: $vue-multiselect-color;
input {
color: $vue-multiselect-color;
}
}
</style>
+125
View File
@@ -0,0 +1,125 @@
<template>
<TopBackBar :title="commandName" type="chief" />
<div class="bg0">
<div>
장수의 자금이나 군량을 몰수합니다.<br />
몰수한것은 국가재산으로 귀속됩니다.<br />
</div>
<div class="row">
<div class="col-12 col-md-5">
<GeneralSelect
:cities="citiesMap"
:generals="generalList"
:troops="troops"
v-model="selectedGeneralID"
:textHelper="textHelpGeneral"
/>
</div>
<AmountSelect
:amountGuide="amountGuide"
v-model="amount"
:maxAmount="maxAmount"
:minAmount="minAmount"
/>
<div class="col-12 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 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";
import {
convertGeneralList,
procGeneralItem,
procGeneralKeyList,
procGeneralRawItemList,
procTroopList,
} from "../processingRes";
import { getNpcColor } from "@/common_legacy";
declare const commandName: string;
declare const procRes: {
distanceList: Record<number, number[]>;
cities: [number, string][];
generals: procGeneralRawItemList;
generalsKey: procGeneralKeyList;
minAmount: number;
maxAmount: number;
amountGuide: number[];
};
export default defineComponent({
components: {
GeneralSelect,
AmountSelect,
TopBackBar,
BottomBar,
},
setup() {
const citiesMap = new Map<
number,
{
name: string;
info?: string;
}
>();
for (const [id, name] of procRes.cities) {
citiesMap.set(id, { name });
}
const generalList = convertGeneralList(
procRes.generalsKey,
procRes.generals
);
const amount = ref(1000);
const isGold = ref(true);
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} (금${gen.gold.toLocaleString()}/쌀${gen.rice.toLocaleString()}) (${
gen.leadership
}/${gen.leadership}/${gen.intel})`;
}
async function submit(e: Event) {
const event = new CustomEvent<Args>("customSubmit", {
detail: {
amount: amount.value,
isGold: isGold.value,
destGeneralID: selectedGeneralID.value,
},
});
unwrap(e.target).dispatchEvent(event);
}
return {
amount,
isGold,
selectedGeneralID,
citiesMap: ref(citiesMap),
distanceList: procRes.distanceList,
minAmount: ref(procRes.minAmount),
maxAmount: ref(procRes.maxAmount),
amountGuide: procRes.amountGuide,
generalList,
commandName,
textHelpGeneral,
submit,
};
},
});
</script>
+16 -2
View File
@@ -16,18 +16,19 @@
목록을 선택하거나 도시를 클릭하세요.<br />
</div>
<div class="row">
<div class="col-12 col-md-4">
<div class="col-12 col-md-6">
<GeneralSelect
:cities="citiesMap"
:generals="generalList"
:troops="troops"
:textHelper="textHelpGeneral"
v-model="selectedGeneralID"
/>
</div>
<div class="col-12 col-md-4">
<CitySelect :cities="citiesMap" v-model="selectedCityID" />
</div>
<div class="col-12 col-md-4">
<div class="col-12 col-md-2 d-grid">
<b-button @click="submit">{{ commandName }}</b-button>
</div>
</div>
@@ -48,10 +49,12 @@ import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import {
convertGeneralList,
procGeneralItem,
procGeneralKeyList,
procGeneralRawItemList,
procTroopList,
} from "../processingRes";
import { convertDictById, getNpcColor } from "@/common_legacy";
declare const mapTheme: string;
declare const currentCity: number;
declare const commandName: string;
@@ -101,6 +104,13 @@ export default defineComponent({
const selectedGeneralID = ref(generalList[0].no);
function textHelpGeneral(gen: procGeneralItem): string{
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}>`;
}
async function submit(e: Event) {
const event = new CustomEvent<Args>("customSubmit", {
detail: {
@@ -109,6 +119,9 @@ export default defineComponent({
},
});
unwrap(e.target).dispatchEvent(event);
// title: `${gen.name}[${this.cities.get(gen.cityID)?.name}] (${gen.leadership}/${gen.leadership}/${gen.intel}) <병${gen.crew.toLocaleString()}/훈${gen.train}/사${gen.atmos}`,
}
return {
@@ -122,6 +135,7 @@ export default defineComponent({
generalList,
commandName,
selectedCity,
textHelpGeneral,
submit,
};
},
-7
View File
@@ -1,7 +0,0 @@
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
});
</script>
+1 -1
View File
@@ -1,5 +1,5 @@
export { default as che_국기변경 } from "./che_국기변경.vue";
export { default as che_국호변경 } from "./che_국호변경.vue";
export { default as che_급습 } from "./che_급습.vue";
export { default as che_몰수 } from "./che_몰수.vue";
export { default as che_발령 } from "./che_발령.vue";
export { default as che_포상 } from "./che_포상.vue";
+3 -1
View File
@@ -33,6 +33,7 @@
</v-multiselect>
</template>
<script lang="ts">
import { automata초성All } from "@/util/automata초성";
import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
import { defineComponent, PropType } from "vue";
import { procNationItem } from "./processingRes";
@@ -75,13 +76,14 @@ export default defineComponent({
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}`,
searchText: `${nationItem.name} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`,
};
if (nationItem.id == this.modelValue) {
selectedNation = obj;