{music.slice(index * itemsPerRow, (index + 1) * itemsPerRow).map(item =>
} />)
@@ -167,14 +149,9 @@ export const ChuniMusicList = ({ music }: ChuniMusicListProps) => {
value: new Set
-
+
})
{item.rating && !item.worldsEndTag &&
- {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`}>
+ {item.title}
- {item.artist}
)}
@@ -118,8 +103,8 @@ const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' })
{size === 'lg' &&
- {item.isSuccess ?
- {LAMPS.get(item.isSuccess)}
+ {item.isSuccess ?
+ {CHUNI_LAMPS.get(item.isSuccess)}
: null}
}
@@ -136,13 +121,10 @@ const MusicGrid = ({ music, size }: ChuniMusicListProps & { size: 'sm' | 'lg' })
- {item.artist}
-
+
+ {difficulties.map((data, i) => {
+ const badges = [
+ !!data.scoreRank &&
+ {CHUNI_SCORE_RANKS[data.scoreRank]}
+ ,
+ !!data.isSuccess &&
+ {CHUNI_LAMPS.get(data.isSuccess)}
+ ,
+ !!data.isFullCombo && !data.isAllJustice &&
+ Full Combo
+ ,
+ !!data.isAllJustice &&
+ All Justice
+ ,
+ ].filter(x => x);
+
+ const toggleExpanded = () => expanded[i] && setExpanded(e =>
+ ({ ...e,
+ [i]: e[i].size ? new Set() : new Set(['1'])
+ }));
+
+ return (
);
+};
diff --git a/src/components/chuni/nameplate.tsx b/src/components/chuni/nameplate.tsx
index 26490c6..4435633 100644
--- a/src/components/chuni/nameplate.tsx
+++ b/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
+ setExpanded(e => ({ ...e, [i]: k as any }))}>
+
+
+ : null
+ }
+
)
+ })}
+
+
+ {badges.length ?
+
+ {!data.playlog.length &&
+
+ {CHUNI_DIFFICULTIES[i]}
+ No Play History
}
+ {data.rating ?
+ High Score: {data.scoreMax.toLocaleString()}
+
: null}
+
+ {badges}
+
: null}
+ {data.playlog.length ?
+ {data.playlog.map(p =>
+
Last Play Date:
- {profile.lastPlayDate && new Date(`${profile.lastPlayDate} +0900`).toLocaleTimeString(undefined, {
- month: 'numeric',
- day: 'numeric',
- year: '2-digit',
- hour: 'numeric',
- minute: '2-digit'
- })}
+ {profile.lastPlayDate && formatJst(profile.lastPlayDate)}
+ return (
-
- })
-
-
- { playlog.title }
- { playlog.artist }
+
+
+
+
+
+
+ { playlog.title }
+
+ { playlog.artist }
{ playlog.genre }
{ formatJst(playlog.userPlayDate!) }
+
+
Rating: ([
+ [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,
diff --git a/src/components/music-player.tsx b/src/components/music-player.tsx
new file mode 100644
index 0000000..d2afbaa
--- /dev/null
+++ b/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(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 (
+
+
+
+
+ )
+};
diff --git a/src/components/ticker.scss b/src/components/ticker.scss
new file mode 100644
index 0000000..5742d06
--- /dev/null
+++ b/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%);
+ }
+}
diff --git a/src/components/ticker.tsx b/src/components/ticker.tsx
new file mode 100644
index 0000000..0fa7f53
--- /dev/null
+++ b/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 (
+
+
+ 
+
+
+
+
+ {children}
+
+
+ {
+ if (audioRef.current && !Array.isArray(v))
+ audioRef.current.currentTime = v / 100 * duration;
+ }}/>
+
+
+ {formatTimestamp(Math.min(progress, duration))}
+
+ {formatTimestamp(duration)}
+
+
+
)
+};
diff --git a/src/helpers/chuni/difficulties.ts b/src/helpers/chuni/difficulties.ts
new file mode 100644
index 0000000..24f47f0
--- /dev/null
+++ b/src/helpers/chuni/difficulties.ts
@@ -0,0 +1,8 @@
+export const CHUNI_DIFFICULTIES = [
+ 'Basic',
+ 'Advanced',
+ 'Expert',
+ 'Master',
+ 'Ultima',
+ 'World\'s End'
+];
diff --git a/src/helpers/chuni/lamps.ts b/src/helpers/chuni/lamps.ts
new file mode 100644
index 0000000..94e32bd
--- /dev/null
+++ b/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']
+]);
diff --git a/src/helpers/chuni/score-ranks.ts b/src/helpers/chuni/score-ranks.ts
new file mode 100644
index 0000000..5bf8609
--- /dev/null
+++ b/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+'];
diff --git a/src/helpers/format-jst.ts b/src/helpers/format-jst.ts
new file mode 100644
index 0000000..b25a22c
--- /dev/null
+++ b/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);
+
+
+
+ { children }
+
+