- Implement user registration and login with NextAuth v5 (email/password, JWT) - Add authentication modal in UI with login/register tabs - Create user profile screen showing game statistics and history - Integrate Prisma 7 ORM with SQLite database for data persistence - Store game results (mode, path, clicks, time) in database - Auto-save completed games only when user is authenticated - Separate business logic into reusable hooks (useSoloGame, useMultiGame) - Organize UI into composable screen components (HomeScreen, SoloScreen, ProfileScreen, etc) - Add session persistence across F5 refresh for solo and multiplayer - Style auth modal, account button, and profile stats dashboard
25 lines
684 B
TypeScript
25 lines
684 B
TypeScript
"use client";
|
||
|
||
import { useRef } from "react";
|
||
|
||
export function Breadcrumbs({ history, endRef }: { history: string[]; endRef: React.RefObject<HTMLDivElement | null> }) {
|
||
return (
|
||
<div className="breadcrumb-trail">
|
||
{history.map((title, i) => (
|
||
<span key={i} className="breadcrumb-item">
|
||
{i > 0 && <span className="breadcrumb-sep">›</span>}
|
||
<span className={i === history.length - 1 ? "breadcrumb-current" : "breadcrumb-past"}>
|
||
{title}
|
||
</span>
|
||
</span>
|
||
))}
|
||
<div ref={endRef} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function useBreadcrumbScroll() {
|
||
const endRef = useRef<HTMLDivElement>(null);
|
||
return endRef;
|
||
}
|