Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

cleanup
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Failing after 1m33s
Details

Browse Source
This commit is contained in:
Lee 2024-10-28 21:01:12 +00:00
parent ebb91344bc
commit 6b30c6efed
10 changed files with 120 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx
View File

@ -56,6 +56,7 @@ export default function PlayerScoreAccuracyChart({ scoreStats, leaderboard }: Pr
axisConfig: {
reverse: false,
display: true,
hideOnMobile: true,
displayName: "PP",
position: "right",
},

21
projects/website/src/components/score/button/beat-saver-map-button.tsx Normal file
View File

@ -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 (
<ScoreButton
onClick={() => {
window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
}}
tooltip={<p>Click to open the map</p>}
>
<BeatSaverLogo />
</ScoreButton>
);
}

28
projects/website/src/components/score/button/score-bsr-button.tsx Normal file
View File

@ -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 (
<ScoreButton
onClick={() => {
toast({
title: "Copied!",
description: `Copied "!bsr ${beatSaverMap.bsr}" to your clipboard!`,
});
copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
}}
tooltip={<p>Click to copy the bsr code</p>}
>
<p>!</p>
</ScoreButton>
);
}

0
projects/website/src/components/score/score-button.tsx → projects/website/src/components/score/button/score-button.tsx
View File

4
projects/website/src/components/score/score-editor-button.tsx → projects/website/src/components/score/button/score-editor-button.tsx
View File

@ -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;

21
projects/website/src/components/score/button/score-replay-button.tsx Normal file
View File

@ -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 (
<ScoreButton
onClick={() => {
window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
}}
tooltip={<p>Click to view the score replay!</p>}
>
<BeatSaberPepeLogo />
</ScoreButton>
);
}

25
projects/website/src/components/score/button/song-open-in-youtube-button.tsx Normal file
View File

@ -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 (
<ScoreButton
onClick={() => {
window.open(
songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
"_blank"
);
}}
tooltip={<p>Click to open the song in YouTube</p>}
>
<YouTubeLogo />
</ScoreButton>
);
}

82
projects/website/src/components/score/score-buttons.tsx
View File

@ -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 (
<div className={`flex justify-end gap-2 items-center`}>
<div
className={`flex ${alwaysSingleLine ? "flex-nowrap" : "flex-wrap"} items-center lg:items-start justify-center lg:justify-end gap-1`}
>
<div className={`flex justify-end gap-2 items-center mr-1`}>
<div className={`flex lg:grid grid-cols-3 gap-1 items-center justify-center min-w-[92px]`}>
{beatSaverMap != undefined && (
<>
{/* Copy BSR */}
<ScoreButton
onClick={() => {
toast({
title: "Copied!",
description: `Copied "!bsr ${beatSaverMap.bsr}" to your clipboard!`,
});
copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
}}
tooltip={<p>Click to copy the bsr code</p>}
>
<p>!</p>
</ScoreButton>
{/* Open map in BeatSaver */}
<ScoreButton
onClick={() => {
window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
}}
tooltip={<p>Click to open the map</p>}
>
<BeatSaverLogo />
</ScoreButton>
<ScoreBsrButton beatSaverMap={beatSaverMap} />
<BeatSaverMapButton beatSaverMap={beatSaverMap} />
</>
)}
{/* Open song in YouTube */}
<ScoreButton
onClick={() => {
window.open(
songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
"_blank"
);
}}
tooltip={<p>Click to open the song in YouTube</p>}
>
<YouTubeLogo />
</ScoreButton>
<SongOpenInYoutubeButton leaderboard={leaderboard} />
<div className="hidden lg:block" />
<div className="hidden lg:block" />
{additionalData != undefined && (
<>
{/* Open score replay */}
<ScoreButton
onClick={() => {
window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
}}
tooltip={<p>Click to view the score replay!</p>}
>
<BeatSaberPepeLogo />
</ScoreButton>
<ScoreReplayButton additionalData={additionalData} />
</>
)}
</div>
<div
className={`flex gap-2 ${alwaysSingleLine ? "flex-row" : "flex-row lg:flex-col"} items-center justify-center`}
className={`flex gap-2 ${alwaysSingleLine ? "flex-row" : "flex-row lg:flex-col"} items-center justify-center pr-1`}
>
{/* Edit score button */}
{score && leaderboard && updateScore && !hideAccuracyChanger && (

2
projects/website/src/components/score/score-stats.tsx
View File

@ -73,7 +73,7 @@ type Props = {
export default function ScoreStats({ score, leaderboard }: Props) {
return (
<div className="flex flex-col justify-center h-full">
<div className={`grid grid-cols-3 gap-1 ml-0 lg:ml-2 justify-center`}>
<div className={`grid grid-cols-3 gap-1 justify-center`}>
<ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
</div>
</div>

2
projects/website/src/hooks/use-is-mobile.ts
View File

@ -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());