From e973feed53d0fd713ec2dc8ee863efbd850b75b4 Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Sat, 16 Nov 2024 00:18:14 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[feat]=20PlayerRankCard=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E4=BD=9C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/view/user/PlayerRankCard.tsx   | 165 ++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 app/src/components/view/user/PlayerRankCard.tsx

diff --git a/app/src/components/view/user/PlayerRankCard.tsx b/app/src/components/view/user/PlayerRankCard.tsx
new file mode 100644
index 0000000..2f3b3ac
--- /dev/null
+++ b/app/src/components/view/user/PlayerRankCard.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { useEffect, useState } from "react";
+
+type Rank = {
+	min: number;
+	max: number;
+	color: string;
+	bgColor: string;
+};
+
+const ranks: { [key: string]: Rank } = {
+	ブロンズ: {
+		min: 0,
+		max: 499,
+		color: "text-orange-500",
+		bgColor: "bg-orange-100",
+	},
+	シルバー: {
+		min: 500,
+		max: 999,
+		color: "text-slate-500",
+		bgColor: "bg-slate-100",
+	},
+	ゴールド: {
+		min: 1000,
+		max: 1499,
+		color: "text-yellow-500",
+		bgColor: "bg-yellow-100",
+	},
+	プラチナ: {
+		min: 1500,
+		max: 1999,
+		color: "text-emerald-500",
+		bgColor: "bg-emerald-100",
+	},
+	ダイヤモンド: {
+		min: 2000,
+		max: 2499,
+		color: "text-blue-500",
+		bgColor: "bg-blue-100",
+	},
+	マスター: {
+		min: 2500,
+		max: 2999,
+		color: "text-purple-500",
+		bgColor: "bg-purple-100",
+	},
+	プレデター: {
+		min: 3000,
+		max: 3499,
+		color: "text-red-500",
+		bgColor: "bg-red-100",
+	},
+};
+
+const getCurrentRank = (rating: number): string | undefined => {
+	return Object.entries(ranks).find(
+		([_, { min, max }]) => rating >= min && rating <= max,
+	)?.[0];
+};
+
+interface PlayerRankCardProps {
+	rankPoint: number;
+}
+
+export default function PlayerRankCard({ rankPoint }: PlayerRankCardProps) {
+	const [currentRank, setCurrentRank] = useState<string | undefined>(
+		getCurrentRank(rankPoint),
+	);
+
+	useEffect(() => {
+		setCurrentRank(getCurrentRank(rankPoint));
+	}, [rankPoint]);
+
+	const nextRank =
+		currentRank &&
+		(Object.keys(ranks)[Object.keys(ranks).indexOf(currentRank) + 1] ||
+			undefined);
+
+	if (!currentRank) {
+		return (
+			<div className="w-[21rem]">
+				<Card className="w-full max-w-md space-y-6 p-8">
+					<p className="font-bold text-[#333333]">ランクが見つかりません</p>
+				</Card>
+			</div>
+		);
+	}
+
+	const rankPositionPercentage =
+		100 -
+		Math.floor(
+			((rankPoint - ranks[currentRank].min) /
+				(ranks[currentRank].max - ranks[currentRank].min)) *
+				100,
+		);
+
+	return (
+		<div className="w-[21rem] grid gap-8">
+			<Card className="w-full max-w-md space-y-6 p-8">
+				<div className="flex justify-between items-center">
+					<div>
+						<h3 className={`text-3xl font-bold ${ranks[currentRank].color}`}>
+							{currentRank}
+						</h3>
+						<p className="text-sm text-muted-foreground">現在のランク</p>
+					</div>
+					<div
+						className={`w-16 h-16 rounded-full ${ranks[currentRank].bgColor} flex items-center justify-center`}
+					>
+						<span className={`text-2xl font-bold ${ranks[currentRank].color}`}>
+							{rankPoint}
+						</span>
+					</div>
+				</div>
+				<Progress
+					value={
+						((rankPoint - ranks[currentRank].min) /
+							(ranks[currentRank].max - ranks[currentRank].min)) *
+						100
+					}
+					className="h-2"
+				/>
+				<div className="grid grid-cols-2 gap-4 text-sm">
+					<div>
+						<p className="text-muted-foreground">ランク範囲</p>
+						<p className="font-semibold">
+							{ranks[currentRank].min} - {ranks[currentRank].max} LP
+						</p>
+					</div>
+					{nextRank && (
+						<>
+							<div>
+								<p className="text-muted-foreground">次のランク</p>
+								<p className="font-semibold">{nextRank}</p>
+							</div>
+							<div>
+								<p className="text-muted-foreground">次のランクまで</p>
+								<p className="font-semibold">
+									{ranks[currentRank].max - rankPoint} LP
+								</p>
+							</div>
+						</>
+					)}
+					<div>
+						<p className="text-muted-foreground">現在のLP</p>
+						<p className="font-semibold">{rankPoint} LP</p>
+					</div>
+				</div>
+				<div className={`p-4 rounded-lg ${ranks[currentRank].bgColor}`}>
+					<p className="text-center text-sm mb-1">ランク内での位置</p>
+					<div className="flex gap-2 justify-center items-center">
+						<p className="text-sm font-bold">上位</p>
+						<p className="text-center text-2xl font-bold">
+							{rankPositionPercentage}%
+						</p>
+					</div>
+				</div>
+			</Card>
+		</div>
+	);
+}

From 4fe432322eddfbabedd3e2a7e7f08f5b11016d0d Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Sat, 16 Nov 2024 00:18:26 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[feat]=20=E3=83=A6=E3=83=BC=E3=82=B6?=
 =?UTF-8?q?=E3=83=BC=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AB=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/app/user/page.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/src/app/user/page.tsx b/app/src/app/user/page.tsx
index 2daca6a..9c274e9 100644
--- a/app/src/app/user/page.tsx
+++ b/app/src/app/user/page.tsx
@@ -3,6 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import PlayerRankCard from "@/components/view/user/PlayerRankCard";
 import StatusChangeDialog from "@/components/view/user/StatusChangeDialog";
 import StatusList from "@/components/view/user/StatusList";
 import { useStatusChangeDialog } from "@/lib/atom";
@@ -112,6 +113,7 @@ const UserPage = () => {
 					<p className="text-xs text-muted-foreground">最高点</p>
 				</Card>
 			</div>
+			<PlayerRankCard rankPoint={2800} />
 			<button type="button" onClick={() => handleOpenDialog()}>
 				<StatusList speedPoint={10} similarityPoint={40} />
 			</button>