From f81fa964a5d3b93d50a65edd28a7f8d59505f0d0 Mon Sep 17 00:00:00 2001 From: AzenKain Date: Mon, 12 Jan 2026 17:18:24 +0700 Subject: [PATCH] UPDATE: More setting in theorycraft mode --- src/components/extraSettingBar/index.tsx | 202 +++++++++++++++++--- src/components/monsterBar/ce.tsx | 8 +- src/components/select/customSelectImage.tsx | 2 +- src/components/select/customSelectText.tsx | 2 +- src/types/extraData.ts | 1 + src/zod/extraData.zod.ts | 3 +- 6 files changed, 182 insertions(+), 36 deletions(-) diff --git a/src/components/extraSettingBar/index.tsx b/src/components/extraSettingBar/index.tsx index 25ff8b7..e9aa35a 100644 --- a/src/components/extraSettingBar/index.tsx +++ b/src/components/extraSettingBar/index.tsx @@ -1,6 +1,6 @@ 'use client' import { motion } from "framer-motion" -import { EyeOff, Eye, Hammer, RefreshCw, ShieldBan, User, Swords, SkipForward, BowArrow, Info } from "lucide-react" +import { EyeOff, Eye, Hammer, RefreshCw, ShieldBan, User, Swords, SkipForward, BowArrow, Info, RouteIcon, Search } from "lucide-react" import useGlobalStore from '@/stores/globalStore' import { useTranslations } from "next-intl" import useEventStore from "@/stores/eventStore" @@ -8,6 +8,8 @@ import { getLocaleName, getNameChar } from "@/helper" import useLocaleStore from "@/stores/localeStore" import useAvatarStore from "@/stores/avatarStore" import SelectCustomImage from "../select/customSelectImage" +import { useMemo, useState } from "react" +import useMazeStore from "@/stores/mazeStore" export default function ExtraSettingBar() { const { extraData, setExtraData } = useGlobalStore() @@ -15,13 +17,39 @@ export default function ExtraSettingBar() { const { PEAKEvent } = useEventStore() const { listAvatar } = useAvatarStore() const { locale } = useLocaleStore() + const [showSearchStage, setShowSearchStage] = useState(false) + const [isChildClick, setIsChildClick] = useState(false) + const [stageSearchTerm, setStageSearchTerm] = useState("") + const [stagePage, setStagePage] = useState(1) + const { Stage } = useMazeStore() + const pageSize = 30 + 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]) + + const onChangeSearch = (v: string) => { + setStageSearchTerm(v) + setStagePage(1) + } return (
{extraData?.theory_craft && (

- {transI18n("theoryCraft")} + {transI18n("theoryCraft")}
@@ -39,8 +67,9 @@ export default function ExtraSettingBar() { ...extraData, theory_craft: { hp: extraData?.theory_craft?.hp || {}, - cycle_count: extraData?.theory_craft?.cycle_count || 0, - mode: e.target.checked + cycle_count: extraData?.theory_craft?.cycle_count || 1, + mode: e.target.checked, + stage_id: extraData?.theory_craft?.stage_id || 0 } }) } @@ -52,28 +81,145 @@ export default function ExtraSettingBar() { {extraData?.theory_craft?.mode && ( - - - + <> + + + + + + + )}

)} @@ -100,7 +246,7 @@ export default function ExtraSettingBar() { excludeSet={[]} selectedCustomSet={extraData?.multi_path?.main?.toString() || ""} placeholder={transI18n("selectAMainStat")} - setSelectedCustomSet={(it) => { + setSelectedCustomSet={(it) => { if (!it) return setExtraData({ ...extraData, @@ -130,7 +276,7 @@ export default function ExtraSettingBar() { excludeSet={[]} selectedCustomSet={extraData?.multi_path?.march_7?.toString() || ""} placeholder={transI18n("selectAMainStat")} - setSelectedCustomSet={(it) => { + setSelectedCustomSet={(it) => { if (!it) return setExtraData({ ...extraData, diff --git a/src/components/monsterBar/ce.tsx b/src/components/monsterBar/ce.tsx index cb52c43..d04136d 100644 --- a/src/components/monsterBar/ce.tsx +++ b/src/components/monsterBar/ce.tsx @@ -1,6 +1,5 @@ "use client"; - -import React, { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { Plus, Trash2, @@ -88,7 +87,7 @@ export default function CeBar() { ) useEffect(() => { - setMonsterPage(1) // reset về trang 1 khi searchTerm thay đổi + setMonsterPage(1) }, [searchTerm]) const stageList = useMemo(() => Object.values(Stage).map((stage) => ({ @@ -146,12 +145,11 @@ export default function CeBar() {
-