chuni: change badge/rating font
This commit is contained in:
parent
e669d97c79
commit
4cb3fd2128
Binary file not shown.
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}`}
|
||||
|
|
|
|||
|
|
@ -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 =>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue