|
|
|
@ -1,44 +1,64 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div @mouseover="reforgeFlag = true" @mouseleave="reforgeFlag = false; reforgeing = false;" @click="reforge"> |
|
|
|
<div class="reforge" v-if="equip"> |
|
|
|
<div class="extraEntry" v-if="!reforgeFlag || reforgeing"> |
|
|
|
<Tooltip :infos="[rt('desc.1'), rt('desc.2'), rt('desc.3'), rt('desc.4')]" width="8rem"> |
|
|
|
<div v-if="tempEntry" class="extraEntry-item" v-for="(v, k) in tempEntry" :key="k"> |
|
|
|
<div class="descript">- {{ rt('desc.0') }} -</div> |
|
|
|
<button class="button"> |
|
|
|
</Tooltip> |
|
|
|
<div> |
|
|
|
<div @mouseover="reforgeFlag = true" @mouseleave="reforgeFlag = false; reforgeing = false;" @click="reforge"> |
|
|
|
{{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%) |
|
|
|
<div class="extraEntry" v-if="!reforgeFlag || reforgeing"> |
|
|
|
</div> |
|
|
|
<div v-if="tempEntry" class="extraEntry-item" v-for="(v, k) in tempEntry" :key="k"> |
|
|
|
</button> |
|
|
|
<button class="button"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
{{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%) |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="!tempEntry" class="extraEntry-item" v-for="(v, k) in equip.extraEntry" :key="v.type + k"> |
|
|
|
|
|
|
|
<button class="button"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
{{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%) |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="!tempEntry" class="extraEntry-item" v-for="(v, k) in equip.extraEntry" :key="v.type + k"> |
|
|
|
<div class="reforge-tip" v-if="reforgeFlag && !reforgeing"> |
|
|
|
<button class="button"> |
|
|
|
<div :class="useCoins < reforgeNeed ? 'red' : ''">{{ replace(rt('action.0'), [reforgeNeed]) }} |
|
|
|
<div> |
|
|
|
</div> |
|
|
|
{{ t(v.type + '.0') }} : {{ v.showVal }}({{ v.percent }}%) |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="reforge-tip" v-if="reforgeFlag && !reforgeing"> |
|
|
|
<div class="btn-group"> |
|
|
|
<div :class="useCoins < reforgeNeed ? 'red' : ''">{{ replace(t('reforgeAction.0'), [reforgeNeed]) }} </div> |
|
|
|
<button class="button" @click="saveOld">{{ rt('action.1') }}</button> |
|
|
|
<div>-{{ t('reforgeDesc.0') }}</div> |
|
|
|
<button class="button" @click="saveNew">{{ rt('action.2') }}</button> |
|
|
|
<div>-{{ t('reforgeDesc.1') }}</div> |
|
|
|
</div> |
|
|
|
<div>-{{ t('reforgeDesc.2') }}</div> |
|
|
|
<div class="btn-group" v-if='!auto'> |
|
|
|
|
|
|
|
<p>{{ rt('atuo.0') }}：</p> |
|
|
|
|
|
|
|
<select v-model="autoAttr"> |
|
|
|
|
|
|
|
<option v-for="item in entrys" :value="item">{{ t(item + '.0') }}</option> |
|
|
|
|
|
|
|
</select> |
|
|
|
|
|
|
|
x |
|
|
|
|
|
|
|
<select v-model="autoNum"> |
|
|
|
|
|
|
|
<option v-for="i in 5" :value="i">{{ i }}</option> |
|
|
|
|
|
|
|
</select> |
|
|
|
|
|
|
|
<button class="button" @click="startAuto">{{ rt('atuo.1') }}</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="btn-group" v-if='auto'> |
|
|
|
|
|
|
|
<p>{{ rt('atuo.2') }}...</p> |
|
|
|
|
|
|
|
<button class="button" @click="stopAuto">{{ rt('atuo.3') }}</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="btn-group"> |
|
|
|
|
|
|
|
<button class="button" @click="saveOld">{{ t('reforgeAction.1') }}</button> |
|
|
|
|
|
|
|
<button class="button" @click="saveNew">{{ t('reforgeAction.2') }}</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { useStore } from "vuex"; |
|
|
|
import { useStore } from "vuex"; |
|
|
|
import { reactive, onMounted, ref, computed, watch } from "vue"; |
|
|
|
import { reactive, onMounted, ref, computed, watch } from "vue"; |
|
|
|
import { Tooltip, EquipIcon } from "@/components" |
|
|
|
import { Tooltip } from "@/components" |
|
|
|
import { createt } from "@/config/i18n"; |
|
|
|
import { createt } from "@/config/i18n"; |
|
|
|
import { Entry, extra_entry_num, weaponExtraEntry, armorExtraEntry, neckExtraEntry, ringExtraEntry, jewelryExtraEntry, pantsExtraEntry, shoesExtraEntry, bracersExtraEntry } from "@/config"; |
|
|
|
import { Entry, extra_entry_num } from "@/config"; |
|
|
|
|
|
|
|
import * as config from "@/config"; |
|
|
|
import { replace } from "@/tool"; |
|
|
|
import { replace } from "@/tool"; |
|
|
|
import { useI18n } from "vue3-i18n"; |
|
|
|
import { useI18n } from "vue3-i18n"; |
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n(); |
|
|
|
const { t } = useI18n(); |
|
|
|
|
|
|
|
const rt = createt('reforge.'); |
|
|
|
const { state, commit, dispatch } = useStore(); |
|
|
|
const { state, commit, dispatch } = useStore(); |
|
|
|
const reforgeFlag = ref(false); |
|
|
|
const reforgeFlag = ref(false); |
|
|
|
const reforgeing = ref(false); |
|
|
|
const reforgeing = ref(false); |
|
|
|
@ -61,6 +81,17 @@ const height = computed(() => { |
|
|
|
const tempEntry = ref<Entry[] | null>(); |
|
|
|
const tempEntry = ref<Entry[] | null>(); |
|
|
|
const tempId = ref(); |
|
|
|
const tempId = ref(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const auto = ref(false); |
|
|
|
|
|
|
|
const autoAttr = ref(''); |
|
|
|
|
|
|
|
const autoNum = ref(3); |
|
|
|
|
|
|
|
const entrys = computed(() => { |
|
|
|
|
|
|
|
if (prop.equip) { |
|
|
|
|
|
|
|
const key = prop.equip.type + 'ExtraEntrys'; |
|
|
|
|
|
|
|
return config[key]; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return null; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const prop = defineProps({ |
|
|
|
const prop = defineProps({ |
|
|
|
equip: { |
|
|
|
equip: { |
|
|
|
type: Object, |
|
|
|
type: Object, |
|
|
|
@ -71,18 +102,9 @@ watch(() => prop.equip, (n) => { |
|
|
|
tempEntry.value = null; |
|
|
|
tempEntry.value = null; |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const reforger = { |
|
|
|
|
|
|
|
weapon: weaponExtraEntry, |
|
|
|
|
|
|
|
armor: armorExtraEntry, |
|
|
|
|
|
|
|
neck: neckExtraEntry, |
|
|
|
|
|
|
|
ring: ringExtraEntry, |
|
|
|
|
|
|
|
jewelry: jewelryExtraEntry, |
|
|
|
|
|
|
|
pants: pantsExtraEntry, |
|
|
|
|
|
|
|
shoes: shoesExtraEntry, |
|
|
|
|
|
|
|
bracers: bracersExtraEntry, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const reforge = () => { |
|
|
|
const reforge = () => { |
|
|
|
if (useCoins.value < reforgeNeed.value) { |
|
|
|
const need = Math.ceil(reforgeNeed.value * (auto.value ? 1.5 : 1)); |
|
|
|
|
|
|
|
if (useCoins.value < need) { |
|
|
|
commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", }); |
|
|
|
commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", }); |
|
|
|
return |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
@ -92,13 +114,16 @@ const reforge = () => { |
|
|
|
const extraEntryNum = extra_entry_num[quality]; |
|
|
|
const extraEntryNum = extra_entry_num[quality]; |
|
|
|
const extraEntry = new Array(); |
|
|
|
const extraEntry = new Array(); |
|
|
|
for (let i = 0; i < extraEntryNum; i++) { |
|
|
|
for (let i = 0; i < extraEntryNum; i++) { |
|
|
|
const entry = reforger[equip.type](quality, equip.lv, extraQuality); |
|
|
|
const key = equip.type + 'ExtraEntry'; |
|
|
|
|
|
|
|
const entry = config[key](quality, equip.lv, extraQuality); |
|
|
|
extraEntry.push(entry); |
|
|
|
extraEntry.push(entry); |
|
|
|
} |
|
|
|
} |
|
|
|
commit("add_player_coins", -1 * reforgeNeed.value); |
|
|
|
commit("add_player_coins", -1 * need); |
|
|
|
tempId.value = equip.id; |
|
|
|
tempId.value = equip.id; |
|
|
|
tempEntry.value = extraEntry; |
|
|
|
tempEntry.value = extraEntry; |
|
|
|
reforgeing.value = true; |
|
|
|
reforgeing.value = true; |
|
|
|
|
|
|
|
check(); |
|
|
|
|
|
|
|
auto.value && setTimeout(reforge, 200); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const saveOld = () => { |
|
|
|
const saveOld = () => { |
|
|
|
@ -112,51 +137,106 @@ const saveNew = () => { |
|
|
|
tempEntry.value = null; |
|
|
|
tempEntry.value = null; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const check = () => { |
|
|
|
|
|
|
|
debugger |
|
|
|
|
|
|
|
if (!auto.value || !tempEntry.value) return; |
|
|
|
|
|
|
|
let cout = 0; |
|
|
|
|
|
|
|
const entrys = tempEntry.value || prop.equip.extraEntry; |
|
|
|
|
|
|
|
entrys.forEach(entry => { |
|
|
|
|
|
|
|
if (entry.type == autoAttr.value) { |
|
|
|
|
|
|
|
cout++; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
auto.value = cout < autoNum.value; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const startAuto = () => { |
|
|
|
|
|
|
|
auto.value = true; |
|
|
|
|
|
|
|
check(); |
|
|
|
|
|
|
|
auto.value && reforge(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const stopAuto = () => { |
|
|
|
|
|
|
|
auto.value = false; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { }); |
|
|
|
onMounted(() => { }); |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.extraEntry { |
|
|
|
.reforge { |
|
|
|
display: flex; |
|
|
|
color: #f1f1f1; |
|
|
|
flex-direction: column; |
|
|
|
width: 25rem; |
|
|
|
justify-content: center; |
|
|
|
height: auto; |
|
|
|
width: 100%; |
|
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
|
padding-left: 1.2rem; |
|
|
|
border: #393839; |
|
|
|
padding-bottom: 0.6rem; |
|
|
|
border-radius: 0.4rem; |
|
|
|
height: v-bind('height'); |
|
|
|
padding: 1rem; |
|
|
|
cursor: pointer; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
|
|
|
div { |
|
|
|
.descript { |
|
|
|
|
|
|
|
font-family: 'MaShanZheng' !important; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center !important; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
font-size: 1.6rem; |
|
|
|
|
|
|
|
padding: 1.4rem 0.7rem; |
|
|
|
|
|
|
|
color: #efb96e; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.extraEntry { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
padding-left: 1.2rem; |
|
|
|
|
|
|
|
padding-bottom: 0.6rem; |
|
|
|
|
|
|
|
height: v-bind('height'); |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
|
|
&>div { |
|
|
|
div { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&>div { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.button { |
|
|
|
|
|
|
|
border: 0; |
|
|
|
|
|
|
|
width: 80%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.button { |
|
|
|
|
|
|
|
border: 0; |
|
|
|
|
|
|
|
width: 80%; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.reforge-tip { |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
height: v-bind('height'); |
|
|
|
|
|
|
|
color: #68d5ed; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
.red { |
|
|
|
|
|
|
|
color: red !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.reforge-tip { |
|
|
|
.btn-group { |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
flex-direction: column; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
justify-content: center; |
|
|
|
height: v-bind('height'); |
|
|
|
} |
|
|
|
color: #68d5ed; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.red { |
|
|
|
@media only screen and (max-width: 768px) { |
|
|
|
color: red !important; |
|
|
|
.reforge { |
|
|
|
} |
|
|
|
width: 23rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn-group { |
|
|
|
.extraEntry { |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
font-size: 1rem; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
