diff --git a/projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx b/projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx
index afd0622..23b94c1 100644
--- a/projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx
+++ b/projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx
@@ -56,6 +56,7 @@ export default function PlayerScoreAccuracyChart({ scoreStats, leaderboard }: Pr
axisConfig: {
reverse: false,
display: true,
+ hideOnMobile: true,
displayName: "PP",
position: "right",
},
diff --git a/projects/website/src/components/score/button/beat-saver-map-button.tsx b/projects/website/src/components/score/button/beat-saver-map-button.tsx
new file mode 100644
index 0000000..86f05d3
--- /dev/null
+++ b/projects/website/src/components/score/button/beat-saver-map-button.tsx
@@ -0,0 +1,21 @@
+import BeatSaverLogo from "@/components/logos/beatsaver-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import * as React from "react";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+
+type BeatSaverMapProps = {
+ beatSaverMap: BeatSaverMap;
+};
+
+export function BeatSaverMapButton({ beatSaverMap }: BeatSaverMapProps) {
+ return (
+ {
+ window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
+ }}
+ tooltip={Click to open the map
}
+ >
+
+
+ );
+}
diff --git a/projects/website/src/components/score/button/score-bsr-button.tsx b/projects/website/src/components/score/button/score-bsr-button.tsx
new file mode 100644
index 0000000..d94299d
--- /dev/null
+++ b/projects/website/src/components/score/button/score-bsr-button.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { copyToClipboard } from "@/common/browser-utils";
+import ScoreButton from "@/components/score/button/score-button";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+import * as React from "react";
+import { toast } from "@/hooks/use-toast";
+
+type ScoreBsrButtonProps = {
+ beatSaverMap: BeatSaverMap;
+};
+
+export function ScoreBsrButton({ beatSaverMap }: ScoreBsrButtonProps) {
+ return (
+ {
+ toast({
+ title: "Copied!",
+ description: `Copied "!bsr ${beatSaverMap.bsr}" to your clipboard!`,
+ });
+ copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
+ }}
+ tooltip={Click to copy the bsr code
}
+ >
+ !
+
+ );
+}
diff --git a/projects/website/src/components/score/score-button.tsx b/projects/website/src/components/score/button/score-button.tsx
similarity index 100%
rename from projects/website/src/components/score/score-button.tsx
rename to projects/website/src/components/score/button/score-button.tsx
diff --git a/projects/website/src/components/score/score-editor-button.tsx b/projects/website/src/components/score/button/score-editor-button.tsx
similarity index 92%
rename from projects/website/src/components/score/score-editor-button.tsx
rename to projects/website/src/components/score/button/score-editor-button.tsx
index 1d1dac8..98628cd 100644
--- a/projects/website/src/components/score/score-editor-button.tsx
+++ b/projects/website/src/components/score/button/score-editor-button.tsx
@@ -6,8 +6,8 @@ import { Slider } from "@/components/ui/slider";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ResetIcon } from "@radix-ui/react-icons";
import Tooltip from "@/components/tooltip";
-import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import { ScoreSaberScore } from "@ssr/common/dist/model/score/impl/scoresaber-score.ts";
+import ScoreSaberLeaderboard from "@ssr/common/dist/model/leaderboard/impl/scoresaber-leaderboard.ts";
type ScoreEditorButtonProps = {
score: ScoreSaberScore;
diff --git a/projects/website/src/components/score/button/score-replay-button.tsx b/projects/website/src/components/score/button/score-replay-button.tsx
new file mode 100644
index 0000000..a69ae8a
--- /dev/null
+++ b/projects/website/src/components/score/button/score-replay-button.tsx
@@ -0,0 +1,21 @@
+import BeatSaberPepeLogo from "@/components/logos/beatsaber-pepe-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import * as React from "react";
+import { AdditionalScoreData } from "@ssr/common/model/additional-score-data/additional-score-data";
+
+type ScoreReplayButton = {
+ additionalData: AdditionalScoreData;
+};
+
+export function ScoreReplayButton({ additionalData }: ScoreReplayButton) {
+ return (
+ {
+ window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
+ }}
+ tooltip={Click to view the score replay!
}
+ >
+
+
+ );
+}
diff --git a/projects/website/src/components/score/button/song-open-in-youtube-button.tsx b/projects/website/src/components/score/button/song-open-in-youtube-button.tsx
new file mode 100644
index 0000000..72df48a
--- /dev/null
+++ b/projects/website/src/components/score/button/song-open-in-youtube-button.tsx
@@ -0,0 +1,25 @@
+import { songNameToYouTubeLink } from "@/common/youtube-utils";
+import YouTubeLogo from "@/components/logos/youtube-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import * as React from "react";
+
+type SongOpenInYoutubeButtonProps = {
+ leaderboard: ScoreSaberLeaderboard;
+};
+
+export function SongOpenInYoutubeButton({ leaderboard }: SongOpenInYoutubeButtonProps) {
+ return (
+ {
+ window.open(
+ songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+ "_blank"
+ );
+ }}
+ tooltip={Click to open the song in YouTube
}
+ >
+
+
+ );
+}
diff --git a/projects/website/src/components/score/score-buttons.tsx b/projects/website/src/components/score/score-buttons.tsx
index d97c7c2..df8c15e 100644
--- a/projects/website/src/components/score/score-buttons.tsx
+++ b/projects/website/src/components/score/score-buttons.tsx
@@ -1,20 +1,17 @@
"use client";
-import { songNameToYouTubeLink } from "@/common/youtube-utils";
-import BeatSaverLogo from "@/components/logos/beatsaver-logo";
-import YouTubeLogo from "@/components/logos/youtube-logo";
-import { useToast } from "@/hooks/use-toast";
import * as React from "react";
import { useState } from "react";
-import ScoreButton from "./score-button";
-import { copyToClipboard } from "@/common/browser-utils";
import { ArrowDownIcon, ArrowPathIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
-import ScoreEditorButton from "@/components/score/score-editor-button";
+import ScoreEditorButton from "@/components/score/button/score-editor-button";
+import { ScoreBsrButton } from "@/components/score/button/score-bsr-button";
+import { BeatSaverMapButton } from "@/components/score/button/beat-saver-map-button";
+import { SongOpenInYoutubeButton } from "@/components/score/button/song-open-in-youtube-button";
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
-import BeatSaberPepeLogo from "@/components/logos/beatsaber-pepe-logo";
+import { ScoreReplayButton } from "@/components/score/button/score-replay-button";
type Props = {
score?: ScoreSaberScore;
@@ -33,78 +30,39 @@ export default function ScoreButtons({
leaderboard,
beatSaverMap,
alwaysSingleLine,
+ setIsLeaderboardExpanded,
+ isLeaderboardLoading,
+ updateScore,
hideLeaderboardDropdown,
hideAccuracyChanger,
- isLeaderboardLoading,
- setIsLeaderboardExpanded,
- updateScore,
}: Props) {
const [leaderboardExpanded, setLeaderboardExpanded] = useState(false);
- const { toast } = useToast();
const additionalData = score?.additionalData;
return (
-
-
+
+
{beatSaverMap != undefined && (
<>
- {/* Copy BSR */}
-
{
- toast({
- title: "Copied!",
- description: `Copied "!bsr ${beatSaverMap.bsr}" to your clipboard!`,
- });
- copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
- }}
- tooltip={Click to copy the bsr code
}
- >
- !
-
-
- {/* Open map in BeatSaver */}
-
{
- window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
- }}
- tooltip={Click to open the map
}
- >
-
-
+
+
>
)}
- {/* Open song in YouTube */}
-
{
- window.open(
- songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
- "_blank"
- );
- }}
- tooltip={Click to open the song in YouTube
}
- >
-
-
+
+
+
+
{additionalData != undefined && (
<>
- {/* Open score replay */}
-
{
- window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
- }}
- tooltip={Click to view the score replay!
}
- >
-
-
+
>
)}
+
{/* Edit score button */}
{score && leaderboard && updateScore && !hideAccuracyChanger && (
diff --git a/projects/website/src/components/score/score-stats.tsx b/projects/website/src/components/score/score-stats.tsx
index 1eba14e..014cc23 100644
--- a/projects/website/src/components/score/score-stats.tsx
+++ b/projects/website/src/components/score/score-stats.tsx
@@ -73,7 +73,7 @@ type Props = {
export default function ScoreStats({ score, leaderboard }: Props) {
return (
-
diff --git a/projects/website/src/hooks/use-is-mobile.ts b/projects/website/src/hooks/use-is-mobile.ts
index 5dcfe0a..21f37d0 100644
--- a/projects/website/src/hooks/use-is-mobile.ts
+++ b/projects/website/src/hooks/use-is-mobile.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
export function useIsMobile() {
const checkMobile = () => {
- return window.innerWidth < 768;
+ return window.innerWidth <= 1024;
};
const [isMobile, setIsMobile] = useState(checkMobile());