From 6b30c6efedd3acea0380c753b2fdeb7fda5b88c7 Mon Sep 17 00:00:00 2001 From: Liam Date: Mon, 28 Oct 2024 21:01:12 +0000 Subject: [PATCH] cleanup --- .../chart/player-score-accuracy-chart.tsx | 1 + .../score/button/beat-saver-map-button.tsx | 21 +++++ .../score/button/score-bsr-button.tsx | 28 +++++++ .../score/{ => button}/score-button.tsx | 0 .../{ => button}/score-editor-button.tsx | 4 +- .../score/button/score-replay-button.tsx | 21 +++++ .../button/song-open-in-youtube-button.tsx | 25 ++++++ .../src/components/score/score-buttons.tsx | 82 +++++-------------- .../src/components/score/score-stats.tsx | 2 +- projects/website/src/hooks/use-is-mobile.ts | 2 +- 10 files changed, 120 insertions(+), 66 deletions(-) create mode 100644 projects/website/src/components/score/button/beat-saver-map-button.tsx create mode 100644 projects/website/src/components/score/button/score-bsr-button.tsx rename projects/website/src/components/score/{ => button}/score-button.tsx (100%) rename projects/website/src/components/score/{ => button}/score-editor-button.tsx (92%) create mode 100644 projects/website/src/components/score/button/score-replay-button.tsx create mode 100644 projects/website/src/components/score/button/song-open-in-youtube-button.tsx 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());