astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(stygian) : center level controls, preserve boss selection, and copy teams
CI / Verify (push) Successful in 2m6s
Details
CI / Build immutable images and deploy (push) Successful in 2m31s
Details

Browse Source
This commit is contained in:
gunshiz
2026-10-07 20:09:45 +07:00 Unverified
parent a28e2ed199
commit 8c8815cda5
3 changed files with 108 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/public/stygian-guide.tsx
+29 -24
View File
@@ -4,7 +4,8 @@ import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { buttonVariants } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { StygianBossTabs, StygianNavigation } from "@/components/stygian/stygian-navigation";
import {
StygianBossCard,
StygianBossTab,
@@ -121,31 +122,35 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalog: Catalog }) {
return (
<Tabs defaultValue="105">
<p className="text-sm font-medium">เลือกระดับบอส</p>
<TabsList aria-label="ระดับความยาก Stygian">
{stygianLevels.map((level) => (
<TabsTrigger key={level} value={String(level)} className="max-sm:min-h-11">เลเวล {level}</TabsTrigger>
))}
</TabsList>
<StygianNavigation>
<div className="relative z-10 col-start-1 row-start-2 flex flex-col items-center gap-2">
<p className="text-sm font-medium">เลือกระดับบอส</p>
<TabsList aria-label="ระดับความยาก Stygian">
{stygianLevels.map((level) => (
<TabsTrigger key={level} value={String(level)} className="max-sm:min-h-11">เลเวล {level}</TabsTrigger>
))}
</TabsList>
</div>
{stygianLevels.map((level) => (
<TabsContent key={level} value={String(level)}>
<Tabs defaultValue="0">
<p className="text-sm font-medium">เลือกบอส</p>
<TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto" aria-label={`Level ${level} bosses`}>
{stygianBossPositions.map((position) => {
const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
const label = boss?.name ?? `Boss ${position + 1}`;
const positionLabel = stygianBossPositionLabels[position];
return <TabsTrigger key={position} value={String(position)} aria-label={`${positionLabel}: ${label}`} title={label} className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-1 py-2 data-active:bg-accent/50 data-active:ring-2 data-active:ring-primary data-active:ring-inset sm:px-2 sm:py-3">
<StygianBossTab boss={boss} position={position} priority={level === 105} />
</TabsTrigger>;
})}
</TabsList>
{stygianBossPositions.map((position) => <TabsContent key={position} value={String(position)} className="pt-4"><BossCard schedule={schedule} level={level} position={position} catalog={catalog} /></TabsContent>)}
</Tabs>
<TabsContent key={level} value={String(level)} className="col-start-1 row-span-3 row-start-1 grid grid-rows-subgrid">
<StygianBossTabs>
<div className="flex flex-col gap-2">
<p className="text-sm font-medium">เลือกบอส</p>
<TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto" aria-label={`Level ${level} bosses`}>
{stygianBossPositions.map((position) => {
const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
const label = boss?.name ?? `Boss ${position + 1}`;
const positionLabel = stygianBossPositionLabels[position];
return <TabsTrigger key={position} value={String(position)} aria-label={`${positionLabel}: ${label}`} title={label} className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-1 py-2 data-active:bg-accent/50 data-active:ring-2 data-active:ring-primary data-active:ring-inset sm:px-2 sm:py-3">
<StygianBossTab boss={boss} position={position} priority={level === 105} />
</TabsTrigger>;
})}
</TabsList>
</div>
{stygianBossPositions.map((position) => <TabsContent key={position} value={String(position)} className="row-start-3 pt-4"><BossCard schedule={schedule} level={level} position={position} catalog={catalog} /></TabsContent>)}
</StygianBossTabs>
</TabsContent>
))}
</Tabs>
</StygianNavigation>
);
}