Firefly-Shelter/Firefly_Srtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: change UX
All checks were successful
Gitea Auto Deploy / Deploy-Container (push) Successful in 1m35s
Details

Browse Source
This commit is contained in:
Azen Kain
2025-08-06 16:39:43 +07:00
parent 9c96616bb0
commit 27e8df5a7f
5 changed files with 78 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/avatarInfo/index.tsx
View File

@@ -176,7 +176,6 @@ export default function AvatarInfo() {
onClick={() => { onClick={() => {
const newSpValue = Math.ceil(avatars[avatarSelected?.id || ""]?.sp_max / 2); const newSpValue = Math.ceil(avatars[avatarSelected?.id || ""]?.sp_max / 2);
const newAvatar = { ...avatars[avatarSelected?.id || ""], sp_value: newSpValue } const newAvatar = { ...avatars[avatarSelected?.id || ""], sp_value: newSpValue }
console.log(newAvatar)
setAvatar(newAvatar) setAvatar(newAvatar)
}} }}
> >

70
src/components/card/relicCard.tsx
View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import useRelicMakerStore from "@/stores/relicMakerStore";
import useUserDataStore from "@/stores/userDataStore"; import useUserDataStore from "@/stores/userDataStore";
import Image from "next/image"; import Image from "next/image";
import { useMemo } from "react"; import { useMemo } from "react";
@@ -22,11 +23,11 @@ const getRarityName = (slot: string) => {
case '1': return ( case '1': return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Image <Image
src="/relics/HEAD.png" src="/relics/HEAD.png"
alt="Head" alt="Head"
width={20} width={20}
height={20} height={20}
className="bg-black/50 rounded-full" className="bg-black/50 rounded-full"
/> />
<h2>Head</h2> <h2>Head</h2>
</div> </div>
@@ -34,11 +35,11 @@ const getRarityName = (slot: string) => {
case '2': return ( case '2': return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Image <Image
src="/relics/HAND.png" src="/relics/HAND.png"
alt="Hand" alt="Hand"
width={20} width={20}
height={20} height={20}
className="bg-black/50 rounded-full" className="bg-black/50 rounded-full"
/> />
<h2>Hands</h2> <h2>Hands</h2>
</div> </div>
@@ -46,11 +47,11 @@ const getRarityName = (slot: string) => {
case '3': return ( case '3': return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Image <Image
src="/relics/BODY.png" src="/relics/BODY.png"
alt="Body" alt="Body"
width={20} width={20}
height={20} height={20}
className="bg-black/50 rounded-full" className="bg-black/50 rounded-full"
/> />
<h2>Body</h2> <h2>Body</h2>
</div> </div>
@@ -58,11 +59,11 @@ const getRarityName = (slot: string) => {
case '4': return ( case '4': return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Image <Image
src="/relics/FOOT.png" src="/relics/FOOT.png"
alt="Foot" alt="Foot"
width={20} width={20}
height={20} height={20}
className="bg-black/50 rounded-full" className="bg-black/50 rounded-full"
/> />
<h2>Feet</h2> <h2>Feet</h2>
</div> </div>
@@ -70,11 +71,11 @@ const getRarityName = (slot: string) => {
case '5': return ( case '5': return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Image <Image
src="/relics/NECK.png" src="/relics/NECK.png"
alt="Neck" alt="Neck"
width={20} width={20}
height={20} height={20}
className="bg-black/50 rounded-full" className="bg-black/50 rounded-full"
/> />
<h2>Planar sphere</h2> <h2>Planar sphere</h2>
</div> </div>
@@ -82,11 +83,11 @@ const getRarityName = (slot: string) => {
case '6': return ( case '6': return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Image <Image
src="/relics/OBJECT.png" src="/relics/OBJECT.png"
alt="Object" alt="Object"
width={20} width={20}
height={20} height={20}
className="bg-black/50 rounded-full" className="bg-black/50 rounded-full"
/> />
<h2>Link rope</h2> <h2>Link rope</h2>
</div> </div>
@@ -96,6 +97,7 @@ const getRarityName = (slot: string) => {
}; };
export default function RelicCard({ slot, avatarId }: RelicCardProps) { export default function RelicCard({ slot, avatarId }: RelicCardProps) {
const { avatars } = useUserDataStore() const { avatars } = useUserDataStore()
const { selectedRelicSlot } = useRelicMakerStore()
const relicDetail = useMemo(() => { const relicDetail = useMemo(() => {
const avatar = avatars[avatarId]; const avatar = avatars[avatarId];
@@ -112,15 +114,15 @@ export default function RelicCard({ slot, avatarId }: RelicCardProps) {
<div> <div>
{relicDetail ? ( {relicDetail ? (
<div <div
className="flex flex-col items-center cursor-pointer"> className="flex flex-col items-center cursor-pointer ">
<div <div
className={` className={`
relative w-24 h-24 rounded-full border-4 relative w-24 h-24 rounded-full
${getRarityColor(relicDetail.relic_id.toString()[0])} ${getRarityColor(relicDetail.relic_id.toString()[0])}
shadow-xl shadow-xl
flex items-center justify-center flex items-center justify-center
cursor-pointer hover:scale-105 transition-transform cursor-pointer transition-transform
ring-4 ring-primary ${selectedRelicSlot === slot ? 'ring-5 ring-success scale-105' : 'ring-3 ring-primary'}
`} `}
> >
<span> <span>

12
src/components/monsterBar/ce.tsx
View File

@@ -27,6 +27,13 @@ export default function CeBar() {
const { ce_config, setCeConfig } = useUserDataStore() const { ce_config, setCeConfig } = useUserDataStore()
const { listMonster } = useMonsterStore() const { listMonster } = useMonsterStore()
const { locale } = useLocaleStore() const { locale } = useLocaleStore()
const transI18n = useTranslations("DataPage")
const [showSearchStage, setShowSearchStage] = useState(false)
const [stageSearchTerm, setStageSearchTerm] = useState("")
const [stagePage, setStagePage] = useState(1)
const pageSize = 30
const filteredMonsters = useMemo(() => { const filteredMonsters = useMemo(() => {
const newlistMonster = new Set<MonsterBasic>() const newlistMonster = new Set<MonsterBasic>()
for (const monster of listMonster) { for (const monster of listMonster) {
@@ -39,11 +46,6 @@ export default function CeBar() {
} }
return Array.from(newlistMonster) return Array.from(newlistMonster)
}, [listMonster, locale, searchTerm]); }, [listMonster, locale, searchTerm]);
const transI18n = useTranslations("DataPage")
const [showSearchStage, setShowSearchStage] = useState(false)
const [stageSearchTerm, setStageSearchTerm] = useState("")
const [stagePage, setStagePage] = useState(1)
const pageSize = 30
const stageList = useMemo(() => Object.values(Stage).map((stage) => ({ const stageList = useMemo(() => Object.values(Stage).map((stage) => ({
id: stage.stage_id.toString(), id: stage.stage_id.toString(),

30
src/components/relicsInfo/index.tsx
View File

@@ -17,6 +17,7 @@ export default function RelicsInfo() {
const { avatarSelected } = useAvatarStore() const { avatarSelected } = useAvatarStore()
const { const {
setSelectedRelicSlot, setSelectedRelicSlot,
selectedRelicSlot,
setSelectedMainStat, setSelectedMainStat,
setSelectedRelicSet, setSelectedRelicSet,
setSelectedRelicLevel, setSelectedRelicLevel,
@@ -157,7 +158,11 @@ export default function RelicsInfo() {
<div key={index} className="relative group"> <div key={index} className="relative group">
<div <div
onClick={() => { onClick={() => {
handlerChangeRelic(item) if (item === selectedRelicSlot) {
setSelectedRelicSlot("")
} else {
setSelectedRelicSlot(item)
}
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
@@ -201,6 +206,29 @@ export default function RelicsInfo() {
</div> </div>
))} ))}
</div> </div>
<div className="grid grid-cols-2 gap-2 mt-10">
<button
disabled={!selectedRelicSlot}
onClick={() => {
handlerChangeRelic(selectedRelicSlot)
}}
className="btn btn-info"
>
{transI18n("changeRelic")}
</button>
<button
disabled={!selectedRelicSlot}
onClick={(e) => {
e.stopPropagation()
if (window.confirm(`${transI18n("deleteRelicConfirm")} ${selectedRelicSlot}?`)) {
handlerDeleteRelic(selectedRelicSlot)
}
}}
className="btn btn-error"
>
{transI18n("deleteRelic")}
</button>
</div>
</div> </div>
</div> </div>

1
src/components/skillsInfo/index.tsx
View File

@@ -130,7 +130,6 @@ export default function SkillsInfo() {
if (!status && traceLink?.[avatarSelected?.baseType || ""]?.[skillSelected || ""]) { if (!status && traceLink?.[avatarSelected?.baseType || ""]?.[skillSelected || ""]) {
traceLink[avatarSelected?.baseType || ""][skillSelected || ""].forEach((pointId) => { traceLink[avatarSelected?.baseType || ""][skillSelected || ""].forEach((pointId) => {
if (avatarSkillTree?.[pointId]?.["1"]) { if (avatarSkillTree?.[pointId]?.["1"]) {
console.log(avatarSkillTree?.[pointId]?.["1"].PointID)
newData.data.skills[avatarSkillTree?.[pointId]?.["1"].PointID] = 0 newData.data.skills[avatarSkillTree?.[pointId]?.["1"].PointID] = 0
} }
}) })