Ranking #26

app/components/LoginCard.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LoginCard } from "./LoginCard";
+
+const meta: Meta<typeof LoginCard> = {
+	title: "Components/LoginCard",
+	component: LoginCard,
+	args: {
+		style: { width: "600px", height: "300px" },
+	},
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof LoginCard> = {};

app/components/LogginCard.tsx → app/components/LoginCard.tsx

@@ -10,9 +10,9 @@ interface FormData {
 	displayName: string;
 }
 
-interface LogginCardProps extends ComponentPropsWithRef<"div"> {}
+interface LoginCardProps extends ComponentPropsWithRef<"div"> {}
 
-export function LogginCard({ className }: LogginCardProps): ReactNode {
+export function LoginCard({ className }: LoginCardProps): ReactNode {
 	const { register, handleSubmit } = useForm<FormData>();
 
 	const onSubmit: SubmitHandler<FormData> = async (data) => {

app/components/Ranking.stories.tsx

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RankingList } from "./Ranking";
+
+const meta: Meta<typeof RankingList> = {
+	title: "Components/RankingList",
+	component: RankingList,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof RankingList> = {};

app/components/Ranking.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from "react";
+import { useFetchRanking } from "~/hooks/useRanking";
+import { cn } from "~/libs/utils";
+
+interface RankingItemProps {
+	rank: number | null;
+	name: string;
+	score: number | null;
+}
+
+function RankingItem({ rank, name, score }: RankingItemProps) {
+	let rankColorClass: string;
+	switch (rank) {
+		case 1:
+			rankColorClass = "text-yellow-400";
+			break;
+		case 2:
+			rankColorClass = "text-gray-300";
+			break;
+		case 3:
+			rankColorClass = "text-orange-500";
+			break;
+		default:
+			rankColorClass = "";
+	}
+
+	return (
+		<li className="-rotate-2 flex justify-between rounded-br-xl border-4 border-white bg-image-card bg-zinc-500 px-4 py-2 drop-shadow-md">
+			<span className={cn("flex-shrink-0 drop-shadow-base", rankColorClass)}>
+				{rank}位
+			</span>
+			<span className="text-center drop-shadow-base">{name}</span>
+			<span className="drop-shadow-base">{score}</span>
+		</li>
+	);
+}
+
+export function RankingList() {
+	const { ranking, isValidating, loadMore, hasMore } = useFetchRanking();
+	const loadMoreRef = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		if (isValidating || !loadMoreRef.current) return;
+
+		const observer = new IntersectionObserver(
+			(entries: IntersectionObserverEntry[]) => {
+				if (entries[0].isIntersecting && hasMore && !isValidating) {
+					loadMore();
+				}
+			},
+		);
+		observer.observe(loadMoreRef.current);
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [isValidating, loadMore, hasMore]);
+
+	return (
+		<div className="grid gap-y-2">
+			<div className="text-center text-2xl drop-shadow-md">ランキング</div>
+			<ul className="grid gap-y-4">
+				{ranking.map(
+					(item) =>
+						item && (
+							<RankingItem
+								key={item.id}
+								rank={item.rank}
+								name={item.displayName}
+								score={item.highScore}
+							/>
+						),
+				)}
+			</ul>
+			<div className="mx-auto mt-2 drop-shadow-md" ref={loadMoreRef}>
+				{isValidating && (
+					<div className="h-6 w-6 animate-spin rounded-full border-4 border-white border-t-transparent" />
+				)}
+			</div>
+		</div>
+	);
+}

app/features/profile/Profile.ts

@@ -33,3 +33,10 @@ export interface Profile {
 	rank: number | null;
 	characterSetting: CharacterSetting;
 }
+
+export interface Ranking {
+	id: string;
+	displayName: string;
+	highScore: number;
+	rank: number;
+}

app/hooks/useRanking.ts

@@ -0,0 +1,53 @@
+import useSWRInfinite from "swr/infinite";
+import type { Ranking } from "~/features/profile/Profile";
+import { supabase } from "~/libs/supabase";
+
+const fetchRankingData = async (
+	page: number,
+	limit: number,
+): Promise<Ranking[]> => {
+	const start = limit * page;
+	const end = start + limit - 1;
+	const { data } = await supabase
+		.from("profiles_with_stats")
+		.select("user_id, display_name, high_score, play_count, rank")
+		.not("rank", "is", null)
+		.order("rank", { ascending: true })
+		.range(start, end);
+
+	if (!data) return [];
+
+	return data.map((x) => ({
+		id: x.user_id,
+		displayName: x.display_name,
+		// biome-ignore lint/style/noNonNullAssertion: high_scoreがnullでないことはクエリで保証されている
+		highScore: x.high_score!,
+		// biome-ignore lint/style/noNonNullAssertion: rankがnullでないことはクエリで保証されている
+		rank: x.rank!,
+	}));
+};
+
+export function useFetchRanking(limit = 20) {
+	const getKey = (page: number, previousPageData: Ranking[] | null) => {
+		if (previousPageData && previousPageData.length === 0) return null;
+		return [page, limit];
+	};
+
+	const { data, error, isLoading, isValidating, setSize } = useSWRInfinite(
+		getKey,
+		([page, limit]) => fetchRankingData(page, limit),
+	);
+
+	const ranking = data ? data.flat() : [];
+
+	const loadMore = () => setSize((prev) => prev + 1);
+
+	return {
+		ranking,
+		error,
+		isLoading,
+		isValidating,
+		loadMore,
+		hasMore: data?.[data.length - 1]?.length === limit,
+	};
+}

app/routes/_index/SignUp.tsx

@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
-import { LogginCard } from "~/components/LogginCard";
+import { LoginCard } from "~/components/LoginCard";
 
 export function SignUp(): ReactNode {
 	return (
 		<div className="grid justify-items-center gap-8">
 			<img src="/logo.svg" alt="RicoShot" className="w-full" />
-			<LogginCard className="w-full rotate-2" />
+			<LoginCard className="w-full rotate-2" />
 		</div>
 	);
 }

app/routes/_index/route.tsx

@@ -1,7 +1,7 @@
 import type { MetaFunction } from "@remix-run/react";
-import { Button } from "~/components/Button";
 import { Heading } from "~/components/Heading";
 import { ProfileCard } from "~/components/ProfileCard";
+import { RankingList } from "~/components/Ranking";
 import { useMyProfile } from "~/features/profile/useMyProfile";
 import { SignUp } from "./SignUp";
 
@@ -17,10 +17,14 @@ export default function Page() {
 		>
 			<main className="mx-auto grid w-full max-w-screen-sm gap-y-4">
 				{myProfile ? (
-					<ProfileCard className="rotate-2 sm:rotate-1" profile={myProfile} />
+					<>
+						<Heading>ホーム</Heading>
+						<ProfileCard className="rotate-2 sm:rotate-1" profile={myProfile} />
+					</>
 				) : (
 					<SignUp />
 				)}
+				<RankingList />
 			</main>
 		</div>
 	);