forked from sk1982/actaeon
chuni trophy
This commit is contained in:
parent
f6beb973b7
commit
d60634dad4
39
src/components/chuni/trophy.tsx
Normal file
39
src/components/chuni/trophy.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { getImageUrl } from '@/helpers/assets';
|
||||
|
||||
const TROPHY_TYPES = {
|
||||
0: 0, // common
|
||||
1: 1, // bronze
|
||||
2: 2, // silver
|
||||
3: 3, // gold
|
||||
4: 3, // expert all justice (gold)
|
||||
5: 4, // platinum
|
||||
6: 4, // master all justice (platinum)
|
||||
7: 5, // rainbow
|
||||
9: 6, // gekichumai dev staff
|
||||
10: 7 // ongeki linked title
|
||||
};
|
||||
|
||||
const TROPHY_Y = [6, 81, 156, 231, 306, 381, 456, 531].map(x => x / 1024 * 100);
|
||||
|
||||
export type ChuniTrophyProps = {
|
||||
name: string | null,
|
||||
rarity: number | null,
|
||||
className?: string
|
||||
};
|
||||
|
||||
export const ChuniTrophy = ({ name, rarity, className }: ChuniTrophyProps) => {
|
||||
return (<div className={`w-full overflow-hidden relative aspect-[593/62] @container-size ${className}`}>
|
||||
<div className="z-10 absolute w-full h-full flex items-center justify-center top-0" lang="ja">
|
||||
<div className="w-11/12 text-black font-semibold text-center text-nowrap overflow-hidden text-[50cqh]" title={name ?? 'Trophy'}>
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[129.51%] aspect-[768/1024] relative">
|
||||
<img src={getImageUrl('chuni/trophy/CHU_UI_title_rank_00_v10')}
|
||||
alt={name ?? 'Trophy'} title={name ?? 'Trophy'}
|
||||
className="w-full absolute left-[-0.78125%]" style={{
|
||||
top: `-${TROPHY_Y[TROPHY_TYPES[rarity as keyof typeof TROPHY_TYPES]]}%`
|
||||
}}/>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
Loading…
Reference in New Issue
Block a user