add map stats from beat saver

2024-10-23 15:33:25 +01:00
parent 62090b8054
commit 33b931b5f1
47 changed files with 835 additions and 289 deletions
--- a/projects/website/src/components/score/map-stats.tsx
+++ b/projects/website/src/components/score/map-stats.tsx
@ -0,0 +1,53 @@
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+import StatValue from "@/components/stat-value";
+import { getBeatSaverDifficulty } from "@ssr/common/utils/beatsaver.util";
+import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import { formatTime } from "@ssr/common/utils/time-utils";
+import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
+import { BombIcon, BrickWallIcon, DrumIcon, MusicIcon, TimerIcon } from "lucide-react";
+import { BsSpeedometer } from "react-icons/bs";
+import { CubeIcon } from "@heroicons/react/24/solid";
+
+type MapAndScoreData = {
+  /**
+   * The leaderboard that the score was set on.
+   */
+  leaderboard: ScoreSaberLeaderboard;
+
+  /**
+   * The map that the score was set on.
+   */
+  beatSaver?: BeatSaverMap;
+};
+
+export function MapStats({ leaderboard, beatSaver }: MapAndScoreData) {
+  const metadata = beatSaver?.metadata;
+  const mapDiff = beatSaver
+    ? getBeatSaverDifficulty(beatSaver, leaderboard.songHash, leaderboard.difficulty.difficulty)
+    : undefined;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Map Stats */}
+      {mapDiff && metadata && (
+        <div className="flex flex-wrap gap-2 justify-center">
+          <StatValue name="Length" icon={<TimerIcon className="w-4 h-4" />} value={formatTime(metadata.duration)} />
+          <StatValue name="BPM" icon={<MusicIcon className="w-4 h-4" />} value={formatNumberWithCommas(metadata.bpm)} />
+          <StatValue name="NPS" icon={<DrumIcon className="w-4 h-4" />} value={mapDiff.nps.toFixed(2)} />
+          <StatValue name="NJS" icon={<BsSpeedometer className="w-4 h-4" />} value={mapDiff.njs.toFixed(2)} />
+          <StatValue
+            name="Notes"
+            icon={<CubeIcon className="w-4 h-4" />}
+            value={formatNumberWithCommas(mapDiff.notes)}
+          />
+          <StatValue
+            name="Bombs"
+            icon={<BombIcon className="w-4 h-4" />}
+            value={formatNumberWithCommas(mapDiff.bombs)}
+          />
+          <StatValue name="Obstacles" icon={<BrickWallIcon className="w-4 h-4" />} value={mapDiff.obstacles} />
+        </div>
+      )}
+    </div>
+  );
+}
--- a/projects/website/src/components/score/score-buttons.tsx
+++ b/projects/website/src/components/score/score-buttons.tsx
@ -12,7 +12,7 @@ import clsx from "clsx";
 import ScoreEditorButton from "@/components/score/score-editor-button";
 import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
-import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
 import BeatSaberPepeLogo from "@/components/logos/beatsaber-pepe-logo";

 type Props = {
--- a/projects/website/src/components/score/score-modifiers.tsx
+++ b/projects/website/src/components/score/score-modifiers.tsx
@ -21,7 +21,7 @@ type ScoreModifiersProps = {
 export function ScoreModifiers({ score, type, limit }: ScoreModifiersProps) {
  const modifiers = score.modifiers;
  if (modifiers.length === 0) {
-    return <p>-</p>;
+    return <span>-</span>;
  }

  switch (type) {
--- a/projects/website/src/components/score/score-song-info.tsx
+++ b/projects/website/src/components/score/score-song-info.tsx
@ -2,10 +2,10 @@ import FallbackLink from "@/components/fallback-link";
 import Tooltip from "@/components/tooltip";
 import { StarIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
-import { songDifficultyToColor } from "@/common/song-utils";
 import Link from "next/link";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
-import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+import { getDifficulty } from "@/common/song-utils";

 type Props = {
  leaderboard: ScoreSaberLeaderboard;
@ -14,25 +14,25 @@ type Props = {

 export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
  const mappersProfile =
-    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.author.id}` : undefined;
+    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap.author.id}` : undefined;

  const starCount = leaderboard.stars;
-  const difficulty = leaderboard.difficulty;
+  const difficulty = leaderboard.difficulty.difficulty.replace("Plus", "+");
  return (
    <div className="flex gap-3 items-center">
      <div className="relative flex justify-center h-[64px]">
        <Tooltip
          display={
-            <>
-              <p>Difficulty: {difficulty.difficulty}</p>
+            <div>
+              <p>Difficulty: {difficulty}</p>
              {starCount > 0 && <p>Stars: {starCount.toFixed(2)}</p>}
-            </>
+            </div>
          }
        >
          <div
            className="absolute w-full h-[18px] bottom-0 right-0 rounded-sm flex justify-center items-center text-[0.70rem] cursor-default"
            style={{
-              backgroundColor: songDifficultyToColor(difficulty.difficultyRaw) + "f0", // Transparency value (in hex 0-255)
+              backgroundColor: getDifficulty(leaderboard.difficulty.difficulty).color + "f0", // Transparency value (in hex 0-255)
            }}
          >
            {starCount > 0 ? (
@ -41,7 +41,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
                <StarIcon className="w-[14px] h-[14px]" />
              </div>
            ) : (
-              <p>{difficulty.difficulty}</p>
+              <p>{difficulty}</p>
            )}
          </div>
        </Tooltip>
--- a/projects/website/src/components/score/score.tsx
+++ b/projects/website/src/components/score/score.tsx
@ -3,7 +3,7 @@
 import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
 import { useEffect, useState } from "react";
 import ScoreButtons from "./score-buttons";
-import ScoreSongInfo from "./score-info";
+import ScoreSongInfo from "./score-song-info";
 import ScoreRankInfo from "./score-rank-info";
 import ScoreStats from "./score-stats";
 import { motion } from "framer-motion";
@ -11,10 +11,10 @@ import { getPageFromRank } from "@ssr/common/utils/utils";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
-import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import Card from "@/components/card";
-import StatValue from "@/components/stat-value";
+import { MapStats } from "@/components/score/map-stats";

 type Props = {
  /**
@ -106,11 +106,7 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
          className="w-full mt-2"
        >
          <Card className="flex gap-4 w-full relative border border-input">
-            {score.additionalData && (
-              <div className="flex w-full items-center justify-center gap-2">
-                <StatValue name="Pauses" value={score.additionalData.pauses} />
-              </div>
-            )}
+            <MapStats leaderboard={leaderboard} beatSaver={beatSaverMap} />

            <LeaderboardScores
              initialPage={getPageFromRank(score.rank, 12)}