chuni: add music detail page

.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>

src/actions/chuni/playlog.ts

@@ -14,6 +14,8 @@ export type GetPlaylogOptions = {
 
 export async function getPlaylog(opts: GetPlaylogOptions) {
 	const user = await requireUser();
+	const musicId = 'musicId' in opts ? +opts.musicId : NaN;
+	const chartId = 'chartId' in opts ? +opts.chartId : NaN;
 
 	const playlog = await db.with('p', db => db
 		.selectFrom('chuni_score_playlog as playlog')
@@ -41,8 +43,8 @@ export async function getPlaylog(opts: GetPlaylogOptions) {
 	)
 		.selectFrom('p')
 		.where(({ and, eb }) => and([
-			...('musicId' in opts ? [eb('p.songId', '=', opts.musicId)] : []),
-			...('chartId' in opts ? [eb('p.chartId', '=', opts.chartId)] : []),
+			...(!Number.isNaN(musicId) ? [eb('p.songId', '=', musicId)] : []),
+			...(!Number.isNaN(chartId) ? [eb('p.chartId', '=', chartId)] : []),
 		]))
 		.selectAll()
 		.limit(+opts.limit)
@@ -54,8 +56,8 @@ export async function getPlaylog(opts: GetPlaylogOptions) {
 			.where(({ and, eb }) => and([
 				eb('playlog.user', '=', user.id),
 				eb('playlog.id', '<', playlog.at(-1)!.id),
-				...('musicId' in opts ? [eb('playlog.musicId', '=', opts.musicId)] : []),
-				...('chartId' in opts ? [eb('playlog.level', '=', opts.chartId)] : []),
+				...(!Number.isNaN(musicId) ? [eb('playlog.musicId', '=', musicId)] : []),
+				...(!Number.isNaN(chartId) ? [eb('playlog.level', '=', chartId)] : []),
 			]))
 			.select(({ fn }) => fn.countAll().as('remaining'))
 			.executeTakeFirstOrThrow()).remaining);

src/app/(with-header)/chuni/music/[musicId]/page.tsx

@@ -0,0 +1,36 @@
+import { getMusic } from '@/actions/chuni/music';
+import { notFound } from 'next/navigation';
+import { MusicPlayer } from '@/components/music-player';
+import { getJacketUrl, getMusicUrl } from '@/helpers/assets';
+import { Ticker } from '@/components/ticker';
+import { getPlaylog } from '@/actions/chuni/playlog';
+import { Accordion, AccordionItem } from '@nextui-org/react';
+import { ChuniMusicPlaylog } from '@/components/chuni/music-playlog';
+
+export default async function ChuniMusicDetail({ params }: { params: { musicId: string } }) {
+	const musicId = parseInt(params.musicId);
+	if (Number.isNaN(musicId))
+		return notFound();
+
+	const [music, playlog] = await Promise.all([
+		getMusic(musicId),
+		getPlaylog({ musicId, limit: 500 })
+	]);
+
+
+	if (!music.length)
+		return notFound();
+
+
+	const cueId = music[0].jacketPath?.match(/UI_Jacket_(\d+)/)?.[1];
+
+	return (<div className="flex flex-col items-center sm:mt-2">
+		<MusicPlayer className="xl:self-start xl:mt-3 xl:ml-3 mb-3 sm:mb-6" image={getJacketUrl(`chuni/jacket/${music[0].jacketPath}`)}
+			audio={getMusicUrl(`chuni/music/music${cueId?.padStart(4, '0')}`)}>
+			<Ticker className="font-semibold text-center sm:text-left">{ music[0].title }</Ticker>
+			<Ticker className="text-center sm:text-left">{ music[0].artist }</Ticker>
+			<span className="text-medium">{ music[0].genre }</span>
+		</MusicPlayer>
+		<ChuniMusicPlaylog music={music} playlog={playlog} />
+	</div>);
+}

src/components/chuni/music-list.tsx

@@ -9,10 +9,14 @@ 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, getVariantFromRank } from '@/components/chuni/score-badge';
+import { ChuniScoreBadge, getVariantFromLamp, getVariantFromRank } from '@/components/chuni/score-badge';
 import { ChuniRating } from '@/components/chuni/rating';
 import Link from 'next/link';
 import { Squares2X2Icon } from '@heroicons/react/24/outline';
+import { Ticker } from '@/components/ticker';
+import { CHUNI_DIFFICULTIES } from '@/helpers/chuni/difficulties';
+import { CHUNI_SCORE_RANKS } from '@/helpers/chuni/score-ranks';
+import { CHUNI_LAMPS } from '@/helpers/chuni/lamps';
 
 const getLevelFromStop = (n: number) => {
 	if (n < 7)
@@ -55,25 +59,6 @@ const searcher = (query: string, data: ChuniMusicListProps['music'][number]) =>
 	return data.title?.toLowerCase().includes(query) || data.artist?.toLowerCase().includes(query);
 };
 
-const SCORES = ['D', 'C', 'B', 'BB', 'BBB', 'A', 'AA', 'AAA', 'S', 'S+', 'SS', 'SS+', 'SSS', 'SSS+'];
-// TODO: check if these are correct
-const LAMPS = new Map([
-	[1, 'Clear'],
-	[2, 'Hard'],
-	[3, 'Absolute'],
-	[4, 'Absolute+'],
-	[5, 'Absolute++'],
-	[6, 'Catastrophy']
-]);
-const LAMP_DISPLAY = {
-	1: 'gold',
-	2: 'gold',
-	3: 'gold',
-	4: 'platinum',
-	5: 'platinum',
-	6: 'platinum'
-};
-
 const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' }) => {
 	let itemWidth = 0;
 	let itemHeight = 0;
@@ -81,12 +66,12 @@ const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' })
 
 	if (size === 'sm') {
 		itemWidth = 175;
-		itemHeight = 225;
-		itemClass = 'w-[175px] h-[230px] py-1.5 px-1';
+		itemHeight = 235;
+		itemClass = 'w-[175px] h-[235px] py-1.5 px-1';
 	} else {
 		itemWidth = 285;
-		itemHeight = 360;
-		itemClass = 'w-[285px] h-[360px] py-1.5 px-1';
+		itemHeight = 375;
+		itemClass = 'w-[285px] h-[375px] py-1.5 px-1';
 	}
 
 	const listRef = useRef<List | null>(null);
@@ -106,7 +91,7 @@ const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' })
 						onScroll={onChildScroll} scrollTop={scrollTop} ref={listRef}
 						rowRenderer={({ index, key, style }) => <div key={key} style={style} className="w-full h-full flex justify-center">
 							{music.slice(index * itemsPerRow, (index + 1) * itemsPerRow).map(item => <div key={`${item.songId}-${item.chartId}`} className={itemClass}>
-									<ChuniDifficultyContainer difficulty={item.chartId!} containerClassName="flex flex-col" className="w-full h-full border border-gray-500/75 rounded-md">
+									<ChuniDifficultyContainer difficulty={item.chartId!} containerClassName="flex flex-col" className="w-full h-full border border-gray-500/75 rounded-md [&:hover_.ticker]:[animation-play-state:running]">
 										<div className="aspect-square w-full p-[0.2rem] relative">
 											<img src={getJacketUrl(`chuni/jacket/${item.jacketPath}`)} alt={item.title ?? 'Music'} className="rounded" />
 											{item.rating && !item.worldsEndTag && <div className={`${size === 'sm' ? '' : 'text-2xl'} absolute bottom-0.5 left-0.5 bg-gray-200/60 backdrop-blur-sm px-0.5 rounded`}>
@@ -118,8 +103,8 @@ 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={LAMP_DISPLAY[item.isSuccess]} className="h-full">
-													{LAMPS.get(item.isSuccess)}
+												{item.isSuccess ? <ChuniScoreBadge variant={getVariantFromLamp(item.isSuccess)} className="h-full">
+													{CHUNI_LAMPS.get(item.isSuccess)}
 												</ChuniScoreBadge> : null}
 											</div>}
 
@@ -136,13 +121,10 @@ const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' })
 											</div>
 										</div>
 										<Link href={`/chuni/music/${item.songId}`}
-											className={`${size === 'sm' ? 'text-xs' : 'text-lg'} mt-auto px-1 block text-white hover:text-gray-200 transition text-center font-semibold text-nowrap overflow-hidden drop-shadow-lg`}
-											lang="ja">
-											{item.title}
+											className={`${size === 'sm' ? 'text-xs' : 'text-lg'} mt-auto px-1 block text-white hover:text-gray-200 transition text-center font-semibold drop-shadow-lg`}>
+											<Ticker hoverOnly noDelay>{item.title}</Ticker>
 										</Link>
-										<div className={`${size === 'sm' ? 'text-xs mb-0.5' : 'text-medium mb-1.5'} px-1 text-white text-center text-nowrap overflow-hidden drop-shadow-lg`} lang="ja">
-											{item.artist}
-										</div>
+										<Ticker className={`${size === 'sm' ? 'text-xs mb-0.5' : 'text-medium mb-1.5'} text-center px-1 drop-shadow-2xl`} hoverOnly noDelay>{item.artist}</Ticker>
 									</ChuniDifficultyContainer>
 							</div>)}
 						</div>} />)
@@ -167,14 +149,9 @@ export const ChuniMusicList = ({ music }: ChuniMusicListProps) => {
 			value: new Set<string>(),
 			className: 'col-span-6 md:col-span-3 5xl:col-span-1',
 			props: {
-				children: [
-					<SelectItem key="0" value="0">Basic</SelectItem>,
-					<SelectItem key="1" value="1">Advanced</SelectItem>,
-					<SelectItem key="2" value="2">Expert</SelectItem>,
-					<SelectItem key="3" value="3">Master</SelectItem>,
-					<SelectItem key="4" value="4">Ultima</SelectItem>,
-					<SelectItem key="5" value="5">World&apos;s End</SelectItem>,
-				],
+				children: CHUNI_DIFFICULTIES.map((name, i) => <SelectItem key={i.toString()} value={i.toString()}>
+					{name}
+				</SelectItem>),
 				selectionMode: 'multiple'
 			},
 			filter: (val: Set<string>, data) => !val.size || val.has(data.chartId?.toString()!)
@@ -200,14 +177,14 @@ export const ChuniMusicList = ({ music }: ChuniMusicListProps) => {
 				children: [
 					<SelectItem key="aj" value="aj">All Justice</SelectItem>,
 					<SelectItem key="fc" value="fc">Full Combo</SelectItem>,
-					...[...LAMPS].map(([id, name]) => <SelectItem key={id.toString()} value={id.toString()}>{name}</SelectItem>)
+					...[...CHUNI_LAMPS].map(([id, name]) => <SelectItem key={id.toString()} value={id.toString()}>{name}</SelectItem>)
 				],
 				selectionMode: 'multiple'
 			},
 			filter: (val: Set<string>, data) => {
 				if (!val.size) return true;
 
-				const checkLamps = [...LAMPS].some(([id]) => val.has(id.toString()));
+				const checkLamps = [...CHUNI_LAMPS].some(([id]) => val.has(id.toString()));
 				if (checkLamps && (!data.isSuccess || !val.has(data.isSuccess.toString())))
 					return false
 
@@ -238,7 +215,7 @@ export const ChuniMusicList = ({ music }: ChuniMusicListProps) => {
 			value: new Set<string>(),
 			className: 'col-span-full sm:col-span-6 md:col-span-4 lg:col-span-2 xl:col-span-2 5xl:col-span-1',
 			props: {
-				children: SCORES
+				children: CHUNI_SCORE_RANKS
 					.map((s, i) => <SelectItem key={i.toString()} value={i.toString()}>{s}</SelectItem>)
 					.reverse(),
 				selectionMode: 'multiple'

src/components/chuni/music-playlog.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { getMusic } from '@/actions/chuni/music';
+import { getPlaylog } from '@/actions/chuni/playlog';
+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 { CHUNI_SCORE_RANKS } from '@/helpers/chuni/score-ranks';
+import {  CHUNI_LAMPS } from '@/helpers/chuni/lamps';
+import { ChuniPlaylogCard } from '@/components/chuni/playlog-card';
+import { useState } from 'react';
+
+type ChuniMusicPlaylogProps = {
+	music: Awaited<ReturnType<typeof getMusic>>,
+	playlog: Awaited<ReturnType<typeof getPlaylog>>
+};
+
+export const ChuniMusicPlaylog = ({ music, playlog }: ChuniMusicPlaylogProps) => {
+	type Music = (typeof music)[number];
+	type Playlog = (typeof playlog)['data'][number];
+	const defaultExpanded: Record<string, Set<string>> = {}
+
+	const difficulties: (Music & { playlog: Playlog[] })[] = [];
+	music.forEach(m => {
+		difficulties[m.chartId!] = { ...m, playlog: [] };
+	});
+
+	playlog.data.forEach(play => {
+		defaultExpanded[play.chartId!] = new Set();
+		difficulties[play.chartId!].playlog.push(play);
+	});
+
+	const [expanded, setExpanded] = useState(defaultExpanded);
+
+	const badgeClass = 'h-6 sm:h-8';
+
+	return (<div className="flex flex-col w-full px-2 sm:px-0">
+		{difficulties.map((data, i) => {
+			const badges = [
+				!!data.scoreRank && <ChuniScoreBadge variant={getVariantFromRank(data.scoreRank)} className={badgeClass} key="1">
+					{CHUNI_SCORE_RANKS[data.scoreRank]}
+				</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>,
+			].filter(x => x);
+
+			const toggleExpanded = () => expanded[i] && setExpanded(e =>
+				({ ...e,
+					[i]: e[i].size ? new Set() : new Set(['1'])
+				}));
+
+			return (<div key={i} className="mb-2 border-b pb-2 border-gray-500 flex flex-row flex-wrap">
+				<div className={`flex items-center gap-2 flex-wrap w-full lg:w-auto lg:flex-grow ${data.playlog.length ? 'cursor-pointer' : ''}`} onClick={toggleExpanded}>
+					<div className="flex items-center">
+						<div className="w-14 mr-2 p-0.5 bg-black">
+							<ChuniLevelBadge className="w-full" music={data} />
+						</div>
+						<div className="text-xl font-semibold">{CHUNI_DIFFICULTIES[i]}</div>
+					</div>
+					{!data.playlog.length && <div className="text-right italic text-gray-500 flex-grow">No Play History</div>}
+					{data.rating ? <ChuniRating className="text-2xl text-right" rating={+data.rating * 100} /> : null}
+					{data.scoreMax ? <div className="ml-2 text-center flex-grow sm:flex-grow-0">
+						<span className="font-semibold">High Score: </span>{data.scoreMax.toLocaleString()}
+					</div> : null}
+				</div>
+				{badges.length ? <div className={`flex-grow lg:flex-grow-0 ml-auto mr-auto sm:ml-0 lg:ml-auto lg:mr-0 mt-2 flex gap-0.5 flex-wrap justify-center sm:justify-start ${data.playlog.length ? 'cursor-pointer' : ''}`} onClick={toggleExpanded}>
+					{badges}
+				</div> : null}
+				{data.playlog.length ? <Accordion selectedKeys={expanded[i]} onSelectionChange={k => setExpanded(e => ({ ...e, [i]: k as any }))}>
+					<AccordionItem key="1" title="Play History">
+						<div className="grid  grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 5xl:grid-cols-6 6xl:grid-cols-8 gap-2">
+							{data.playlog.map(p => <ChuniPlaylogCard key={p.id} playlog={p} className="h-48" />)}
+						</div>
+					</AccordionItem>
+					</Accordion> : null
+				}
+			</div>)
+		})}
+	</div>);
+};

src/components/chuni/nameplate.tsx

@@ -3,6 +3,7 @@ import {  getImageUrl } from '@/helpers/assets';
 import { ChuniTrophy } from '@/components/chuni/trophy';
 import { PickNullable } from '@/types/pick-nullable';
 import { ChuniRating } from '@/components/chuni/rating';
+import { formatJst } from '@/helpers/format-jst';
 
 export type Profile = PickNullable<Awaited<ReturnType<typeof getUserData>>,
 	'trophyName' | 'trophyRareType' | 'nameplateImage' | 'nameplateName' | 'teamName' | 'characterId' | 'level' | 'userName' | 'overPowerRate' | 'overPowerPoint' | 'lastPlayDate' | 'playerRating' | 'highestRating'>;
@@ -47,13 +48,7 @@ export const ChuniNameplate = ({ className, profile }: ChuniNameplateProps) => {
 							</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>
+								<span className="text-[15cqh]">{profile.lastPlayDate && formatJst(profile.lastPlayDate)}</span>
 							</div>
 							<div className="leading-none py-[2%] flex items-baseline">
 								<ChuniRating className="text-[12cqh] text-stroke-[0.75cqh]" rating={profile.playerRating}>

src/components/chuni/playlog-card.tsx

@@ -1,11 +1,12 @@
 import { getPlaylog } from '@/actions/chuni/playlog';
 import { getJacketUrl } from '@/helpers/assets';
 import Link from 'next/link';
-import { floorToDp } from '@/helpers/floor-dp';
 import { ChuniRating } from '@/components/chuni/rating';
 import { ChuniScoreBadge, getVariantFromRank } 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';
+import { Ticker } from '@/components/ticker';
 
 export type ChuniPlaylogCardProps = {
 	playlog: Awaited<ReturnType<typeof getPlaylog>>['data'][number],
@@ -25,16 +26,22 @@ const getChangeColor = (val: number) => {
 }
 
 export const ChuniPlaylogCard = ({ playlog, className }: ChuniPlaylogCardProps) => {
-	return (<div className={`rounded-md bg-content1 flex flex-col p-2 border border-black/25 ${className ?? ''}`}>
+	return (<div className={`rounded-md bg-content1 relative flex flex-col p-2 pt-1 border border-black/25 ${className ?? ''}`}>
 		<div className="flex">
-			<ChuniDifficultyContainer difficulty={playlog.chartId ?? 0} className="mr-2 w-28 aspect-square flex-shrink-0 relative p-1">
+			<div className="flex-shrink-0 mr-2 mt-auto">
+				<ChuniDifficultyContainer difficulty={playlog.chartId ?? 0} className="w-28 aspect-square relative p-1">
 					<ChuniLevelBadge className="absolute -bottom-1.5 -right-1.5 w-12" music={playlog} />
 					<img className="aspect-square w-full rounded overflow-hidden" src={getJacketUrl(`chuni/jacket/${playlog.jacketPath}`)}
 						alt={playlog.title ?? ''} />
 				</ChuniDifficultyContainer>
-			<div className="flex flex-col leading-tight overflow-hidden text-nowrap">
-				<Link href={`/chuni/music/${playlog.songId}`} lang="ja" className="underline hover:text-secondary transition mb-2 font-semibold">{ playlog.title }</Link>
-				<span lang="ja" className="text-sm mb-2">{ playlog.artist }</span>
+			</div>
+
+			<div className="flex flex-col leading-tight overflow-hidden text-nowrap w-full">
+				<div className="text-xs text-right -mb-0.5 w-full">{ formatJst(playlog.userPlayDate!) }</div>
+				<Link href={`/chuni/music/${playlog.songId}`} lang="ja" className="hover:text-secondary transition mb-2 font-semibold">
+					<Ticker hoverOnly noDelay><span className="underline">{ playlog.title }</span></Ticker>
+				</Link>
+				<Ticker className="text-sm mb-2">{ playlog.artist }</Ticker>
 				<span lang="ja" className="text-sm mb-2">{ playlog.genre }</span>
 				<div className="text-sm flex items-center">
 					Rating:&nbsp;<ChuniRating className="text-medium" rating={+playlog.rating * 100} />

src/components/chuni/score-badge.tsx

@@ -19,6 +19,16 @@ const ChuniScoreBadgeVariant = {
 type Variant = keyof typeof ChuniScoreBadgeVariant | (typeof ChuniScoreBadgeVariant)[keyof typeof ChuniScoreBadgeVariant];
 
 const RANK_VARIANTS = [0, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4] as const;
+
+export const CHUNI_LAMP_DISPLAY = new Map<number, Variant>([
+	[1, 'gold'],
+	[2, 'gold'],
+	[3, 'gold'],
+	[4, 'platinum'],
+	[5, 'platinum'],
+	[6, 'platinum']
+]);
+
 export const getVariantFromRank = (rank: number): Variant => {
 	return RANK_VARIANTS[rank];
 }
@@ -35,6 +45,10 @@ export const getVariantFromScore = (score: number): Variant => {
 	return 0;
 };
 
+export const getVariantFromLamp = (lamp: number): Variant => {
+	return CHUNI_LAMP_DISPLAY.get(lamp)!
+};
+
 export type ChuniScoreBadgeProps = {
 	children: ReactNode,
 	variant: Variant,

src/components/music-player.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Button, Card, CardBody, Slider } from '@nextui-org/react';
+import { PauseCircleIcon, PlayCircleIcon } from '@heroicons/react/24/solid';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+export type MusicPlayerProps = {
+	audio: string,
+	image: string,
+	children?: ReactNode,
+	className?: string
+};
+
+const formatTimestamp = (timestamp: number) => {
+	if (Number.isNaN(timestamp))
+		return '--:--';
+
+	return `${Math.floor(timestamp / 60).toFixed(0)}:${(timestamp % 60).toFixed(0).padStart(2, '0')}`;
+};
+
+export const MusicPlayer = ({ audio, image, children, className }: MusicPlayerProps) => {
+	const [duration, setDuration] = useState(NaN);
+	const [progress, setProgress] = useState(NaN);
+	const [playing, setPlaying] = useState(false);
+	const audioRef = useRef<HTMLAudioElement | null>(null);
+
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio) return;
+
+		if (!Number.isNaN(audio.duration)) {
+			setDuration(audio.duration)
+			setProgress(0);
+		}
+
+		const metadata = () => {
+			if (audio.duration !== undefined)
+				setDuration(audio.duration);
+			setProgress(0);
+		};
+		audio.addEventListener('loadedmetadata', metadata);
+
+		const timeupdate = () => {
+			if (audio.currentTime !== undefined)
+				setProgress(audio.currentTime);
+		};
+		audio.addEventListener('timeupdate', timeupdate);
+
+		const ended = () => {
+			setPlaying(false);
+		}
+		audio.addEventListener('ended', ended);
+
+		return () => {
+			audio.removeEventListener('loadedmetadata', metadata);
+			audio.removeEventListener('timeupdate', timeupdate);
+			audio.removeEventListener('ended', ended);
+			audio.pause();
+		};
+	}, []);
+
+	useEffect(() => {
+		if (playing)
+			audioRef.current?.play();
+		else
+			audioRef.current?.pause();
+	}, [playing]);
+
+	const percent = (progress / duration) * 100;
+
+	return (<Card isBlurred radius="none" className={`border-none shadow-lg sm:rounded-2xl w-full max-w-full sm:max-w-[48rem] ${className ?? ''}`}>
+		<CardBody className="sm:rounded-2xl sm:p-4 bg-content1 sm:bg-content2">
+			<audio src={audio} ref={audioRef} />
+
+			<div className="grid grid-cols-12">
+				<div className="col-span-full sm:col-span-4 h-full flex items-center justify-center sm:justify-start">
+					<img src={image} alt="" className="aspect-square rounded-md shadow-2xl max-w-56 w-full border border-gray-500 sm:border-0" />
+				</div>
+				<div className="col-span-full sm:col-span-8 h-full flex flex-col pt-4 sm:pt-0 sm:pl-4 text-xl">
+					<div className="mb-2 sm:my-auto flex flex-col gap-1 items-center sm:items-start overflow-hidden">
+						{children}
+					</div>
+					<div className="mt-auto flex flex-col items-center">
+						<Slider className="cursor-pointer" size="sm" minValue={0} maxValue={100} step={0.0001}
+							value={Number.isNaN(percent) ? 0 : percent}
+							onChange={v => {
+								if (audioRef.current && !Array.isArray(v))
+									audioRef.current.currentTime = v / 100 * duration;
+							}}/>
+						<div className="flex text-medium w-full">
+							<span>{formatTimestamp(Math.min(progress, duration))}</span>
+							<Button isIconOnly radius="full" variant="light" size="lg" className="mx-auto mt-1" onClick={() => setPlaying(p => !p)}>
+								{playing ? <PauseCircleIcon /> : <PlayCircleIcon />}
+							</Button>
+							<span>{formatTimestamp(duration)}</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</CardBody>
+	</Card>)
+};

src/components/ticker.scss

@@ -0,0 +1,47 @@
+@keyframes outer-overflow {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(0);
+  }
+  90% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes inner-overflow {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(0);
+  }
+  90% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes outer-overflow-nodelay {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes inner-overflow-nodelay {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}

src/components/ticker.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import './ticker.scss';
+
+export type TickerProps = {
+	children?: ReactNode,
+	hoverOnly?: boolean,
+	className?: string,
+	noDelay?: boolean
+}
+
+export const Ticker = ({ children, hoverOnly, className, noDelay }: TickerProps) => {
+	const hoverClass = hoverOnly ? '[&:hover_*]:[animation-play-state:running] [&_*]:[animation-play-state:paused]' : '[&:hover_*]:[animation-play-state:paused]';
+	const outerAnimation = noDelay ? 'animate-[outer-overflow-nodelay_15s_linear_infinite_alternate]' : 'animate-[outer-overflow_15s_linear_infinite_alternate]';
+	const innerAnimation = noDelay ? 'animate-[inner-overflow-nodelay_15s_linear_infinite_alternate]' : 'animate-[inner-overflow_15s_linear_infinite_alternate]';
+
+	return (<div className={`text-nowrap whitespace-nowrap overflow-hidden w-full ${hoverClass} ${className ?? ''}`}>
+		<div className={`${outerAnimation} ticker max-w-full inline-block`}>
+			<div className={`${innerAnimation} ticker inline-block`}>
+				{ children }
+			</div>
+		</div>
+	</div>)
+};

src/helpers/chuni/difficulties.ts

@@ -0,0 +1,8 @@
+export const CHUNI_DIFFICULTIES = [
+	'Basic',
+	'Advanced',
+	'Expert',
+	'Master',
+	'Ultima',
+	'World\'s End'
+];

src/helpers/chuni/lamps.ts

@@ -0,0 +1,9 @@
+// TODO: check if these are correct
+export const CHUNI_LAMPS = new Map([
+	[1, 'Clear'],
+	[2, 'Hard'],
+	[3, 'Absolute'],
+	[4, 'Absolute+'],
+	[5, 'Absolute++'],
+	[6, 'Catastrophy']
+]);

src/helpers/chuni/score-ranks.ts

@@ -0,0 +1 @@
+export const CHUNI_SCORE_RANKS = ['D', 'C', 'B', 'BB', 'BBB', 'A', 'AA', 'AAA', 'S', 'S+', 'SS', 'SS+', 'SSS', 'SSS+'];

src/helpers/format-jst.ts

@@ -0,0 +1,11 @@
+const DEFAULT_OPTIONS = {
+	month: 'numeric',
+	day: 'numeric',
+	year: '2-digit',
+	hour: 'numeric',
+	minute: '2-digit'
+} as const;
+
+export const formatJst = (time: string, options: Intl.DateTimeFormatOptions = DEFAULT_OPTIONS) => new Date(`${time} +0900`)
+	.toLocaleTimeString(undefined, DEFAULT_OPTIONS);
+