UPDATE: Update readme and Next 16.07 (CVE-2025-66478)
This commit is contained in:
350
src/components/monsterBar/as.tsx
Normal file
350
src/components/monsterBar/as.tsx
Normal file
@@ -0,0 +1,350 @@
|
||||
"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 { MonsterStore } from "@/types";
|
||||
import useMazeStore from "@/stores/mazeStore";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { listCurrentLanguageApi } from "@/constant/constant";
|
||||
|
||||
export default function AsBar() {
|
||||
const { ASEvent, mapASInfo } = useEventStore()
|
||||
const { listMonster } = useMonsterStore()
|
||||
const { locale } = useLocaleStore()
|
||||
const {
|
||||
as_config,
|
||||
setAsConfig
|
||||
} = useUserDataStore()
|
||||
const { AS } = useMazeStore()
|
||||
|
||||
const transI18n = useTranslations("DataPage")
|
||||
const challengeSelected = useMemo(() => {
|
||||
return mapASInfo[as_config.event_id.toString()]?.Level.find((as) => as.Id === as_config.challenge_id)
|
||||
}, [as_config, mapASInfo])
|
||||
|
||||
const eventSelected = useMemo(() => {
|
||||
return mapASInfo[as_config.event_id.toString()]
|
||||
}, [as_config, mapASInfo])
|
||||
|
||||
const buffList = useMemo(() => {
|
||||
const challenge = AS[as_config.event_id.toString()];
|
||||
if (!challenge) return { buffList: [], buffId: [] };
|
||||
|
||||
if (as_config.floor_side === "Upper" || as_config.floor_side === "Upper -> Lower") {
|
||||
return {
|
||||
buffList: eventSelected?.BuffList1 ?? [],
|
||||
buffId: challenge.buff_1 ?? [],
|
||||
};
|
||||
}
|
||||
|
||||
if (as_config.floor_side === "Lower" || as_config.floor_side === "Lower -> Upper") {
|
||||
return {
|
||||
buffList: eventSelected?.BuffList2 ?? [],
|
||||
buffId: challenge.buff_2 ?? [],
|
||||
};
|
||||
}
|
||||
return { buffList: [], buffId: [] };
|
||||
}, [AS, as_config.event_id, as_config.floor_side, eventSelected?.BuffList1, eventSelected?.BuffList2]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!challengeSelected || as_config.event_id === 0 || as_config.challenge_id === 0) return
|
||||
const newBattleConfig = structuredClone(as_config)
|
||||
newBattleConfig.cycle_count = 0
|
||||
|
||||
newBattleConfig.blessings = []
|
||||
if (as_config.buff_id !== 0) {
|
||||
newBattleConfig.blessings.push({
|
||||
id: as_config.buff_id,
|
||||
level: 1
|
||||
})
|
||||
}
|
||||
if (AS[as_config.challenge_id.toString()]) {
|
||||
newBattleConfig.blessings.push({
|
||||
id: Number(AS[as_config.challenge_id.toString()].maze_buff),
|
||||
level: 1
|
||||
})
|
||||
}
|
||||
|
||||
newBattleConfig.monsters = []
|
||||
newBattleConfig.stage_id = 0
|
||||
if ((as_config.floor_side === "Upper" || as_config.floor_side === "Upper -> Lower")
|
||||
&& challengeSelected.EventIDList1.length > 0) {
|
||||
newBattleConfig.stage_id = challengeSelected.EventIDList1[0].StageID
|
||||
for (const wave of challengeSelected.EventIDList1[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challengeSelected.EventIDList1[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
if ((as_config.floor_side === "Lower" || as_config.floor_side === "Lower -> Upper")
|
||||
&& challengeSelected.EventIDList2.length > 0) {
|
||||
newBattleConfig.stage_id = challengeSelected.EventIDList2[0].StageID
|
||||
for (const wave of challengeSelected.EventIDList2[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challengeSelected.EventIDList2[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
if (as_config.floor_side === "Lower -> Upper"
|
||||
&& challengeSelected.EventIDList1.length > 0) {
|
||||
for (const wave of challengeSelected.EventIDList1[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challengeSelected.EventIDList1[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
} else if (as_config.floor_side === "Upper -> Lower"
|
||||
&& challengeSelected.EventIDList2.length > 0) {
|
||||
for (const wave of challengeSelected.EventIDList2[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challengeSelected.EventIDList2[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
setAsConfig(newBattleConfig)
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [
|
||||
challengeSelected,
|
||||
as_config.event_id,
|
||||
as_config.challenge_id,
|
||||
as_config.floor_side,
|
||||
as_config.buff_id,
|
||||
mapASInfo,
|
||||
AS,
|
||||
])
|
||||
|
||||
if (!ASEvent) 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={ASEvent.filter(as => as.lang.get(listCurrentLanguageApi[locale])).map((as) => ({
|
||||
id: as.id,
|
||||
name: getLocaleName(locale, as),
|
||||
time: `${as.begin} - ${as.end}`,
|
||||
}))}
|
||||
excludeSet={[]}
|
||||
selectedCustomSet={as_config.event_id.toString()}
|
||||
placeholder={transI18n("selectASEvent")}
|
||||
setSelectedCustomSet={(id) => setAsConfig({
|
||||
...as_config,
|
||||
event_id: Number(id),
|
||||
challenge_id: mapASInfo[Number(id)]?.Level.slice(-1)[0]?.Id || 0,
|
||||
buff_id: 0
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
{/* Settings */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-bold text-success">{transI18n("floor")}:{" "}</span>
|
||||
</label>
|
||||
<select
|
||||
value={as_config.challenge_id}
|
||||
className="select select-success"
|
||||
onChange={(e) => setAsConfig({ ...as_config, challenge_id: Number(e.target.value) })}
|
||||
>
|
||||
<option value={0} disabled={true}>{transI18n("selectFloor")}</option>
|
||||
{mapASInfo[as_config.event_id.toString()]?.Level.map((as) => (
|
||||
<option key={as.Id} value={as.Id}>{as.Id % 10}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-bold text-success">{transI18n("side")}:{" "}</span>
|
||||
</label>
|
||||
<select
|
||||
value={as_config.floor_side}
|
||||
className="select select-success"
|
||||
onChange={(e) => setAsConfig({ ...as_config, floor_side: e.target.value })}
|
||||
>
|
||||
<option value={0} disabled={true}>{transI18n("selectSide")}</option>
|
||||
<option value="Upper">{transI18n("upper")}</option>
|
||||
<option value="Lower">{transI18n("lower")}</option>
|
||||
<option value="Upper -> Lower">{transI18n("upperToLower")}</option>
|
||||
<option value="Lower -> Upper">{transI18n("lowerToUpper")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{eventSelected && (
|
||||
<div className="mb-4 w-full">
|
||||
<SelectCustomText
|
||||
customSet={
|
||||
Array.isArray(buffList?.buffList) && Array.isArray(buffList?.buffId)
|
||||
? buffList.buffList.map((buff, index) => ({
|
||||
id: buffList.buffId?.[index]?.toString() || "",
|
||||
name: buff?.Name || "",
|
||||
description: replaceByParam(buff?.Desc || "", buff?.Param || []),
|
||||
}))
|
||||
: []
|
||||
}
|
||||
excludeSet={[]}
|
||||
selectedCustomSet={as_config?.buff_id?.toString()}
|
||||
placeholder={transI18n("selectBuff")}
|
||||
setSelectedCustomSet={(id) => setAsConfig({ ...as_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>
|
||||
{eventSelected && eventSelected.Buff?.Name ? (
|
||||
<div
|
||||
className="text-base"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: replaceByParam(
|
||||
eventSelected.Buff?.Desc || "",
|
||||
eventSelected.Buff?.Param || []
|
||||
)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-base">{transI18n("noTurbulenceBuff")}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enemy Waves */}
|
||||
{(as_config?.challenge_id ?? 0) !== 0 && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* First Half */}
|
||||
<div className="rounded-xl p-4 mt-2 border border-warning">
|
||||
<h2 className="text-2xl font-bold mb-6 text-info">{transI18n("firstHalfEnemies")}</h2>
|
||||
|
||||
{challengeSelected && challengeSelected?.EventIDList1?.length > 0 && challengeSelected?.EventIDList1[0].MonsterList.map((wave, 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">
|
||||
{Object.values(wave).map((waveValue, 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(waveValue))?.icon && <Image
|
||||
src={`https://api.hakush.in/hsr/UI/monstermiddleicon/${listMonster.find((monster) => monster.child.includes(waveValue))?.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?.EventIDList1[0].Level}</div>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
{listMonster
|
||||
.find((monster) => monster.child.includes(waveValue))
|
||||
?.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>
|
||||
|
||||
{/* Second Half */}
|
||||
<div className="rounded-xl p-4 mt-2 border border-warning">
|
||||
<h2 className="text-2xl font-bold mb-6 text-info">{transI18n("secondHalfEnemies")}</h2>
|
||||
|
||||
{challengeSelected && challengeSelected?.EventIDList2?.length > 0 && challengeSelected?.EventIDList2[0].MonsterList.map((wave, 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">
|
||||
{Object.values(wave).map((waveValue, 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(waveValue))?.icon && <Image
|
||||
src={`https://api.hakush.in/hsr/UI/monstermiddleicon/${listMonster.find((monster) => monster.child.includes(waveValue))?.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?.EventIDList1[0].Level}</div>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
{listMonster
|
||||
.find((monster) => monster.child.includes(waveValue))
|
||||
?.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>
|
||||
)
|
||||
}
|
||||
558
src/components/monsterBar/ce.tsx
Normal file
558
src/components/monsterBar/ce.tsx
Normal file
@@ -0,0 +1,558 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Plus,
|
||||
Trash2,
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
Search,
|
||||
CopyPlus,
|
||||
} from "lucide-react";
|
||||
|
||||
import useMazeStore from "@/stores/mazeStore";
|
||||
import useUserDataStore from "@/stores/userDataStore";
|
||||
import useMonsterStore from "@/stores/monsterStore";
|
||||
import useLocaleStore from "@/stores/localeStore";
|
||||
import { getLocaleName } from "@/helper";
|
||||
import Image from "next/image";
|
||||
import { MonsterBasic } from "@/types";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { listCurrentLanguageApi } from "@/constant/constant";
|
||||
import useGlobalStore from "@/stores/globalStore";
|
||||
|
||||
|
||||
export default function CeBar() {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [showSearchWaveId, setShowSearchWaveId] = useState<number | null>(null);
|
||||
const { Stage } = useMazeStore()
|
||||
const { ce_config, setCeConfig } = useUserDataStore()
|
||||
const { mapMonsterInfo } = useMonsterStore()
|
||||
const { locale } = useLocaleStore()
|
||||
const transI18n = useTranslations("DataPage")
|
||||
const [showSearchStage, setShowSearchStage] = useState(false)
|
||||
const [stageSearchTerm, setStageSearchTerm] = useState("")
|
||||
const [stagePage, setStagePage] = useState(1)
|
||||
const { extraData, setExtraData } = useGlobalStore()
|
||||
|
||||
const pageSize = 30
|
||||
|
||||
const pageSizeMonsters = 30
|
||||
const [monsterPage, setMonsterPage] = useState(1)
|
||||
|
||||
const listMonsterDetail = useMemo(() => {
|
||||
const result: MonsterBasic[] = []
|
||||
|
||||
for (const monster of Object.values(mapMonsterInfo)) {
|
||||
for (const monsterChild of monster.Child) {
|
||||
result.push({
|
||||
id: monsterChild.Id.toString(),
|
||||
rank: monster.Rank,
|
||||
camp: null,
|
||||
icon: monster.ImagePath,
|
||||
weak: monsterChild.StanceWeakList,
|
||||
desc: monster.Desc,
|
||||
child: [],
|
||||
lang: new Map<string, string>([
|
||||
[listCurrentLanguageApi[locale], monster.Name],
|
||||
]),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}, [mapMonsterInfo, locale])
|
||||
|
||||
|
||||
const filteredMonsters = useMemo(() => {
|
||||
const newlistMonster = new Set<MonsterBasic>()
|
||||
for (const monster of listMonsterDetail) {
|
||||
if (getLocaleName(locale, monster).toLowerCase().includes(searchTerm.toLowerCase())) {
|
||||
newlistMonster.add(monster)
|
||||
}
|
||||
if (monster.id.toLowerCase().includes(searchTerm.toLowerCase())) {
|
||||
newlistMonster.add(monster)
|
||||
}
|
||||
}
|
||||
return Array.from(newlistMonster)
|
||||
}, [listMonsterDetail, locale, searchTerm]);
|
||||
|
||||
const paginatedMonsters = useMemo(() =>
|
||||
filteredMonsters.slice((monsterPage - 1) * pageSizeMonsters, monsterPage * pageSizeMonsters),
|
||||
[filteredMonsters, monsterPage]
|
||||
)
|
||||
|
||||
const hasMoreMonsterPages = useMemo(
|
||||
() => monsterPage * pageSizeMonsters < filteredMonsters.length,
|
||||
[monsterPage, filteredMonsters]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setMonsterPage(1) // reset về trang 1 khi searchTerm thay đổi
|
||||
}, [searchTerm])
|
||||
|
||||
const stageList = useMemo(() => Object.values(Stage).map((stage) => ({
|
||||
id: stage.stage_id.toString(),
|
||||
name: `${stage.stage_type} (${stage.stage_id})`,
|
||||
})), [Stage])
|
||||
|
||||
const filteredStages = useMemo(() => stageList.filter((s) =>
|
||||
s.name.toLowerCase().includes(stageSearchTerm.toLowerCase())
|
||||
), [stageList, stageSearchTerm])
|
||||
|
||||
const paginatedStages = useMemo(() => filteredStages.slice(
|
||||
(stagePage - 1) * pageSize,
|
||||
stagePage * pageSize
|
||||
), [filteredStages, stagePage, pageSize])
|
||||
|
||||
const hasMorePages = useMemo(() => stagePage * pageSize < filteredStages.length, [stagePage, filteredStages])
|
||||
|
||||
useEffect(() => {
|
||||
setStagePage(1)
|
||||
}, [stageSearchTerm])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!ce_config) return
|
||||
if (!extraData || !extraData.theory_craft?.mode) return
|
||||
|
||||
const newExtraData = structuredClone(extraData)
|
||||
if (!newExtraData.theory_craft.hp) {
|
||||
newExtraData.theory_craft.hp = {}
|
||||
}
|
||||
|
||||
for (let i = 0; i < ce_config.monsters.length; i++) {
|
||||
const waveKey = (i + 1).toString()
|
||||
if (!newExtraData.theory_craft.hp[waveKey]) {
|
||||
newExtraData.theory_craft.hp[waveKey] = []
|
||||
}
|
||||
for (let j = 0; j < ce_config.monsters[i].length; j++) {
|
||||
if (newExtraData.theory_craft.hp[waveKey][j] === undefined) {
|
||||
newExtraData.theory_craft.hp[waveKey][j] = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
setExtraData(newExtraData)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ce_config])
|
||||
|
||||
|
||||
return (
|
||||
<div className="z-4 py-8 h-full w-full" onClick={() => {
|
||||
|
||||
setShowSearchWaveId(null)
|
||||
setShowSearchStage(false)
|
||||
}}>
|
||||
|
||||
<div className="mb-4 w-full relative">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
|
||||
<button
|
||||
className="btn btn-outline w-full text-left flex items-center gap-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setShowSearchStage(true)
|
||||
}}
|
||||
>
|
||||
<Search className="w-6 h-6" />
|
||||
<span className="text-left"> {transI18n("stage")}: {stageList.find((s) => s.id === ce_config.stage_id.toString())?.name || transI18n("selectStage")}</span>
|
||||
</button>
|
||||
</div>
|
||||
{showSearchStage && (
|
||||
<div onClick={(e) => e.stopPropagation()} className="absolute top-full mt-2 w-full z-50 border bg-base-200 border-slate-600 rounded-lg p-4 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
|
||||
<label className="input w-full">
|
||||
<svg className="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="2.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.3-4.3"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<input
|
||||
type="search" className="grow"
|
||||
placeholder={transI18n("searchStage")}
|
||||
value={stageSearchTerm}
|
||||
onChange={(e) => setStageSearchTerm(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="max-h-60 overflow-y-auto space-y-1">
|
||||
{paginatedStages.length > 0 ? (
|
||||
<>
|
||||
{paginatedStages.map((stage) => (
|
||||
<div
|
||||
key={stage.id}
|
||||
className="p-2 hover:bg-primary/20 rounded cursor-pointer"
|
||||
onClick={() => {
|
||||
if (ce_config.stage_id !== Number(stage.id)) {
|
||||
setCeConfig({ ...ce_config, stage_id: Number(stage.id), cycle_count: 30 })
|
||||
}
|
||||
setShowSearchStage(false)
|
||||
setStageSearchTerm("")
|
||||
}}
|
||||
>
|
||||
{stage.name}
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
</>
|
||||
) : (
|
||||
<div className="text-sm text-center py-4">{transI18n("noStageFound")}</div>
|
||||
)}
|
||||
</div>
|
||||
{paginatedStages.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<button
|
||||
disabled={stagePage === 1}
|
||||
className="btn btn-sm btn-outline btn-success mt-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setStagePage(stagePage - 1)
|
||||
}}
|
||||
>
|
||||
{transI18n("previous")}
|
||||
</button>
|
||||
|
||||
<button
|
||||
disabled={!hasMorePages}
|
||||
className="btn btn-sm btn-outline btn-success mt-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setStagePage(stagePage + 1)
|
||||
}}
|
||||
>
|
||||
{transI18n("next")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto space-y-6">
|
||||
{ce_config.monsters.map((wave, waveIndex) => (
|
||||
<div key={waveIndex} className="card border border-slate-700/50 ">
|
||||
<div className="card-body p-6">
|
||||
<div className="flex items-center flex-wrap justify-between mb-4">
|
||||
<h2 className="text-xl font-bold text-white">{transI18n("wave")} {waveIndex + 1}</h2>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
disabled={waveIndex === 0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
const waves = newCeConfig.monsters
|
||||
const temp = waves[waveIndex - 1]
|
||||
waves[waveIndex - 1] = waves[waveIndex]
|
||||
waves[waveIndex] = temp
|
||||
|
||||
setCeConfig(newCeConfig)
|
||||
}}
|
||||
className="btn btn-sm btn-success"
|
||||
>
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
disabled={waveIndex === ce_config.monsters.length - 1}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
const waves = newCeConfig.monsters
|
||||
const temp = waves[waveIndex + 1]
|
||||
waves[waveIndex + 1] = waves[waveIndex]
|
||||
waves[waveIndex] = temp
|
||||
|
||||
setCeConfig(newCeConfig)
|
||||
}}
|
||||
className="btn btn-sm btn-success">
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
const waves = newCeConfig.monsters
|
||||
const temp = waves[waveIndex]
|
||||
newCeConfig.monsters.push([...temp])
|
||||
setCeConfig(newCeConfig)
|
||||
}}
|
||||
className="btn btn-sm btn-success">
|
||||
<CopyPlus className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
newCeConfig.monsters.splice(waveIndex, 1)
|
||||
setCeConfig(newCeConfig)
|
||||
}}
|
||||
className="btn btn-sm btn-error">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 w-full h-full">
|
||||
{wave.map((member, memberIndex) => (
|
||||
<div key={memberIndex} className="relative group z-7 w-full h-full">
|
||||
<div className="card border hover:border-slate-500 transition-colors w-full h-full">
|
||||
<div className="card-body p-4">
|
||||
<button
|
||||
className="btn btn-xs btn-success absolute -top-2 right-12 opacity-50 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => {
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
|
||||
newCeConfig.monsters[waveIndex].push({
|
||||
monster_id: Number(member.monster_id),
|
||||
level: member.level,
|
||||
amount: member.amount,
|
||||
})
|
||||
setCeConfig(newCeConfig)
|
||||
}}
|
||||
>
|
||||
<CopyPlus className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-error absolute -top-2 right-2 opacity-50 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => {
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
newCeConfig.monsters[waveIndex].splice(memberIndex, 1)
|
||||
setCeConfig(newCeConfig)
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
|
||||
<div className="flex justify-center">
|
||||
{listMonsterDetail.find((monster2) => monster2.id === member.monster_id.toString())?.icon && <Image
|
||||
src={`https://api.hakush.in/hsr/UI/monstermiddleicon/${listMonsterDetail.find((monster2) => monster2.id === member.monster_id.toString())?.icon?.split("/")?.pop()?.replace(".png", "")}.webp`}
|
||||
alt="Enemy Icon"
|
||||
width={376}
|
||||
height={512}
|
||||
className=" object-contain w-20 h-20 overflow-hidden"
|
||||
/>}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-1 mb-2">
|
||||
{listMonsterDetail
|
||||
.find((monster) => monster.id === member.monster_id.toString())
|
||||
?.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 className="text-center flex flex-col items-center justify-center">
|
||||
<div className="text-sm font-medium">
|
||||
{getLocaleName(locale, listMonsterDetail.find((monster) => monster.id === member.monster_id.toString()))} {`(${member.monster_id})`}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 mt-1 mx-2">
|
||||
<span className="text-sm">LV.</span>
|
||||
<input
|
||||
type="number"
|
||||
className="text-center input input-sm"
|
||||
value={member.level}
|
||||
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value)
|
||||
if (isNaN(val) || val < 1 || val > 95) return
|
||||
if (ce_config.monsters[waveIndex][memberIndex].level === val) return
|
||||
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
newCeConfig.monsters[waveIndex][memberIndex].level = val
|
||||
setCeConfig(newCeConfig)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{(extraData?.theory_craft?.mode === true && (
|
||||
<div className="flex items-center gap-1 mt-1 mx-2">
|
||||
<span className="text-sm">HP</span>
|
||||
<input
|
||||
type="number"
|
||||
className="text-center input input-sm"
|
||||
value={extraData?.theory_craft?.hp?.[(waveIndex + 1).toString()]?.[memberIndex] || 0}
|
||||
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value)
|
||||
if (isNaN(val) || val < 0) return
|
||||
|
||||
const newData = structuredClone(extraData)
|
||||
|
||||
if (!newData?.theory_craft?.hp?.[(waveIndex + 1).toString()]) {
|
||||
newData.theory_craft.hp[(waveIndex + 1).toString()] = []
|
||||
}
|
||||
|
||||
newData.theory_craft.hp[(waveIndex + 1).toString()][memberIndex] = val
|
||||
|
||||
setExtraData(newData)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add Member Button + Search */}
|
||||
<div
|
||||
className="relative flex items-start justify-center w-full h-full"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
className="btn btn-outline btn-primary w-full h-full border-dashed"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (showSearchWaveId === waveIndex) {
|
||||
setShowSearchWaveId(null)
|
||||
return
|
||||
}
|
||||
|
||||
setShowSearchWaveId(waveIndex)
|
||||
}}
|
||||
>
|
||||
<Plus className="w-8 h-8" />
|
||||
</button>
|
||||
|
||||
{showSearchWaveId === waveIndex && (
|
||||
<div className="absolute top-full mt-2 w-72 border bg-base-200 border-slate-600 rounded-lg p-4 shadow-lg z-50">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
|
||||
<label className="input w-full">
|
||||
<svg className="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="2.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.3-4.3"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<input
|
||||
type="search" className="grow"
|
||||
placeholder={transI18n("searchMonster")}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="max-h-60 overflow-y-auto space-y-1">
|
||||
{paginatedMonsters.length > 0 ? (
|
||||
paginatedMonsters.map((monster) => (
|
||||
<div
|
||||
key={monster.id}
|
||||
className="flex items-center gap-2 p-2 hover:bg-success/40 rounded cursor-pointer"
|
||||
onClick={() => {
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
newCeConfig.monsters[waveIndex].push({
|
||||
monster_id: Number(monster.id),
|
||||
level: 95,
|
||||
amount: 1,
|
||||
})
|
||||
setCeConfig(newCeConfig)
|
||||
setShowSearchWaveId(null)
|
||||
}}
|
||||
>
|
||||
<div className="relative w-8 h-8 rounded-full overflow-hidden flex-shrink-0 border border-white/10 shadow-sm">
|
||||
{listMonsterDetail.find((monster2) => monster2.id === monster.id)?.icon?.split("/")?.pop()?.replace(".png", "") && (
|
||||
<Image
|
||||
src={`https://api.hakush.in/hsr/UI/monstermiddleicon/${listMonsterDetail.find((monster2) => monster2.id === monster.id)?.icon?.split("/")?.pop()?.replace(".png", "")}.webp`}
|
||||
alt="Enemy Icon"
|
||||
width={376}
|
||||
height={512}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span>{getLocaleName(locale, monster)} {`(${monster.id})`}</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-sm text-center py-4">
|
||||
{transI18n("noMonstersFound")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{filteredMonsters.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
|
||||
<button
|
||||
disabled={monsterPage === 1}
|
||||
className="btn btn-sm btn-outline btn-success"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setMonsterPage(monsterPage - 1)
|
||||
}}
|
||||
>
|
||||
{transI18n("previous")}
|
||||
</button>
|
||||
|
||||
<button
|
||||
disabled={!hasMoreMonsterPages}
|
||||
className="btn btn-sm btn-outline btn-success"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setMonsterPage(monsterPage + 1)
|
||||
}}
|
||||
>
|
||||
{transI18n("next")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add New Wave Button */}
|
||||
<div className="card border border-slate-700/50 border-dashed">
|
||||
<div className="card-body p-8">
|
||||
<button
|
||||
onClick={() => {
|
||||
const newCeConfig = structuredClone(ce_config)
|
||||
newCeConfig.monsters.push([])
|
||||
setCeConfig(newCeConfig)
|
||||
}}
|
||||
className="btn btn-primary btn-lg w-full">
|
||||
<Plus className="w-6 h-6 mr-2" />
|
||||
{transI18n("addNewWave")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
98
src/components/monsterBar/index.tsx
Normal file
98
src/components/monsterBar/index.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import MocBar from "./moc";
|
||||
import useUserDataStore from "@/stores/userDataStore";
|
||||
import PfBar from "./pf";
|
||||
import Image from "next/image";
|
||||
import AsBar from "./as";
|
||||
import { useTranslations } from "next-intl";
|
||||
import CeBar from "./ce";
|
||||
import PeakBar from "./peak";
|
||||
|
||||
export default function MonsterBar() {
|
||||
const { battle_type, setBattleType } = useUserDataStore()
|
||||
const transI18n = useTranslations("DataPage")
|
||||
|
||||
const navItems = [
|
||||
{ name: transI18n("memoryOfChaos"), icon: 'AbyssIcon01', value: 'MOC' },
|
||||
{ name: transI18n("pureFiction"), icon: 'ChallengeStory', value: 'PF' },
|
||||
{ name: transI18n("apocalypticShadow"), icon: 'ChallengeBoss', value: 'AS' },
|
||||
{ name: transI18n("anomalyArbitration"), icon: 'ChallengePeakIcon', value: 'PEAK' },
|
||||
{ name: transI18n("customEnemy"), icon: 'MonsterIcon', value: 'CE' },
|
||||
{ name: transI18n("simulatedUniverse"), icon: 'SimulatedUniverse', value: 'SU' },
|
||||
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Header Navigation */}
|
||||
<nav className="border-b border-warning/30 relative pb-2">
|
||||
<div className="flex items-center justify-center">
|
||||
{/* Mobile Select */}
|
||||
<div className="block md:hidden w-full">
|
||||
<select
|
||||
className="select select-bordered w-full"
|
||||
value={battle_type.toUpperCase()}
|
||||
onChange={(e) => setBattleType(e.target.value.toUpperCase())}
|
||||
>
|
||||
{navItems.map((item) => (
|
||||
<option key={item.name} value={item.value.toUpperCase()}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Desktop Tabs */}
|
||||
<div className="hidden md:grid grid-cols-3 lg:grid-cols-6 gap-1">
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
key={item.name}
|
||||
onClick={() => setBattleType(item.value.toUpperCase())}
|
||||
className={`px-4 py-2 rounded-lg transition-all cursor-pointer duration-300 flex items-center space-x-2 ${battle_type.toUpperCase() === item.value.toUpperCase()
|
||||
? 'bg-success/30 shadow-lg'
|
||||
: 'bg-base-200/20 hover:bg-base-200/40 '
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
style={
|
||||
battle_type.toUpperCase() === item.value.toUpperCase()
|
||||
? {
|
||||
filter:
|
||||
'brightness(0) saturate(100%) invert(63%) sepia(78%) saturate(643%) hue-rotate(1deg) brightness(93%) contrast(89%)',
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={`/icon/${item.icon}.webp`}
|
||||
alt={item.name}
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</span>
|
||||
<span>{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{(battle_type.toUpperCase() === "DEFAULT" || battle_type.toUpperCase() === "") && (
|
||||
<div className="container mx-auto px-4 py-8 text-center font-bold text-3xl">
|
||||
{transI18n("noEventSelected")}
|
||||
</div>
|
||||
)}
|
||||
{battle_type.toUpperCase() === 'MOC' && <MocBar />}
|
||||
{battle_type.toUpperCase() === 'PF' && <PfBar />}
|
||||
{battle_type.toUpperCase() === 'AS' && <AsBar />}
|
||||
{battle_type.toUpperCase() === 'CE' && <CeBar />}
|
||||
{battle_type.toUpperCase() === 'PEAK' && <PeakBar />}
|
||||
{battle_type.toUpperCase() === 'SU' && (
|
||||
<div className="container mx-auto px-4 py-8 text-center font-bold text-3xl">
|
||||
{transI18n("comingSoon")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
330
src/components/monsterBar/moc.tsx
Normal file
330
src/components/monsterBar/moc.tsx
Normal file
@@ -0,0 +1,330 @@
|
||||
"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 useMazeStore from "@/stores/mazeStore";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { MonsterStore } from "@/types";
|
||||
|
||||
export default function MocBar() {
|
||||
const { MOCEvent, mapMOCInfo } = useEventStore()
|
||||
const { listMonster } = useMonsterStore()
|
||||
const { locale } = useLocaleStore()
|
||||
const {
|
||||
moc_config,
|
||||
setMocConfig
|
||||
} = useUserDataStore()
|
||||
const { MOC } = useMazeStore()
|
||||
|
||||
const transI18n = useTranslations("DataPage")
|
||||
|
||||
const challengeSelected = useMemo(() => {
|
||||
return mapMOCInfo[moc_config.event_id.toString()]?.find((moc) => moc.Id === moc_config.challenge_id)
|
||||
}, [moc_config, mapMOCInfo])
|
||||
|
||||
useEffect(() => {
|
||||
const challenge = mapMOCInfo[moc_config.event_id.toString()]?.find((moc) => moc.Id === moc_config.challenge_id)
|
||||
if (moc_config.event_id !== 0 && moc_config.challenge_id !== 0 && challenge) {
|
||||
const newBattleConfig = structuredClone(moc_config)
|
||||
newBattleConfig.cycle_count = 0
|
||||
if (moc_config.use_cycle_count) {
|
||||
newBattleConfig.cycle_count = challenge.Countdown
|
||||
}
|
||||
newBattleConfig.blessings = []
|
||||
if (moc_config.use_turbulence_buff && MOC[moc_config.challenge_id.toString()]) {
|
||||
newBattleConfig.blessings.push({
|
||||
id: Number(MOC[moc_config.challenge_id.toString()].maze_buff),
|
||||
level: 1
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters = []
|
||||
newBattleConfig.stage_id = 0
|
||||
if ((moc_config.floor_side === "Upper" || moc_config.floor_side === "Upper -> Lower") && challenge.EventIDList1.length > 0) {
|
||||
newBattleConfig.stage_id = challenge.EventIDList1[0].StageID
|
||||
for (const wave of challenge.EventIDList1[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challenge.EventIDList1[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
if ((moc_config.floor_side === "Lower" || moc_config.floor_side === "Lower -> Upper") && challenge.EventIDList2.length > 0) {
|
||||
newBattleConfig.stage_id = challenge.EventIDList2[0].StageID
|
||||
for (const wave of challenge.EventIDList2[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challenge.EventIDList2[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
if (moc_config.floor_side === "Lower -> Upper" && challenge.EventIDList1.length > 0) {
|
||||
for (const wave of challenge.EventIDList1[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challenge.EventIDList1[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
} else if (moc_config.floor_side === "Upper -> Lower" && challenge.EventIDList2.length > 0) {
|
||||
for (const wave of challenge.EventIDList2[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challenge.EventIDList2[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
setMocConfig(newBattleConfig)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [
|
||||
moc_config.event_id,
|
||||
moc_config.challenge_id,
|
||||
moc_config.floor_side,
|
||||
mapMOCInfo,
|
||||
MOC,
|
||||
moc_config.use_cycle_count,
|
||||
moc_config.use_turbulence_buff,
|
||||
])
|
||||
if (!MOCEvent) 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={MOCEvent.map((moc) => ({
|
||||
id: moc.id,
|
||||
name: getLocaleName(locale, moc),
|
||||
time: `${moc.begin} - ${moc.end}`,
|
||||
}))}
|
||||
excludeSet={[]}
|
||||
selectedCustomSet={moc_config.event_id.toString()}
|
||||
placeholder={transI18n("selectMOCEvent")}
|
||||
setSelectedCustomSet={(id) => setMocConfig({
|
||||
...moc_config,
|
||||
event_id: Number(id),
|
||||
challenge_id: mapMOCInfo[Number(id)]?.slice(-1)[0]?.Id || 0,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
{/* Settings */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-bold text-success">{transI18n("floor")}:{" "}</span>
|
||||
</label>
|
||||
<select
|
||||
value={moc_config.challenge_id}
|
||||
className="select select-success"
|
||||
onChange={(e) => setMocConfig({
|
||||
...moc_config,
|
||||
challenge_id: Number(e.target.value)
|
||||
})}
|
||||
>
|
||||
<option value={0} disabled={true}>Select a Floor</option>
|
||||
{mapMOCInfo[moc_config.event_id.toString()]?.map((moc) => (
|
||||
<option key={moc.Id} value={moc.Id}>{moc.Id % 100}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-bold text-success">{transI18n("side")}:{" "}</span>
|
||||
</label>
|
||||
<select
|
||||
value={moc_config.floor_side}
|
||||
className="select select-success"
|
||||
onChange={(e) => setMocConfig({ ...moc_config, floor_side: e.target.value })}
|
||||
>
|
||||
<option value={0} disabled={true}>{transI18n("selectSide")}</option>
|
||||
<option value="Upper">{transI18n("upper")}</option>
|
||||
<option value="Lower">{transI18n("lower")}</option>
|
||||
<option value="Upper -> Lower">{transI18n("upperToLower")}</option>
|
||||
<option value="Lower -> Upper">{transI18n("lowerToUpper")}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label cursor-pointer">
|
||||
<span
|
||||
onClick={() => setMocConfig({ ...moc_config, use_cycle_count: !moc_config.use_cycle_count })}
|
||||
className="label-text font-bold text-success cursor-pointer"
|
||||
>
|
||||
{transI18n("useCycleCount")} {" "}
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={moc_config.use_cycle_count}
|
||||
onChange={(e) => setMocConfig({ ...moc_config, use_cycle_count: e.target.checked })}
|
||||
className="checkbox checkbox-primary"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Turbulence Buff */}
|
||||
<div className="bg-base-200/20 rounded-lg p-4 border border-purple-500/20">
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={moc_config.use_turbulence_buff}
|
||||
onChange={(e) => setMocConfig({ ...moc_config, use_turbulence_buff: e.target.checked })}
|
||||
className="checkbox checkbox-primary"
|
||||
/>
|
||||
<span
|
||||
onClick={() => setMocConfig({ ...moc_config, use_turbulence_buff: !moc_config.use_turbulence_buff })}
|
||||
className="font-bold text-success cursor-pointer">
|
||||
{transI18n("useTurbulenceBuff")}
|
||||
</span>
|
||||
</div>
|
||||
{challengeSelected && challengeSelected?.Desc ? (
|
||||
<div
|
||||
className="text-base"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: replaceByParam(
|
||||
challengeSelected?.Desc || "",
|
||||
challengeSelected?.Param || []
|
||||
)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-base">{transI18n("noTurbulenceBuff")}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enemy Waves */}
|
||||
{(moc_config?.challenge_id ?? 0) !== 0 && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* First Half */}
|
||||
<div className="rounded-xl p-4 mt-2 border border-warning">
|
||||
<h2 className="text-2xl font-bold mb-6 text-info">{transI18n("firstHalfEnemies")}</h2>
|
||||
|
||||
{challengeSelected && challengeSelected?.EventIDList1?.length > 0 && challengeSelected?.EventIDList1[0].MonsterList.map((wave, 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">
|
||||
{Object.values(wave).map((waveValue, 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(waveValue))?.icon && <Image
|
||||
src={`https://api.hakush.in/hsr/UI/monstermiddleicon/${listMonster.find((monster) => monster.child.includes(waveValue))?.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?.EventIDList1[0].Level}</div>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
{listMonster
|
||||
.find((monster) => monster.child.includes(waveValue))
|
||||
?.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>
|
||||
|
||||
{/* Second Half */}
|
||||
<div className="rounded-xl p-4 mt-2 border border-warning">
|
||||
<h2 className="text-2xl font-bold mb-6 text-info">{transI18n("secondHalfEnemies")}</h2>
|
||||
|
||||
{challengeSelected && challengeSelected?.EventIDList2?.length > 0 && challengeSelected?.EventIDList2[0].MonsterList.map((wave, 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">
|
||||
{Object.values(wave).map((waveValue, 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(waveValue))?.icon && <Image
|
||||
src={`https://api.hakush.in/hsr/UI/monstermiddleicon/${listMonster.find((monster) => monster.child.includes(waveValue))?.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?.EventIDList1[0].Level}</div>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
{listMonster
|
||||
.find((monster) => monster.child.includes(waveValue))
|
||||
?.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>
|
||||
)
|
||||
}
|
||||
275
src/components/monsterBar/peak.tsx
Normal file
275
src/components/monsterBar/peak.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
"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 { 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 = structuredClone(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 = structuredClone(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>
|
||||
)
|
||||
}
|
||||
339
src/components/monsterBar/pf.tsx
Normal file
339
src/components/monsterBar/pf.tsx
Normal file
@@ -0,0 +1,339 @@
|
||||
"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 { MonsterStore } from "@/types";
|
||||
import useMazeStore from "@/stores/mazeStore";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function PfBar() {
|
||||
const { PFEvent, mapPFInfo } = useEventStore()
|
||||
const { listMonster } = useMonsterStore()
|
||||
const { locale } = useLocaleStore()
|
||||
const {
|
||||
pf_config,
|
||||
setPfConfig
|
||||
} = useUserDataStore()
|
||||
const { PF } = useMazeStore()
|
||||
|
||||
const transI18n = useTranslations("DataPage")
|
||||
const challengeSelected = useMemo(() => {
|
||||
return mapPFInfo[pf_config.event_id.toString()]?.Level.find((pf) => pf.Id === pf_config.challenge_id)
|
||||
}, [pf_config, mapPFInfo])
|
||||
|
||||
const eventSelected = useMemo(() => {
|
||||
return mapPFInfo[pf_config.event_id.toString()]
|
||||
}, [pf_config, mapPFInfo])
|
||||
|
||||
useEffect(() => {
|
||||
if (!challengeSelected || pf_config.event_id === 0 || pf_config.challenge_id === 0) {
|
||||
return
|
||||
}
|
||||
const newBattleConfig = structuredClone(pf_config)
|
||||
newBattleConfig.cycle_count = 4
|
||||
newBattleConfig.blessings = []
|
||||
if (pf_config.buff_id !== 0) {
|
||||
newBattleConfig.blessings.push({
|
||||
id: pf_config.buff_id,
|
||||
level: 1
|
||||
})
|
||||
}
|
||||
if (PF[pf_config.challenge_id.toString()]) {
|
||||
newBattleConfig.blessings.push({
|
||||
id: Number(PF[pf_config.challenge_id.toString()].maze_buff),
|
||||
level: 1
|
||||
})
|
||||
}
|
||||
|
||||
newBattleConfig.monsters = []
|
||||
newBattleConfig.stage_id = 0
|
||||
if ((pf_config.floor_side === "Upper" || pf_config.floor_side === "Upper -> Lower") && challengeSelected.EventIDList1.length > 0) {
|
||||
newBattleConfig.stage_id = challengeSelected.EventIDList1[0].StageID
|
||||
for (const wave of challengeSelected.EventIDList1[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challengeSelected.EventIDList1[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
if ((pf_config.floor_side === "Lower" || pf_config.floor_side === "Lower -> Upper") && challengeSelected.EventIDList2.length > 0) {
|
||||
newBattleConfig.stage_id = challengeSelected.EventIDList2[0].StageID
|
||||
for (const wave of challengeSelected.EventIDList2[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challengeSelected.EventIDList2[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
if (pf_config.floor_side === "Lower -> Upper" && challengeSelected.EventIDList1.length > 0) {
|
||||
for (const wave of challengeSelected.EventIDList1[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challengeSelected.EventIDList1[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
} else if (pf_config.floor_side === "Upper -> Lower" && challengeSelected.EventIDList2.length > 0) {
|
||||
for (const wave of challengeSelected.EventIDList2[0].MonsterList) {
|
||||
const newWave: MonsterStore[] = []
|
||||
for (const value of Object.values(wave)) {
|
||||
newWave.push({
|
||||
monster_id: Number(value),
|
||||
level: challengeSelected.EventIDList2[0].Level,
|
||||
amount: 1,
|
||||
})
|
||||
}
|
||||
newBattleConfig.monsters.push(newWave)
|
||||
}
|
||||
}
|
||||
setPfConfig(newBattleConfig)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [
|
||||
challengeSelected,
|
||||
pf_config.event_id,
|
||||
pf_config.challenge_id,
|
||||
pf_config.floor_side,
|
||||
pf_config.buff_id,
|
||||
mapPFInfo,
|
||||
PF,
|
||||
])
|
||||
if (!PFEvent) 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={PFEvent.map((pf) => ({
|
||||
id: pf.id,
|
||||
name: getLocaleName(locale, pf),
|
||||
time: `${pf.begin} - ${pf.end}`,
|
||||
}))}
|
||||
excludeSet={[]}
|
||||
selectedCustomSet={pf_config.event_id.toString()}
|
||||
placeholder={transI18n("selectPFEvent")}
|
||||
setSelectedCustomSet={(id) => setPfConfig({
|
||||
...pf_config,
|
||||
event_id: Number(id),
|
||||
challenge_id: mapPFInfo[Number(id)]?.Level.slice(-1)[0]?.Id || 0,
|
||||
buff_id: 0
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
{/* Settings */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-bold text-success">{transI18n("floor")}:{" "}</span>
|
||||
</label>
|
||||
<select
|
||||
value={pf_config.challenge_id}
|
||||
className="select select-success"
|
||||
onChange={(e) => setPfConfig({ ...pf_config, challenge_id: Number(e.target.value) })}
|
||||
>
|
||||
<option value={0} disabled={true}>{transI18n("selectFloor")}</option>
|
||||
{mapPFInfo[pf_config.event_id.toString()]?.Level.map((pf) => (
|
||||
<option key={pf.Id} value={pf.Id}>{pf.Id % 10}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-bold text-success">{transI18n("side")}:{" "}</span>
|
||||
</label>
|
||||
<select
|
||||
value={pf_config.floor_side}
|
||||
className="select select-success"
|
||||
onChange={(e) => setPfConfig({ ...pf_config, floor_side: e.target.value })}
|
||||
>
|
||||
<option value={0} disabled={true}>{transI18n("selectSide")}</option>
|
||||
<option value="Upper">{transI18n("upper")}</option>
|
||||
<option value="Lower">{transI18n("lower")}</option>
|
||||
<option value="Upper -> Lower">{transI18n("upperToLower")}</option>
|
||||
<option value="Lower -> Upper">{transI18n("lowerToUpper")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{eventSelected && (
|
||||
<div className="mb-4 w-full">
|
||||
<SelectCustomText
|
||||
customSet={eventSelected.Option.map((buff, index) => ({
|
||||
id: PF[eventSelected.Id.toString()]?.buff[index]?.toString(),
|
||||
name: buff.Name,
|
||||
description: replaceByParam(buff.Desc, buff.Param || []),
|
||||
}))}
|
||||
excludeSet={[]}
|
||||
selectedCustomSet={pf_config?.buff_id?.toString()}
|
||||
placeholder={transI18n("selectBuff")}
|
||||
setSelectedCustomSet={(id) => setPfConfig({ ...pf_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>
|
||||
{eventSelected && eventSelected.SubOption.length > 0 ? (
|
||||
eventSelected.SubOption.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>
|
||||
))
|
||||
) : eventSelected && eventSelected.SubOption.length === 0 ? (
|
||||
<div
|
||||
className="text-base"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: replaceByParam(
|
||||
eventSelected.Buff?.Desc || "",
|
||||
eventSelected.Buff?.Param || []
|
||||
)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-base">{transI18n("noTurbulenceBuff")}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enemy Waves */}
|
||||
|
||||
{(pf_config?.challenge_id ?? 0) !== 0 && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* First Half */}
|
||||
<div className="rounded-xl p-4 mt-2 border border-warning">
|
||||
<h2 className="text-2xl font-bold mb-6 text-info">{transI18n("firstHalfEnemies")}</h2>
|
||||
|
||||
{challengeSelected && Object.values(challengeSelected.InfiniteList1).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?.EventIDList1[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>
|
||||
|
||||
{/* Second Half */}
|
||||
<div className="rounded-xl p-4 mt-2 border border-warning">
|
||||
<h2 className="text-2xl font-bold mb-6 text-info">{transI18n("secondHalfEnemies")}</h2>
|
||||
|
||||
{challengeSelected && Object.values(challengeSelected?.InfiniteList2).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?.EventIDList1[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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user