Kain344
73b6fc268f
Gitea Auto Deploy / Deploy-Container (push) Failing after 46s
- Updated metadata interfaces in `metaData.ts` for improved readability. - Refactored `mics.ts` types to enhance structure and maintainability. - Added `Invasion` type to `mocDetail.ts` and `peakDetail.ts` for new functionality. - Simplified modal configuration in `modelConfig.ts`. - Cleaned up monster detail interfaces in `monsterDetail.ts`. - Enhanced battle configuration types in `pfDetail.ts` to include `Invasion`. - Updated JSON schemas in `srtools.zod.ts` to use `nullish` for optional fields. - Introduced new skills-lock.json for skill management. - Added global type declarations for CSS and SCSS modules in `global.d.ts`.
116 lines
5.7 KiB
TypeScript
116 lines
5.7 KiB
TypeScript
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";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
|
|
export default function MonsterBar() {
|
|
const { battle_type, setBattleType } = useUserDataStore(
|
|
useShallow((state) => ({
|
|
battle_type: state.battle_type,
|
|
setBattleType: state.setBattleType,
|
|
}))
|
|
)
|
|
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="w-full">
|
|
{/* Header Navigation */}
|
|
<nav className="border-b border-base-content/10 relative pb-3">
|
|
<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-2 w-full">
|
|
{navItems.map((item) => {
|
|
const isSelected = battle_type.toUpperCase() === item.value.toUpperCase()
|
|
return (
|
|
<button
|
|
key={item.name}
|
|
onClick={() => setBattleType(item.value.toUpperCase())}
|
|
className={`px-4 py-2.5 rounded-xl transition-all cursor-pointer duration-300 flex items-center justify-center space-x-2 text-sm font-semibold border ${
|
|
isSelected
|
|
? 'bg-success/20 border-warning shadow-lg text-base-content'
|
|
: 'bg-base-200/20 hover:bg-base-200/40 border-transparent text-base-content/80'
|
|
}`}
|
|
>
|
|
<span
|
|
className={
|
|
isSelected
|
|
? ""
|
|
: "theme-path-icon"
|
|
}
|
|
style={
|
|
isSelected
|
|
? {
|
|
filter:
|
|
'brightness(0) saturate(100%) invert(63%) sepia(78%) saturate(643%) hue-rotate(1deg) brightness(93%) contrast(89%)',
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
<Image
|
|
unoptimized
|
|
crossOrigin="anonymous"
|
|
src={`/icon/${item.icon}.webp`}
|
|
alt={item.name}
|
|
width={24}
|
|
height={24}
|
|
className="w-5 h-5 object-contain"
|
|
/>
|
|
</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>
|
|
)
|
|
} |