파일 이식(0.31.1)
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<TopBackBar :title="commandName" />
|
||||
<div v-if="!available건국" class="bg0">더 이상 건국은 불가능합니다.</div>
|
||||
<div v-else class="bg0">
|
||||
<div>현재 도시에서 나라를 세웁니다. 중, 소도시에서만 가능합니다.</div>
|
||||
<ul>
|
||||
<li v-for="nationType in nationTypes" :key="nationType.type" class="row">
|
||||
<div class="col-2 col-md-1">- {{ nationType.name }}</div>
|
||||
<div class="col-4 col-md-2">
|
||||
: <span style="color: cyan">{{ nationType.pros }}</span
|
||||
>,
|
||||
</div>
|
||||
<div class="col-4 col-md-2">
|
||||
<span style="color: magenta">{{ nationType.cons }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="col-4 col-md-2">국명 : <b-form-input v-model="destNationName" maxlength="18" /></div>
|
||||
<div class="col-3 col-md-2">색상 : <ColorSelect v-model="selectedColorID" :colors="colors" /></div>
|
||||
<div class="col-3 col-md-2">
|
||||
<label>성향 :</label>
|
||||
<b-form-select v-model="selectedNationType" :options="nationTypesOption" />
|
||||
</div>
|
||||
|
||||
<div class="col-2 col-md-2 d-grid">
|
||||
<b-button @click="submit">
|
||||
{{ commandName }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BottomBar :title="commandName" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ColorSelect from "@/processing/SelectColor.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import type { procNationTypeList } from "../processingRes";
|
||||
|
||||
declare const commandName: string;
|
||||
|
||||
declare const procRes: {
|
||||
available건국: boolean;
|
||||
colors: string[];
|
||||
nationTypes: procNationTypeList;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ColorSelect,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const destNationName = ref("");
|
||||
const selectedColorID = ref(0);
|
||||
|
||||
const selectedNationType = ref(Object.values(procRes.nationTypes)[0].type);
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
colorType: selectedColorID.value,
|
||||
nationName: destNationName.value,
|
||||
nationType: selectedNationType.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
const nationTypesOption: { html: string; value: string }[] = [];
|
||||
for (const nationType of Object.values(procRes.nationTypes)) {
|
||||
nationTypesOption.push({
|
||||
html: nationType.name,
|
||||
value: nationType.type,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
available건국: procRes.available건국,
|
||||
selectedColorID,
|
||||
selectedNationType,
|
||||
colors: procRes.colors,
|
||||
nationTypes: procRes.nationTypes,
|
||||
nationTypesOption,
|
||||
destNationName,
|
||||
commandName,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<TopBackBar :title="commandName" />
|
||||
<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-7 col-md-4">
|
||||
금액 :
|
||||
<SelectAmount v-model="amount" :amountGuide="amountGuide" :maxAmount="maxAmount" :minAmount="minAmount" />
|
||||
</div>
|
||||
<div class="col-3 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 SelectAmount from "@/processing/SelectAmount.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { 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: {
|
||||
SelectAmount,
|
||||
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>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<TopBackBar v-model:searchable="searchable" :title="commandName" />
|
||||
<div class="bg0">
|
||||
<div>
|
||||
재야나 타국의 장수를 등용합니다.<br />
|
||||
서신은 개인 메세지로 전달됩니다.<br />
|
||||
등용할 장수를 목록에서 선택하세요.<br />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
장수 :
|
||||
<SelectGeneral
|
||||
v-model="selectedGeneralID"
|
||||
:generals="generalList"
|
||||
:groupByNation="nationList"
|
||||
:textHelper="textHelpGeneral"
|
||||
:searchable="searchable"
|
||||
/>
|
||||
</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 SelectGeneral from "@/processing/SelectGeneral.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import {
|
||||
convertGeneralList,
|
||||
getProcSearchable,
|
||||
type procGeneralItem,
|
||||
type procGeneralKey,
|
||||
type procGeneralRawItemList,
|
||||
type procNationItem,
|
||||
type procNationList,
|
||||
} from "../processingRes";
|
||||
import { getNpcColor } from "@/common_legacy";
|
||||
declare const commandName: string;
|
||||
|
||||
declare const procRes: {
|
||||
generals: procGeneralRawItemList;
|
||||
generalsKey: procGeneralKey[];
|
||||
nationList: procNationList;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectGeneral,
|
||||
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 {
|
||||
searchable: getProcSearchable(),
|
||||
selectedGeneralID,
|
||||
generalList,
|
||||
nationList,
|
||||
commandName,
|
||||
textHelpGeneral,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<TopBackBar v-model:searchable="searchable" :title="commandName" />
|
||||
<div class="bg0">
|
||||
<div v-if="commandName == '등용'">
|
||||
재야나 타국의 장수를 등용합니다.<br />
|
||||
서신은 개인 메세지로 전달됩니다.<br />
|
||||
등용할 장수를 목록에서 선택하세요.<br />
|
||||
</div>
|
||||
<div v-if="commandName == '선양'">
|
||||
군주의 자리를 다른 장수에게 물려줍니다.<br />
|
||||
장수를 선택하세요.<br />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9 col-md-4">
|
||||
장수 :
|
||||
<SelectGeneral
|
||||
v-model="selectedGeneralID"
|
||||
:generals="generalList"
|
||||
:textHelper="textHelpGeneral"
|
||||
:searchable="searchable"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3 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 SelectGeneral from "@/processing/SelectGeneral.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import {
|
||||
convertGeneralList,
|
||||
getProcSearchable,
|
||||
type procGeneralItem,
|
||||
type procGeneralKey,
|
||||
type procGeneralRawItemList,
|
||||
} from "../processingRes";
|
||||
import { getNpcColor } from "@/common_legacy";
|
||||
declare const commandName: string;
|
||||
|
||||
declare const procRes: {
|
||||
generals: procGeneralRawItemList;
|
||||
generalsKey: procGeneralKey[];
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectGeneral,
|
||||
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} (${gen.leadership}/${gen.strength}/${gen.intel})`;
|
||||
}
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
destGeneralID: selectedGeneralID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
return {
|
||||
searchable: getProcSearchable(),
|
||||
selectedGeneralID,
|
||||
generalList,
|
||||
commandName,
|
||||
textHelpGeneral,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<TopBackBar :title="commandName" />
|
||||
<div class="bg0">
|
||||
<div>본인의 특정 병종 숙련을 40% 줄이고, 줄어든 숙련 중 9/10(90%p)를 다른 병종 숙련으로 전환합니다.</div>
|
||||
<div class="row">
|
||||
<div class="col-4 col-md-2">
|
||||
감소 대상 숙련 :
|
||||
<b-form-select v-model="srcArmTypeID">
|
||||
<b-form-select-option v-for="[armType, dexInfo] in dexFullInfo" :key="armType" :value="armType">
|
||||
{{ dexInfo.name }} (<span :style="{ color: dexInfo.currentInfo.color }">{{ dexInfo.currentInfo.name }}</span
|
||||
>)
|
||||
</b-form-select-option>
|
||||
</b-form-select>
|
||||
</div>
|
||||
<div class="col-4 col-md-2">
|
||||
전환 대상 숙련 :
|
||||
<b-form-select v-model="destArmTypeID">
|
||||
<b-form-select-option v-for="[armType, dexInfo] in dexFullInfo" :key="armType" :value="armType">
|
||||
{{ dexInfo.name }} (<span :style="{ color: dexInfo.currentInfo.color }">{{ dexInfo.currentInfo.name }}</span
|
||||
>)
|
||||
</b-form-select-option>
|
||||
</b-form-select>
|
||||
</div>
|
||||
<div class="col-4 col-md-2 d-grid">
|
||||
<b-button @click="submit">
|
||||
{{ commandName }}
|
||||
</b-button>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '3ch 1ch 2ch 10ch 1ch 3ch 1ch 2ch 10ch 1ch',
|
||||
}"
|
||||
>
|
||||
<div>{{ unwrap(dexFullInfo.get(srcArmTypeID)).name }}</div>
|
||||
<div class="text-end">[</div>
|
||||
<div :style="`color:${unwrap(dexFullInfo.get(srcArmTypeID)).currentInfo.color}`">
|
||||
{{ unwrap(dexFullInfo.get(srcArmTypeID)).currentInfo.name }}
|
||||
</div>
|
||||
<div class="f_tnum text-end">
|
||||
{{ convNumberFormat(unwrap(dexFullInfo.get(srcArmTypeID)).currentInfo.amount) }}
|
||||
</div>
|
||||
<div>]</div>
|
||||
<div class="text-center">→</div>
|
||||
<div class="text-end">[</div>
|
||||
<div :style="`color:${unwrap(dexFullInfo.get(srcArmTypeID)).decreasedInfo.color}`">
|
||||
{{ unwrap(dexFullInfo.get(srcArmTypeID)).decreasedInfo.name }}
|
||||
</div>
|
||||
<div class="f_tnum text-end">
|
||||
{{ convNumberFormat(unwrap(dexFullInfo.get(srcArmTypeID)).decreasedInfo.amount) }}
|
||||
</div>
|
||||
<div>]</div>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '3ch 1ch 2ch 10ch 1ch 3ch 1ch 2ch 10ch 1ch',
|
||||
}"
|
||||
>
|
||||
<div>{{ unwrap(dexFullInfo.get(destArmTypeID)).name }}</div>
|
||||
<div class="text-end">[</div>
|
||||
<template v-if="srcArmTypeID == destArmTypeID">
|
||||
<div :style="`color:${unwrap(dexFullInfo.get(destArmTypeID)).decreasedInfo.color}`">
|
||||
{{ unwrap(dexFullInfo.get(destArmTypeID)).decreasedInfo.name }}
|
||||
</div>
|
||||
<div class="f_tnum text-end">
|
||||
{{ convNumberFormat(unwrap(dexFullInfo.get(destArmTypeID)).decreasedInfo.amount) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div :style="`color:${unwrap(dexFullInfo.get(destArmTypeID)).currentInfo.color}`">
|
||||
{{ unwrap(dexFullInfo.get(destArmTypeID)).currentInfo.name }}
|
||||
</div>
|
||||
<div class="f_tnum text-end">
|
||||
{{ convNumberFormat(unwrap(dexFullInfo.get(destArmTypeID)).currentInfo.amount) }}
|
||||
</div>
|
||||
</template>
|
||||
<div>]</div>
|
||||
<div class="text-center">→</div>
|
||||
<div class="text-end">[</div>
|
||||
<div :style="`color:${unwrap(unwrap(dexFullInfo.get(destArmTypeID)).afterInfo.get(srcArmTypeID)).color}`">
|
||||
{{ unwrap(unwrap(dexFullInfo.get(destArmTypeID)).afterInfo.get(srcArmTypeID)).name }}
|
||||
</div>
|
||||
<div class="f_tnum text-end">
|
||||
{{ convNumberFormat(unwrap(unwrap(dexFullInfo.get(destArmTypeID)).afterInfo.get(srcArmTypeID)).amount) }}
|
||||
</div>
|
||||
<div>]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BottomBar :title="commandName" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
|
||||
declare const commandName: string;
|
||||
|
||||
type dexInfo = {
|
||||
amount: number;
|
||||
color: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
declare const procRes: {
|
||||
ownDexList: {
|
||||
armType: number;
|
||||
name: string;
|
||||
amount: number;
|
||||
}[];
|
||||
dexLevelList: dexInfo[];
|
||||
decreaseCoeff: number;
|
||||
convertCoeff: number;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const srcArmTypeID = ref(procRes.ownDexList[0].armType);
|
||||
const destArmTypeID = ref(procRes.ownDexList[0].armType);
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
srcArmType: srcArmTypeID.value,
|
||||
destArmType: destArmTypeID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
function getDexCall(dex: number): { color: string; name: string } {
|
||||
if (dex < 0) {
|
||||
throw `올바르지 않은 수치: ${dex}`;
|
||||
}
|
||||
|
||||
let color = "";
|
||||
let name = "";
|
||||
for (const nextDexLevel of procRes.dexLevelList) {
|
||||
if (dex < nextDexLevel.amount) {
|
||||
break;
|
||||
}
|
||||
color = nextDexLevel.color;
|
||||
name = nextDexLevel.name;
|
||||
}
|
||||
|
||||
return {
|
||||
color,
|
||||
name,
|
||||
};
|
||||
}
|
||||
|
||||
const dexFullInfo = new Map<
|
||||
number,
|
||||
{
|
||||
armType: number;
|
||||
name: string;
|
||||
amount: number;
|
||||
decresedAmount: number;
|
||||
currentInfo: dexInfo;
|
||||
decreasedInfo: dexInfo;
|
||||
afterInfo: Map<number, dexInfo>;
|
||||
}
|
||||
>();
|
||||
|
||||
for (const dexItem of procRes.ownDexList) {
|
||||
const amount = dexItem.amount;
|
||||
const currentInfo = { ...getDexCall(amount), amount };
|
||||
|
||||
const decresedAmount = amount * procRes.decreaseCoeff;
|
||||
const decresedAfterAmount = amount - decresedAmount;
|
||||
const decreasedInfo = {
|
||||
...getDexCall(decresedAfterAmount),
|
||||
amount: decresedAfterAmount,
|
||||
};
|
||||
|
||||
dexFullInfo.set(dexItem.armType, {
|
||||
...dexItem,
|
||||
decresedAmount,
|
||||
currentInfo,
|
||||
decreasedInfo,
|
||||
afterInfo: new Map(),
|
||||
});
|
||||
}
|
||||
|
||||
for (const [armType, dexItem] of dexFullInfo.entries()) {
|
||||
for (const [fromArmType, fromDexItem] of dexFullInfo.entries()) {
|
||||
let afterAmount = fromDexItem.decresedAmount * procRes.convertCoeff;
|
||||
if (armType != fromArmType) {
|
||||
afterAmount += dexItem.amount;
|
||||
} else {
|
||||
afterAmount += dexItem.decresedAmount;
|
||||
}
|
||||
|
||||
dexItem.afterInfo.set(fromArmType, {
|
||||
amount: afterAmount,
|
||||
...getDexCall(afterAmount),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function convDexFormat(value: dexInfo): string {
|
||||
const amount = convNumberFormat(value.amount);
|
||||
return `<span class="f_tnum" style="color:${value.color}">${value.name}</span>,${"\xa0".repeat(
|
||||
Math.max(0, 3 - value.name.length)
|
||||
)} ${amount}`;
|
||||
}
|
||||
|
||||
function convNumberFormat(value: number): string {
|
||||
return Math.floor(value).toLocaleString();
|
||||
}
|
||||
|
||||
return {
|
||||
unwrap,
|
||||
...procRes,
|
||||
srcArmTypeID,
|
||||
destArmTypeID,
|
||||
dexFullInfo,
|
||||
getDexCall,
|
||||
commandName,
|
||||
submit,
|
||||
convDexFormat,
|
||||
convNumberFormat,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<TopBackBar v-model:searchable="searchable" :title="commandName" />
|
||||
<div class="bg0">
|
||||
<div>
|
||||
국가에 임관합니다.
|
||||
<br>
|
||||
이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.
|
||||
<br>
|
||||
바로 군주의 위치로 이동합니다.
|
||||
<br>
|
||||
임관할 국가를 목록에서 선택하세요.
|
||||
<br>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-3">
|
||||
국가 :
|
||||
<SelectNation v-model="selectedNationID" :nations="nationList" :searchable="searchable" />
|
||||
</div>
|
||||
<div class="col-4 col-md-2 d-grid">
|
||||
<b-button @click="submit">
|
||||
{{ commandName }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nation-list">
|
||||
<div class="nation-header nation-row bg1 center">
|
||||
<div>국가명</div>
|
||||
<div>임관권유문</div>
|
||||
<div class="zoom-toggle d-grid">
|
||||
<b-button
|
||||
v-model="toggleZoom"
|
||||
:pressed="toggleZoom"
|
||||
:variant="toggleZoom ? 'info' : 'secondary'"
|
||||
@click="toggleZoom = !toggleZoom"
|
||||
>
|
||||
{{ toggleZoom ? "작게 보기" : "크게 보기" }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="[, nation] in nationList"
|
||||
:key="nation.id"
|
||||
:class="['nation-row', 's-border-b', toggleZoom ? 'on-zoom' : 'on-fit']"
|
||||
@click="selectedNationID = nation.id"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: nation.color,
|
||||
color: isBrightColor(nation.color) ? 'black' : 'white',
|
||||
fontSize: '1.3em',
|
||||
}"
|
||||
class="d-grid"
|
||||
>
|
||||
<div class="align-self-center center">{{ nation.name }}</div>
|
||||
</div>
|
||||
<div class="nation-scout-plate align-self-center">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div class="nation-scout-msg" v-html="nation.scoutMsg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BottomBar :title="commandName" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import SelectNation from "@/processing/SelectNation.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import { type procNationItem, type procNationList, getProcSearchable } from "../processingRes";
|
||||
import { isBrightColor } from "@/util/isBrightColor";
|
||||
declare const commandName: string;
|
||||
|
||||
declare const procRes: {
|
||||
nationList: procNationList;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectNation,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const nationList = new Map<number, procNationItem>();
|
||||
for (const nationItem of procRes.nationList) {
|
||||
nationList.set(nationItem.id, nationItem);
|
||||
}
|
||||
|
||||
const toggleZoom = ref(true);
|
||||
const selectedNationID = ref(procRes.nationList[0].id);
|
||||
|
||||
function selectedNation(nationID: number) {
|
||||
selectedNationID.value = nationID;
|
||||
}
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
destNationID: selectedNationID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
return {
|
||||
searchable: getProcSearchable(),
|
||||
nationList: ref(nationList),
|
||||
selectedNationID,
|
||||
commandName,
|
||||
toggleZoom,
|
||||
isBrightColor,
|
||||
selectedNation,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@scss/common/break_500px.scss";
|
||||
|
||||
@include media-1000px {
|
||||
.nation-list .nation-row {
|
||||
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));
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
}
|
||||
|
||||
.on-zoom {
|
||||
.nation-scout-plate {
|
||||
max-height: 200px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.nation-scout-msg {
|
||||
max-width: 870px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<TopBackBar v-model:searchable="searchable" :title="commandName" />
|
||||
<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"
|
||||
select-label="선택(엔터)"
|
||||
select-group-label
|
||||
selected-label="선택됨"
|
||||
deselect-label="해제(엔터)"
|
||||
deselect-group-label
|
||||
placeholder="아이템 선택"
|
||||
:max-height="400"
|
||||
:searchable="searchable"
|
||||
>
|
||||
<template #option="props">
|
||||
<div
|
||||
v-if="props.option.html"
|
||||
:style="{
|
||||
color: props.option.notAvailable ? 'red' : undefined,
|
||||
}"
|
||||
v-html="
|
||||
`${props.option.html} ${
|
||||
props.option.notAvailable ? '(불가)' : ''
|
||||
}`
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-else-if="props.option.simpleName"
|
||||
:style="{
|
||||
color: props.option.notAvailable ? 'red' : undefined,
|
||||
}"
|
||||
>
|
||||
{{ props.option.simpleName }}
|
||||
{{ props.option.notAvailable ? "(불가)" : undefined }}
|
||||
</div>
|
||||
</template>
|
||||
<template #singleLabel="props">
|
||||
[{{ ItemTypeNameMap[props.option.type as keyof typeof ItemTypeNameMap] }}]
|
||||
{{ 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>
|
||||
|
||||
<BottomBar :title="commandName" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import { entriesWithType } from "@util/entriesWithType";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import {
|
||||
getProcSearchable,
|
||||
type procItemList,
|
||||
type procItemType,
|
||||
} from "../processingRes";
|
||||
import {
|
||||
type ItemTypeKey,
|
||||
ItemTypeNameMap,
|
||||
NoneValue,
|
||||
type 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);
|
||||
}
|
||||
|
||||
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,
|
||||
searchable: getProcSearchable(),
|
||||
forFind,
|
||||
NoneValue,
|
||||
ItemTypeNameMap,
|
||||
selectedItemObj,
|
||||
commandName,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<TopBackBar
|
||||
v-model:searchable="searchable"
|
||||
:title="commandName"
|
||||
/>
|
||||
<div class="bg0">
|
||||
<div>
|
||||
장수를 따라 임관합니다.<br>
|
||||
이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br>
|
||||
바로 군주의 위치로 이동합니다.<br>
|
||||
임관할 국가를 목록에서 선택하세요.<br>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8 col-md-4">
|
||||
장수 :
|
||||
<SelectGeneral
|
||||
v-model="selectedGeneralID"
|
||||
:generals="generalList"
|
||||
:groupByNation="nationList"
|
||||
:textHelper="textHelpGeneral"
|
||||
:searchable="searchable"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4 col-md-2 d-grid">
|
||||
<b-button
|
||||
variant="primary"
|
||||
@click="submit"
|
||||
>
|
||||
{{ commandName }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nation-list">
|
||||
<div class="nation-header nation-row bg1 center">
|
||||
<div>국가명</div>
|
||||
<div>임관권유문</div>
|
||||
<div class="zoom-toggle d-grid">
|
||||
<b-button
|
||||
v-model="toggleZoom"
|
||||
:pressed="toggleZoom"
|
||||
:variant="toggleZoom ? 'info' : 'secondary'"
|
||||
@click="toggleZoom = !toggleZoom"
|
||||
>
|
||||
{{ toggleZoom ? "작게 보기" : "크게 보기" }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="[, nation] in nationList"
|
||||
:key="nation.id"
|
||||
:class="['nation-row', 's-border-b', toggleZoom ? 'on-zoom' : 'on-fit']"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: nation.color,
|
||||
color: isBrightColor(nation.color) ? 'black' : 'white',
|
||||
fontSize: '1.3em',
|
||||
}"
|
||||
class="d-grid"
|
||||
>
|
||||
<div class="align-self-center center">
|
||||
{{ nation.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="nation-scout-plate align-self-center">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div class="nation-scout-msg" v-html="nation.scoutMsg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BottomBar :title="commandName" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import SelectGeneral from "@/processing/SelectGeneral.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import {
|
||||
convertGeneralList,
|
||||
getProcSearchable,
|
||||
type procGeneralItem,
|
||||
type procGeneralKey,
|
||||
type procGeneralRawItemList,
|
||||
type procNationItem,
|
||||
type procNationList,
|
||||
} from "../processingRes";
|
||||
import { getNpcColor } from "@/common_legacy";
|
||||
import { isBrightColor } from "@/util/isBrightColor";
|
||||
declare const commandName: string;
|
||||
|
||||
declare const procRes: {
|
||||
generals: procGeneralRawItemList;
|
||||
generalsKey: procGeneralKey[];
|
||||
nationList: procNationList;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectGeneral,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const generalList = convertGeneralList(
|
||||
procRes.generalsKey,
|
||||
procRes.generals
|
||||
);
|
||||
|
||||
const toggleZoom = 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;
|
||||
}
|
||||
|
||||
const nationList = new Map<number, procNationItem>();
|
||||
for (const nationItem of procRes.nationList) {
|
||||
nationList.set(nationItem.id, nationItem);
|
||||
}
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
destGeneralID: selectedGeneralID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
return {
|
||||
searchable: getProcSearchable(),
|
||||
nationList: ref(nationList),
|
||||
selectedGeneralID,
|
||||
generalList,
|
||||
commandName,
|
||||
toggleZoom,
|
||||
isBrightColor,
|
||||
textHelpGeneral,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@scss/common/break_500px.scss";
|
||||
|
||||
@include media-1000px {
|
||||
.nation-list .nation-row {
|
||||
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));
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
}
|
||||
|
||||
.on-zoom {
|
||||
.nation-scout-plate {
|
||||
max-height: 200px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.nation-scout-msg {
|
||||
max-width: 870px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<TopBackBar :title="commandName" />
|
||||
<div class="bg0">
|
||||
<div>
|
||||
병사를 모집합니다.
|
||||
<template v-if="commandName == '징병'">
|
||||
훈련과 사기치는 낮지만 가격이 저렴합니다.<br>
|
||||
</template>
|
||||
<template v-else-if="commandName == '모병'">
|
||||
훈련과 사기치는 높지만 자금이 많이 듭니다.<br>
|
||||
</template>
|
||||
가능한 수보다 많게 입력하면 가능한 최대 병사를 모집합니다.<br>
|
||||
이미 병사가 있는 경우 추가 {{ commandName }}되며, 병종이 다를경우는 기존의
|
||||
병사는 소집해제됩니다. <br>
|
||||
현재 {{ commandName }} 가능한 병종은
|
||||
<span style="color: green">녹색</span>으로 표시되며, 현재
|
||||
{{ commandName }} 가능한 특수병종은
|
||||
<span style="color: limegreen">초록색</span>으로 표시됩니다.
|
||||
</div>
|
||||
<div
|
||||
ref="defaultTarget"
|
||||
class="crewTypeList"
|
||||
>
|
||||
<div class="listFront">
|
||||
<div class="row gx-0 bg0">
|
||||
<div class="col-12 col-md-12 d-flex align-items-center">
|
||||
<div
|
||||
v-if="commandName == '모병'"
|
||||
class="text-center w-100"
|
||||
>
|
||||
모병은 가격 2배의 자금이 소요됩니다.<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center bg2 gx-0">
|
||||
<div class="col-4 col-md-2">
|
||||
현재 기술력 : {{ techLevel }}등급
|
||||
</div>
|
||||
<div class="col-4 col-md-2">
|
||||
현재 통솔 :
|
||||
<span
|
||||
:style="{
|
||||
color: leadership < fullLeadership ? 'red' : undefined,
|
||||
}"
|
||||
>{{ leadership }}</span>
|
||||
</div>
|
||||
<div class="col-4 col-md-2">
|
||||
최대 통솔 : {{ fullLeadership }}
|
||||
</div>
|
||||
<div class="col-4 col-md-2">
|
||||
현재 병종 : {{ crewTypeMap?.get(currentCrewType)?.name }}
|
||||
</div>
|
||||
<div class="col-4 col-md-2">
|
||||
현재 병사 : {{ crew.toLocaleString() }}
|
||||
</div>
|
||||
<div class="col-4 col-md-2">
|
||||
현재 자금 : {{ gold.toLocaleString() }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="miniCrewPanel center bg0">
|
||||
<div
|
||||
class="crewTypeImg"
|
||||
:style="{
|
||||
background: '#222222 no-repeat center',
|
||||
backgroundImage: `url('${destCrewType.img}')`,
|
||||
backgroundSize: '64px',
|
||||
outline: 'solid 1px gray',
|
||||
height: '64px',
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor:
|
||||
(destCrewType.notAvailable
|
||||
? 'red'
|
||||
: destCrewType.reqTech == 0
|
||||
? 'green'
|
||||
: 'limegreen') + ' !important',
|
||||
height: '100%',
|
||||
}"
|
||||
class="d-grid"
|
||||
>
|
||||
<div style="margin: auto">
|
||||
{{ destCrewType.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
<div class="crewTypePanel">
|
||||
<b-button-group>
|
||||
<b-button
|
||||
class="py-1"
|
||||
variant="dark"
|
||||
@click="beHalf"
|
||||
>
|
||||
절반
|
||||
</b-button><b-button
|
||||
class="py-1"
|
||||
variant="dark"
|
||||
@click="beFilled"
|
||||
>
|
||||
채우기
|
||||
</b-button><b-button
|
||||
class="py-1"
|
||||
variant="dark"
|
||||
@click="beFull"
|
||||
>
|
||||
가득
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
<div class="row">
|
||||
<div class="col mx-2">
|
||||
<div class="input-group my-0">
|
||||
<span class="input-group-text py-1">병력</span>
|
||||
<input
|
||||
v-model.number="amount"
|
||||
type="number"
|
||||
class="form-control py-1 f_tnum px-0 text-end"
|
||||
min="1"
|
||||
>
|
||||
<span class="input-group-text py-1 f_tnum">00명</span>
|
||||
<span
|
||||
class="input-group-text py-1 f_tnum"
|
||||
style="
|
||||
text-align: right;
|
||||
min-width: 10ch;
|
||||
color: #303030;
|
||||
background-color: #ddd;
|
||||
"
|
||||
><div style="margin-left: auto">
|
||||
{{
|
||||
Math.ceil(
|
||||
amount * destCrewType.baseCost * goldCoeff
|
||||
).toLocaleString()
|
||||
}}금
|
||||
</div></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
<b-button
|
||||
variant="primary"
|
||||
@click="submit"
|
||||
>
|
||||
{{
|
||||
commandName
|
||||
}}
|
||||
</b-button>
|
||||
</div>
|
||||
<div class="listHeader crewTypeSubGrid text-center bg1">
|
||||
<div class="crewTypeImg">
|
||||
사진
|
||||
</div>
|
||||
<div class="crewTypeName">
|
||||
병종
|
||||
</div>
|
||||
<div>공격</div>
|
||||
<div>방어</div>
|
||||
<div>기동</div>
|
||||
<div>회피</div>
|
||||
<div>가격</div>
|
||||
<div>군량</div>
|
||||
<div class="crewTypePanel">
|
||||
병사 수
|
||||
</div>
|
||||
<div class="crewTypeBtn">
|
||||
행동
|
||||
</div>
|
||||
<div class="crewTypeInfo">
|
||||
특징
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listMain">
|
||||
<template
|
||||
v-for="armCrewType in armCrewTypes"
|
||||
:key="armCrewType.armType"
|
||||
>
|
||||
<div class="s-border-b row gx-0">
|
||||
<div
|
||||
class="col-7 col-md-10 align-self-center px-3"
|
||||
style="font-size: 1.3em"
|
||||
>
|
||||
{{ armCrewType.armName }} 계열
|
||||
</div>
|
||||
<div class="col-5 col-md-2 d-grid">
|
||||
<b-button
|
||||
:variant="
|
||||
showNotAvailable.get(armCrewType.armType) ? 'warning' : 'dark'
|
||||
"
|
||||
:pressed="showNotAvailable.get(armCrewType.armType)"
|
||||
class="btn-sm"
|
||||
@click="toggleShowNotAvailable(armCrewType.armType)"
|
||||
>
|
||||
{{
|
||||
showNotAvailable.get(armCrewType.armType)
|
||||
? "선택 할 수 있는 병종만 보기"
|
||||
: "선택 할 수 없는 병종도 보기"
|
||||
}}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<template
|
||||
v-for="crewType in armCrewType.values"
|
||||
:key="crewType.id"
|
||||
>
|
||||
<CrewTypeItem
|
||||
v-if="
|
||||
showNotAvailable.get(armCrewType.armType) ||
|
||||
!crewType.notAvailable
|
||||
"
|
||||
:crewType="crewType"
|
||||
:leadership="fullLeadership"
|
||||
:commandName="commandName"
|
||||
:currentCrewType="currentCrewType"
|
||||
:crew="crew"
|
||||
:goldCoeff="goldCoeff"
|
||||
@submitOutput="trySubmit"
|
||||
@click="
|
||||
destCrewType = unwrap(crewTypeMap.get(crewType.id));
|
||||
beFilled();
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BottomBar :title="commandName" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import CrewTypeItem from "@/processing/CrewTypeItem.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import type { procArmTypeItem, procCrewTypeItem } from "../processingRes";
|
||||
declare const commandName: string;
|
||||
|
||||
declare const procRes: {
|
||||
relYear: number;
|
||||
year: number;
|
||||
tech: number;
|
||||
techLevel: number;
|
||||
startYear: number;
|
||||
goldCoeff: number;
|
||||
leadership: number;
|
||||
fullLeadership: number;
|
||||
armCrewTypes: procArmTypeItem[];
|
||||
currentCrewType: number;
|
||||
crew: number;
|
||||
gold: number;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
CrewTypeItem,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const amount = ref(procRes.fullLeadership - Math.floor(procRes.crew / 100));
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
amount: amount.value * 100,
|
||||
crewType: destCrewType.value.id,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
const showNotAvailable = ref(new Map<number, boolean>());
|
||||
|
||||
const crewTypeMap = new Map<number, procCrewTypeItem>();
|
||||
for (const armType of procRes.armCrewTypes) {
|
||||
showNotAvailable.value.set(armType.armType, false);
|
||||
for (const crewType of armType.values) {
|
||||
crewTypeMap.set(crewType.id, crewType);
|
||||
}
|
||||
}
|
||||
|
||||
const destCrewType = ref(unwrap(crewTypeMap.get(procRes.currentCrewType)));
|
||||
|
||||
function beHalf() {
|
||||
amount.value = Math.ceil(procRes.fullLeadership * 0.5);
|
||||
}
|
||||
|
||||
function beFilled() {
|
||||
if (destCrewType.value.id == procRes.currentCrewType) {
|
||||
amount.value = Math.max(
|
||||
1,
|
||||
procRes.fullLeadership - Math.floor(procRes.crew / 100)
|
||||
);
|
||||
} else {
|
||||
amount.value = procRes.fullLeadership;
|
||||
}
|
||||
}
|
||||
|
||||
function beFull() {
|
||||
amount.value = Math.floor(procRes.fullLeadership * 1.2);
|
||||
}
|
||||
|
||||
function trySubmit(e: Event, inAmount: number, inCrewType: number) {
|
||||
e.preventDefault();
|
||||
amount.value = inAmount;
|
||||
destCrewType.value = unwrap(crewTypeMap.get(inCrewType));
|
||||
void submit(e);
|
||||
}
|
||||
|
||||
function toggleShowNotAvailable(armType: number) {
|
||||
showNotAvailable.value.set(
|
||||
armType,
|
||||
!(showNotAvailable.value.get(armType) ?? 0)
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
destCrewType,
|
||||
amount,
|
||||
showNotAvailable,
|
||||
...procRes,
|
||||
crewTypeMap,
|
||||
commandName,
|
||||
beHalf,
|
||||
beFilled,
|
||||
beFull,
|
||||
submit,
|
||||
toggleShowNotAvailable,
|
||||
trySubmit,
|
||||
unwrap,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/common/break_500px.scss";
|
||||
|
||||
.crewTypeSubGrid {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
.crewTypeItem .crewTypeImg {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.crewTypeInfo {
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
@include media-1000px {
|
||||
.crewTypeSubGrid {
|
||||
grid-template-columns: 64px 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 250px 1.5fr 270px;
|
||||
}
|
||||
|
||||
.miniCrewPanel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.only500pxMode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-500px {
|
||||
.only1000pxMode {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.listFront {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
}
|
||||
.crewTypeSubGrid {
|
||||
grid-template-columns: 64px 1.5fr 1fr 1fr 1fr 270px;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.crewTypeImg {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.crewTypeName {
|
||||
grid-row: 1/ 3;
|
||||
}
|
||||
|
||||
.crewTypeInfo {
|
||||
grid-column: -2 / -1;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.crewTypePanel {
|
||||
display: none;
|
||||
}
|
||||
.crewTypeBtn {
|
||||
display: none;
|
||||
}
|
||||
.crewTypeBtn > button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.miniCrewPanel .crewTypePanel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.miniCrewPanel {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 1.5fr 0.5fr 270px 0.5fr 2fr;
|
||||
grid-template-rows: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<TopBackBar :title="commandName" />
|
||||
<div class="bg0">
|
||||
<div>
|
||||
자신의 자금이나 군량을 국가 재산으로 헌납합니다.
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-2 col-md-1">
|
||||
자원 :
|
||||
<b-button-group>
|
||||
<b-button
|
||||
:pressed="isGold"
|
||||
@click="isGold = true"
|
||||
>
|
||||
금
|
||||
</b-button>
|
||||
<b-button
|
||||
:pressed="!isGold"
|
||||
@click="isGold = false"
|
||||
>
|
||||
쌀
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
<div class="col-7 col-md-4">
|
||||
금액 :
|
||||
<SelectAmount
|
||||
v-model="amount"
|
||||
:amountGuide="amountGuide"
|
||||
:maxAmount="maxAmount"
|
||||
:minAmount="minAmount"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3 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 SelectAmount from "@/processing/SelectAmount.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { 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: {
|
||||
SelectAmount,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const amount = ref(1000);
|
||||
const isGold = ref(true);
|
||||
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
amount: amount.value,
|
||||
isGold: isGold.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
return {
|
||||
amount,
|
||||
isGold,
|
||||
minAmount: ref(procRes.minAmount),
|
||||
maxAmount: ref(procRes.maxAmount),
|
||||
amountGuide: procRes.amountGuide,
|
||||
commandName,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
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";
|
||||
import { default as che_징병 } from "./che_징병.vue";
|
||||
import { default as che_헌납 } from "./che_헌납.vue";
|
||||
|
||||
import { default as ProcessCity } from "../ProcessCity.vue";
|
||||
import { default as ProcessGeneralAmount } from "../ProcessGeneralAmount.vue";
|
||||
|
||||
|
||||
//TODO: 자주 쓰는 녀석들은 Slot으로 변경
|
||||
|
||||
export const commandMap: Record<string, typeof ProcessCity> = {
|
||||
che_강행: ProcessCity,
|
||||
che_군량매매,
|
||||
che_건국,
|
||||
che_등용,
|
||||
che_모병: che_징병,
|
||||
che_선동: ProcessCity,
|
||||
che_선양,
|
||||
che_숙련전환,
|
||||
che_이동: ProcessCity,
|
||||
che_임관,
|
||||
che_장비매매,
|
||||
che_장수대상임관,
|
||||
che_징병,
|
||||
che_증여: ProcessGeneralAmount,
|
||||
che_첩보: ProcessCity,
|
||||
che_출병: ProcessCity,
|
||||
che_탈취: ProcessCity,
|
||||
che_파괴: ProcessCity,
|
||||
che_화계: ProcessCity,
|
||||
che_헌납,
|
||||
}
|
||||
|
||||
/*
|
||||
- 항목들
|
||||
고유 양식 - 장비매매
|
||||
*/
|
||||
Reference in New Issue
Block a user