|
|
|
@ -1,32 +1,27 @@
@@ -1,32 +1,27 @@
|
|
|
|
|
<template> |
|
|
|
|
<Tooltip :infos="[t('rebornMenu.0'), t('rebornMenu.1')]" width="12rem"> |
|
|
|
|
<Tooltip :infos="[t('menu')]" width="12rem"> |
|
|
|
|
<img class="menu-img" :src="menu_icons.reborn" @click="showMenu"> |
|
|
|
|
</Tooltip> |
|
|
|
|
|
|
|
|
|
<Dialog :title="t('rebornMenu.0')" v-model="showReborn" top="4rem" :left="state.mobile ? '4%' : '8%'" |
|
|
|
|
padding="0.7rem"> |
|
|
|
|
<Dialog :title="t('menu')" v-model="showReborn" top="4rem" :left="state.mobile ? '4%' : '8%'" padding="0.7rem"> |
|
|
|
|
<div class="message"> |
|
|
|
|
<p>{{ t('canGetPoint') + getPoints }}</p> |
|
|
|
|
<div class="tips"> |
|
|
|
|
<p>- {{ t('rebornDesc.0') }}</p> |
|
|
|
|
<p>- {{ t('rebornDesc.1') }}</p> |
|
|
|
|
<p>- {{ t('rebornDesc.2') }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class='btn-div'> |
|
|
|
|
<button class="button" @click="reborn">{{ t('rebornConfirm') }}</button> |
|
|
|
|
<p>- {{ t('desc.0') }}</p> |
|
|
|
|
<p>- {{ t('desc.1') }}</p> |
|
|
|
|
<p>- {{ t('desc.2') }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reborn"> |
|
|
|
|
<div class="points"> |
|
|
|
|
<div class="info"> |
|
|
|
|
<p>{{ t('rebornNum.0') }} :{{ rebornPoints.count }}次</p> |
|
|
|
|
<p>{{ t('rebornNum.1') }} :{{ rebornPoints.points }}</p> |
|
|
|
|
<p>{{ t('total') }} :{{ points.total }}</p> |
|
|
|
|
<p>{{ t('has') }} :{{ points.has }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="attributes"> |
|
|
|
|
<div class="attribute" v-for="attr in reborn_arrts" :key="attr"> |
|
|
|
|
<div class="attribute" v-for="attr in piont_arrts" :key="attr"> |
|
|
|
|
<p> |
|
|
|
|
<img :src="attr_icon_urls[attr]"> |
|
|
|
|
<span> |
|
|
|
|
{{ t(attr + '.0') }}:+{{ rebornAttribute[attr] }} |
|
|
|
|
{{ t1(attr + '.0') }}:+{{ baseAttribute[attr] }} |
|
|
|
|
{{ attr_unitys[attr] }} |
|
|
|
|
</span> |
|
|
|
|
</p> |
|
|
|
@ -35,7 +30,7 @@
@@ -35,7 +30,7 @@
|
|
|
|
|
<button class="button" @mousedown="mousedown(-1, attr, $event)" |
|
|
|
|
@touchstart="touchstart(-1, attr)" @touchend="touchend(-1)">-</button> |
|
|
|
|
</Tooltip> |
|
|
|
|
<input type="number" min="0" disabled v-model="rebornPoints[attr]"> |
|
|
|
|
<input type="number" min="0" disabled v-model="points[attr]"> |
|
|
|
|
<Tooltip :infos="[t('addPoints')]" width="10rem"> |
|
|
|
|
<button class="button" @mousedown="mousedown(1, attr, $event)" |
|
|
|
|
@touchstart="touchstart(1, attr)" @touchend="touchend(1)">+</button> |
|
|
|
@ -45,52 +40,29 @@
@@ -45,52 +40,29 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</Dialog> |
|
|
|
|
|
|
|
|
|
<Confirm ref="confirm" width="10rem" :tip="t('rebornComfirm.0').replace('${points}', getPoints + '')" |
|
|
|
|
:confirm="t('rebornComfirm.1')" :cancel="t('rebornComfirm.2')" @confirm="confirmReborn" /> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { useStore } from "vuex"; |
|
|
|
|
import { computed, onBeforeUnmount, onMounted, ref } from "vue"; |
|
|
|
|
import { reactive, onMounted, ref, computed, onBeforeUnmount } from "vue"; |
|
|
|
|
import { useI18n } from "vue3-i18n"; |
|
|
|
|
import { Tooltip, Dialog, Confirm } from "@/components" |
|
|
|
|
import { getPointsOfReborn } from "@/tool"; |
|
|
|
|
import { menu_icons, reborn_arrts, attr_icon_urls, attr_unitys, backpack_num } from "@/config"; |
|
|
|
|
import { menu_icons, piont_arrts, attr_icon_urls, attr_unitys, backpack_num } from "@/config"; |
|
|
|
|
import { createt } from "@/config/i18n"; |
|
|
|
|
|
|
|
|
|
const { t } = useI18n(); |
|
|
|
|
const t = createt('point.'); |
|
|
|
|
const t1 = useI18n().t; |
|
|
|
|
const { state, commit, dispatch } = useStore(); |
|
|
|
|
const showReborn = computed(() => { |
|
|
|
|
return state.curMenu == 'reborn'; |
|
|
|
|
return state.curMenu == 'point'; |
|
|
|
|
}); |
|
|
|
|
const getPoints = computed(() => { |
|
|
|
|
return getPointsOfReborn(state.playerAttribute); |
|
|
|
|
const points = computed(() => { |
|
|
|
|
return state.points; |
|
|
|
|
}) |
|
|
|
|
const rebornPoints = computed(() => { |
|
|
|
|
return state.rebornPoints; |
|
|
|
|
const baseAttribute = computed(() => { |
|
|
|
|
return state.baseAttribute; |
|
|
|
|
}) |
|
|
|
|
const rebornAttribute = computed(() => { |
|
|
|
|
return state.rebornAttribute; |
|
|
|
|
}) |
|
|
|
|
const confirm = ref(); |
|
|
|
|
|
|
|
|
|
const reborn = (e) => { |
|
|
|
|
if (state.playerAttribute.lv <= 30) { |
|
|
|
|
commit("set_sys_info", { msg: t('rebornLvTip'), type: 'warning' }); |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
confirm.value.open(0, e) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const confirmReborn = () => { |
|
|
|
|
const points = getPoints.value; |
|
|
|
|
rebornPoints.value.count++; |
|
|
|
|
rebornPoints.value.points += points; |
|
|
|
|
dispatch('reset_player_equi') |
|
|
|
|
commit('set_player_coins', 0) |
|
|
|
|
commit('set_backpack', new Array(backpack_num)) |
|
|
|
|
} |
|
|
|
|
const arrts = ['hp', 'atk', 'crit', 'critDmg', 'def', 'bloc', 'moveSpeed', 'battleSpeed']; |
|
|
|
|
|
|
|
|
|
let flag = false; |
|
|
|
|
let curAttr = ''; |
|
|
|
@ -136,9 +108,8 @@ const mouseup = (e) => {
@@ -136,9 +108,8 @@ const mouseup = (e) => {
|
|
|
|
|
|
|
|
|
|
const changeAttribute = () => { |
|
|
|
|
if (flag) { |
|
|
|
|
debugger |
|
|
|
|
const rp = rebornPoints.value; |
|
|
|
|
const point = rp.points; |
|
|
|
|
const rp = points.value; |
|
|
|
|
const point = rp.has; |
|
|
|
|
const oldPoint = rp[curAttr]; |
|
|
|
|
let num = 0; |
|
|
|
|
if (curNum > 0 && point > 0) { |
|
|
|
@ -148,14 +119,15 @@ const changeAttribute = () => {
@@ -148,14 +119,15 @@ const changeAttribute = () => {
|
|
|
|
|
} |
|
|
|
|
if (num != 0) { |
|
|
|
|
rp[curAttr] = oldPoint + num; |
|
|
|
|
rp.points = point - num; |
|
|
|
|
commit('set_reborn_points', rp) |
|
|
|
|
rp.has = point - num; |
|
|
|
|
commit('set_points', rp) |
|
|
|
|
} |
|
|
|
|
setTimeout(changeAttribute, 100); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const showMenu = () => { |
|
|
|
|
state.curMenu = showReborn.value ? null : 'reborn'; |
|
|
|
|
state.curMenu = showReborn.value ? null : 'point'; |
|
|
|
|
} |
|
|
|
|
const keydown = (e) => { |
|
|
|
|
if (e.keyCode == 82 && !e.ctrlKey) { |
|
|
|
@ -165,7 +137,6 @@ const keydown = (e) => {
@@ -165,7 +137,6 @@ const keydown = (e) => {
|
|
|
|
|
onMounted(() => { |
|
|
|
|
document.addEventListener('keydown', keydown) |
|
|
|
|
document.addEventListener('mouseup', mouseup) |
|
|
|
|
state.rebornPoints.points = 100; |
|
|
|
|
}); |
|
|
|
|
onBeforeUnmount(() => { |
|
|
|
|
document.removeEventListener('keydown', keydown) |
|
|
|
@ -173,10 +144,6 @@ onBeforeUnmount(() => {
@@ -173,10 +144,6 @@ onBeforeUnmount(() => {
|
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
* { |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.message { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
@ -189,6 +156,7 @@ onBeforeUnmount(() => {
@@ -189,6 +156,7 @@ onBeforeUnmount(() => {
|
|
|
|
|
|
|
|
|
|
.tips { |
|
|
|
|
padding-left: 1.3rem; |
|
|
|
|
text-align: left; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
color: #999; |
|
|
|
@ -196,17 +164,9 @@ onBeforeUnmount(() => {
@@ -196,17 +164,9 @@ onBeforeUnmount(() => {
|
|
|
|
|
margin: 0rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.btn-div { |
|
|
|
|
padding: 0.1rem; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
padding-right: 2rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.reborn { |
|
|
|
|
.points { |
|
|
|
|
padding: 0.1rem; |
|
|
|
|
width: 32rem; |
|
|
|
|
|
|
|
|
@ -215,7 +175,6 @@ onBeforeUnmount(() => {
@@ -215,7 +175,6 @@ onBeforeUnmount(() => {
|
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.attributes { |
|
|
|
@ -254,61 +213,4 @@ onBeforeUnmount(() => {
@@ -254,61 +213,4 @@ onBeforeUnmount(() => {
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 768px) { |
|
|
|
|
|
|
|
|
|
.message { |
|
|
|
|
padding-bottom: 0.5rem; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
margin: 0.5rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tips { |
|
|
|
|
padding-left: 0.8rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.btn-div { |
|
|
|
|
padding: 0rem; |
|
|
|
|
padding-right: 1rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.reborn { |
|
|
|
|
padding: 0.1rem; |
|
|
|
|
width: 23.5rem; |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
padding: 0.2rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.attributes { |
|
|
|
|
padding: 0.05rem 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.attribute { |
|
|
|
|
padding: 0.2rem 0rem; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
margin-left: 0.2rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.group { |
|
|
|
|
|
|
|
|
|
input { |
|
|
|
|
width: 4rem; |
|
|
|
|
color: black; |
|
|
|
|
height: 1.8rem; |
|
|
|
|
font-size: 0.8rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |