diff --git a/public/assets/fonts/HelveticaNowDisplay-ExtraBold.woff2 b/public/assets/fonts/HelveticaNowDisplay-ExtraBold.woff2 new file mode 100644 index 0000000..353ed45 Binary files /dev/null and b/public/assets/fonts/HelveticaNowDisplay-ExtraBold.woff2 differ diff --git a/src/app/font.scss b/src/app/font.scss index 15519f4..9860e32 100644 --- a/src/app/font.scss +++ b/src/app/font.scss @@ -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; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b290df1..201cd08 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -14,6 +14,7 @@ export default async function RootLayout({children}: LayoutProps) { + diff --git a/src/components/chuni/music-list.tsx b/src/components/chuni/music-list.tsx index 9591af8..1d7aa4f 100644 --- a/src/components/chuni/music-list.tsx +++ b/src/components/chuni/music-list.tsx @@ -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' })
{size === 'lg' &&
- {item.isSuccess ? - {CHUNI_LAMPS.get(item.isSuccess)} - : null} + {item.isSuccess ? : null}
}
@@ -115,9 +113,7 @@ const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' })
- {(item.isFullCombo || item.isAllJustice) ? - {item.isAllJustice ? 'All Justice' : 'Full Combo'} - : null} +
return (
{difficulties.map((data, i) => { + const rank = CHUNI_SCORE_RANKS[data.scoreRank!]; const badges = [ - !!data.scoreRank && - {CHUNI_SCORE_RANKS[data.scoreRank]} + !!data.scoreRank && + {rank.endsWith('+') ? <> + {rank.slice(0, -1)} +
+
+ : rank} , - !!data.isSuccess && - {CHUNI_LAMPS.get(data.isSuccess)} - , - !!data.isFullCombo && !data.isAllJustice && - Full Combo - , - !!data.isAllJustice && - All Justice - , + data.isSuccess ? : null, + ].filter(x => x); const toggleExpanded = () => expanded[i] && setExpanded(e => diff --git a/src/components/chuni/playlog-card.tsx b/src/components/chuni/playlog-card.tsx index dfa3181..eae540b 100644 --- a/src/components/chuni/playlog-card.tsx +++ b/src/components/chuni/playlog-card.tsx @@ -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) {playlog.score?.toLocaleString()} - {!!playlog.isClear && Clear} - {!!playlog.isAllJustice && All Justice} - {!!playlog.isFullCombo && !playlog.isAllJustice && Full Combo} - {!!playlog.isNewRecord && New Record} + {!!playlog.isClear && } + + {!!playlog.isNewRecord && NEW RECORD}
Justice Critical: { playlog.judgeHeaven }
diff --git a/src/components/chuni/rating.tsx b/src/components/chuni/rating.tsx index 97c59ea..190eb26 100644 --- a/src/components/chuni/rating.tsx +++ b/src/components/chuni/rating.tsx @@ -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 (
+ return (
{children ?? (ratingNum / 100).toFixed(2)}
) } diff --git a/src/components/chuni/score-badge.tsx b/src/components/chuni/score-badge.tsx index e9e2331..9f1c86c 100644 --- a/src/components/chuni/score-badge.tsx +++ b/src/components/chuni/score-badge.tsx @@ -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 (
+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 (
- { children } + { children }
) }; + +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 ( + {text} + ) +} + +export const ChuniLampComboBadge = ({ className, isFullCombo, isAllJustice }: { className?: string, isFullCombo: number | null, isAllJustice: number | null }) => { + if (!isFullCombo && !isAllJustice) return null; + return ( + {isAllJustice ? 'ALL JUSTICE' : 'FULL COMBO'} + ) +}