From 5d813094ef2cafbe9f90b1a626e8cbc7cbebd507 Mon Sep 17 00:00:00 2001
From: sk1982 <sk1982@noreply.gitea.tendokyu.moe>
Date: Tue, 12 Mar 2024 06:54:10 -0400
Subject: [PATCH] chuni nameplate

---
 src/components/chuni/nameplate.tsx | 76 ++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/components/chuni/nameplate.tsx

diff --git a/src/components/chuni/nameplate.tsx b/src/components/chuni/nameplate.tsx
new file mode 100644
index 0000000..26490c6
--- /dev/null
+++ b/src/components/chuni/nameplate.tsx
@@ -0,0 +1,76 @@
+import { getUserData } from '@/actions/chuni/profile';
+import {  getImageUrl } from '@/helpers/assets';
+import { ChuniTrophy } from '@/components/chuni/trophy';
+import { PickNullable } from '@/types/pick-nullable';
+import { ChuniRating } from '@/components/chuni/rating';
+
+export type Profile = PickNullable<Awaited<ReturnType<typeof getUserData>>,
+	'trophyName' | 'trophyRareType' | 'nameplateImage' | 'nameplateName' | 'teamName' | 'characterId' | 'level' | 'userName' | 'overPowerRate' | 'overPowerPoint' | 'lastPlayDate' | 'playerRating' | 'highestRating'>;
+
+export type ChuniNameplateProps = {
+	className?: string,
+	profile: Profile,
+};
+
+export const ChuniNameplate = ({ className, profile }: ChuniNameplateProps) => {
+	if (!profile) return null;
+
+	return (<div className={`aspect-[576/210] overflow-hidden ${className ?? ''}`}>
+		<div className="aspect-[576/228] w-full relative">
+			<div className="absolute z-10 w-[73%] h-full right-[1.5%] top-[3%] flex flex-col items-center">
+				<div className="h-[15%] w-[99%]">
+					<div className="@container-size h-full bg-gray-400 rounded p-[0.35%]">
+						<div className="w-full h-full border border-gray-600 rounded flex items-center shadow-inner">
+							<div className="text-[50cqh] mx-2 text-gray-700 font-semibold">TEAM</div>
+							<div className={`text-[55cqh] w-full h-full p-[0.5%] pl-0 ${profile.teamName ? 'font-semibold text-white' : 'italic text-gray-300'}`}>
+								<div className="w-full h-full bg-gray-700 shadow-inner px-[2.5%] flex items-center">
+									<span>{profile.teamName ?? 'You are not part of a team'}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<ChuniTrophy rarity={profile.trophyRareType} name={profile.trophyName} />
+				<div className="w-[99%] h-[52%] flex">
+					<div className="w-full m-[0.25%]">
+						<div className="h-full w-full bg-gray-400 px-[2%] @container-size flex flex-col text-black font-semibold text-nowrap overflow-hidden">
+							<div className="flex items-baseline border-b border-gray-700">
+								<span className="font-normal text-[14cqh]">Lv.</span>
+								<span className="text-[18cqh]">{profile.level}</span>
+								<span lang="ja" className="text-[21cqh] flex-grow text-center font-bold">
+								{profile.userName?.padEnd(7, '\u3000')}
+							</span>
+							</div>
+							<div className="leading-none py-[1.25%] border-b border-gray-700 flex items-baseline">
+								<span className="font-normal text-[13cqh]">Over Power:&nbsp;</span>
+								<span className="text-[14cqh]">{profile.overPowerPoint?.toLocaleString()} ({((profile?.overPowerRate ?? 0)/ 100).toFixed(2)}%)</span>
+							</div>
+							<div className="leading-none py-[1%] border-b border-gray-700 flex items-baseline">
+								<span className="font-normal text-[13cqh]">Last Play Date:&nbsp;</span>
+								<span className="text-[15cqh]">{profile.lastPlayDate && new Date(`${profile.lastPlayDate} +0900`).toLocaleTimeString(undefined, {
+									month: 'numeric',
+									day: 'numeric',
+									year: '2-digit',
+									hour: 'numeric',
+									minute: '2-digit'
+								})}</span>
+							</div>
+							<div className="leading-none py-[2%] flex items-baseline">
+								<ChuniRating className="text-[12cqh] text-stroke-[0.75cqh]" rating={profile.playerRating}>
+									RATING:&nbsp;
+								</ChuniRating>
+								<ChuniRating className="text-[15cqh] text-stroke-[0.75cqh]" rating={profile.playerRating} />
+								<span className="text-[13cqh]">&nbsp;(<span className="text-[11cqh]">MAX</span> {((profile.highestRating ?? 0) / 100).toFixed(2)})</span>
+							</div>
+						</div>
+					</div>
+					<img className="ml-auto aspect-square h-full bg-gray-200 border-2 border-black" alt="Character" src={profile.characterId ? getImageUrl(
+						`chuni/character/CHU_UI_Character_${Math.floor(profile.characterId / 10).toString()
+							.padStart(4, '0')}_${(profile.characterId % 10).toString().padStart(2, '0')}_02`) : ''}/>
+				</div>
+			</div>
+			<img src={getImageUrl(`chuni/name-plate/${profile.nameplateImage}`)} title={profile.nameplateName ?? 'Nameplate'}
+				alt={profile.nameplateName ?? 'Nameplate'} className="absolute inset-0 w-full h-full" />
+		</div>
+	</div>)
+};