AzenKain
91ce8320d1
All checks were successful
Gitea Auto Deploy / Deploy-Container (push) Successful in 1m54s
276 lines
14 KiB
TypeScript
276 lines
14 KiB
TypeScript
"use client"
|
|
import { useEffect, useMemo } from "react";
|
|
import SelectCustomText from "../select/customSelectText";
|
|
import useEventStore from "@/stores/eventStore";
|
|
import { getLocaleName, replaceByParam } from "@/helper";
|
|
import useLocaleStore from "@/stores/localeStore";
|
|
import useUserDataStore from "@/stores/userDataStore";
|
|
import useMonsterStore from "@/stores/monsterStore";
|
|
import Image from "next/image";
|
|
import cloneDeep from 'lodash/cloneDeep'
|
|
import { useTranslations } from "next-intl";
|
|
import { MonsterStore } from "@/types";
|
|
|
|
export default function PeakBar() {
|
|
const { PEAKEvent, mapPEAKInfo } = useEventStore()
|
|
const { listMonster } = useMonsterStore()
|
|
const { locale } = useLocaleStore()
|
|
const {
|
|
peak_config,
|
|
setPeakConfig
|
|
} = useUserDataStore()
|
|
|
|
const transI18n = useTranslations("DataPage")
|
|
|
|
const listFloor = useMemo(() => {
|
|
if (!mapPEAKInfo?.[peak_config?.event_id?.toString()]) return []
|
|
return [
|
|
...mapPEAKInfo[peak_config?.event_id?.toString()]?.PreLevel,
|
|
mapPEAKInfo[peak_config?.event_id?.toString()]?.BossLevel,
|
|
]
|
|
}, [peak_config, mapPEAKInfo])
|
|
|
|
const eventSelected = useMemo(() => {
|
|
return mapPEAKInfo?.[peak_config?.event_id?.toString()]
|
|
}, [peak_config, mapPEAKInfo])
|
|
|
|
const bossConfig = useMemo(() => {
|
|
return mapPEAKInfo?.[peak_config?.event_id?.toString()]?.BossConfig;
|
|
}, [peak_config, mapPEAKInfo])
|
|
|
|
const challengeSelected = useMemo(() => {
|
|
const challenge = cloneDeep(listFloor.find((peak) => peak.Id === peak_config.challenge_id))
|
|
if (
|
|
challenge
|
|
&& challenge.Id === mapPEAKInfo?.[peak_config?.event_id?.toString()]?.BossLevel?.Id
|
|
&& bossConfig
|
|
&& peak_config?.boss_mode === "Hard"
|
|
) {
|
|
challenge.Name = bossConfig.HardName
|
|
challenge.EventIDList = bossConfig.EventIDList
|
|
challenge.InfiniteList = bossConfig.InfiniteList
|
|
challenge.TagList = bossConfig.TagList
|
|
}
|
|
return challenge
|
|
}, [peak_config, listFloor, mapPEAKInfo, bossConfig])
|
|
|
|
useEffect(() => {
|
|
if (!challengeSelected) return
|
|
if (peak_config.event_id !== 0 && peak_config.challenge_id !== 0 && challengeSelected) {
|
|
const newBattleConfig = cloneDeep(peak_config)
|
|
newBattleConfig.cycle_count = 6
|
|
newBattleConfig.blessings = []
|
|
for (const value of challengeSelected.TagList) {
|
|
newBattleConfig.blessings.push({
|
|
id: Number(value.Id),
|
|
level: 1
|
|
})
|
|
}
|
|
if (peak_config.buff_id !== 0) {
|
|
newBattleConfig.blessings.push({
|
|
id: peak_config.buff_id,
|
|
level: 1
|
|
})
|
|
}
|
|
newBattleConfig.monsters = []
|
|
newBattleConfig.stage_id = challengeSelected.EventIDList[0].StageID
|
|
for (const wave of challengeSelected.EventIDList[0].MonsterList) {
|
|
if (!wave) continue
|
|
const newWave: MonsterStore[] = []
|
|
for (const value of Object.values(wave)) {
|
|
if (!value) continue
|
|
newWave.push({
|
|
monster_id: Number(value),
|
|
level: challengeSelected.EventIDList[0].Level,
|
|
amount: 1,
|
|
})
|
|
}
|
|
newBattleConfig.monsters.push(newWave)
|
|
}
|
|
|
|
setPeakConfig(newBattleConfig)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [
|
|
peak_config.event_id,
|
|
peak_config.challenge_id,
|
|
peak_config.buff_id,
|
|
mapPEAKInfo,
|
|
])
|
|
|
|
if (!PEAKEvent) return null
|
|
|
|
return (
|
|
<div className="py-8 relative">
|
|
|
|
{/* Title Card */}
|
|
<div className="rounded-xl p-4 mb-2 border border-warning">
|
|
<div className="mb-4 w-full">
|
|
<SelectCustomText
|
|
customSet={PEAKEvent.map((peak) => ({
|
|
id: peak.id,
|
|
name: `${getLocaleName(locale, peak)} (${peak.id}) `,
|
|
}))}
|
|
excludeSet={[]}
|
|
selectedCustomSet={peak_config.event_id.toString()}
|
|
placeholder={transI18n("selectPEAKEvent")}
|
|
setSelectedCustomSet={(id) => setPeakConfig({ ...peak_config, event_id: Number(id), challenge_id: 0, buff_id: 0 })}
|
|
/>
|
|
</div>
|
|
{/* Settings */}
|
|
<div className={
|
|
`grid grid-cols-1
|
|
${eventSelected && eventSelected.BossLevel.Id === peak_config.challenge_id ? "md:grid-cols-2" : ""}
|
|
gap-4 mb-4 justify-items-center items-center w-full`}
|
|
>
|
|
|
|
<div className="flex items-center gap-2 w-full">
|
|
<label className="label">
|
|
<span className="label-text font-bold text-success">{transI18n("floor")}:{" "}</span>
|
|
</label>
|
|
<select
|
|
value={peak_config.challenge_id}
|
|
className="select select-success w-full"
|
|
onChange={(e) => setPeakConfig({ ...peak_config, challenge_id: Number(e.target.value) })}
|
|
>
|
|
<option value={0} disabled={true}>{transI18n("selectFloor")}</option>
|
|
{listFloor.map((peak) => (
|
|
<option key={peak.Id} value={peak.Id}>{peak.Name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
{eventSelected && eventSelected.BossLevel.Id === peak_config.challenge_id && (
|
|
<div className="flex items-center gap-2 w-full">
|
|
<label className="label">
|
|
<span className="label-text font-bold text-success">{transI18n("mode")}:{" "}</span>
|
|
</label>
|
|
<select
|
|
value={peak_config.boss_mode}
|
|
className="select select-success w-full"
|
|
onChange={(e) => setPeakConfig({ ...peak_config, boss_mode: e.target.value })}
|
|
>
|
|
<option value={0} disabled={true}>{transI18n("selectSide")}</option>
|
|
<option value="Normal">{transI18n("normalMode")}</option>
|
|
<option value="Hard">{transI18n("hardMode")}</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
{
|
|
eventSelected
|
|
&& eventSelected.BossLevel.Id === peak_config.challenge_id
|
|
&& bossConfig
|
|
&& bossConfig.BuffList
|
|
&& (
|
|
<div className="mb-4 w-full">
|
|
<SelectCustomText
|
|
customSet={
|
|
Array.isArray(bossConfig.BuffList)
|
|
? bossConfig.BuffList.map((buff) => ({
|
|
id: buff.Id.toString(),
|
|
name: buff?.Name || "",
|
|
description: replaceByParam(buff?.Desc || "", buff?.Param || []),
|
|
}))
|
|
: []
|
|
}
|
|
excludeSet={[]}
|
|
selectedCustomSet={peak_config?.buff_id?.toString()}
|
|
placeholder={transI18n("selectBuff")}
|
|
setSelectedCustomSet={(id) => setPeakConfig({ ...peak_config, buff_id: Number(id) })}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
{/* Turbulence Buff */}
|
|
|
|
<div className="bg-base-200/20 rounded-lg p-4 border border-purple-500/20">
|
|
<h2 className="text-2xl font-bold mb-2 text-info">
|
|
{transI18n("turbulenceBuff")}
|
|
</h2>
|
|
|
|
{challengeSelected && challengeSelected?.TagList?.length > 0 ? (
|
|
challengeSelected.TagList.map((subOption, index) => (
|
|
<div key={index}>
|
|
<label className="label">
|
|
<span className="label-text font-bold text-success">
|
|
{index + 1}. {subOption.Name}
|
|
</span>
|
|
</label>
|
|
<div
|
|
className="text-base"
|
|
dangerouslySetInnerHTML={{
|
|
__html: replaceByParam(
|
|
subOption.Desc,
|
|
subOption.Param || []
|
|
)
|
|
}}
|
|
/>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-base">{transI18n("noTurbulenceBuff")}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enemy Waves */}
|
|
|
|
{(peak_config?.challenge_id ?? 0) !== 0 && (
|
|
<div className="grid grid-cols-1 gap-4">
|
|
|
|
<div className="rounded-xl p-4 mt-2 border border-warning">
|
|
<h2 className="text-2xl font-bold mb-6 text-info">{challengeSelected?.Name}</h2>
|
|
|
|
{challengeSelected && Object.values(challengeSelected.InfiniteList).map((waveValue, waveIndex) => (
|
|
<div key={waveIndex} className="mb-6">
|
|
<h3 className="text-lg font-semibold mb-t">{transI18n("wave")} {waveIndex + 1}</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{Array.from(new Set(waveValue.MonsterGroupIDList)).map((monsterId, enemyIndex) => (
|
|
<div
|
|
key={enemyIndex}
|
|
className="rounded-xl p-2 border border-white/10 shadow-md hover:border-white/20 hover:shadow-lg transition"
|
|
>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<div className="relative w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border border-white/10 shadow-sm">
|
|
{listMonster.find((monster) => monster.child.includes(monsterId))?.icon && <Image
|
|
src={`https://api.hakush.in/hsr/UI/monstermiddleicon/${listMonster.find((monster) => monster.child.includes(monsterId))?.icon?.split("/")?.pop()?.replace(".png", "")}.webp`}
|
|
alt="Enemy Icon"
|
|
width={376}
|
|
height={512}
|
|
className="w-full h-full object-cover"
|
|
/>}
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<div className="text-sm font-semibold">Lv. {challengeSelected?.EventIDList[0].Level}</div>
|
|
<div className="flex items-center space-x-1 mt-1">
|
|
{listMonster
|
|
.find((monster) => monster.child.includes(monsterId))
|
|
?.weak?.map((icon, iconIndex) => (
|
|
<Image
|
|
src={`/icon/${icon.toLowerCase()}.webp`}
|
|
alt={icon}
|
|
className="h-[28px] w-[28px] 2xl:h-[40px] 2xl:w-[40px] object-contain rounded-md border border-white/20 shadow-sm"
|
|
width={200}
|
|
height={200}
|
|
key={iconIndex}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
)
|
|
} |