5UP3RB/actaeon
1
0
Fork 0
forked from sk1982/actaeon
Code Pull Requests Activity

chuni nameplate

Browse Source
This commit is contained in:
sk1982 2024-03-12 06:54:10 -04:00
parent e42d59251a
commit 5d813094ef
1 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/chuni/nameplate.tsx Normal file
View File

@ -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>)
};