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

chuni: change badge/rating font

Browse Source
This commit is contained in:
sk1982 2024-03-14 21:22:17 -04:00
parent e669d97c79
commit 4cb3fd2128
8 changed files with 58 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/fonts/HelveticaNowDisplay-ExtraBold.woff2 Normal file
View File

Binary file not shown.

14
src/app/font.scss
View File

@ -10,8 +10,6 @@ $rodin-langs: ('en': $rodin-en-ranges, 'jp': $rodin-jp-ranges , 'rest': $rodin-r
$weight-val: nth($weight, 2);
@each $lang, $range in $rodin-langs {
@font-face {
font-family: FOT-RodinProN;
src: url(#{$asset-url}fonts/FOT-RodinProN-#{$weight-type}-#{$lang}.woff2) format("woff2");
@ -22,6 +20,18 @@ $rodin-langs: ('en': $rodin-en-ranges, 'jp': $rodin-jp-ranges , 'rest': $rodin-r
}
}
@font-face {
font-family: HelveticaNowDisplay;
src: url(#{$asset-url}fonts/HelveticaNowDisplay-ExtraBold.woff2) format("woff2");
font-weight: 800;
unicode-range: U+21-7e;
font-display: swap;
}
html {
font-family: FOT-RodinProN, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-helvetica {
font-family: HelveticaNowDisplay, "Helvetica Neue", Helvetica, Aria, ui-sans-serif, system-ui;
}

1
src/app/layout.tsx
View File

@ -14,6 +14,7 @@ export default async function RootLayout({children}: LayoutProps) {
<link rel="preload" href={getAssetUrl('/fonts/FOT-RodinProN-B-en.woff2')} as="font" type="font/woff2" crossOrigin="anonymous" />
<link rel="preload" href={getAssetUrl('/fonts/FOT-RodinProN-EB-en.woff2')} as="font" type="font/woff2" crossOrigin="anonymous" />
<link rel="preload" href={getAssetUrl('/fonts/FOT-RodinProN-UB-en.woff2')} as="font" type="font/woff2" crossOrigin="anonymous" />
<link rel="preload" href={getAssetUrl('/fonts/HelveticaNowDisplay-ExtraBold.woff2')} as="font" type="font/woff2" crossOrigin="anonymous" />
</head>
<body className="h-full">
<Providers>

10
src/components/chuni/music-list.tsx
View File

@ -9,7 +9,7 @@ import { worldsEndStars } from '@/helpers/chuni/worlds-end-stars';
import { ChuniDifficultyContainer } from '@/components/chuni/difficulty-container';
import { getJacketUrl } from '@/helpers/assets';
import { ChuniLevelBadge } from '@/components/chuni/level-badge';
import { ChuniScoreBadge, getVariantFromLamp, getVariantFromRank } from '@/components/chuni/score-badge';
import { ChuniScoreBadge, ChuniLampSuccessBadge, getVariantFromLamp, getVariantFromRank, ChuniLampComboBadge } from '@/components/chuni/score-badge';
import { ChuniRating } from '@/components/chuni/rating';
import Link from 'next/link';
import { Squares2X2Icon } from '@heroicons/react/24/outline';
@ -103,9 +103,7 @@ const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' })
</div>
<div className="px-0.5 mb-1 flex">
{size === 'lg' && <div className="h-full w-1/3 mr-0.5">
{item.isSuccess ? <ChuniScoreBadge variant={getVariantFromLamp(item.isSuccess)} className="h-full">
{CHUNI_LAMPS.get(item.isSuccess)}
</ChuniScoreBadge> : null}
{item.isSuccess ? <ChuniLampSuccessBadge success={item.isSuccess} /> : null}
</div>}
<div className={`h-full ${size === 'sm' ? 'w-1/2' : 'w-1/3'}`}>
@ -115,9 +113,7 @@ const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' })
</div>
<div className={`h-full ml-0.5 ${size === 'sm' ? 'w-1/2' : 'w-1/3'}`}>
{(item.isFullCombo || item.isAllJustice) ? <ChuniScoreBadge variant={item.isAllJustice ? 'platinum' : 'gold'} className="h-full">
{item.isAllJustice ? 'All Justice' : 'Full Combo'}
</ChuniScoreBadge> : null}
<ChuniLampComboBadge {...item} />
</div>
</div>
<Link href={`/chuni/music/${item.songId}`}

21
src/components/chuni/music-playlog.tsx
View File

@ -6,7 +6,7 @@ import { Accordion, AccordionItem } from '@nextui-org/react';
import { CHUNI_DIFFICULTIES } from '@/helpers/chuni/difficulties';
import { ChuniLevelBadge } from '@/components/chuni/level-badge';
import { ChuniRating } from '@/components/chuni/rating';
import { ChuniScoreBadge, getVariantFromLamp, getVariantFromRank } from '@/components/chuni/score-badge';
import { ChuniLampComboBadge, ChuniLampSuccessBadge, ChuniScoreBadge, getVariantFromLamp, getVariantFromRank } from '@/components/chuni/score-badge';
import { CHUNI_SCORE_RANKS } from '@/helpers/chuni/score-ranks';
import { CHUNI_LAMPS } from '@/helpers/chuni/lamps';
import { ChuniPlaylogCard } from '@/components/chuni/playlog-card';
@ -38,19 +38,16 @@ export const ChuniMusicPlaylog = ({ music, playlog }: ChuniMusicPlaylogProps) =>
return (<div className="flex flex-col w-full px-2 sm:px-0">
{difficulties.map((data, i) => {
const rank = CHUNI_SCORE_RANKS[data.scoreRank!];
const badges = [
!!data.scoreRank && <ChuniScoreBadge variant={getVariantFromRank(data.scoreRank)} className={badgeClass} key="1">
{CHUNI_SCORE_RANKS[data.scoreRank]}
!!data.scoreRank && <ChuniScoreBadge variant={getVariantFromRank(data.scoreRank)} className={`${badgeClass} tracking-[0.05cqw]`} key="1">
{rank.endsWith('+') ? <>
{rank.slice(0, -1)}
<div className="inline-block translate-y-[-15cqh]">+</div>
</> : rank}
</ChuniScoreBadge>,
!!data.isSuccess && <ChuniScoreBadge variant={getVariantFromLamp(data.isSuccess)} className={badgeClass} key="2">
{CHUNI_LAMPS.get(data.isSuccess)}
</ChuniScoreBadge>,
!!data.isFullCombo && !data.isAllJustice && <ChuniScoreBadge variant="gold" className={badgeClass} key="3">
Full Combo
</ChuniScoreBadge>,
!!data.isAllJustice && <ChuniScoreBadge variant="platinum" className={badgeClass} key="4">
All Justice
</ChuniScoreBadge>,
data.isSuccess ? <ChuniLampSuccessBadge key="2" className={badgeClass} success={data.isSuccess} /> : null,
<ChuniLampComboBadge key="3" className={badgeClass} {...data} />
].filter(x => x);
const toggleExpanded = () => expanded[i] && setExpanded(e =>

9
src/components/chuni/playlog-card.tsx
View File

@ -2,7 +2,7 @@ import { getPlaylog } from '@/actions/chuni/playlog';
import { getJacketUrl } from '@/helpers/assets';
import Link from 'next/link';
import { ChuniRating } from '@/components/chuni/rating';
import { ChuniScoreBadge, getVariantFromRank } from '@/components/chuni/score-badge';
import { ChuniScoreBadge, ChuniLampSuccessBadge, getVariantFromRank, ChuniLampComboBadge } from '@/components/chuni/score-badge';
import { ChuniLevelBadge } from '@/components/chuni/level-badge';
import { ChuniDifficultyContainer } from '@/components/chuni/difficulty-container';
import { formatJst } from '@/helpers/format-jst';
@ -56,10 +56,9 @@ export const ChuniPlaylogCard = ({ playlog, className }: ChuniPlaylogCardProps)
<ChuniScoreBadge variant={getVariantFromRank(playlog.rank ?? 0)} className="h-full">
{playlog.score?.toLocaleString()}
</ChuniScoreBadge>
{!!playlog.isClear && <ChuniScoreBadge variant="gold">Clear</ChuniScoreBadge>}
{!!playlog.isAllJustice && <ChuniScoreBadge variant="platinum">All Justice</ChuniScoreBadge>}
{!!playlog.isFullCombo && !playlog.isAllJustice && <ChuniScoreBadge variant="gold">Full Combo</ChuniScoreBadge>}
{!!playlog.isNewRecord && <ChuniScoreBadge variant="gold">New Record</ChuniScoreBadge>}
{!!playlog.isClear && <ChuniLampSuccessBadge success={1} />}
<ChuniLampComboBadge {...playlog} />
{!!playlog.isNewRecord && <ChuniScoreBadge variant="gold" fontSize="sm">NEW RECORD</ChuniScoreBadge>}
</div>
<div className="flex flex-wrap text-xs justify-around drop-shadow-sm">
<div className="mr-0.5 text-chuni-justice-critical">Justice Critical: { playlog.judgeHeaven }</div>

2
src/components/chuni/rating.tsx
View File

@ -31,7 +31,7 @@ export const ChuniRating = ({ children, rating, className }: ChuniRatingProps) =
else
bg = 'bg-[linear-gradient(180deg,rgba(255,0,0,1)_0%,rgba(255,64,0,1)_25%,rgba(255,255,0,1)_50%,rgba(0,255,0,1)_60%,rgba(0,64,255,1)_80%)]'
return (<div className={`bg-clip-text text-transparent text-stroke text-stroke-black font-extrabold ${bg} ${className ?? ''}`}>
return (<div className={`bg-clip-text text-transparent text-stroke text-stroke-black font-extrabold font-helvetica ${bg} ${className ?? ''}`}>
{children ?? (ratingNum / 100).toFixed(2)}
</div>)
}

31
src/components/chuni/score-badge.tsx
View File

@ -1,4 +1,5 @@
import { ReactNode } from 'react';
import { CHUNI_LAMPS } from '@/helpers/chuni/lamps';
const BACKGROUNDS = [
'bg-[linear-gradient(135deg,rgba(120,120,120,1)_30%,rgba(90,91,90,1)_50%,rgba(172,170,170,1)_50%,rgba(115,114,114,1)_63%,rgba(98,98,98,1)_80%,rgba(129,129,129,1)_100%)]',
@ -53,14 +54,38 @@ export type ChuniScoreBadgeProps = {
children: ReactNode,
variant: Variant,
className?: string,
fontSize?: 'xs' | 'sm' | 'md'
};
export const ChuniScoreBadge = ({ children, variant, className }: ChuniScoreBadgeProps) => {
return (<div className={`aspect-[68/16] ${className ?? ''}`}>
const sizes = {
xs: 'text-[52cqh]',
sm: 'text-[59cqh]',
md: 'text-[70cqh]'
}
export const ChuniScoreBadge = ({ children, variant, className, fontSize }: ChuniScoreBadgeProps) => {
const size = sizes[fontSize ?? 'md'];
return (<div className={`aspect-[72/16] font-helvetica ${className ?? ''}`}>
<div className="@container-size w-full h-full text-black">
<div className={`${BACKGROUNDS[typeof variant === 'number' ? variant : ChuniScoreBadgeVariant[variant]]} w-full h-full flex items-center justify-center border-black border`}>
<span className="font-bold drop-shadow-[0_0_25cqh_#fff] text-[65cqh]">{ children }</span>
<span className={`font-bold drop-shadow-[0_0_25cqh_#fff] ${size}`}>{ children }</span>
</div>
</div>
</div>)
};
export const ChuniLampSuccessBadge = ({ success, className }: { className?: string, success: number }) => {
const text = CHUNI_LAMPS.get(success)?.toUpperCase();
const fontSize = text?.length! > 5 ? text?.length! > 10 ? 'xs' : 'sm' : 'md';
return (<ChuniScoreBadge variant={getVariantFromLamp(success)} className={`${className ?? ''} ${fontSize === 'md' ? 'tracking-[0.1cqw]' : 'tracking-[0.025cqw]'}`} fontSize={fontSize}>
{text}
</ChuniScoreBadge>)
}
export const ChuniLampComboBadge = ({ className, isFullCombo, isAllJustice }: { className?: string, isFullCombo: number | null, isAllJustice: number | null }) => {
if (!isFullCombo && !isAllJustice) return null;
return (<ChuniScoreBadge variant={isAllJustice ? 'platinum' : 'gold'} className={className} fontSize="sm">
{isAllJustice ? 'ALL JUSTICE' : 'FULL COMBO'}
</ChuniScoreBadge>)
}