refac: defineComponent => vue3 setup
This commit is contained in:
@@ -34,64 +34,49 @@
|
||||
</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 staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
|
||||
declare const procRes: {
|
||||
available건국: boolean;
|
||||
colors: string[];
|
||||
nationTypes: procNationTypeList;
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import ColorSelect from "@/processing/SelectColor.vue";
|
||||
import { 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";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ColorSelect,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const destNationName = ref("");
|
||||
const selectedColorID = ref(0);
|
||||
const commandName = staticValues.commandName;
|
||||
const { nationTypes, available건국, colors } = procRes;
|
||||
|
||||
const selectedNationType = ref(Object.values(procRes.nationTypes)[0].type);
|
||||
const destNationName = ref("");
|
||||
const selectedColorID = ref(0);
|
||||
|
||||
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 selectedNationType = ref(Object.values(procRes.nationTypes)[0].type);
|
||||
|
||||
const nationTypesOption: { html: string; value: string }[] = [];
|
||||
for (const nationType of Object.values(procRes.nationTypes)) {
|
||||
nationTypesOption.push({
|
||||
html: nationType.name,
|
||||
value: nationType.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);
|
||||
}
|
||||
|
||||
return {
|
||||
available건국: procRes.available건국,
|
||||
selectedColorID,
|
||||
selectedNationType,
|
||||
colors: procRes.colors,
|
||||
nationTypes: procRes.nationTypes,
|
||||
nationTypesOption,
|
||||
destNationName,
|
||||
commandName,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
const nationTypesOption: { html: string; value: string }[] = [];
|
||||
for (const nationType of Object.values(procRes.nationTypes)) {
|
||||
nationTypesOption.push({
|
||||
html: nationType.name,
|
||||
value: nationType.type,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -25,49 +25,39 @@
|
||||
</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 staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
|
||||
declare const procRes: {
|
||||
minAmount: number;
|
||||
maxAmount: number;
|
||||
amountGuide: number[];
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import SelectAmount from "@/processing/SelectAmount.vue";
|
||||
import { ref } from "vue";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectAmount,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const amount = ref(1000);
|
||||
const buyRice = ref(true);
|
||||
const commandName = staticValues.commandName;
|
||||
const { minAmount, maxAmount, amountGuide } = procRes;
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
amount: amount.value,
|
||||
buyRice: buyRice.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
const amount = ref(1000);
|
||||
const buyRice = ref(true);
|
||||
|
||||
return {
|
||||
buyRice,
|
||||
amount,
|
||||
minAmount: ref(procRes.minAmount),
|
||||
maxAmount: ref(procRes.maxAmount),
|
||||
amountGuide: procRes.amountGuide,
|
||||
commandName,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
async function submit(e: SubmitEvent) {
|
||||
if(!e.target){
|
||||
return;
|
||||
}
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
amount: amount.value,
|
||||
buyRice: buyRice.value,
|
||||
},
|
||||
});
|
||||
e.target.dispatchEvent(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -28,8 +28,19 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
declare const staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
|
||||
declare const procRes: {
|
||||
generals: procGeneralRawItemList;
|
||||
generalsKey: procGeneralKey[];
|
||||
nationList: procNationList;
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import SelectGeneral from "@/processing/SelectGeneral.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
@@ -44,54 +55,33 @@ import {
|
||||
type procNationList,
|
||||
} from "../processingRes";
|
||||
import { getNpcColor } from "@/common_legacy";
|
||||
declare const commandName: string;
|
||||
|
||||
declare const procRes: {
|
||||
generals: procGeneralRawItemList;
|
||||
generalsKey: procGeneralKey[];
|
||||
nationList: procNationList;
|
||||
};
|
||||
const commandName = staticValues.commandName;
|
||||
const searchable = getProcSearchable();
|
||||
const generalList = ref(convertGeneralList(procRes.generalsKey, procRes.generals));
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectGeneral,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
|
||||
const selectedGeneralID = ref(generalList.value[0].no);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
destGeneralID: selectedGeneralID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
const nationList = ref(new Map<number, procNationItem>());
|
||||
|
||||
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,
|
||||
};
|
||||
},
|
||||
onMounted(() => {
|
||||
for (const nationItem of procRes.nationList) {
|
||||
nationList.value.set(nationItem.id, nationItem);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -31,8 +31,19 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
declare const staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
|
||||
declare const procRes: {
|
||||
generals: procGeneralRawItemList;
|
||||
generalsKey: procGeneralKey[];
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import SelectGeneral from "@/processing/SelectGeneral.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
@@ -45,47 +56,25 @@ import {
|
||||
type procGeneralRawItemList,
|
||||
} from "../processingRes";
|
||||
import { getNpcColor } from "@/common_legacy";
|
||||
declare const commandName: string;
|
||||
|
||||
declare const procRes: {
|
||||
generals: procGeneralRawItemList;
|
||||
generalsKey: procGeneralKey[];
|
||||
};
|
||||
const commandName = staticValues.commandName;
|
||||
const searchable = getProcSearchable();
|
||||
const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectGeneral,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
|
||||
const selectedGeneralID = ref(generalList[0].no);
|
||||
|
||||
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})`;
|
||||
}
|
||||
|
||||
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,
|
||||
};
|
||||
},
|
||||
});
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
destGeneralID: selectedGeneralID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -92,143 +92,119 @@
|
||||
</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 = {
|
||||
type DexInfo = {
|
||||
amount: number;
|
||||
color: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
declare const staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
declare const procRes: {
|
||||
ownDexList: {
|
||||
armType: number;
|
||||
name: string;
|
||||
amount: number;
|
||||
}[];
|
||||
dexLevelList: dexInfo[];
|
||||
dexLevelList: DexInfo[];
|
||||
decreaseCoeff: number;
|
||||
convertCoeff: number;
|
||||
};
|
||||
</script>
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const srcArmTypeID = ref(procRes.ownDexList[0].armType);
|
||||
const destArmTypeID = ref(procRes.ownDexList[0].armType);
|
||||
<script lang="ts" setup>
|
||||
import { 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";
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
srcArmType: srcArmTypeID.value,
|
||||
destArmType: destArmTypeID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
const commandName = staticValues.commandName;
|
||||
|
||||
const srcArmTypeID = ref(procRes.ownDexList[0].armType);
|
||||
const destArmTypeID = ref(procRes.ownDexList[0].armType);
|
||||
|
||||
function getDexCall(dex: number): { color: string; name: string } {
|
||||
if (dex < 0) {
|
||||
throw `올바르지 않은 수치: ${dex}`;
|
||||
}
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
srcArmType: srcArmTypeID.value,
|
||||
destArmType: destArmTypeID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
let color = "";
|
||||
let name = "";
|
||||
for (const nextDexLevel of procRes.dexLevelList) {
|
||||
if (dex < nextDexLevel.amount) {
|
||||
break;
|
||||
}
|
||||
color = nextDexLevel.color;
|
||||
name = nextDexLevel.name;
|
||||
}
|
||||
function getDexCall(dex: number): { color: string; name: string } {
|
||||
if (dex < 0) {
|
||||
throw `올바르지 않은 수치: ${dex}`;
|
||||
}
|
||||
|
||||
return {
|
||||
color,
|
||||
name,
|
||||
};
|
||||
let color = "";
|
||||
let name = "";
|
||||
for (const nextDexLevel of procRes.dexLevelList) {
|
||||
if (dex < nextDexLevel.amount) {
|
||||
break;
|
||||
}
|
||||
|
||||
const dexFullInfo = new Map<
|
||||
number,
|
||||
{
|
||||
armType: number;
|
||||
name: string;
|
||||
amount: number;
|
||||
decresedAmount: number;
|
||||
currentInfo: dexInfo;
|
||||
decreasedInfo: dexInfo;
|
||||
afterInfo: Map<number, dexInfo>;
|
||||
}
|
||||
>();
|
||||
color = nextDexLevel.color;
|
||||
name = nextDexLevel.name;
|
||||
}
|
||||
|
||||
for (const dexItem of procRes.ownDexList) {
|
||||
const amount = dexItem.amount;
|
||||
const currentInfo = { ...getDexCall(amount), amount };
|
||||
return {
|
||||
color,
|
||||
name,
|
||||
};
|
||||
}
|
||||
|
||||
const decresedAmount = amount * procRes.decreaseCoeff;
|
||||
const decresedAfterAmount = amount - decresedAmount;
|
||||
const decreasedInfo = {
|
||||
...getDexCall(decresedAfterAmount),
|
||||
amount: decresedAfterAmount,
|
||||
};
|
||||
const dexFullInfo = new Map<
|
||||
number,
|
||||
{
|
||||
armType: number;
|
||||
name: string;
|
||||
amount: number;
|
||||
decresedAmount: number;
|
||||
currentInfo: DexInfo;
|
||||
decreasedInfo: DexInfo;
|
||||
afterInfo: Map<number, DexInfo>;
|
||||
}
|
||||
>();
|
||||
|
||||
dexFullInfo.set(dexItem.armType, {
|
||||
...dexItem,
|
||||
decresedAmount,
|
||||
currentInfo,
|
||||
decreasedInfo,
|
||||
afterInfo: new Map(),
|
||||
});
|
||||
}
|
||||
for (const dexItem of procRes.ownDexList) {
|
||||
const amount = dexItem.amount;
|
||||
const currentInfo = { ...getDexCall(amount), amount };
|
||||
|
||||
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;
|
||||
}
|
||||
const decresedAmount = amount * procRes.decreaseCoeff;
|
||||
const decresedAfterAmount = amount - decresedAmount;
|
||||
const decreasedInfo = {
|
||||
...getDexCall(decresedAfterAmount),
|
||||
amount: decresedAfterAmount,
|
||||
};
|
||||
|
||||
dexItem.afterInfo.set(fromArmType, {
|
||||
amount: afterAmount,
|
||||
...getDexCall(afterAmount),
|
||||
});
|
||||
}
|
||||
}
|
||||
dexFullInfo.set(dexItem.armType, {
|
||||
...dexItem,
|
||||
decresedAmount,
|
||||
currentInfo,
|
||||
decreasedInfo,
|
||||
afterInfo: new Map(),
|
||||
});
|
||||
}
|
||||
|
||||
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}`;
|
||||
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;
|
||||
}
|
||||
|
||||
function convNumberFormat(value: number): string {
|
||||
return Math.floor(value).toLocaleString();
|
||||
}
|
||||
dexItem.afterInfo.set(fromArmType, {
|
||||
amount: afterAmount,
|
||||
...getDexCall(afterAmount),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
unwrap,
|
||||
...procRes,
|
||||
srcArmTypeID,
|
||||
destArmTypeID,
|
||||
dexFullInfo,
|
||||
getDexCall,
|
||||
commandName,
|
||||
submit,
|
||||
convDexFormat,
|
||||
convNumberFormat,
|
||||
};
|
||||
},
|
||||
});
|
||||
function convNumberFormat(value: number): string {
|
||||
return Math.floor(value).toLocaleString();
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<div class="bg0">
|
||||
<div>
|
||||
국가에 임관합니다.
|
||||
<br>
|
||||
<br />
|
||||
이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.
|
||||
<br>
|
||||
<br />
|
||||
바로 군주의 위치로 이동합니다.
|
||||
<br>
|
||||
<br />
|
||||
임관할 국가를 목록에서 선택하세요.
|
||||
<br>
|
||||
<br />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-3">
|
||||
@@ -64,60 +64,43 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
declare const staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
declare const procRes: {
|
||||
nationList: procNationList;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import SelectNation from "@/processing/SelectNation.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { 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;
|
||||
};
|
||||
const commandName = staticValues.commandName;
|
||||
const searchable = getProcSearchable();
|
||||
|
||||
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 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);
|
||||
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,
|
||||
};
|
||||
},
|
||||
});
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
destNationID: selectedNationID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -181,4 +164,4 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<TopBackBar
|
||||
v-model:searchable="searchable"
|
||||
:title="commandName"
|
||||
/>
|
||||
<TopBackBar v-model:searchable="searchable" :title="commandName" />
|
||||
<div class="bg0">
|
||||
<div>
|
||||
장수를 따라 임관합니다.<br>
|
||||
이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br>
|
||||
바로 군주의 위치로 이동합니다.<br>
|
||||
임관할 국가를 목록에서 선택하세요.<br>
|
||||
장수를 따라 임관합니다.<br />
|
||||
이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br />
|
||||
바로 군주의 위치로 이동합니다.<br />
|
||||
임관할 국가를 목록에서 선택하세요.<br />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8 col-md-4">
|
||||
@@ -22,10 +19,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4 col-md-2 d-grid">
|
||||
<b-button
|
||||
variant="primary"
|
||||
@click="submit"
|
||||
>
|
||||
<b-button variant="primary" @click="submit">
|
||||
{{ commandName }}
|
||||
</b-button>
|
||||
</div>
|
||||
@@ -73,8 +67,20 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
declare const staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
|
||||
declare const procRes: {
|
||||
generals: procGeneralRawItemList;
|
||||
generalsKey: procGeneralKey[];
|
||||
nationList: procNationList;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import SelectGeneral from "@/processing/SelectGeneral.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import type { Args } from "@/processing/args";
|
||||
import TopBackBar from "@/components/TopBackBar.vue";
|
||||
@@ -90,64 +96,34 @@ import {
|
||||
} 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;
|
||||
};
|
||||
const commandName = staticValues.commandName;
|
||||
const searchable = getProcSearchable();
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectGeneral,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const generalList = convertGeneralList(
|
||||
procRes.generalsKey,
|
||||
procRes.generals
|
||||
);
|
||||
const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
|
||||
|
||||
const toggleZoom = ref(true);
|
||||
const selectedGeneralID = ref(generalList[0].no);
|
||||
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;
|
||||
}
|
||||
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);
|
||||
}
|
||||
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,
|
||||
};
|
||||
},
|
||||
});
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
destGeneralID: selectedGeneralID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -211,4 +187,4 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -230,14 +230,9 @@
|
||||
</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 staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
|
||||
declare const procRes: {
|
||||
relYear: number;
|
||||
@@ -253,15 +248,30 @@ declare const procRes: {
|
||||
crew: number;
|
||||
gold: number;
|
||||
};
|
||||
</script>
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
CrewTypeItem,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const amount = ref(procRes.fullLeadership - Math.floor(procRes.crew / 100));
|
||||
<script lang="ts" setup>
|
||||
import CrewTypeItem from "@/processing/CrewTypeItem.vue";
|
||||
import { 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";
|
||||
|
||||
const commandName = staticValues.commandName;
|
||||
const {
|
||||
techLevel,
|
||||
goldCoeff,
|
||||
leadership,
|
||||
fullLeadership,
|
||||
armCrewTypes,
|
||||
currentCrewType,
|
||||
crew,
|
||||
gold,
|
||||
} = procRes;
|
||||
|
||||
const amount = ref(procRes.fullLeadership - Math.floor(procRes.crew / 100));
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
@@ -317,24 +327,6 @@ export default defineComponent({
|
||||
!(showNotAvailable.value.get(armType) ?? 0)
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
destCrewType,
|
||||
amount,
|
||||
showNotAvailable,
|
||||
...procRes,
|
||||
crewTypeMap,
|
||||
commandName,
|
||||
beHalf,
|
||||
beFilled,
|
||||
beFull,
|
||||
submit,
|
||||
toggleShowNotAvailable,
|
||||
trySubmit,
|
||||
unwrap,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,41 +1,21 @@
|
||||
<template>
|
||||
<TopBackBar :title="commandName" />
|
||||
<div class="bg0">
|
||||
<div>
|
||||
자신의 자금이나 군량을 국가 재산으로 헌납합니다.
|
||||
</div>
|
||||
<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 :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"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<b-button variant="primary" @click="submit">
|
||||
{{ commandName }}
|
||||
</b-button>
|
||||
</div>
|
||||
@@ -45,50 +25,38 @@
|
||||
</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 staticValues: {
|
||||
commandName: string;
|
||||
};
|
||||
|
||||
declare const procRes: {
|
||||
minAmount: number;
|
||||
maxAmount: number;
|
||||
amountGuide: number[];
|
||||
};
|
||||
</script>
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SelectAmount,
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
},
|
||||
setup() {
|
||||
const amount = ref(1000);
|
||||
const isGold = ref(true);
|
||||
<script lang="ts" setup>
|
||||
import SelectAmount from "@/processing/SelectAmount.vue";
|
||||
import { 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";
|
||||
|
||||
const commandName = staticValues.commandName;
|
||||
const { minAmount, maxAmount, amountGuide } = procRes;
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
amount: amount.value,
|
||||
isGold: isGold.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
const amount = ref(1000);
|
||||
const isGold = ref(true);
|
||||
|
||||
return {
|
||||
amount,
|
||||
isGold,
|
||||
minAmount: ref(procRes.minAmount),
|
||||
maxAmount: ref(procRes.maxAmount),
|
||||
amountGuide: procRes.amountGuide,
|
||||
commandName,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
amount: amount.value,
|
||||
isGold: isGold.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user