Compare commits
1 Commits
master
...
renovate/n
| Author | SHA1 | Date | |
|---|---|---|---|
| 7144db7e73 |
@ -9,7 +9,6 @@ on:
|
||||
- projects/website/**
|
||||
- projects/common/**
|
||||
- .gitea/workflows/deploy-website.yml
|
||||
- bun.lockb
|
||||
|
||||
jobs:
|
||||
docker:
|
||||
|
||||
@ -4,4 +4,4 @@ This is the 3rd re-code of this project. The first one was a mess, the second on
|
||||
|
||||
## meow
|
||||
|
||||
meow
|
||||
meow
|
||||
|
||||
@ -3,7 +3,6 @@ import { t } from "elysia";
|
||||
import { Leaderboards } from "@ssr/common/leaderboard";
|
||||
import { TopScoresResponse } from "@ssr/common/response/top-scores-response";
|
||||
import { ScoreService } from "../service/score.service";
|
||||
import { Timeframe } from "@ssr/common/timeframe";
|
||||
|
||||
@Controller("/scores")
|
||||
export default class ScoresController {
|
||||
@ -78,27 +77,11 @@ export default class ScoresController {
|
||||
|
||||
@Get("/top", {
|
||||
config: {},
|
||||
query: t.Object({
|
||||
limit: t.Number({ required: true }),
|
||||
timeframe: t.String({ required: true }),
|
||||
}),
|
||||
})
|
||||
public async getTopScores({
|
||||
query: { limit, timeframe },
|
||||
}: {
|
||||
query: { limit: number; timeframe: Timeframe };
|
||||
}): Promise<TopScoresResponse> {
|
||||
if (limit <= 0) {
|
||||
limit = 1;
|
||||
} else if (limit > 100) {
|
||||
limit = 100;
|
||||
}
|
||||
|
||||
const scores = await ScoreService.getTopScores(limit, timeframe);
|
||||
public async getTopScores(): Promise<TopScoresResponse> {
|
||||
const scores = await ScoreService.getTopScores();
|
||||
return {
|
||||
scores,
|
||||
timeframe,
|
||||
limit,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -324,7 +324,7 @@ export class PlayerService {
|
||||
console.log(`Found ${players.length} players to refresh.`);
|
||||
|
||||
for (const player of players) {
|
||||
await this.refreshAllPlayerScores(player);
|
||||
await this.refreshAllPlayerScores(player.id);
|
||||
await delay(SCORESABER_REQUEST_COOLDOWN); // Cooldown between players
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,9 +38,6 @@ import { MapCharacteristic } from "@ssr/common/types/map-characteristic";
|
||||
import { Page, Pagination } from "@ssr/common/pagination";
|
||||
import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
|
||||
import Leaderboard from "@ssr/common/model/leaderboard/leaderboard";
|
||||
import { Timeframe } from "@ssr/common/timeframe";
|
||||
import { getDaysAgoDate } from "@ssr/common/utils/time-utils";
|
||||
import { PlayerService } from "./player.service";
|
||||
|
||||
const playerScoresCache = new SSRCache({
|
||||
ttl: 1000 * 60, // 1 minute
|
||||
@ -192,12 +189,9 @@ export class ScoreService {
|
||||
if (player == undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update player name
|
||||
if (playerName !== "Unknown") {
|
||||
player.name = playerName;
|
||||
await player.save();
|
||||
}
|
||||
player.name = playerName;
|
||||
await player.save();
|
||||
|
||||
// The score has already been tracked, so ignore it.
|
||||
if (
|
||||
@ -209,8 +203,9 @@ export class ScoreService {
|
||||
score.score
|
||||
)) !== null
|
||||
) {
|
||||
console.log(
|
||||
`ScoreSaber score already tracked for "${playerName}"(${playerId}), difficulty: ${score.difficulty}, score: ${score.score}, leaderboard: ${leaderboard.id}, ignoring...`
|
||||
await logToChannel(
|
||||
DiscordChannels.backendLogs,
|
||||
new EmbedBuilder().setDescription(`Score ${score.scoreId} already tracked`)
|
||||
);
|
||||
return;
|
||||
}
|
||||
@ -308,60 +303,43 @@ export class ScoreService {
|
||||
* Gets the top tracked scores.
|
||||
*
|
||||
* @param amount the amount of scores to get
|
||||
* @param timeframe the timeframe to filter by
|
||||
* @returns the top scores
|
||||
*/
|
||||
public static async getTopScores(amount: number = 100, timeframe: Timeframe) {
|
||||
console.log(`Getting top scores for timeframe: ${timeframe}, limit: ${amount}...`);
|
||||
const before = Date.now();
|
||||
|
||||
let daysAgo = -1;
|
||||
if (timeframe === "daily") {
|
||||
daysAgo = 1;
|
||||
} else if (timeframe === "weekly") {
|
||||
daysAgo = 8;
|
||||
} else if (timeframe === "monthly") {
|
||||
daysAgo = 31;
|
||||
}
|
||||
const date: Date = daysAgo == -1 ? new Date(0) : getDaysAgoDate(daysAgo);
|
||||
public static async getTopScores(amount: number = 100) {
|
||||
const foundScores = await ScoreSaberScoreModel.aggregate([
|
||||
{ $match: { timestamp: { $gte: date } } },
|
||||
// Start sorting by timestamp descending using the new compound index
|
||||
{ $sort: { leaderboardId: 1, playerId: 1, timestamp: -1 } },
|
||||
{
|
||||
$group: {
|
||||
_id: { leaderboardId: "$leaderboardId", playerId: "$playerId" },
|
||||
score: { $first: "$$ROOT" },
|
||||
latestScore: { $first: "$$ROOT" }, // Retrieve the latest score per group
|
||||
},
|
||||
},
|
||||
{ $sort: { "score.pp": -1 } },
|
||||
// Sort by pp of the latest scores in descending order
|
||||
{ $sort: { "latestScore.pp": -1 } },
|
||||
{ $limit: amount },
|
||||
]);
|
||||
|
||||
const scores: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[] = [];
|
||||
for (const { score: scoreData } of foundScores) {
|
||||
const score = new ScoreSaberScoreModel(scoreData).toObject() as ScoreSaberScore;
|
||||
const leaderboardResponse = await LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>(
|
||||
"scoresaber",
|
||||
score.leaderboardId + ""
|
||||
);
|
||||
// Collect unique leaderboard IDs
|
||||
const leaderboardIds = [...new Set(foundScores.map(s => s.latestScore.leaderboardId))];
|
||||
const leaderboardMap = await this.fetchLeaderboardsInBatch(leaderboardIds);
|
||||
|
||||
// Collect player IDs for batch retrieval
|
||||
const playerIds = foundScores.map(result => result.latestScore.playerId);
|
||||
const players = await PlayerModel.find({ _id: { $in: playerIds } }).exec();
|
||||
const playerMap = new Map(players.map(player => [player._id.toString(), player]));
|
||||
|
||||
// Prepare to fetch additional data concurrently
|
||||
const scoreDataPromises = foundScores.map(async result => {
|
||||
const score: ScoreSaberScore = result.latestScore;
|
||||
const leaderboardResponse = leaderboardMap[score.leaderboardId];
|
||||
if (!leaderboardResponse) {
|
||||
continue;
|
||||
return null; // Skip if leaderboard data is not available
|
||||
}
|
||||
|
||||
const { leaderboard, beatsaver } = leaderboardResponse;
|
||||
|
||||
try {
|
||||
const player = await PlayerService.getPlayer(score.playerId);
|
||||
if (player !== undefined) {
|
||||
score.playerInfo = {
|
||||
id: player.id,
|
||||
name: player.name,
|
||||
};
|
||||
}
|
||||
} catch {
|
||||
score.playerInfo = {
|
||||
id: score.playerId,
|
||||
};
|
||||
}
|
||||
|
||||
// Fetch additional data concurrently
|
||||
const [additionalData, previousScore] = await Promise.all([
|
||||
this.getAdditionalScoreData(
|
||||
score.playerId,
|
||||
@ -371,21 +349,51 @@ export class ScoreService {
|
||||
),
|
||||
this.getPreviousScore(score.playerId, leaderboard.id + "", score.timestamp),
|
||||
]);
|
||||
if (additionalData) {
|
||||
score.additionalData = additionalData;
|
||||
}
|
||||
if (previousScore) {
|
||||
score.previousScore = previousScore;
|
||||
|
||||
// Attach additional and previous score data if available
|
||||
if (additionalData) score.additionalData = additionalData;
|
||||
if (previousScore) score.previousScore = previousScore;
|
||||
|
||||
// Attach player info if available
|
||||
const player = playerMap.get(score.playerId.toString());
|
||||
if (player) {
|
||||
score.playerInfo = {
|
||||
id: player._id,
|
||||
name: player.name,
|
||||
};
|
||||
}
|
||||
|
||||
scores.push({
|
||||
score: score,
|
||||
return {
|
||||
score: score as ScoreSaberScore,
|
||||
leaderboard: leaderboard,
|
||||
beatSaver: beatsaver,
|
||||
});
|
||||
}
|
||||
console.log(`Got ${scores.length} scores in ${Date.now() - before}ms (timeframe: ${timeframe}, limit: ${amount})`);
|
||||
return scores;
|
||||
};
|
||||
});
|
||||
return (await Promise.all(scoreDataPromises)).filter(score => score !== null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches leaderboards in a batch.
|
||||
*
|
||||
* @param leaderboardIds the ids of the leaderboards
|
||||
* @returns the fetched leaderboards
|
||||
* @private
|
||||
*/
|
||||
private static async fetchLeaderboardsInBatch(leaderboardIds: string[]) {
|
||||
// Remove duplicates from leaderboardIds
|
||||
const uniqueLeaderboardIds = Array.from(new Set(leaderboardIds));
|
||||
|
||||
const leaderboardResponses = await Promise.all(
|
||||
uniqueLeaderboardIds.map(id => LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>("scoresaber", id))
|
||||
);
|
||||
|
||||
return leaderboardResponses.reduce(
|
||||
(map, response) => {
|
||||
if (response) map[response.leaderboard.id] = response;
|
||||
return map;
|
||||
},
|
||||
{} as Record<string, { leaderboard: ScoreSaberLeaderboard; beatsaver?: BeatSaverMap }>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -480,6 +488,8 @@ export class ScoreService {
|
||||
const score = getScoreSaberScoreFromToken(token.score, leaderboard, playerId);
|
||||
if (!score) return undefined;
|
||||
|
||||
console.log("boobs");
|
||||
|
||||
// Fetch additional data, previous score, and BeatSaver map concurrently
|
||||
const [additionalData, previousScore, beatSaverMap] = await Promise.all([
|
||||
this.getAdditionalScoreData(
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { getModelForClass, modelOptions, plugin, Prop, ReturnModelType, Severity } from "@typegoose/typegoose";
|
||||
import { getModelForClass, index, modelOptions, plugin, Prop, ReturnModelType, Severity } from "@typegoose/typegoose";
|
||||
import Score from "../score";
|
||||
import { type ScoreSaberLeaderboardPlayerInfoToken } from "../../../types/token/scoresaber/score-saber-leaderboard-player-info-token";
|
||||
import { Document } from "mongoose";
|
||||
@ -20,6 +20,7 @@ import { PreviousScore } from "../previous-score";
|
||||
},
|
||||
},
|
||||
})
|
||||
@index({ leaderboardId: 1, playerId: 1, timestamp: -1 }) // Compound index for optimized queries
|
||||
@plugin(AutoIncrementID, {
|
||||
field: "_id",
|
||||
startAt: 1,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import ScoreSaberPlayer from "./impl/scoresaber-player";
|
||||
import { StatisticRange } from "./player";
|
||||
import { ChangeRange } from "./player";
|
||||
|
||||
export type PlayerStatValue = {
|
||||
/**
|
||||
@ -10,7 +10,7 @@ export type PlayerStatValue = {
|
||||
/**
|
||||
* The value of the stat.
|
||||
*/
|
||||
value: (player: ScoreSaberPlayer, range: StatisticRange) => number | undefined;
|
||||
value: (player: ScoreSaberPlayer, range: ChangeRange) => number | undefined;
|
||||
};
|
||||
|
||||
export type PlayerStatChangeType =
|
||||
|
||||
@ -55,7 +55,7 @@ export default class Player {
|
||||
}
|
||||
}
|
||||
|
||||
export type StatisticRange = "daily" | "weekly" | "monthly";
|
||||
export type ChangeRange = "daily" | "weekly" | "monthly";
|
||||
export type StatisticChange = {
|
||||
[key in StatisticRange]: PlayerHistory;
|
||||
[key in ChangeRange]: PlayerHistory;
|
||||
};
|
||||
|
||||
@ -1,21 +1,10 @@
|
||||
import { ScoreSaberLeaderboard } from "src/model/leaderboard/impl/scoresaber-leaderboard";
|
||||
import { ScoreSaberScore } from "../model/score/impl/scoresaber-score";
|
||||
import { PlayerScore } from "../score/player-score";
|
||||
import { Timeframe } from "../timeframe";
|
||||
|
||||
export type TopScoresResponse = {
|
||||
/**
|
||||
* The top scores.
|
||||
*/
|
||||
scores: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[];
|
||||
|
||||
/**
|
||||
* The timeframe returned.
|
||||
*/
|
||||
timeframe: Timeframe;
|
||||
|
||||
/**
|
||||
* The amount of scores to fetch.
|
||||
*/
|
||||
limit: number;
|
||||
};
|
||||
|
||||
@ -1 +0,0 @@
|
||||
export type Timeframe = "daily" | "weekly" | "monthly";
|
||||
@ -43,6 +43,7 @@ const withBundleAnalyzer = nextBundleAnalyzer({
|
||||
});
|
||||
|
||||
const config = withBundleAnalyzer(nextConfig);
|
||||
|
||||
export default isProduction()
|
||||
? withSentryConfig(config, {
|
||||
org: "fascinatedcc",
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
"@radix-ui/react-label": "^2.1.0",
|
||||
"@radix-ui/react-popover": "^1.1.2",
|
||||
"@radix-ui/react-scroll-area": "^1.1.0",
|
||||
"@radix-ui/react-separator": "^1.1.0",
|
||||
"@radix-ui/react-slider": "^1.2.1",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-toast": "^1.2.1",
|
||||
@ -36,7 +35,7 @@
|
||||
"cross-env": "^7.0.3",
|
||||
"dexie": "^4.0.8",
|
||||
"dexie-react-hooks": "^1.1.7",
|
||||
"framer-motion": "^11.11.10",
|
||||
"framer-motion": "^11.5.4",
|
||||
"js-cookie": "^3.0.5",
|
||||
"ky": "^1.7.2",
|
||||
"lucide-react": "^0.453.0",
|
||||
@ -56,7 +55,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/node": "^20",
|
||||
"@types/node": "^22.0.0",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"eslint": "^8",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 717 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 717 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 717 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 717 KiB |
@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
|
||||
<path fill="#fff"
|
||||
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 777 B |
@ -1,20 +1,32 @@
|
||||
import HeroSection from "@/components/home/hero";
|
||||
import DataCollection from "@/components/home/data-collection";
|
||||
import Friends from "@/components/home/friends";
|
||||
import SiteStats from "@/components/home/site-stats";
|
||||
import RealtimeScores from "@/components/home/realtime-scores";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
|
||||
import { kyFetch } from "@ssr/common/utils/utils";
|
||||
import { Config } from "@ssr/common/config";
|
||||
import { AppStats } from "@/components/app-statistics";
|
||||
|
||||
export const dynamic = "force-dynamic"; // Always generate the page on load
|
||||
|
||||
export default async function HomePage() {
|
||||
const statistics = await kyFetch<AppStatistics>(Config.apiUrl + "/statistics");
|
||||
|
||||
return (
|
||||
<main className="-mt-3 w-screen min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f]">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="max-w-screen-2xl mt-48 mb-14 flex flex-col gap-64">
|
||||
<HeroSection />
|
||||
<DataCollection />
|
||||
<Friends />
|
||||
<SiteStats />
|
||||
<RealtimeScores />
|
||||
</div>
|
||||
<main className="flex flex-col items-center w-full gap-6 text-center">
|
||||
<div className="flex items-center flex-col">
|
||||
<p className="font-semibold text-2xl">ScoreSaber Reloaded</p>
|
||||
<p className="text-center">Welcome to the ScoreSaber Reloaded website.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-col">
|
||||
<p>ScoreSaber Reloaded is a website that allows you to track your ScoreSaber data over time.</p>
|
||||
</div>
|
||||
|
||||
{statistics && <AppStats initialStatistics={statistics} />}
|
||||
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Link href="/search">
|
||||
<Button className="w-fit">Get started</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@ -12,15 +12,13 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function ScoresPage() {
|
||||
return (
|
||||
<main className="w-full min-h-screen flex justify-center">
|
||||
<Card className="flex flex-col gap-2 w-full h-fit xl:w-[75%]">
|
||||
<div>
|
||||
<p className="font-semibold'">Live Score Feed</p>
|
||||
<p className="text-gray-400">This is the real-time scores being set on ScoreSaber.</p>
|
||||
</div>
|
||||
<Card className="flex flex-col gap-2 w-full xl:w-[75%]">
|
||||
<div>
|
||||
<p className="font-semibold'">Live Score Feed</p>
|
||||
<p className="text-gray-400">This is the real-time scores being set on ScoreSaber.</p>
|
||||
</div>
|
||||
|
||||
<ScoreFeed />
|
||||
</Card>
|
||||
</main>
|
||||
<ScoreFeed />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
import { Metadata } from "next";
|
||||
import { Timeframe } from "@ssr/common/timeframe";
|
||||
import { TopScoresData } from "@/components/score/top/top-scores-data";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Top Scores",
|
||||
openGraph: {
|
||||
title: "ScoreSaber Reloaded - Top Scores",
|
||||
description: "View the top 50 scores set by players on ScoreSaber.",
|
||||
},
|
||||
};
|
||||
|
||||
type TopScoresPageProps = {
|
||||
params: Promise<{
|
||||
timeframe: Timeframe;
|
||||
}>;
|
||||
};
|
||||
|
||||
export default async function TopScoresPage({ params }: TopScoresPageProps) {
|
||||
const { timeframe } = await params;
|
||||
|
||||
return <TopScoresData timeframe={timeframe} />;
|
||||
}
|
||||
59
projects/website/src/app/(pages)/scores/top/page.tsx
Normal file
59
projects/website/src/app/(pages)/scores/top/page.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { Metadata } from "next";
|
||||
import Card from "@/components/card";
|
||||
import { kyFetch } from "@ssr/common/utils/utils";
|
||||
import { Config } from "@ssr/common/config";
|
||||
import { TopScoresResponse } from "@ssr/common/response/top-scores-response";
|
||||
import Score from "@/components/score/score";
|
||||
import Link from "next/link";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Top Scores",
|
||||
openGraph: {
|
||||
title: "ScoreSaber Reloaded - Top Scores",
|
||||
description: "View the top 100 scores set by players on ScoreSaber.",
|
||||
},
|
||||
};
|
||||
|
||||
export default async function TopScoresPage() {
|
||||
const scores = await kyFetch<TopScoresResponse>(`${Config.apiUrl}/scores/top`);
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col gap-2 w-full xl:w-[75%]">
|
||||
<div>
|
||||
<p className="font-semibold'">Top 100 ScoreSaber Scores</p>
|
||||
<p className="text-gray-400">This will only show scores that have been tracked.</p>
|
||||
</div>
|
||||
|
||||
{!scores ? (
|
||||
<p>No scores found</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2 divide-y divide-border">
|
||||
{scores.scores.map(({ score, leaderboard, beatSaver }, index) => {
|
||||
const player = score.playerInfo;
|
||||
const name = score.playerInfo ? player.name || player.id : score.playerId;
|
||||
|
||||
return (
|
||||
<div key={index} className="flex flex-col pt-2">
|
||||
<p className="text-sm">
|
||||
Set by{" "}
|
||||
<Link href={`/player/${player.id}`}>
|
||||
<span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{name}</span>
|
||||
</Link>
|
||||
</p>
|
||||
<Score
|
||||
score={score}
|
||||
leaderboard={leaderboard}
|
||||
beatSaverMap={beatSaver}
|
||||
settings={{
|
||||
hideLeaderboardDropdown: true,
|
||||
hideAccuracyChanger: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -7,7 +7,7 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function SearchPage() {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center gap-2">
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
<div className="mb-4 mt-2 flex h-[150px] w-[150px] items-center justify-center rounded-full select-none bg-gray-600">
|
||||
<p className="text-9xl">?</p>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@ import Settings from "@/components/settings/settings";
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<main className="min-h-screen w-full">
|
||||
<main className="w-full">
|
||||
<Card className="w-full gap-4">
|
||||
<div>
|
||||
<p className="font-semibold">Settings</p>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import "./globals.css";
|
||||
import Footer from "@/components/footer";
|
||||
import { PreloadResources } from "@/components/preload-resources";
|
||||
import { QueryProvider } from "@/components/providers/query-provider";
|
||||
import { ThemeProvider } from "@/components/providers/theme-provider";
|
||||
@ -13,8 +14,6 @@ import { Colors } from "@/common/colors";
|
||||
import OfflineNetwork from "@/components/offline-network";
|
||||
import Script from "next/script";
|
||||
import { ApiHealth } from "@/components/api/api-health";
|
||||
import Footer from "@/components/footer";
|
||||
import { getBuildInformation } from "@/common/website-utils";
|
||||
|
||||
const siteFont = localFont({
|
||||
src: "./fonts/JetBrainsMono.ttf",
|
||||
@ -67,7 +66,6 @@ export default function RootLayout({
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const { buildId, buildTimeShort } = getBuildInformation();
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${siteFont.className} antialiased w-full h-full`}>
|
||||
@ -81,13 +79,12 @@ export default function RootLayout({
|
||||
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
|
||||
<QueryProvider>
|
||||
<ApiHealth />
|
||||
<main className="flex flex-col min-h-screen text-white w-full">
|
||||
<main className="flex flex-col min-h-screen gap-2 text-white w-full">
|
||||
<NavBar />
|
||||
<div className="mt-3 z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
|
||||
<div className="z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
|
||||
{children}
|
||||
</div>
|
||||
{/*<Footer />*/}
|
||||
<Footer buildId={buildId} buildTimeShort={buildTimeShort} />
|
||||
<Footer />
|
||||
</main>
|
||||
</QueryProvider>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { MapDifficulty } from "@ssr/common/score/map-difficulty";
|
||||
|
||||
export type Difficulty = {
|
||||
type Difficulty = {
|
||||
/**
|
||||
* The name of the difficulty
|
||||
*/
|
||||
@ -63,21 +63,14 @@ export function getScoreBadgeFromAccuracy(acc: number): ScoreBadge {
|
||||
return scoreBadges[scoreBadges.length - 1];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a random difficulty, except ExpertPlus.
|
||||
*/
|
||||
export function getRandomDifficulty(): Difficulty {
|
||||
return difficulties[Math.floor(Math.random() * (difficulties.length - 1))];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a {@link Difficulty} from its name
|
||||
*
|
||||
* @param diff the name of the difficulty
|
||||
* @returns the difficulty
|
||||
*/
|
||||
export function getDifficulty(diff: Difficulty | MapDifficulty) {
|
||||
const difficulty = difficulties.find(d => d.name === (typeof diff === "string" ? diff : diff.name));
|
||||
export function getDifficulty(diff: MapDifficulty) {
|
||||
const difficulty = difficulties.find(d => d.name === diff);
|
||||
if (!difficulty) {
|
||||
throw new Error(`Unknown difficulty: ${diff}`);
|
||||
}
|
||||
|
||||
@ -19,10 +19,3 @@ export function validateUrl(url: string) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function getRandomInteger(min: number, max: number): number {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@ import { useQuery } from "@tanstack/react-query";
|
||||
import { kyFetch } from "@ssr/common/utils/utils";
|
||||
import { Config } from "@ssr/common/config";
|
||||
import { useEffect, useState } from "react";
|
||||
import { User } from "lucide-react";
|
||||
|
||||
type AppStatisticsProps = {
|
||||
/**
|
||||
@ -30,24 +29,13 @@ export function AppStats({ initialStatistics }: AppStatisticsProps) {
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-5 sm:grid-cols-3 sm:gap-7 md:grid-cols-4 md:gap-12 lg:grid-cols-5">
|
||||
<Statistic icon={<User className="size-10" />} title="Tracked Players" value={statistics.trackedPlayers} />
|
||||
<Statistic icon={<User className="size-10" />} title="Tracked Scores" value={statistics.trackedScores} />
|
||||
<Statistic
|
||||
icon={<User className="size-10" />}
|
||||
title="Additional Scores Data"
|
||||
value={statistics.additionalScoresData}
|
||||
/>
|
||||
<Statistic
|
||||
icon={<User className="size-10" />}
|
||||
title="Cached BeatSaver Maps"
|
||||
value={statistics.cachedBeatSaverMaps}
|
||||
/>
|
||||
<Statistic
|
||||
icon={<User className="size-10" />}
|
||||
title="Cached ScoreSaber Leaderboards"
|
||||
value={statistics.cachedScoreSaberLeaderboards}
|
||||
/>
|
||||
<div className="flex items-center flex-col">
|
||||
<p className="font-semibold">Site Statistics</p>
|
||||
<Statistic title="Tracked Players" value={statistics.trackedPlayers} />
|
||||
<Statistic title="Tracked Scores" value={statistics.trackedScores} />
|
||||
<Statistic title="Additional Scores Data" value={statistics.additionalScoresData} />
|
||||
<Statistic title="Cached BeatSaver Maps" value={statistics.cachedBeatSaverMaps} />
|
||||
<Statistic title="Cached ScoreSaber Leaderboards" value={statistics.cachedScoreSaberLeaderboards} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,176 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { getBuildInformation } from "@/common/website-utils";
|
||||
import Link from "next/link";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import { cn } from "@/common/utils";
|
||||
import { ReactElement } from "react";
|
||||
import { SiGithub, SiX } from "react-icons/si";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
type FooterLink = {
|
||||
/**
|
||||
* The name of this link.
|
||||
*/
|
||||
type NavbarItem = {
|
||||
name: string;
|
||||
|
||||
/**
|
||||
* The href for this link.
|
||||
*/
|
||||
href: string;
|
||||
|
||||
/**
|
||||
* The optional name to show
|
||||
* when the screen size is small.
|
||||
*/
|
||||
shortName?: string;
|
||||
link: string;
|
||||
openInNewTab?: boolean;
|
||||
};
|
||||
|
||||
type SocialLinkType = {
|
||||
/**
|
||||
* The name of this social link.
|
||||
*/
|
||||
name: string;
|
||||
|
||||
/**
|
||||
* The logo for this social link.
|
||||
*/
|
||||
logo: ReactElement;
|
||||
|
||||
/**
|
||||
* The href for this social link.
|
||||
*/
|
||||
href: string;
|
||||
};
|
||||
|
||||
const links: {
|
||||
[category: string]: FooterLink[];
|
||||
} = {
|
||||
Resources: [
|
||||
{
|
||||
name: "Swagger Docs",
|
||||
shortName: "Swagger",
|
||||
href: "/swagger",
|
||||
},
|
||||
{
|
||||
name: "Source Code",
|
||||
shortName: "Source",
|
||||
href: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
|
||||
},
|
||||
{
|
||||
name: "System Status",
|
||||
shortName: "Status",
|
||||
href: "https://status.fascinated.cc/status/scoresaber-reloaded",
|
||||
},
|
||||
],
|
||||
App: [
|
||||
{
|
||||
name: "Score Feed",
|
||||
href: "/scores/live",
|
||||
},
|
||||
{
|
||||
name: "Top Scores",
|
||||
href: "/scores/top/weekly",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const socialLinks: SocialLinkType[] = [
|
||||
const items: NavbarItem[] = [
|
||||
{
|
||||
name: "Home",
|
||||
link: "/",
|
||||
},
|
||||
{
|
||||
name: "Source",
|
||||
link: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
|
||||
openInNewTab: true,
|
||||
},
|
||||
{
|
||||
name: "Twitter",
|
||||
logo: <SiX className="size-5 lg:size-6" />,
|
||||
href: "https://x.com/ssr_reloaded",
|
||||
link: "https://x.com/ssr_reloaded",
|
||||
openInNewTab: true,
|
||||
},
|
||||
{
|
||||
name: "Discord",
|
||||
logo: <img className="size-6 lg:size-7" src="/assets/logos/discord.svg" />,
|
||||
href: "https://discord.gg/kmNfWGA4A8",
|
||||
link: "https://discord.gg/kmNfWGA4A8",
|
||||
openInNewTab: true,
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
logo: <SiGithub className="size-5 lg:size-6" />,
|
||||
href: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
|
||||
name: "Status",
|
||||
link: "https://status.fascinated.cc/status/scoresaber-reloaded",
|
||||
openInNewTab: true,
|
||||
},
|
||||
{
|
||||
name: "Swagger",
|
||||
link: "/swagger",
|
||||
openInNewTab: true,
|
||||
},
|
||||
{
|
||||
name: "Score Feed",
|
||||
link: "/scores/live",
|
||||
openInNewTab: false,
|
||||
},
|
||||
{
|
||||
name: "Top Scores",
|
||||
link: "/scores/top",
|
||||
openInNewTab: false,
|
||||
},
|
||||
];
|
||||
|
||||
export default function Footer({ buildId, buildTimeShort }: { buildId: string; buildTimeShort: string | undefined }) {
|
||||
const isHome: boolean = usePathname() === "/";
|
||||
export default function Footer() {
|
||||
const { buildId, buildTime, buildTimeShort } = getBuildInformation();
|
||||
|
||||
return (
|
||||
<footer
|
||||
className={cn(
|
||||
"px-10 min-h-80 py-5 flex flex-col gap-10 lg:gap-0 justify-between border-t border-muted select-none",
|
||||
isHome ? "bg-[#121212]" : "mt-5 bg-[#121212]/60"
|
||||
)}
|
||||
>
|
||||
{/* Top Section */}
|
||||
<div className="flex justify-center">
|
||||
{/* Branding & Social Links */}
|
||||
<div className="w-full max-w-screen-2xl flex flex-col gap-7 lg:flex-row justify-between items-center lg:items-start">
|
||||
<div className="flex flex-col gap-5">
|
||||
{/* Branding */}
|
||||
<div className="flex flex-col gap-2 text-center items-center lg:text-left lg:items-start">
|
||||
<Link
|
||||
className="flex gap-3 items-center hover:opacity-75 transition-all transform-gpu"
|
||||
href="/"
|
||||
draggable={false}
|
||||
>
|
||||
<img className="size-9" src="/assets/logos/scoresaber.png" alt="Scoresaber Logo" />
|
||||
<h1 className="text-xl font-bold text-pp">ScoreSaber Reloaded</h1>
|
||||
</Link>
|
||||
<p className="max-w-md text-sm opacity-85">
|
||||
ScoreSaber Reloaded is a new way to view your scores and get more stats about you and your plays
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-4 justify-center lg:justify-start items-center">
|
||||
{socialLinks.map(link => (
|
||||
<Link
|
||||
key={link.name}
|
||||
className="hover:opacity-75 transition-all transform-gpu"
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
draggable={false}
|
||||
>
|
||||
{link.logo}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex gap-20 md:gap-32 transition-all transform-gpu">
|
||||
{Object.entries(links).map(([title, links]) => (
|
||||
<div key={title} className="flex flex-col gap-0.5">
|
||||
<h1 className="pb-1 text-lg font-semibold text-ssr">{title}</h1>
|
||||
{links.map(link => {
|
||||
const external: boolean = !link.href.startsWith("/");
|
||||
return (
|
||||
<Link
|
||||
key={link.name}
|
||||
className="flex gap-2 items-center hover:opacity-75 transition-all transform-gpu"
|
||||
href={link.href}
|
||||
target={external ? "_blank" : undefined}
|
||||
draggable={false}
|
||||
>
|
||||
<span className={cn("hidden sm:flex", !link.shortName && "flex")}>{link.name}</span>
|
||||
{link.shortName && <span className="flex sm:hidden">{link.shortName}</span>}
|
||||
{external && <ExternalLink className="w-3.5 h-3.5" />}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center w-full flex-col gap-1 mt-6">
|
||||
<div className="flex items-center gap-2 text-input text-sm">
|
||||
<p>Build: {buildId}</p>
|
||||
<p className="hidden md:block">({buildTime})</p>
|
||||
<p className="none md:hidden">({buildTimeShort})</p>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="flex justify-center">
|
||||
{/* Build Info */}
|
||||
<p className="text-sm opacity-50">
|
||||
Build {buildId} ({buildTimeShort})
|
||||
</p>
|
||||
<div className="w-full flex flex-wrap items-center justify-center bg-secondary/95 divide-x divide-input text-sm py-2">
|
||||
{items.map((item, index) => {
|
||||
return (
|
||||
<Link
|
||||
key={index}
|
||||
className="px-2 text-ssr hover:brightness-[66%] transition-all transform-gpu"
|
||||
href={item.link}
|
||||
target={item.openInNewTab ? "_blank" : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
import { Database } from "lucide-react";
|
||||
|
||||
export default function DataCollection() {
|
||||
return (
|
||||
<div className="px-5 -mt-40 flex flex-col gap-10 select-none">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<div className="flex gap-3 items-center text-pp">
|
||||
<Database className="p-2 size-11 bg-ssr/15 rounded-lg" />
|
||||
<h1 className="text-3xl sm:text-4xl font-bold">Data Collection</h1>
|
||||
</div>
|
||||
<p className="max-w-5xl text-sm sm:text-base opacity-85">
|
||||
posidonium novum ancillae ius conclusionemque splendide vel.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="max-w-[900px]">
|
||||
<img
|
||||
className="w-full h-full rounded-2xl border border-ssr/20"
|
||||
src="/assets/home/data-collection.png"
|
||||
alt="Data Collection"
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
import { UsersRound } from "lucide-react";
|
||||
import { cn } from "@/common/utils";
|
||||
|
||||
export default function Friends() {
|
||||
return (
|
||||
<div className="px-5 -mt-20 flex flex-col gap-10 items-end select-none">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-2.5 text-right items-end">
|
||||
<div className="flex flex-row-reverse gap-3 items-center text-purple-600">
|
||||
<UsersRound className="p-2 size-11 bg-purple-800/15 rounded-lg" />
|
||||
<h1 className="text-3xl sm:text-4xl font-bold">Friends</h1>
|
||||
</div>
|
||||
<p className="max-w-5xl text-sm sm:text-base opacity-85">
|
||||
posidonium novum ancillae ius conclusionemque splendide vel.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative",
|
||||
"before:absolute before:-left-36 before:-top-28 before:size-[32rem] before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-purple-600 before:rounded-full before:blur-3xl before:opacity-30 before:z-[1]"
|
||||
)}
|
||||
>
|
||||
<div className={cn("relative max-w-[900px] z-20")}>
|
||||
<img
|
||||
className="w-full h-full rounded-2xl border border-ssr/20"
|
||||
src="/assets/home/friends.png"
|
||||
alt="Friends"
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,102 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import AnimatedShinyText from "@/components/ui/animated-shiny-text";
|
||||
import { ArrowRight, UserSearch } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { SiGithub } from "react-icons/si";
|
||||
import { BorderBeam } from "@/components/ui/border-beam";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<div className="flex flex-col gap-3.5 text-center items-center select-none">
|
||||
<motion.div
|
||||
className="flex flex-col gap-3.5 text-center items-center"
|
||||
initial={{ opacity: 0, y: -40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
>
|
||||
<Alert />
|
||||
<Title />
|
||||
</motion.div>
|
||||
<Buttons />
|
||||
<AppPreview />
|
||||
<Separator className="my-12 w-screen" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Alert() {
|
||||
return (
|
||||
<Link
|
||||
className="group mb-1.5 bg-neutral-900 hover:opacity-85 border border-white/5 rounded-full transition-all transform-gpu"
|
||||
href="https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3"
|
||||
target="_blank"
|
||||
draggable={false}
|
||||
>
|
||||
<AnimatedShinyText className="px-3.5 py-1 flex gap-2 items-center justify-center">
|
||||
<SiGithub className="size-5" />
|
||||
<span>Check out our Source Code</span>
|
||||
<ArrowRight className="size-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
|
||||
</AnimatedShinyText>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function Title() {
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-ssr to-pp/85">
|
||||
ScoreSaber Reloaded
|
||||
</h1>
|
||||
<p className="max-w-sm md:max-w-xl md:text-lg opacity-85">
|
||||
ScoreSaber Reloaded is a new way to view your scores and get more stats about you and your plays
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Buttons() {
|
||||
return (
|
||||
<motion.div
|
||||
className="mt-4 flex flex-col xs:flex-row gap-4 items-center"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.35, duration: 0.7, ease: "easeOut" }}
|
||||
>
|
||||
<Link href="/search" target="_blank">
|
||||
<Button className="max-w-52 flex gap-2.5 bg-pp hover:bg-pp/85 text-white text-base">
|
||||
<UserSearch className="size-6" />
|
||||
<span>Player Search</span>
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href="https://discord.gg/kmNfWGA4A8" target="_blank">
|
||||
<Button className="max-w-52 flex gap-2.5 bg-[#5865F2] hover:bg-[#5865F2]/85 text-white text-base">
|
||||
<img className="size-6" src="/assets/logos/discord.svg" />
|
||||
<span>Join our Discord</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function AppPreview() {
|
||||
return (
|
||||
<motion.div
|
||||
className="mx-5 my-20 relative max-w-[1280px] shadow-[0_3rem_20rem_-15px_rgba(15,15,15,0.6)] shadow-pp/50 rounded-2xl overflow-hidden"
|
||||
initial={{ opacity: 0, y: -35 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.45, duration: 0.7, ease: "easeOut" }}
|
||||
>
|
||||
<BorderBeam colorFrom="#6773ff" colorTo="#4858ff" />
|
||||
<img
|
||||
className="w-full h-full border-4 border-pp/20 rounded-2xl"
|
||||
src="/assets/home/app-preview.png"
|
||||
draggable={false}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@ -1,122 +0,0 @@
|
||||
import { ChartNoAxesCombined, Database, Flame } from "lucide-react";
|
||||
import { cn, getRandomInteger } from "@/common/utils";
|
||||
import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
|
||||
import { Difficulty, getDifficulty, getRandomDifficulty } from "@/common/song-utils";
|
||||
import { AnimatedList } from "@/components/ui/animated-list";
|
||||
|
||||
type ScoreProps = {
|
||||
songArt: string;
|
||||
songName: string;
|
||||
songAuthor: string;
|
||||
setBy: string;
|
||||
};
|
||||
|
||||
let scores: ScoreProps[] = [
|
||||
{
|
||||
songArt: "https://cdn.scoresaber.com/covers/B1D3FA6D5305837DF59B5E629A412DEBC68BBB46.png",
|
||||
songName: "LORELEI",
|
||||
songAuthor: "Camellia",
|
||||
setBy: "ImFascinated",
|
||||
},
|
||||
{
|
||||
songArt: "https://cdn.scoresaber.com/covers/7C44CDC1E33E2F5F929867B29CEB3860C3716DDC.png",
|
||||
songName: "Time files",
|
||||
songAuthor: "xi",
|
||||
setBy: "Minion",
|
||||
},
|
||||
{
|
||||
songArt: "https://cdn.scoresaber.com/covers/8E4B7917C01E5987A5B3FF13FAA3CA8F27D21D34.png",
|
||||
songName: "RATATA",
|
||||
songAuthor: "Skrillex, Missy Elliot & Mr. Oizo",
|
||||
setBy: "Rainnny",
|
||||
},
|
||||
{
|
||||
songArt: "https://cdn.scoresaber.com/covers/98F73BD330852EAAEBDC695140EAC8F2027AEEC8.png",
|
||||
songName: "Invasion of Amorphous Trepidation",
|
||||
songAuthor: "Diabolic Phantasma",
|
||||
setBy: "Bello",
|
||||
},
|
||||
{
|
||||
songArt: "https://cdn.scoresaber.com/covers/666EEAC0F3EEE2278DCB971AC1D27421A0335801.png",
|
||||
songName: "Yotsuya-san ni Yoroshiku",
|
||||
songAuthor: "Eight",
|
||||
setBy: "ACC | NoneTaken",
|
||||
},
|
||||
];
|
||||
scores = Array.from({ length: 32 }, () => scores).flat();
|
||||
|
||||
export default function RealtimeScores() {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative px-5 -mt-20 flex flex-col lg:flex-row-reverse gap-10 select-none",
|
||||
"before:absolute before:-left-40 before:-bottom-36 before:size-[28rem] before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-yellow-600 before:rounded-full before:blur-3xl before:opacity-30"
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-2.5 text-right items-end">
|
||||
<div className="flex flex-row-reverse gap-3 items-center text-yellow-400">
|
||||
<Flame className="p-2 size-11 bg-yellow-800/15 rounded-lg" />
|
||||
<h1 className="text-3xl sm:text-4xl font-bold">Realtime Scores</h1>
|
||||
</div>
|
||||
<p className="max-w-2xl lg:max-w-5xl text-sm sm:text-base opacity-85">
|
||||
<span className="text-lg font-semibold text-yellow-500">Nec detracto voluptatibus!</span> Vulputate duis
|
||||
dolorum iuvaret disputationi ceteros te noluisse himenaeos bibendum dolores molestiae lorem elaboraret porro
|
||||
brute tation simul laudem netus odio has in tibique.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="w-full flex flex-col justify-center items-center overflow-hidden">
|
||||
<AnimatedList className="w-full max-w-[32rem] h-96 divide-y divide-muted" delay={1500}>
|
||||
{scores.map((score, index) => (
|
||||
<Score key={index} {...score} />
|
||||
))}
|
||||
</AnimatedList>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Score({ songArt, songName, songAuthor, setBy }: ScoreProps) {
|
||||
const difficulty: Difficulty = getRandomDifficulty();
|
||||
return (
|
||||
<figure className="py-2 flex flex-col text-sm">
|
||||
{/* Set By */}
|
||||
<span>
|
||||
Set by <span className="text-ssr">{setBy}</span>
|
||||
</span>
|
||||
|
||||
{/* Score */}
|
||||
<div className="py-3 flex gap-5 items-center">
|
||||
{/* Position & Time */}
|
||||
<div className="w-24 flex flex-col gap-1 text-center items-center">
|
||||
<div className="flex gap-2 items-center">
|
||||
<GlobeAmericasIcon className="size-5" />
|
||||
<span className="text-ssr">#{getRandomInteger(1, 900)}</span>
|
||||
</div>
|
||||
<span>just now</span>
|
||||
</div>
|
||||
|
||||
{/* Song Art & Difficulty */}
|
||||
<div className="relative">
|
||||
<img className="size-16 rounded-md" src={songArt} alt={`Song art for ${songName} by ${songAuthor}`} />
|
||||
<div
|
||||
className="absolute inset-x-0 bottom-0 py-px flex justify-center text-xs rounded-t-lg"
|
||||
style={{
|
||||
backgroundColor: getDifficulty(difficulty).color + "f0", // Transparency value (in hex 0-255)
|
||||
}}
|
||||
>
|
||||
{difficulty.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Song Name & Author */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-ssr">{songName}</h1>
|
||||
<p className="opacity-75">{songAuthor}</p>
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { ChartNoAxesCombined, Database } from "lucide-react";
|
||||
import { kyFetch } from "@ssr/common/utils/utils";
|
||||
import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
|
||||
import { Config } from "@ssr/common/config";
|
||||
import { AppStats } from "@/components/app-statistics";
|
||||
|
||||
export default async function SiteStats() {
|
||||
const statistics = await kyFetch<AppStatistics>(Config.apiUrl + "/statistics");
|
||||
return (
|
||||
<div className="px-5 -mt-20 flex flex-col gap-10 select-none">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<div className="flex gap-3 items-center text-orange-600">
|
||||
<ChartNoAxesCombined className="p-2 size-11 bg-orange-800/15 rounded-lg" />
|
||||
<h1 className="text-3xl sm:text-4xl font-bold">Site Statistics</h1>
|
||||
</div>
|
||||
<p className="max-w-5xl text-sm sm:text-base opacity-85">
|
||||
posidonium novum ancillae ius conclusionemque splendide vel.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{statistics && <AppStats initialStatistics={statistics} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,22 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import CountUp from "react-countup";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
type Statistic = {
|
||||
icon: ReactElement;
|
||||
title: string;
|
||||
value: number;
|
||||
};
|
||||
|
||||
export default function Statistic({ icon, title, value }: Statistic) {
|
||||
export default function Statistic({ title, value }: Statistic) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2 text-center items-center text-lg">
|
||||
{icon}
|
||||
<h1 className="font-semibold text-orange-400/85">{title}</h1>
|
||||
<span>
|
||||
<CountUp end={value} duration={1.2} enableScrollSpy scrollSpyOnce />
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-center">
|
||||
{title}: <CountUp end={value} duration={1.2} />
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ export default function FullscreenLoader({ reason }: Props) {
|
||||
<div className="absolute w-screen h-screen bg-background brightness-[66%] flex flex-col gap-6 items-center justify-center">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
|
||||
<div className="text-gray-300 text-md text-center">{reason}</div>
|
||||
<p className="text-gray-300 text-md text-center">{reason}</p>
|
||||
</div>
|
||||
<div className="animate-spin">
|
||||
<ScoreSaberLogo />
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import { ArrowPathIcon } from "@heroicons/react/24/solid";
|
||||
import * as React from "react";
|
||||
|
||||
export function LoadingIcon() {
|
||||
return <ArrowPathIcon className="w-5 h-5 animate-spin" />;
|
||||
}
|
||||
@ -6,6 +6,7 @@ import NavbarButton from "./navbar-button";
|
||||
import ProfileButton from "./profile-button";
|
||||
import { TrendingUpIcon } from "lucide-react";
|
||||
import FriendsButton from "@/components/navbar/friends-button";
|
||||
import { PiSwordFill } from "react-icons/pi";
|
||||
|
||||
type NavbarItem = {
|
||||
name: string;
|
||||
|
||||
@ -6,6 +6,7 @@ import useDatabase from "../../hooks/use-database";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import Tooltip from "../tooltip";
|
||||
import { Button } from "../ui/button";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { setCookieValue } from "@ssr/common/utils/cookie-utils";
|
||||
|
||||
type Props = {
|
||||
@ -32,6 +33,7 @@ export default function ClaimProfile({ playerId }: Props) {
|
||||
title: "Profile Claimed",
|
||||
description: "You have claimed this profile.",
|
||||
});
|
||||
revalidatePath("/player/[...slug]");
|
||||
}
|
||||
|
||||
// Database is not ready
|
||||
|
||||
@ -8,7 +8,6 @@ import useWebSocket, { ReadyState } from "react-use-websocket";
|
||||
import { ScoreSaberWebsocketMessageToken } from "@ssr/common/types/token/scoresaber/websocket/scoresaber-websocket-message";
|
||||
import Score from "@/components/score/score";
|
||||
import { getScoreSaberLeaderboardFromToken, getScoreSaberScoreFromToken } from "@ssr/common/token-creators";
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
||||
|
||||
export default function ScoreFeed() {
|
||||
const { readyState, lastJsonMessage } = useWebSocket<ScoreSaberWebsocketMessageToken>("wss://scoresaber.com/ws");
|
||||
@ -52,15 +51,12 @@ export default function ScoreFeed() {
|
||||
|
||||
return (
|
||||
<div key={score.scoreId} className="flex flex-col py-2">
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<Avatar className="w-6 h-6">
|
||||
<AvatarImage src={player.profilePicture} />
|
||||
</Avatar>
|
||||
<p className="text-sm">
|
||||
Set by{" "}
|
||||
<Link href={`/player/${player.id}`}>
|
||||
<span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{player.name}</span>
|
||||
</Link>
|
||||
<p className="text-gray-400 text-xs"> on {scoreToken.score.deviceHmd || "Unknown Device"}</p>
|
||||
</div>
|
||||
</p>
|
||||
<Score
|
||||
score={score}
|
||||
leaderboard={leaderboard}
|
||||
|
||||
@ -1,121 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import Card from "@/components/card";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Score from "@/components/score/score";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Timeframe } from "@ssr/common/timeframe";
|
||||
import { TopScoresResponse } from "@ssr/common/response/top-scores-response";
|
||||
import { Config } from "@ssr/common/config";
|
||||
import { kyFetch } from "@ssr/common/utils/utils";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { LoadingIcon } from "@/components/loading-icon";
|
||||
import { capitalizeFirstLetter } from "@/common/string-utils";
|
||||
|
||||
type TimeframesType = {
|
||||
timeframe: Timeframe;
|
||||
display: string;
|
||||
};
|
||||
const timeframes: TimeframesType[] = [
|
||||
{
|
||||
timeframe: "daily",
|
||||
display: "Today",
|
||||
},
|
||||
{
|
||||
timeframe: "weekly",
|
||||
display: "This Week",
|
||||
},
|
||||
{
|
||||
timeframe: "monthly",
|
||||
display: "This Month",
|
||||
},
|
||||
];
|
||||
|
||||
type TopScoresDataProps = {
|
||||
timeframe: Timeframe;
|
||||
};
|
||||
|
||||
export function TopScoresData({ timeframe }: TopScoresDataProps) {
|
||||
const [selectedTimeframe, setSelectedTimeframe] = useState<Timeframe>(timeframe);
|
||||
const [scores, setScores] = useState<TopScoresResponse | null>(null);
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["top-scores", selectedTimeframe],
|
||||
queryFn: async () => {
|
||||
return kyFetch<TopScoresResponse>(`${Config.apiUrl}/scores/top?limit=50&timeframe=${selectedTimeframe}`);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Update the URL
|
||||
window.history.replaceState(null, "", `/scores/top/${selectedTimeframe}`);
|
||||
}, [selectedTimeframe]);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setScores(data);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col gap-2 w-full xl:w-[75%] justify-center">
|
||||
<div className="flex flex-row flex-wrap gap-2 justify-center">
|
||||
{timeframes.map((timeframe, index) => {
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
className="w-32"
|
||||
variant={selectedTimeframe === timeframe.timeframe ? "default" : "outline"}
|
||||
onClick={() => {
|
||||
setScores(null);
|
||||
setSelectedTimeframe(timeframe.timeframe);
|
||||
}}
|
||||
>
|
||||
{timeframe.display}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center flex-col text-center">
|
||||
<p className="font-semibold'">Top 50 ScoreSaber Scores ({capitalizeFirstLetter(selectedTimeframe)})</p>
|
||||
<p className="text-gray-400">This will only show scores that have been tracked.</p>
|
||||
</div>
|
||||
|
||||
{(isLoading || !scores) && (
|
||||
<div className="flex justify-center items-center">
|
||||
<LoadingIcon />
|
||||
</div>
|
||||
)}
|
||||
{scores && !isLoading && (
|
||||
<div className="flex flex-col gap-2 divide-y divide-border">
|
||||
{scores.scores.map(({ score, leaderboard, beatSaver }, index) => {
|
||||
const player = score.playerInfo;
|
||||
const name = score.playerInfo ? player.name || player.id : score.playerId;
|
||||
|
||||
return (
|
||||
<div key={index} className="flex flex-col pt-2">
|
||||
<p className="text-sm">
|
||||
Set by{" "}
|
||||
<Link href={`/player/${player.id}`}>
|
||||
<span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{name}</span>
|
||||
</Link>
|
||||
</p>
|
||||
<Score
|
||||
score={score}
|
||||
leaderboard={leaderboard}
|
||||
beatSaverMap={beatSaver}
|
||||
settings={{
|
||||
hideLeaderboardDropdown: true,
|
||||
hideAccuracyChanger: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -3,8 +3,8 @@ import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils
|
||||
import { capitalizeFirstLetter } from "@/common/string-utils";
|
||||
import Tooltip from "@/components/tooltip";
|
||||
import { ReactElement } from "react";
|
||||
import { ChangeRange } from "@ssr/common/player/player";
|
||||
import { PlayerStatValue } from "@ssr/common/player/player-stat-change";
|
||||
import { StatisticRange } from "@ssr/common/player/player";
|
||||
|
||||
type ChangeOverTimeProps = {
|
||||
/**
|
||||
@ -40,7 +40,7 @@ export function ChangeOverTime({ player, type, children }: ChangeOverTimeProps)
|
||||
};
|
||||
|
||||
// Renders the change for a given time frame
|
||||
const renderChange = (value: number | undefined, range: StatisticRange) => (
|
||||
const renderChange = (value: number | undefined, range: ChangeRange) => (
|
||||
<p>
|
||||
{capitalizeFirstLetter(range)} Change:{" "}
|
||||
<span className={value === undefined ? "" : value >= 0 ? (value === 0 ? "" : "text-green-500") : "text-red-500"}>
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { ReactElement, useEffect, useMemo, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
export interface AnimatedListProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export const AnimatedList = React.memo(
|
||||
({ className, children, delay = 1000 }: AnimatedListProps) => {
|
||||
const [index, setIndex] = useState(0);
|
||||
const childrenArray = React.Children.toArray(children);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length);
|
||||
}, delay);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [childrenArray.length, delay]);
|
||||
|
||||
const itemsToShow = useMemo(
|
||||
() => childrenArray.slice(0, index + 1).reverse(),
|
||||
[index, childrenArray],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col items-center gap-4 ${className}`}>
|
||||
<AnimatePresence>
|
||||
{itemsToShow.map((item) => (
|
||||
<AnimatedListItem key={(item as ReactElement).key}>
|
||||
{item}
|
||||
</AnimatedListItem>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
AnimatedList.displayName = "AnimatedList";
|
||||
|
||||
export function AnimatedListItem({ children }: { children: React.ReactNode }) {
|
||||
const animations = {
|
||||
initial: { scale: 0, opacity: 0 },
|
||||
animate: { scale: 1, opacity: 1, originY: 0 },
|
||||
exit: { scale: 0, opacity: 0 },
|
||||
transition: { type: "spring", stiffness: 350, damping: 40 },
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div {...animations} layout className="mx-auto w-full">
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
import { CSSProperties, FC, ReactNode } from "react";
|
||||
import { cn } from "@/common/utils";
|
||||
|
||||
interface AnimatedShinyTextProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
shimmerWidth?: number;
|
||||
}
|
||||
|
||||
const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({ children, className, shimmerWidth = 100 }) => {
|
||||
return (
|
||||
<p
|
||||
style={
|
||||
{
|
||||
"--shiny-width": `${shimmerWidth}px`,
|
||||
} as CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
|
||||
|
||||
// Shine effect
|
||||
"animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
|
||||
|
||||
// Shine gradient
|
||||
"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80",
|
||||
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnimatedShinyText;
|
||||
@ -1,49 +0,0 @@
|
||||
import { cn } from "@/common/utils";
|
||||
|
||||
interface BorderBeamProps {
|
||||
className?: string;
|
||||
size?: number;
|
||||
duration?: number;
|
||||
borderWidth?: number;
|
||||
anchor?: number;
|
||||
colorFrom?: string;
|
||||
colorTo?: string;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export const BorderBeam = ({
|
||||
className,
|
||||
size = 200,
|
||||
duration = 15,
|
||||
anchor = 90,
|
||||
borderWidth = 1.5,
|
||||
colorFrom = "#ffaa40",
|
||||
colorTo = "#9c40ff",
|
||||
delay = 0,
|
||||
}: BorderBeamProps) => {
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--size": size,
|
||||
"--duration": duration,
|
||||
"--anchor": anchor,
|
||||
"--border-width": borderWidth,
|
||||
"--color-from": colorFrom,
|
||||
"--color-to": colorTo,
|
||||
"--delay": `-${delay}s`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
|
||||
|
||||
// mask styles
|
||||
"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
|
||||
|
||||
// pseudo styles
|
||||
"after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||
import { cn } from "@/common/utils";
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
|
||||
<SeparatorPrimitive.Root
|
||||
ref={ref}
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
||||
|
||||
export { Separator };
|
||||
@ -1,8 +1,5 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
@ -11,10 +8,6 @@ const config: Config = {
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
screens: {
|
||||
xs: "475px",
|
||||
...defaultTheme.screens,
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
pp: "#4858ff",
|
||||
@ -71,25 +64,6 @@ const config: Config = {
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
animation: {
|
||||
"shiny-text": "shiny-text 8s infinite",
|
||||
"border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
|
||||
},
|
||||
keyframes: {
|
||||
"shiny-text": {
|
||||
"0%, 90%, 100%": {
|
||||
"background-position": "calc(-100% - var(--shiny-width)) 0",
|
||||
},
|
||||
"30%, 60%": {
|
||||
"background-position": "calc(100% + var(--shiny-width)) 0",
|
||||
},
|
||||
},
|
||||
"border-beam": {
|
||||
"100%": {
|
||||
"offset-distance": "100%",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
|
||||
Reference in New Issue
Block a user