2022-11-19 11:30:14 +08:00
|
|
|
<template>
|
|
|
|
<div id="critical-main">
|
|
|
|
<div id="critical">
|
|
|
|
<div class="des">加攻伤害</div>
|
|
|
|
<canvas ref="critical" class="chart"></canvas>
|
|
|
|
<div class="slider-div">
|
2022-12-30 11:06:46 +08:00
|
|
|
<span>加攻次数 {{ addAtk }}</span>
|
2022-11-19 11:30:14 +08:00
|
|
|
<a-slider
|
|
|
|
class="slider"
|
|
|
|
v-model:value="addAtk"
|
2023-01-04 10:29:01 +08:00
|
|
|
:max="ceil((originCri.at(-1)?.[0] ?? 2) / ratio) - 1"
|
2022-11-19 11:30:14 +08:00
|
|
|
></a-slider>
|
|
|
|
<span
|
|
|
|
>最大值 {{
|
2023-01-04 10:29:01 +08:00
|
|
|
ceil((originCri.at(-1)?.[0] ?? 2) / ratio) - 1
|
2022-11-19 11:30:14 +08:00
|
|
|
}}</span
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<a-divider
|
|
|
|
dashed
|
|
|
|
style="width: 100%; border-color: #ddd4; margin: 1vh 0 1vh 0"
|
|
|
|
></a-divider>
|
|
|
|
<div id="def">
|
|
|
|
<div class="des">加防伤害</div>
|
|
|
|
<canvas ref="def" class="chart"></canvas>
|
|
|
|
<div class="slider-div">
|
2022-12-30 11:06:46 +08:00
|
|
|
<span>加防次数 {{ addDef }}</span>
|
2022-11-19 11:30:14 +08:00
|
|
|
<a-slider
|
|
|
|
class="slider"
|
|
|
|
v-model:value="addDef"
|
2023-01-04 10:29:01 +08:00
|
|
|
:max="ceil((originDef.at(-1)?.[0] ?? 2) / ratio) - 1"
|
2022-11-19 11:30:14 +08:00
|
|
|
></a-slider>
|
|
|
|
<span
|
|
|
|
>最大值 {{
|
2023-01-04 10:29:01 +08:00
|
|
|
ceil((originDef.at(-1)?.[0] ?? 2) / ratio) - 1
|
2022-11-19 11:30:14 +08:00
|
|
|
}}</span
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="now-damage">
|
2022-11-19 18:15:42 +08:00
|
|
|
<div>
|
|
|
|
<span
|
|
|
|
>当前加攻{{
|
|
|
|
isMobile ? '' : ' '
|
|
|
|
}}</span
|
|
|
|
>
|
|
|
|
<span>{{ format(addAtk * ratio) }}</span>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<span
|
|
|
|
>当前加防{{
|
|
|
|
isMobile ? '' : ' '
|
|
|
|
}}</span
|
|
|
|
>
|
|
|
|
<span>{{ format(addDef * ratio) }}</span>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<span
|
|
|
|
>当前减伤{{
|
|
|
|
isMobile ? '' : ' '
|
|
|
|
}}</span
|
|
|
|
>
|
2022-12-28 12:13:52 +08:00
|
|
|
<span
|
|
|
|
><span style="font-family: 'Fira Code'">{{
|
2023-04-27 21:33:29 +08:00
|
|
|
(nowDamage[0] as number) < 0 && !has(enemy.damage)
|
|
|
|
? '=>'
|
|
|
|
: ''
|
2022-12-28 12:13:52 +08:00
|
|
|
}}</span
|
|
|
|
>{{
|
2023-04-27 21:33:29 +08:00
|
|
|
(nowDamage[0] as number) < 0 && !has(enemy.damage)
|
2022-12-28 12:13:52 +08:00
|
|
|
? format(-nowDamage[0])
|
|
|
|
: format(nowDamage[0])
|
|
|
|
}}</span
|
|
|
|
>
|
2022-11-19 18:15:42 +08:00
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<span
|
|
|
|
>当前伤害{{
|
|
|
|
isMobile ? '' : ' '
|
|
|
|
}}</span
|
|
|
|
>
|
|
|
|
<span>{{ format(nowDamage[1]) }}</span>
|
|
|
|
</div>
|
2022-11-19 11:30:14 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
2022-11-21 20:00:34 +08:00
|
|
|
import { getCriticalDamage, getDefDamage } from '../plugin/ui/book';
|
2022-11-19 11:30:14 +08:00
|
|
|
import Chart, { ChartConfiguration } from 'chart.js/auto';
|
|
|
|
import { has, setCanvasSize } from '../plugin/utils';
|
2022-11-19 13:07:42 +08:00
|
|
|
import { debounce } from 'lodash';
|
2022-11-19 18:15:42 +08:00
|
|
|
import { isMobile } from '../plugin/use';
|
2022-11-19 11:30:14 +08:00
|
|
|
|
2023-01-06 22:18:33 +08:00
|
|
|
const props = defineProps<{
|
|
|
|
fromBook?: boolean;
|
|
|
|
}>();
|
|
|
|
|
2022-11-19 11:30:14 +08:00
|
|
|
const critical = ref<HTMLCanvasElement>();
|
|
|
|
const def = ref<HTMLCanvasElement>();
|
|
|
|
|
|
|
|
const enemy = core.plugin.bookDetailEnemy;
|
2023-01-04 10:29:01 +08:00
|
|
|
const ceil = Math.ceil;
|
2022-11-19 11:30:14 +08:00
|
|
|
|
2023-01-06 22:26:58 +08:00
|
|
|
const x = ref(props.fromBook ? void 0 : flags.mouseLoc[0]);
|
|
|
|
const y = ref(props.fromBook ? void 0 : flags.mouseLoc[1]);
|
2023-01-06 22:42:46 +08:00
|
|
|
x.value = has(x.value)
|
|
|
|
? Math.round(x.value + core.bigmap.offsetX / 32)
|
|
|
|
: void 0;
|
|
|
|
y.value = has(y.value)
|
|
|
|
? Math.round(y.value + core.bigmap.offsetY / 32)
|
|
|
|
: void 0;
|
2023-01-06 22:26:58 +08:00
|
|
|
|
|
|
|
let originCri = getCriticalDamage(enemy, 0, 0, x.value, y.value);
|
|
|
|
let originDef = getDefDamage(enemy, 0, 0, x.value, y.value);
|
2022-11-19 11:30:14 +08:00
|
|
|
|
|
|
|
// 当前数据
|
|
|
|
const allCri = ref(originCri);
|
|
|
|
const allDef = ref(originDef);
|
|
|
|
|
|
|
|
// 加攻加防数量
|
|
|
|
const addAtk = ref(0);
|
|
|
|
const addDef = ref(0);
|
|
|
|
|
2023-01-09 20:36:40 +08:00
|
|
|
const originDamage = core.getDamageInfo(enemy.id, void 0, x.value, y.value);
|
2022-11-19 11:30:14 +08:00
|
|
|
|
|
|
|
// 转发core上的内容至当前作用域
|
|
|
|
const format = core.formatBigNumber;
|
|
|
|
const ratio = core.status.thisMap.ratio;
|
|
|
|
|
|
|
|
const nowDamage = computed(() => {
|
2023-01-06 22:26:58 +08:00
|
|
|
const dam = core.getDamageInfo(
|
2023-01-09 20:36:40 +08:00
|
|
|
enemy.id,
|
2023-01-06 22:26:58 +08:00
|
|
|
{
|
|
|
|
atk: core.getStatus('atk') + addAtk.value * ratio,
|
|
|
|
def: core.getStatus('def') + addDef.value * ratio
|
|
|
|
},
|
|
|
|
x.value,
|
|
|
|
y.value
|
|
|
|
);
|
2022-11-19 11:30:14 +08:00
|
|
|
if (!has(dam)) return ['???', '???'];
|
|
|
|
if (!has(originDamage)) return [-dam.damage, dam.damage];
|
|
|
|
return [originDamage.damage - dam.damage, dam.damage];
|
|
|
|
});
|
|
|
|
|
|
|
|
function generateChart(ele: HTMLCanvasElement, data: [number, number][]) {
|
2023-01-11 11:06:04 +08:00
|
|
|
Chart.defaults.color = '#aaa';
|
2022-11-19 11:30:14 +08:00
|
|
|
const config: ChartConfiguration = {
|
|
|
|
type: 'line',
|
2022-11-19 13:07:42 +08:00
|
|
|
data: generateData(data),
|
|
|
|
options: {
|
|
|
|
elements: {
|
|
|
|
point: {
|
|
|
|
radius: 5,
|
|
|
|
hoverRadius: 7
|
2023-01-02 23:30:30 +08:00
|
|
|
},
|
|
|
|
line: {
|
|
|
|
borderJoinStyle: 'round'
|
2022-11-19 13:07:42 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
scales: {
|
|
|
|
y: {
|
|
|
|
grid: {
|
|
|
|
color: '#ddd3'
|
|
|
|
}
|
|
|
|
}
|
2022-11-19 18:15:42 +08:00
|
|
|
},
|
|
|
|
plugins: {
|
|
|
|
legend: {
|
|
|
|
display: false
|
|
|
|
}
|
2022-11-19 13:07:42 +08:00
|
|
|
}
|
|
|
|
}
|
2022-11-19 11:30:14 +08:00
|
|
|
};
|
|
|
|
return new Chart(ele, config);
|
|
|
|
}
|
|
|
|
|
2022-11-19 13:07:42 +08:00
|
|
|
/**
|
|
|
|
* 生成图表数据
|
|
|
|
* @param data 数据
|
|
|
|
*/
|
2022-11-21 20:00:34 +08:00
|
|
|
function generateData(data: [number, number][]): ChartConfiguration['data'] {
|
2022-11-19 11:30:14 +08:00
|
|
|
return {
|
|
|
|
datasets: [
|
|
|
|
{
|
2022-11-21 20:00:34 +08:00
|
|
|
data: data.map(v => v[1]),
|
|
|
|
label: '怪物伤害'
|
2022-11-19 11:30:14 +08:00
|
|
|
}
|
|
|
|
],
|
2022-11-19 13:07:42 +08:00
|
|
|
labels: data.map(v => Math.round(v[0] / ratio))
|
2022-11-19 11:30:14 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2022-11-19 13:07:42 +08:00
|
|
|
const update = debounce((atk: Chart, def: Chart) => {
|
|
|
|
allCri.value = getCriticalDamage(
|
|
|
|
enemy,
|
|
|
|
addAtk.value * ratio,
|
2023-01-06 22:18:33 +08:00
|
|
|
addDef.value * ratio,
|
2023-01-06 22:26:58 +08:00
|
|
|
x.value,
|
|
|
|
y.value
|
2022-11-19 13:07:42 +08:00
|
|
|
);
|
|
|
|
allDef.value = getDefDamage(
|
|
|
|
enemy,
|
|
|
|
addDef.value * ratio,
|
2023-01-06 22:18:33 +08:00
|
|
|
addAtk.value * ratio,
|
2023-01-06 22:26:58 +08:00
|
|
|
x.value,
|
|
|
|
y.value
|
2022-11-19 13:07:42 +08:00
|
|
|
);
|
|
|
|
if (allCri.value.length > originCri.length) originCri = allCri.value;
|
|
|
|
if (allDef.value.length > originDef.length) originDef = allDef.value;
|
2022-11-19 11:30:14 +08:00
|
|
|
|
|
|
|
atk.data = generateData(allCri.value);
|
|
|
|
def.data = generateData(allDef.value);
|
|
|
|
atk.update('resize');
|
|
|
|
def.update('resize');
|
2022-11-19 13:07:42 +08:00
|
|
|
}, 200);
|
2022-11-19 11:30:14 +08:00
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
const div = document.getElementById('critical-main') as HTMLDivElement;
|
|
|
|
const style = getComputedStyle(div);
|
|
|
|
|
|
|
|
const width = parseFloat(style.width);
|
|
|
|
const height = window.innerHeight / 5;
|
|
|
|
const c = critical.value!;
|
|
|
|
const d = def.value!;
|
|
|
|
|
|
|
|
setCanvasSize(c, width, height);
|
|
|
|
setCanvasSize(d, width, height);
|
|
|
|
|
|
|
|
const criChart = generateChart(c, allCri.value);
|
|
|
|
const defChart = generateChart(d, allDef.value);
|
|
|
|
|
|
|
|
watch(addAtk, n => {
|
|
|
|
update(criChart, defChart);
|
|
|
|
});
|
|
|
|
|
|
|
|
watch(addDef, n => {
|
|
|
|
update(criChart, defChart);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
#critical-main {
|
|
|
|
width: 100%;
|
|
|
|
height: 50vh;
|
|
|
|
user-select: none;
|
2022-12-31 19:49:43 +08:00
|
|
|
position: absolute;
|
|
|
|
top: 20vh;
|
2022-11-19 11:30:14 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.des {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 2.5vh;
|
|
|
|
}
|
|
|
|
|
|
|
|
.slider-div {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
span {
|
|
|
|
font-size: 1.1vw;
|
|
|
|
line-height: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.slider {
|
|
|
|
width: 80%;
|
|
|
|
}
|
|
|
|
|
|
|
|
#now-damage {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-around;
|
|
|
|
font-size: 3vh;
|
|
|
|
}
|
2022-11-19 18:15:42 +08:00
|
|
|
|
|
|
|
@media screen and (max-width: 600px) {
|
|
|
|
#now-damage {
|
|
|
|
font-size: 3vw;
|
|
|
|
|
|
|
|
div {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.slider {
|
|
|
|
width: 60%;
|
|
|
|
}
|
2022-12-31 19:49:43 +08:00
|
|
|
|
|
|
|
#critical-main {
|
|
|
|
position: absolute;
|
|
|
|
top: 25vh;
|
|
|
|
width: 90vw;
|
|
|
|
}
|
2023-04-27 21:33:29 +08:00
|
|
|
|
|
|
|
.slider-div span {
|
|
|
|
font-size: 1.5vh;
|
|
|
|
}
|
2022-11-19 18:15:42 +08:00
|
|
|
}
|
2022-11-19 11:30:14 +08:00
|
|
|
</style>
|