46 Commits

Author SHA1 Message Date
a1b0889f49 Merge branch 'master' of https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m59s
2024-10-29 21:51:15 +00:00
a5604335c1 fix a few pages not being the full screen height
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Failing after 3m4s
2024-10-29 17:47:20 -04:00
acec87bb17 add device set on fallback
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Has been cancelled
2024-10-29 21:47:02 +00:00
24f4910364 Merge remote-tracking branch 'origin/master'
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Failing after 5s
2024-10-29 21:43:45 +00:00
b4095e3bf6 update score feed page 2024-10-29 21:43:10 +00:00
9979732cc6 small responsiveness fix
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Has been cancelled
2024-10-29 17:42:56 -04:00
cd8bbeff5d new footer
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 3m0s
2024-10-29 17:39:32 -04:00
803edb4fd5 update icons
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 3m1s
2024-10-29 16:34:16 -04:00
5774f51b06 make score difficulty random 2024-10-29 16:25:57 -04:00
8814b9881e make realtime scores mobile responsive 2024-10-29 16:16:04 -04:00
e1c665193b redeploy site
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 3m17s
2024-10-29 16:01:08 -04:00
3491057f04 update bun lock 2024-10-29 15:59:58 -04:00
8f6c556662 more landing page stuff (:
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Failing after 8s
2024-10-29 15:50:58 -04:00
a47cc3c7d8 disable all time until i can make fetching it faster
All checks were successful
Deploy Backend / docker (ubuntu-latest) (push) Successful in 46s
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m53s
2024-10-29 19:50:40 +00:00
be5f0ab780 testing
All checks were successful
Deploy Backend / docker (ubuntu-latest) (push) Successful in 41s
2024-10-29 19:36:11 +00:00
de441b698c smh my head
All checks were successful
Deploy Backend / docker (ubuntu-latest) (push) Successful in 58s
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m55s
2024-10-29 18:52:14 +00:00
448155a3c3 smh my head
Some checks failed
Deploy Backend / docker (ubuntu-latest) (push) Failing after 34s
Deploy Website / docker (ubuntu-latest) (push) Failing after 34s
2024-10-29 18:49:20 +00:00
78c8c1ba98 add some optimization
Some checks failed
Deploy Backend / docker (ubuntu-latest) (push) Failing after 32s
2024-10-29 18:48:09 +00:00
069a566d40 add additional data and previous score in top scores response
Some checks failed
Deploy Backend / docker (ubuntu-latest) (push) Failing after 32s
2024-10-29 18:45:34 +00:00
8011ed7b5a add additional data in top scores response
Some checks failed
Deploy Backend / docker (ubuntu-latest) (push) Failing after 31s
2024-10-29 18:44:21 +00:00
f232468fc1 fix grr
Some checks failed
Deploy Backend / docker (ubuntu-latest) (push) Failing after 33s
Deploy Website / docker (ubuntu-latest) (push) Failing after 31s
2024-10-29 18:39:27 +00:00
b68de0552f cleanup top scores and add timeframes to them
Some checks failed
Deploy Backend / docker (ubuntu-latest) (push) Failing after 45s
Deploy Website / docker (ubuntu-latest) (push) Failing after 32s
2024-10-29 18:34:58 +00:00
9e96d2f0ba replace discord log with console log 2024-10-29 14:42:34 +00:00
f4192b5030 remove debug 2024-10-29 14:17:49 +00:00
b610c5d97f fix cron 2024-10-29 14:17:42 +00:00
67c4865697 fix player name 2024-10-29 14:17:33 +00:00
3a2a876f74 fix player scores background refreshing
All checks were successful
Deploy Backend / docker (ubuntu-latest) (push) Successful in 52s
2024-10-29 14:11:30 +00:00
a26bf53996 this is useless
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m52s
2024-10-29 12:39:57 +00:00
57e74e30e2 Merge remote-tracking branch 'origin/master'
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 3m14s
2024-10-28 22:53:13 -04:00
f197d0b3c3 test 2024-10-29 02:50:34 +00:00
a80213aa51 Begin on the new landing page 2024-10-28 22:47:45 -04:00
e9c03a662e add is prod check to Sentry
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m46s
2024-10-28 22:14:00 +00:00
18aaba86be testing sentry stuff
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m49s
2024-10-28 21:53:37 +00:00
72a9cee7af testing sentry stuff
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Failing after 1m3s
2024-10-28 21:44:15 +00:00
314ade1457 testing sentry stuff
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Failing after 1m19s
2024-10-28 21:38:23 +00:00
01cc5d8c48 testing sentry stuff 2024-10-28 21:36:39 +00:00
e5f0bd0595 bundle analyzer
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m37s
2024-10-28 21:31:04 +00:00
3c7cedc529 fix tge fix
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m19s
2024-10-28 21:08:02 +00:00
e88fb50b14 change song author and mapper name sizing
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Failing after 1m32s
2024-10-28 21:05:29 +00:00
6b30c6efed cleanup
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Failing after 1m33s
2024-10-28 21:01:12 +00:00
ebb91344bc fix previous score timestamp hover
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m23s
2024-10-28 19:10:30 +00:00
02015525e3 oops
All checks were successful
Deploy Backend / docker (ubuntu-latest) (push) Successful in 40s
2024-10-28 19:01:47 +00:00
c1f33578d7 fix vs for mobile
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m21s
2024-10-28 16:33:21 +00:00
0ec1fc9d41 oops
All checks were successful
Deploy Backend / docker (ubuntu-latest) (push) Successful in 47s
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m19s
2024-10-28 16:30:12 +00:00
1c2214a659 made the player page look much nicer
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m23s
2024-10-28 16:22:33 +00:00
f156b7f582 fix previous score
All checks were successful
Deploy Backend / docker (ubuntu-latest) (push) Successful in 41s
2024-10-28 15:47:41 +00:00
74 changed files with 1355 additions and 450 deletions

View File

@ -9,6 +9,7 @@ on:
- projects/website/** - projects/website/**
- projects/common/** - projects/common/**
- .gitea/workflows/deploy-website.yml - .gitea/workflows/deploy-website.yml
- bun.lockb
jobs: jobs:
docker: docker:

View File

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

BIN
bun.lockb Executable file → Normal file

Binary file not shown.

View File

@ -56,15 +56,10 @@ export async function initDiscordBot() {
export async function logToChannel(channelId: DiscordChannels, message: EmbedBuilder) { export async function logToChannel(channelId: DiscordChannels, message: EmbedBuilder) {
try { try {
const channel = await client.channels.fetch(channelId); const channel = await client.channels.fetch(channelId);
if (channel == undefined) { if (channel != undefined && channel.isSendable()) {
throw new Error(`Channel "${channelId}" not found`); channel.send({ embeds: [message] });
} }
if (!channel.isSendable()) { } catch {
throw new Error(`Channel "${channelId}" is not sendable`); /* empty */
}
channel.send({ embeds: [message] });
} catch (error) {
console.error(error);
} }
} }

View File

@ -3,6 +3,7 @@ import { t } from "elysia";
import { Leaderboards } from "@ssr/common/leaderboard"; import { Leaderboards } from "@ssr/common/leaderboard";
import { TopScoresResponse } from "@ssr/common/response/top-scores-response"; import { TopScoresResponse } from "@ssr/common/response/top-scores-response";
import { ScoreService } from "../service/score.service"; import { ScoreService } from "../service/score.service";
import { Timeframe } from "@ssr/common/timeframe";
@Controller("/scores") @Controller("/scores")
export default class ScoresController { export default class ScoresController {
@ -77,11 +78,27 @@ export default class ScoresController {
@Get("/top", { @Get("/top", {
config: {}, config: {},
query: t.Object({
limit: t.Number({ required: true }),
timeframe: t.String({ required: true }),
}),
}) })
public async getTopScores(): Promise<TopScoresResponse> { public async getTopScores({
const scores = await ScoreService.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);
return { return {
scores, scores,
timeframe,
limit,
}; };
} }
} }

View File

@ -64,7 +64,7 @@ export const app = new Elysia();
app.use( app.use(
cron({ cron({
name: "player-statistics-tracker-cron", name: "player-statistics-tracker-cron",
pattern: "0 1 * * * *", // Every day at 00:01 pattern: "0 1 * * *", // Every day at 00:01
timezone: "Europe/London", // UTC time timezone: "Europe/London", // UTC time
protect: true, protect: true,
run: async () => { run: async () => {

View File

@ -324,7 +324,7 @@ export class PlayerService {
console.log(`Found ${players.length} players to refresh.`); console.log(`Found ${players.length} players to refresh.`);
for (const player of players) { for (const player of players) {
await this.refreshAllPlayerScores(player.id); await this.refreshAllPlayerScores(player);
await delay(SCORESABER_REQUEST_COOLDOWN); // Cooldown between players await delay(SCORESABER_REQUEST_COOLDOWN); // Cooldown between players
} }
} }

View File

@ -38,6 +38,9 @@ import { MapCharacteristic } from "@ssr/common/types/map-characteristic";
import { Page, Pagination } from "@ssr/common/pagination"; import { Page, Pagination } from "@ssr/common/pagination";
import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard"; import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
import Leaderboard from "@ssr/common/model/leaderboard/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({ const playerScoresCache = new SSRCache({
ttl: 1000 * 60, // 1 minute ttl: 1000 * 60, // 1 minute
@ -189,9 +192,12 @@ export class ScoreService {
if (player == undefined) { if (player == undefined) {
return; return;
} }
// Update player name // Update player name
player.name = playerName; if (playerName !== "Unknown") {
await player.save(); player.name = playerName;
await player.save();
}
// The score has already been tracked, so ignore it. // The score has already been tracked, so ignore it.
if ( if (
@ -203,9 +209,8 @@ export class ScoreService {
score.score score.score
)) !== null )) !== null
) { ) {
await logToChannel( console.log(
DiscordChannels.backendLogs, `ScoreSaber score already tracked for "${playerName}"(${playerId}), difficulty: ${score.difficulty}, score: ${score.score}, leaderboard: ${leaderboard.id}, ignoring...`
new EmbedBuilder().setDescription(`Score ${score.scoreId} already tracked`)
); );
return; return;
} }
@ -303,43 +308,60 @@ export class ScoreService {
* Gets the top tracked scores. * Gets the top tracked scores.
* *
* @param amount the amount of scores to get * @param amount the amount of scores to get
* @param timeframe the timeframe to filter by
* @returns the top scores * @returns the top scores
*/ */
public static async getTopScores(amount: number = 100) { 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);
const foundScores = await ScoreSaberScoreModel.aggregate([ const foundScores = await ScoreSaberScoreModel.aggregate([
// Start sorting by timestamp descending using the new compound index { $match: { timestamp: { $gte: date } } },
{ $sort: { leaderboardId: 1, playerId: 1, timestamp: -1 } },
{ {
$group: { $group: {
_id: { leaderboardId: "$leaderboardId", playerId: "$playerId" }, _id: { leaderboardId: "$leaderboardId", playerId: "$playerId" },
latestScore: { $first: "$$ROOT" }, // Retrieve the latest score per group score: { $first: "$$ROOT" },
}, },
}, },
// Sort by pp of the latest scores in descending order { $sort: { "score.pp": -1 } },
{ $sort: { "latestScore.pp": -1 } },
{ $limit: amount }, { $limit: amount },
]); ]);
// Collect unique leaderboard IDs const scores: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[] = [];
const leaderboardIds = [...new Set(foundScores.map(s => s.latestScore.leaderboardId))]; for (const { score: scoreData } of foundScores) {
const leaderboardMap = await this.fetchLeaderboardsInBatch(leaderboardIds); const score = new ScoreSaberScoreModel(scoreData).toObject() as ScoreSaberScore;
const leaderboardResponse = await LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>(
// Collect player IDs for batch retrieval "scoresaber",
const playerIds = foundScores.map(result => result.latestScore.playerId); score.leaderboardId + ""
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) { if (!leaderboardResponse) {
return null; // Skip if leaderboard data is not available continue;
} }
const { leaderboard, beatsaver } = leaderboardResponse; const { leaderboard, beatsaver } = leaderboardResponse;
// Fetch additional data concurrently 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,
};
}
const [additionalData, previousScore] = await Promise.all([ const [additionalData, previousScore] = await Promise.all([
this.getAdditionalScoreData( this.getAdditionalScoreData(
score.playerId, score.playerId,
@ -349,51 +371,21 @@ export class ScoreService {
), ),
this.getPreviousScore(score.playerId, leaderboard.id + "", score.timestamp), this.getPreviousScore(score.playerId, leaderboard.id + "", score.timestamp),
]); ]);
if (additionalData) {
// Attach additional and previous score data if available score.additionalData = additionalData;
if (additionalData) score.additionalData = additionalData; }
if (previousScore) score.previousScore = previousScore; 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,
};
} }
return { scores.push({
score: score as ScoreSaberScore, score: score,
leaderboard: leaderboard, leaderboard: leaderboard,
beatSaver: beatsaver, beatSaver: beatsaver,
}; });
}); }
return (await Promise.all(scoreDataPromises)).filter(score => score !== null); console.log(`Got ${scores.length} scores in ${Date.now() - before}ms (timeframe: ${timeframe}, limit: ${amount})`);
} return scores;
/**
* 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 }>
);
} }
/** /**
@ -679,7 +671,9 @@ export class ScoreService {
leaderboardId: string, leaderboardId: string,
timestamp: Date timestamp: Date
): Promise<ScoreSaberPreviousScore | undefined> { ): Promise<ScoreSaberPreviousScore | undefined> {
const scores = await ScoreSaberScoreModel.find({ playerId: playerId, leaderboardId: leaderboardId }); const scores = await ScoreSaberScoreModel.find({ playerId: playerId, leaderboardId: leaderboardId }).sort({
timestamp: -1,
});
if (scores == null || scores.length == 0) { if (scores == null || scores.length == 0) {
return undefined; return undefined;
} }
@ -689,7 +683,7 @@ export class ScoreService {
if (scoreIndex == -1 || score == undefined) { if (scoreIndex == -1 || score == undefined) {
return undefined; return undefined;
} }
const previousScore = scores[scoreIndex - 1]; const previousScore = scores[scoreIndex + 1];
if (previousScore == undefined) { if (previousScore == undefined) {
return undefined; return undefined;
} }
@ -704,6 +698,7 @@ export class ScoreService {
pp: previousScore.pp, pp: previousScore.pp,
weight: previousScore.weight, weight: previousScore.weight,
maxCombo: previousScore.maxCombo, maxCombo: previousScore.maxCombo,
timestamp: previousScore.timestamp,
change: { change: {
score: score.score - previousScore.score, score: score.score - previousScore.score,
accuracy: score.accuracy - previousScore.accuracy, accuracy: score.accuracy - previousScore.accuracy,

View File

@ -11,5 +11,6 @@
"experimentalDecorators": true, "experimentalDecorators": true,
"emitDecoratorMetadata": true, "emitDecoratorMetadata": true,
"jsx": "react", "jsx": "react",
}, "incremental": true
}
} }

View File

@ -1,4 +1,4 @@
import { getModelForClass, index, modelOptions, plugin, Prop, ReturnModelType, Severity } from "@typegoose/typegoose"; import { getModelForClass, modelOptions, plugin, Prop, ReturnModelType, Severity } from "@typegoose/typegoose";
import Score from "../score"; import Score from "../score";
import { type ScoreSaberLeaderboardPlayerInfoToken } from "../../../types/token/scoresaber/score-saber-leaderboard-player-info-token"; import { type ScoreSaberLeaderboardPlayerInfoToken } from "../../../types/token/scoresaber/score-saber-leaderboard-player-info-token";
import { Document } from "mongoose"; import { Document } from "mongoose";
@ -20,7 +20,6 @@ import { PreviousScore } from "../previous-score";
}, },
}, },
}) })
@index({ leaderboardId: 1, playerId: 1, timestamp: -1 }) // Compound index for optimized queries
@plugin(AutoIncrementID, { @plugin(AutoIncrementID, {
field: "_id", field: "_id",
startAt: 1, startAt: 1,

View File

@ -35,4 +35,9 @@ export type PreviousScore = {
* The full combo of the previous score. * The full combo of the previous score.
*/ */
fullCombo?: boolean; fullCombo?: boolean;
/**
* When the previous score was set.
*/
timestamp: Date;
}; };

View File

@ -1,5 +1,5 @@
import ScoreSaberPlayer from "./impl/scoresaber-player"; import ScoreSaberPlayer from "./impl/scoresaber-player";
import { ChangeRange } from "./player"; import { StatisticRange } from "./player";
export type PlayerStatValue = { export type PlayerStatValue = {
/** /**
@ -10,7 +10,7 @@ export type PlayerStatValue = {
/** /**
* The value of the stat. * The value of the stat.
*/ */
value: (player: ScoreSaberPlayer, range: ChangeRange) => number | undefined; value: (player: ScoreSaberPlayer, range: StatisticRange) => number | undefined;
}; };
export type PlayerStatChangeType = export type PlayerStatChangeType =

View File

@ -55,7 +55,7 @@ export default class Player {
} }
} }
export type ChangeRange = "daily" | "weekly" | "monthly"; export type StatisticRange = "daily" | "weekly" | "monthly";
export type StatisticChange = { export type StatisticChange = {
[key in ChangeRange]: PlayerHistory; [key in StatisticRange]: PlayerHistory;
}; };

View File

@ -1,10 +1,21 @@
import { ScoreSaberLeaderboard } from "src/model/leaderboard/impl/scoresaber-leaderboard"; import { ScoreSaberLeaderboard } from "src/model/leaderboard/impl/scoresaber-leaderboard";
import { ScoreSaberScore } from "../model/score/impl/scoresaber-score"; import { ScoreSaberScore } from "../model/score/impl/scoresaber-score";
import { PlayerScore } from "../score/player-score"; import { PlayerScore } from "../score/player-score";
import { Timeframe } from "../timeframe";
export type TopScoresResponse = { export type TopScoresResponse = {
/** /**
* The top scores. * The top scores.
*/ */
scores: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[]; scores: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[];
/**
* The timeframe returned.
*/
timeframe: Timeframe;
/**
* The amount of scores to fetch.
*/
limit: number;
}; };

View File

@ -0,0 +1 @@
export type Timeframe = "daily" | "weekly" | "monthly";

View File

@ -14,6 +14,8 @@ WORKDIR /app
ENV NODE_ENV production ENV NODE_ENV production
ARG GIT_REV ARG GIT_REV
ENV GIT_REV=${GIT_REV} ENV GIT_REV=${GIT_REV}
ARG SENTRY_AUTH_TOKEN
ENV SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}
# Copy the depends # Copy the depends
COPY --from=depends /app/package.json* /app/bun.lockb* ./ COPY --from=depends /app/package.json* /app/bun.lockb* ./

View File

@ -1,6 +1,8 @@
import { withSentryConfig } from "@sentry/nextjs"; import { withSentryConfig } from "@sentry/nextjs";
import { format } from "@formkit/tempo"; import { format } from "@formkit/tempo";
import nextBundleAnalyzer from "@next/bundle-analyzer";
import type { NextConfig } from "next"; import type { NextConfig } from "next";
import { isProduction } from "@/common/website-utils";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
experimental: { experimental: {
@ -36,22 +38,21 @@ const nextConfig: NextConfig = {
}, },
}; };
export default withSentryConfig(nextConfig, { const withBundleAnalyzer = nextBundleAnalyzer({
org: "scoresaber-reloaded", enabled: process.env.ANALYZE === "true",
project: "frontend",
sentryUrl: "https://glitchtip.fascinated.cc/",
silent: !process.env.CI,
reactComponentAnnotation: {
enabled: true,
},
tunnelRoute: "/monitoring",
hideSourceMaps: true,
disableLogger: true,
sourcemaps: {
disable: true,
},
release: {
create: false,
finalize: false,
},
}); });
const config = withBundleAnalyzer(nextConfig);
export default isProduction()
? withSentryConfig(config, {
org: "fascinatedcc",
project: "scoresaber-reloaded",
silent: !process.env.CI,
widenClientFileUpload: true,
reactComponentAnnotation: {
enabled: true,
},
hideSourceMaps: true,
disableLogger: true,
})
: config;

View File

@ -6,6 +6,7 @@
"dev": "next dev --turbo", "dev": "next dev --turbo",
"dev-debug": "cross-env NODE_OPTIONS='--inspect' next dev --turbo", "dev-debug": "cross-env NODE_OPTIONS='--inspect' next dev --turbo",
"build": "next build", "build": "next build",
"build:analyze": "cross-env ANALYZE=true next build",
"start": "next start", "start": "next start",
"lint": "next lint" "lint": "next lint"
}, },
@ -13,16 +14,18 @@
"@formkit/tempo": "^0.1.2", "@formkit/tempo": "^0.1.2",
"@heroicons/react": "^2.1.5", "@heroicons/react": "^2.1.5",
"@hookform/resolvers": "^3.9.0", "@hookform/resolvers": "^3.9.0",
"@next/bundle-analyzer": "^15.0.1",
"@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-scroll-area": "^1.1.0", "@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-slider": "^1.2.1",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1", "@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-tooltip": "^1.1.2", "@radix-ui/react-tooltip": "^1.1.2",
"@sentry/nextjs": "8.35.0", "@sentry/nextjs": "8",
"@ssr/common": "workspace:*", "@ssr/common": "workspace:*",
"@tanstack/react-query": "^5.55.4", "@tanstack/react-query": "^5.55.4",
"@uidotdev/usehooks": "^2.4.1", "@uidotdev/usehooks": "^2.4.1",
@ -30,12 +33,13 @@
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"comlink": "^4.4.1", "comlink": "^4.4.1",
"cross-env": "^7.0.3",
"dexie": "^4.0.8", "dexie": "^4.0.8",
"dexie-react-hooks": "^1.1.7", "dexie-react-hooks": "^1.1.7",
"framer-motion": "^11.5.4", "framer-motion": "^11.11.10",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"ky": "^1.7.2", "ky": "^1.7.2",
"lucide-react": "^0.454.0", "lucide-react": "^0.453.0",
"next": "^15.0.1", "next": "^15.0.1",
"next-build-id": "^3.0.0", "next-build-id": "^3.0.0",
"next-themes": "^0.3.0", "next-themes": "^0.3.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

View File

@ -0,0 +1,4 @@
<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>

After

Width:  |  Height:  |  Size: 777 B

View File

@ -5,8 +5,24 @@
import * as Sentry from "@sentry/nextjs"; import * as Sentry from "@sentry/nextjs";
Sentry.init({ Sentry.init({
dsn: "https://69aed8b4a32e45db8fcb1b4285b4370f@glitchtip.fascinated.cc/13", dsn: "https://2b0d6c2e72099dee7db2ce9c030651bd@o4508202509205504.ingest.de.sentry.io/4508202511302736",
tracesSampleRate: 0.1,
// Add optional integrations for additional features
integrations: [
Sentry.replayIntegration(),
],
// Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
tracesSampleRate: 1,
// Define how likely Replay events are sampled.
// This sets the sample rate to be 10%. You may want this to be 100% while
// in development and sample at a lower rate in production
replaysSessionSampleRate: 0.1,
// Define how likely Replay events are sampled when an error occurs.
replaysOnErrorSampleRate: 1.0,
// Setting this option to true will print useful information to the console while you're setting up Sentry.
debug: false, debug: false,
enabled: process.env.NODE_ENV === "production",
}); });

View File

@ -6,8 +6,11 @@
import * as Sentry from "@sentry/nextjs"; import * as Sentry from "@sentry/nextjs";
Sentry.init({ Sentry.init({
dsn: "https://69aed8b4a32e45db8fcb1b4285b4370f@glitchtip.fascinated.cc/13", dsn: "https://2b0d6c2e72099dee7db2ce9c030651bd@o4508202509205504.ingest.de.sentry.io/4508202511302736",
tracesSampleRate: 0.1,
// Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
tracesSampleRate: 1,
// Setting this option to true will print useful information to the console while you're setting up Sentry.
debug: false, debug: false,
enabled: process.env.NODE_ENV === "production",
}); });

View File

@ -5,8 +5,11 @@
import * as Sentry from "@sentry/nextjs"; import * as Sentry from "@sentry/nextjs";
Sentry.init({ Sentry.init({
dsn: "https://69aed8b4a32e45db8fcb1b4285b4370f@glitchtip.fascinated.cc/13", dsn: "https://2b0d6c2e72099dee7db2ce9c030651bd@o4508202509205504.ingest.de.sentry.io/4508202511302736",
tracesSampleRate: 0.1,
// Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
tracesSampleRate: 1,
// Setting this option to true will print useful information to the console while you're setting up Sentry.
debug: false, debug: false,
enabled: process.env.NODE_ENV === "production",
}); });

View File

@ -1,32 +1,20 @@
import { Button } from "@/components/ui/button"; import HeroSection from "@/components/home/hero";
import Link from "next/link"; import DataCollection from "@/components/home/data-collection";
import { AppStatistics } from "@ssr/common/types/backend/app-statistics"; import Friends from "@/components/home/friends";
import { kyFetch } from "@ssr/common/utils/utils"; import SiteStats from "@/components/home/site-stats";
import { Config } from "@ssr/common/config"; import RealtimeScores from "@/components/home/realtime-scores";
import { AppStats } from "@/components/app-statistics";
export const dynamic = "force-dynamic"; // Always generate the page on load
export default async function HomePage() { export default async function HomePage() {
const statistics = await kyFetch<AppStatistics>(Config.apiUrl + "/statistics");
return ( return (
<main className="flex flex-col items-center w-full gap-6 text-center"> <main className="-mt-3 w-screen min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f]">
<div className="flex items-center flex-col"> <div className="flex flex-col items-center">
<p className="font-semibold text-2xl">ScoreSaber Reloaded</p> <div className="max-w-screen-2xl mt-48 mb-14 flex flex-col gap-64">
<p className="text-center">Welcome to the ScoreSaber Reloaded website.</p> <HeroSection />
</div> <DataCollection />
<Friends />
<div className="flex items-center flex-col"> <SiteStats />
<p>ScoreSaber Reloaded is a website that allows you to track your ScoreSaber data over time.</p> <RealtimeScores />
</div> </div>
{statistics && <AppStats initialStatistics={statistics} />}
<div className="flex gap-2 flex-wrap">
<Link href="/search">
<Button className="w-fit">Get started</Button>
</Link>
</div> </div>
</main> </main>
); );

View File

@ -12,13 +12,15 @@ export const metadata: Metadata = {
export default function ScoresPage() { export default function ScoresPage() {
return ( return (
<Card className="flex flex-col gap-2 w-full xl:w-[75%]"> <main className="w-full min-h-screen flex justify-center">
<div> <Card className="flex flex-col gap-2 w-full h-fit xl:w-[75%]">
<p className="font-semibold'">Live Score Feed</p> <div>
<p className="text-gray-400">This is the real-time scores being set on ScoreSaber.</p> <p className="font-semibold'">Live Score Feed</p>
</div> <p className="text-gray-400">This is the real-time scores being set on ScoreSaber.</p>
</div>
<ScoreFeed /> <ScoreFeed />
</Card> </Card>
</main>
); );
} }

View File

@ -0,0 +1,23 @@
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} />;
}

View File

@ -1,59 +0,0 @@
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>
);
}

View File

@ -7,7 +7,7 @@ export const metadata: Metadata = {
export default function SearchPage() { export default function SearchPage() {
return ( return (
<div className="flex flex-col items-center justify-center gap-2"> <div className="min-h-screen 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"> <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> <p className="text-9xl">?</p>
</div> </div>

View File

@ -3,7 +3,7 @@ import Settings from "@/components/settings/settings";
export default function SettingsPage() { export default function SettingsPage() {
return ( return (
<main className="w-full"> <main className="min-h-screen w-full">
<Card className="w-full gap-4"> <Card className="w-full gap-4">
<div> <div>
<p className="font-semibold">Settings</p> <p className="font-semibold">Settings</p>

View File

@ -1,5 +1,4 @@
import "./globals.css"; import "./globals.css";
import Footer from "@/components/footer";
import { PreloadResources } from "@/components/preload-resources"; import { PreloadResources } from "@/components/preload-resources";
import { QueryProvider } from "@/components/providers/query-provider"; import { QueryProvider } from "@/components/providers/query-provider";
import { ThemeProvider } from "@/components/providers/theme-provider"; import { ThemeProvider } from "@/components/providers/theme-provider";
@ -14,6 +13,8 @@ import { Colors } from "@/common/colors";
import OfflineNetwork from "@/components/offline-network"; import OfflineNetwork from "@/components/offline-network";
import Script from "next/script"; import Script from "next/script";
import { ApiHealth } from "@/components/api/api-health"; import { ApiHealth } from "@/components/api/api-health";
import Footer from "@/components/footer";
import { getBuildInformation } from "@/common/website-utils";
const siteFont = localFont({ const siteFont = localFont({
src: "./fonts/JetBrainsMono.ttf", src: "./fonts/JetBrainsMono.ttf",
@ -66,6 +67,7 @@ export default function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const { buildId, buildTimeShort } = getBuildInformation();
return ( return (
<html lang="en"> <html lang="en">
<body className={`${siteFont.className} antialiased w-full h-full`}> <body className={`${siteFont.className} antialiased w-full h-full`}>
@ -79,12 +81,13 @@ export default function RootLayout({
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange> <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
<QueryProvider> <QueryProvider>
<ApiHealth /> <ApiHealth />
<main className="flex flex-col min-h-screen gap-2 text-white w-full"> <main className="flex flex-col min-h-screen text-white w-full">
<NavBar /> <NavBar />
<div className="z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]"> <div className="mt-3 z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
{children} {children}
</div> </div>
<Footer /> {/*<Footer />*/}
<Footer buildId={buildId} buildTimeShort={buildTimeShort} />
</main> </main>
</QueryProvider> </QueryProvider>
</ThemeProvider> </ThemeProvider>

View File

@ -1,6 +1,6 @@
import { MapDifficulty } from "@ssr/common/score/map-difficulty"; import { MapDifficulty } from "@ssr/common/score/map-difficulty";
type Difficulty = { export type Difficulty = {
/** /**
* The name of the difficulty * The name of the difficulty
*/ */
@ -63,14 +63,21 @@ export function getScoreBadgeFromAccuracy(acc: number): ScoreBadge {
return scoreBadges[scoreBadges.length - 1]; 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 * Gets a {@link Difficulty} from its name
* *
* @param diff the name of the difficulty * @param diff the name of the difficulty
* @returns the difficulty * @returns the difficulty
*/ */
export function getDifficulty(diff: MapDifficulty) { export function getDifficulty(diff: Difficulty | MapDifficulty) {
const difficulty = difficulties.find(d => d.name === diff); const difficulty = difficulties.find(d => d.name === (typeof diff === "string" ? diff : diff.name));
if (!difficulty) { if (!difficulty) {
throw new Error(`Unknown difficulty: ${diff}`); throw new Error(`Unknown difficulty: ${diff}`);
} }

View File

@ -19,3 +19,10 @@ export function validateUrl(url: string) {
return false; 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;
}

View File

@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
import { kyFetch } from "@ssr/common/utils/utils"; import { kyFetch } from "@ssr/common/utils/utils";
import { Config } from "@ssr/common/config"; import { Config } from "@ssr/common/config";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { User } from "lucide-react";
type AppStatisticsProps = { type AppStatisticsProps = {
/** /**
@ -29,13 +30,24 @@ export function AppStats({ initialStatistics }: AppStatisticsProps) {
}, [data]); }, [data]);
return ( return (
<div className="flex items-center flex-col"> <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">
<p className="font-semibold">Site Statistics</p> <Statistic icon={<User className="size-10" />} title="Tracked Players" value={statistics.trackedPlayers} />
<Statistic title="Tracked Players" value={statistics.trackedPlayers} /> <Statistic icon={<User className="size-10" />} title="Tracked Scores" value={statistics.trackedScores} />
<Statistic title="Tracked Scores" value={statistics.trackedScores} /> <Statistic
<Statistic title="Additional Scores Data" value={statistics.additionalScoresData} /> icon={<User className="size-10" />}
<Statistic title="Cached BeatSaver Maps" value={statistics.cachedBeatSaverMaps} /> title="Additional Scores Data"
<Statistic title="Cached ScoreSaber Leaderboards" value={statistics.cachedScoreSaberLeaderboards} /> 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> </div>
); );
} }

View File

@ -1,78 +1,176 @@
import { getBuildInformation } from "@/common/website-utils"; "use client";
import Link from "next/link";
type NavbarItem = { 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.
*/
name: string; name: string;
link: string;
openInNewTab?: boolean; /**
* The href for this link.
*/
href: string;
/**
* The optional name to show
* when the screen size is small.
*/
shortName?: string;
}; };
const items: NavbarItem[] = [ type SocialLinkType = {
{ /**
name: "Home", * The name of this social link.
link: "/", */
}, name: string;
{
name: "Source", /**
link: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3", * The logo for this social link.
openInNewTab: true, */
}, 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[] = [
{ {
name: "Twitter", name: "Twitter",
link: "https://x.com/ssr_reloaded", logo: <SiX className="size-5 lg:size-6" />,
openInNewTab: true, href: "https://x.com/ssr_reloaded",
}, },
{ {
name: "Discord", name: "Discord",
link: "https://discord.gg/kmNfWGA4A8", logo: <img className="size-6 lg:size-7" src="/assets/logos/discord.svg" />,
openInNewTab: true, href: "https://discord.gg/kmNfWGA4A8",
}, },
{ {
name: "Status", name: "GitHub",
link: "https://status.fascinated.cc/status/scoresaber-reloaded", logo: <SiGithub className="size-5 lg:size-6" />,
openInNewTab: true, href: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
},
{
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() { export default function Footer({ buildId, buildTimeShort }: { buildId: string; buildTimeShort: string | undefined }) {
const { buildId, buildTime, buildTimeShort } = getBuildInformation(); const isHome: boolean = usePathname() === "/";
return ( return (
<div className="flex items-center w-full flex-col gap-1 mt-6"> <footer
<div className="flex items-center gap-2 text-input text-sm"> className={cn(
<p>Build: {buildId}</p> "px-10 min-h-80 py-5 flex flex-col gap-10 lg:gap-0 justify-between border-t border-muted select-none",
<p className="hidden md:block">({buildTime})</p> isHome ? "bg-[#121212]" : "mt-5 bg-[#121212]/60"
<p className="none md:hidden">({buildTimeShort})</p> )}
>
{/* 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> </div>
<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) => { {/* Bottom Section */}
return ( <div className="flex justify-center">
<Link {/* Build Info */}
key={index} <p className="text-sm opacity-50">
className="px-2 text-ssr hover:brightness-[66%] transition-all transform-gpu" Build {buildId} ({buildTimeShort})
href={item.link} </p>
target={item.openInNewTab ? "_blank" : undefined}
>
{item.name}
</Link>
);
})}
</div> </div>
</div> </footer>
); );
} }

View File

@ -0,0 +1,28 @@
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>
);
}

View File

@ -0,0 +1,36 @@
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>
);
}

View File

@ -0,0 +1,102 @@
"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>
);
}

View File

@ -0,0 +1,122 @@
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>
);
}

View File

@ -0,0 +1,26 @@
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>
);
}

View File

@ -1,16 +1,22 @@
"use client"; "use client";
import CountUp from "react-countup"; import CountUp from "react-countup";
import { ReactElement } from "react";
type Statistic = { type Statistic = {
icon: ReactElement;
title: string; title: string;
value: number; value: number;
}; };
export default function Statistic({ title, value }: Statistic) { export default function Statistic({ icon, title, value }: Statistic) {
return ( return (
<p className="text-center"> <div className="flex flex-col gap-2 text-center items-center text-lg">
{title}: <CountUp end={value} duration={1.2} /> {icon}
</p> <h1 className="font-semibold text-orange-400/85">{title}</h1>
<span>
<CountUp end={value} duration={1.2} enableScrollSpy scrollSpyOnce />
</span>
</div>
); );
} }

View File

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

View File

@ -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="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"> <div className="flex flex-col items-center justify-center">
<p className="text-white text-xl font-bold">ScoreSaber Reloaded</p> <p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
<p className="text-gray-300 text-md text-center">{reason}</p> <div className="text-gray-300 text-md text-center">{reason}</div>
</div> </div>
<div className="animate-spin"> <div className="animate-spin">
<ScoreSaberLogo /> <ScoreSaberLogo />

View File

@ -0,0 +1,6 @@
import { ArrowPathIcon } from "@heroicons/react/24/solid";
import * as React from "react";
export function LoadingIcon() {
return <ArrowPathIcon className="w-5 h-5 animate-spin" />;
}

View File

@ -6,7 +6,6 @@ import NavbarButton from "./navbar-button";
import ProfileButton from "./profile-button"; import ProfileButton from "./profile-button";
import { TrendingUpIcon } from "lucide-react"; import { TrendingUpIcon } from "lucide-react";
import FriendsButton from "@/components/navbar/friends-button"; import FriendsButton from "@/components/navbar/friends-button";
import { PiSwordFill } from "react-icons/pi";
type NavbarItem = { type NavbarItem = {
name: string; name: string;

View File

@ -6,7 +6,6 @@ import useDatabase from "../../hooks/use-database";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import Tooltip from "../tooltip"; import Tooltip from "../tooltip";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { revalidatePath } from "next/cache";
import { setCookieValue } from "@ssr/common/utils/cookie-utils"; import { setCookieValue } from "@ssr/common/utils/cookie-utils";
type Props = { type Props = {
@ -33,7 +32,6 @@ export default function ClaimProfile({ playerId }: Props) {
title: "Profile Claimed", title: "Profile Claimed",
description: "You have claimed this profile.", description: "You have claimed this profile.",
}); });
revalidatePath("/player/[...slug]");
} }
// Database is not ready // Database is not ready

View File

@ -21,7 +21,7 @@ export function HandAccuracyBadge({ score, hand }: HandAccuracyProps) {
const formattedHand = capitalizeFirstLetter(hand); const formattedHand = capitalizeFirstLetter(hand);
return ( return (
<div className="flex flex-col items-center justify-center"> <div className="flex gap-1 items-center justify-center">
<Tooltip <Tooltip
display={ display={
<> <>

View File

@ -1,9 +1,7 @@
import { formatNumberWithCommas } from "@ssr/common/utils/number-utils"; import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
import { PauseIcon } from "@heroicons/react/24/solid";
import { ScoreBadgeProps } from "@/components/score/badges/badge-props"; import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
import { ScoreMissesTooltip } from "@/components/score/score-misses-tooltip"; import { ScoreMissesTooltip } from "@/components/score/score-misses-tooltip";
import { Misses } from "@ssr/common/model/additional-score-data/misses"; import { Misses } from "@ssr/common/model/additional-score-data/misses";
import Tooltip from "@/components/tooltip";
type ScoreMissesBadgeProps = ScoreBadgeProps & { type ScoreMissesBadgeProps = ScoreBadgeProps & {
/** /**
@ -34,69 +32,82 @@ export default function ScoreMissesAndPausesBadge({ score, hideXMark }: ScoreMis
return ( return (
<div className="flex flex-col justify-center items-center w-full"> <div className="flex flex-col justify-center items-center w-full">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<ScoreMissesTooltip <div className="flex items-center gap-1">
missedNotes={score.missedNotes} <ScoreMissesTooltip
badCuts={score.badCuts} missedNotes={score.missedNotes}
bombCuts={misses?.bombCuts} badCuts={score.badCuts}
wallsHit={misses?.wallsHit} bombCuts={misses?.bombCuts}
fullCombo={score.fullCombo} wallsHit={misses?.wallsHit}
> fullCombo={score.fullCombo}
<div className="flex items-center"> >
<p> <p>
{score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)} {score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}
{!hideXMark && !score.fullCombo && <span>x</span>} {!hideXMark && !score.fullCombo && <span>x</span>}
</p> </p>
</div> </ScoreMissesTooltip>
</ScoreMissesTooltip> {additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
{additionalData && !!pauses && pauses > 0 && ( <ScoreMissesTooltip
<> missedNotes={previousScoreMisses.missedNotes}
<p>|</p> badCuts={previousScoreMisses.badCuts}
<Tooltip bombCuts={previousScoreMisses.bombCuts}
display={ wallsHit={previousScoreMisses.wallsHit}
<p> fullCombo={previousScoreFc}
{pauses}x Pause{pauses > 1 ? "s" : ""}
</p>
}
> >
<div className="flex gap-1 items-center"> <div className="text-xs flex flex-row gap-1">
<p>{pauses && pauses}</p> <p>(vs {previousScoreFc ? "FC" : formatNumberWithCommas(previousScoreMisses.misses)}x)</p>
<PauseIcon className="w-4 h-4" />
</div> </div>
</Tooltip> </ScoreMissesTooltip>
</> )}
)}
</div>
{additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
<div className="flex gap-2 items-center justify-center">
<ScoreMissesTooltip
missedNotes={previousScoreMisses.missedNotes}
badCuts={previousScoreMisses.badCuts}
bombCuts={previousScoreMisses.bombCuts}
wallsHit={previousScoreMisses.wallsHit}
fullCombo={previousScoreFc}
>
<div className="flex gap-1 items-center text-xs">
{previousScoreFc ? (
<p className="text-green-400">FC</p>
) : (
formatNumberWithCommas(previousScoreMisses.misses)
)}
</div>
</ScoreMissesTooltip>
<p>-&gt;</p>
<ScoreMissesTooltip
missedNotes={misses.missedNotes}
badCuts={misses.badCuts}
bombCuts={misses.bombCuts}
wallsHit={misses.wallsHit}
fullCombo={additionalData.fullCombo}
>
<div className="flex gap-1 items-center text-xs">
{additionalData.fullCombo ? <p className="text-green-400">FC</p> : formatNumberWithCommas(misses.misses)}
</div>
</ScoreMissesTooltip>
</div> </div>
)} {/*{additionalData && !!pauses && pauses > 0 && (*/}
{/* <>*/}
{/* <p>|</p>*/}
{/* <Tooltip*/}
{/* display={*/}
{/* <p>*/}
{/* {pauses}x Pause{pauses > 1 ? "s" : ""}*/}
{/* </p>*/}
{/* }*/}
{/* >*/}
{/* <div className="flex gap-1 items-center">*/}
{/* <p>{pauses && pauses}</p>*/}
{/* <PauseIcon className="w-4 h-4" />*/}
{/* </div>*/}
{/* </Tooltip>*/}
{/* </>*/}
{/*)}*/}
</div>
{/*{additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (*/}
{/* <div className="flex gap-2 items-center justify-center">*/}
{/* <ScoreMissesTooltip*/}
{/* missedNotes={previousScoreMisses.missedNotes}*/}
{/* badCuts={previousScoreMisses.badCuts}*/}
{/* bombCuts={previousScoreMisses.bombCuts}*/}
{/* wallsHit={previousScoreMisses.wallsHit}*/}
{/* fullCombo={previousScoreFc}*/}
{/* >*/}
{/* <div className="flex gap-1 items-center text-xs">*/}
{/* {previousScoreFc ? (*/}
{/* <p className="text-green-400">FC</p>*/}
{/* ) : (*/}
{/* formatNumberWithCommas(previousScoreMisses.misses)*/}
{/* )}*/}
{/* </div>*/}
{/* </ScoreMissesTooltip>*/}
{/* <p>-&gt;</p>*/}
{/* <ScoreMissesTooltip*/}
{/* missedNotes={misses.missedNotes}*/}
{/* badCuts={misses.badCuts}*/}
{/* bombCuts={misses.bombCuts}*/}
{/* wallsHit={misses.wallsHit}*/}
{/* fullCombo={additionalData.fullCombo}*/}
{/* >*/}
{/* <div className="flex gap-1 items-center text-xs">*/}
{/* {additionalData.fullCombo ? <p className="text-green-400">FC</p> : formatNumberWithCommas(misses.misses)}*/}
{/* </div>*/}
{/* </ScoreMissesTooltip>*/}
{/* </div>*/}
{/*)}*/}
</div> </div>
); );
} }

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>
);
}

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>
);
}

View File

@ -6,8 +6,8 @@ import { Slider } from "@/components/ui/slider";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ResetIcon } from "@radix-ui/react-icons"; import { ResetIcon } from "@radix-ui/react-icons";
import Tooltip from "@/components/tooltip"; import Tooltip from "@/components/tooltip";
import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score"; import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
type ScoreEditorButtonProps = { type ScoreEditorButtonProps = {
score: ScoreSaberScore; score: ScoreSaberScore;

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>
);
}

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>
);
}

View File

@ -1,6 +1,6 @@
import StatValue from "@/components/stat-value";
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score"; 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 clsx from "clsx";
/** /**
* A badge to display in the score stats. * A badge to display in the score stats.
@ -27,6 +27,19 @@ export function ScoreBadges({ badges, score, leaderboard }: ScoreBadgeProps) {
if (toRender === undefined) { if (toRender === undefined) {
return <div key={index} />; return <div key={index} />;
} }
return <StatValue key={index} color={color} value={toRender} />; return (
<div
key={index}
className={clsx(
"flex h-fit p-1 items-center justify-center rounded-md text-sm cursor-default",
color ? color : "bg-accent"
)}
style={{
backgroundColor: (!color?.includes("bg") && color) || undefined,
}}
>
{toRender}
</div>
);
}); });
} }

View File

@ -1,20 +1,17 @@
"use client"; "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 * as React from "react";
import { useState } 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 { ArrowDownIcon, ArrowPathIcon } from "@heroicons/react/24/solid";
import clsx from "clsx"; 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 { 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 { 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 = { type Props = {
score?: ScoreSaberScore; score?: ScoreSaberScore;
@ -33,78 +30,39 @@ export default function ScoreButtons({
leaderboard, leaderboard,
beatSaverMap, beatSaverMap,
alwaysSingleLine, alwaysSingleLine,
setIsLeaderboardExpanded,
isLeaderboardLoading,
updateScore,
hideLeaderboardDropdown, hideLeaderboardDropdown,
hideAccuracyChanger, hideAccuracyChanger,
isLeaderboardLoading,
setIsLeaderboardExpanded,
updateScore,
}: Props) { }: Props) {
const [leaderboardExpanded, setLeaderboardExpanded] = useState(false); const [leaderboardExpanded, setLeaderboardExpanded] = useState(false);
const { toast } = useToast();
const additionalData = score?.additionalData; const additionalData = score?.additionalData;
return ( return (
<div className={`flex justify-end gap-2 items-center`}> <div className={`flex justify-end gap-2 items-center mr-1`}>
<div <div className={`flex lg:grid grid-cols-3 gap-1 items-center justify-center min-w-[92px]`}>
className={`flex ${alwaysSingleLine ? "flex-nowrap" : "flex-wrap"} items-center lg:items-start justify-center lg:justify-end gap-1`}
>
{beatSaverMap != undefined && ( {beatSaverMap != undefined && (
<> <>
{/* Copy BSR */} <ScoreBsrButton beatSaverMap={beatSaverMap} />
<ScoreButton <BeatSaverMapButton beatSaverMap={beatSaverMap} />
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>
</> </>
)} )}
{/* Open song in YouTube */} <SongOpenInYoutubeButton leaderboard={leaderboard} />
<ScoreButton
onClick={() => { <div className="hidden lg:block" />
window.open( <div className="hidden lg:block" />
songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
"_blank"
);
}}
tooltip={<p>Click to open the song in YouTube</p>}
>
<YouTubeLogo />
</ScoreButton>
{additionalData != undefined && ( {additionalData != undefined && (
<> <>
{/* Open score replay */} <ScoreReplayButton additionalData={additionalData} />
<ScoreButton
onClick={() => {
window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
}}
tooltip={<p>Click to view the score replay!</p>}
>
<BeatSaberPepeLogo />
</ScoreButton>
</> </>
)} )}
</div> </div>
<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 */} {/* Edit score button */}
{score && leaderboard && updateScore && !hideAccuracyChanger && ( {score && leaderboard && updateScore && !hideAccuracyChanger && (

View File

@ -8,6 +8,7 @@ import useWebSocket, { ReadyState } from "react-use-websocket";
import { ScoreSaberWebsocketMessageToken } from "@ssr/common/types/token/scoresaber/websocket/scoresaber-websocket-message"; import { ScoreSaberWebsocketMessageToken } from "@ssr/common/types/token/scoresaber/websocket/scoresaber-websocket-message";
import Score from "@/components/score/score"; import Score from "@/components/score/score";
import { getScoreSaberLeaderboardFromToken, getScoreSaberScoreFromToken } from "@ssr/common/token-creators"; import { getScoreSaberLeaderboardFromToken, getScoreSaberScoreFromToken } from "@ssr/common/token-creators";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
export default function ScoreFeed() { export default function ScoreFeed() {
const { readyState, lastJsonMessage } = useWebSocket<ScoreSaberWebsocketMessageToken>("wss://scoresaber.com/ws"); const { readyState, lastJsonMessage } = useWebSocket<ScoreSaberWebsocketMessageToken>("wss://scoresaber.com/ws");
@ -51,12 +52,15 @@ export default function ScoreFeed() {
return ( return (
<div key={score.scoreId} className="flex flex-col py-2"> <div key={score.scoreId} className="flex flex-col py-2">
<p className="text-sm"> <div className="flex flex-row gap-2 items-center">
Set by{" "} <Avatar className="w-6 h-6">
<AvatarImage src={player.profilePicture} />
</Avatar>
<Link href={`/player/${player.id}`}> <Link href={`/player/${player.id}`}>
<span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{player.name}</span> <span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{player.name}</span>
</Link> </Link>
</p> <p className="text-gray-400 text-xs"> on {scoreToken.score.deviceHmd || "Unknown Device"}</p>
</div>
<Score <Score
score={score} score={score}
leaderboard={leaderboard} leaderboard={leaderboard}

View File

@ -5,13 +5,14 @@ import { getPageFromRank } from "@ssr/common/utils/utils";
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score"; 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 { ScoreTimeSet } from "@/components/score/score-time-set"; import { ScoreTimeSet } from "@/components/score/score-time-set";
import { ScoreTimeSetVs } from "@/components/score/score-time-set-vs";
type Props = { type Props = {
score: ScoreSaberScore; score: ScoreSaberScore;
leaderboard: ScoreSaberLeaderboard; leaderboard: ScoreSaberLeaderboard;
}; };
export default function ScoreRankInfo({ score, leaderboard }: Props) { export default function ScoreRankAndDateInfo({ score, leaderboard }: Props) {
return ( return (
<div className="flex w-full flex-row justify-between lg:w-[125px] lg:flex-col lg:justify-center items-center"> <div className="flex w-full flex-row justify-between lg:w-[125px] lg:flex-col lg:justify-center items-center">
<div className="flex gap-1 items-center"> <div className="flex gap-1 items-center">
@ -22,7 +23,10 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
</p> </p>
</Link> </Link>
</div> </div>
<ScoreTimeSet score={score} /> <div className="flex items-center gap-2 lg:flex-col lg:gap-0">
<ScoreTimeSet score={score} />
<ScoreTimeSetVs score={score} />
</div>
</div> </div>
); );
} }

View File

@ -56,18 +56,20 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
/> />
</div> </div>
<div className="flex"> <div className="flex">
<div className="overflow-y-clip"> <div className="overflow-y-clip flex flex-col gap-1">
<Link <Link
href={`/leaderboard/${leaderboard.id}`} href={`/leaderboard/${leaderboard.id}`}
className="cursor-pointer select-none hover:brightness-[66%] transform-gpu transition-all text-ssr w-fit" className="cursor-pointer select-none hover:brightness-[66%] transform-gpu transition-all text-ssr w-fit"
> >
{leaderboard.songName} {leaderboard.songSubName} {leaderboard.songName} {leaderboard.songSubName}
</Link> </Link>
<div className="flex flex-col text-sm"> <div className="flex flex-row text-sm gap-1.5 items-end leading-none">
<p className="text-gray-400">{leaderboard.songAuthorName}</p> <p className="text-gray-400">{leaderboard.songAuthorName}</p>
<FallbackLink <FallbackLink
href={mappersProfile} href={mappersProfile}
className={mappersProfile && "hover:brightness-[66%] transform-gpu transition-all w-fit"} className={
mappersProfile && "hover:brightness-[66%] transform-gpu transition-all w-fit text-xs leading-none"
}
> >
{leaderboard.levelAuthorName} {leaderboard.levelAuthorName}
</FallbackLink> </FallbackLink>

View File

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

View File

@ -0,0 +1,37 @@
import { format } from "@formkit/tempo";
import { timeAgo } from "@ssr/common/utils/time-utils";
import Tooltip from "@/components/tooltip";
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
type ScoreTimeSetProps = {
/**
* The score that was set.
*/
score: ScoreSaberScore;
};
export function ScoreTimeSetVs({ score }: ScoreTimeSetProps) {
if (!score.previousScore) {
return undefined;
}
return (
<Tooltip
display={
<p>
{format({
date: new Date(score.previousScore.timestamp),
format: "DD MMMM YYYY HH:mm a",
})}
</p>
}
>
<div>
<div className="text-xs text-gray-400 flex flex-row gap-2 items-center">
<p>vs</p>
<p>{timeAgo(new Date(score.previousScore.timestamp))}</p>
</div>
</div>
</Tooltip>
);
}

View File

@ -7,7 +7,7 @@ import { CubeIcon } from "@heroicons/react/24/solid";
import { TrendingUpIcon } from "lucide-react"; import { TrendingUpIcon } from "lucide-react";
import ScoreButtons from "./score-buttons"; import ScoreButtons from "./score-buttons";
import ScoreSongInfo from "./score-song-info"; import ScoreSongInfo from "./score-song-info";
import ScoreRankInfo from "./score-rank-info"; import ScoreRankAndDateInfo from "./score-rank-and-date-info";
import ScoreStats from "./score-stats"; import ScoreStats from "./score-stats";
import Card from "@/components/card"; import Card from "@/components/card";
import { MapStats } from "@/components/score/map-stats"; import { MapStats } from "@/components/score/map-stats";
@ -120,13 +120,13 @@ export default function Score({ leaderboard, beatSaverMap, score, settings, high
}; };
const gridColsClass = settings?.noScoreButtons const gridColsClass = settings?.noScoreButtons
? "grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_300px]" // Fewer columns if no buttons ? "grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_350px]" // Fewer columns if no buttons
: "grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_1fr_300px]"; // Original with buttons : "grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_1fr_350px]"; // Original with buttons
return ( return (
<div className="pb-2 pt-2"> <div className="pb-2 pt-2">
<div className={`grid w-full gap-2 lg:gap-0 ${gridColsClass}`}> <div className={`grid w-full gap-2 lg:gap-0 ${gridColsClass}`}>
<ScoreRankInfo score={score} leaderboard={leaderboard} /> <ScoreRankAndDateInfo score={score} leaderboard={leaderboard} />
<ScoreSongInfo leaderboard={leaderboard} beatSaverMap={beatSaverMap} /> <ScoreSongInfo leaderboard={leaderboard} beatSaverMap={beatSaverMap} />
{!settings?.noScoreButtons && ( {!settings?.noScoreButtons && (
<ScoreButtons <ScoreButtons

View File

@ -0,0 +1,121 @@
"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>
);
}

View File

@ -16,18 +16,24 @@ type Props = {
*/ */
color?: string; color?: string;
/**
* The additional classes for the stat.
*/
className?: string;
/** /**
* The value of the stat. * The value of the stat.
*/ */
value: React.ReactNode; value: React.ReactNode;
}; };
export default function StatValue({ name, icon, color, value }: Props) { export default function StatValue({ name, icon, color, className, value }: Props) {
return ( return (
<div <div
className={clsx( className={clsx(
"flex min-w-16 gap-2 h-full p-1 items-center justify-center rounded-md text-sm cursor-default", "flex min-w-16 gap-2 h-full p-1 items-center justify-center rounded-md text-sm cursor-default",
color ? color : "bg-accent" color ? color : "bg-accent",
className
)} )}
style={{ style={{
backgroundColor: (!color?.includes("bg") && color) || undefined, backgroundColor: (!color?.includes("bg") && color) || undefined,

View File

@ -3,8 +3,8 @@ import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils
import { capitalizeFirstLetter } from "@/common/string-utils"; import { capitalizeFirstLetter } from "@/common/string-utils";
import Tooltip from "@/components/tooltip"; import Tooltip from "@/components/tooltip";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { ChangeRange } from "@ssr/common/player/player";
import { PlayerStatValue } from "@ssr/common/player/player-stat-change"; import { PlayerStatValue } from "@ssr/common/player/player-stat-change";
import { StatisticRange } from "@ssr/common/player/player";
type ChangeOverTimeProps = { type ChangeOverTimeProps = {
/** /**
@ -40,7 +40,7 @@ export function ChangeOverTime({ player, type, children }: ChangeOverTimeProps)
}; };
// Renders the change for a given time frame // Renders the change for a given time frame
const renderChange = (value: number | undefined, range: ChangeRange) => ( const renderChange = (value: number | undefined, range: StatisticRange) => (
<p> <p>
{capitalizeFirstLetter(range)} Change:{" "} {capitalizeFirstLetter(range)} Change:{" "}
<span className={value === undefined ? "" : value >= 0 ? (value === 0 ? "" : "text-green-500") : "text-red-500"}> <span className={value === undefined ? "" : value >= 0 ? (value === 0 ? "" : "text-green-500") : "text-red-500"}>

View File

@ -2,7 +2,7 @@
import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"; import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
import { useState } from "react"; import { useState } from "react";
import { cn } from "@/common/utils"; import { clsx } from "clsx";
type Props = { type Props = {
/** /**
@ -36,16 +36,15 @@ export default function Tooltip({ children, display, asChild = true, side = "top
return ( return (
<ShadCnTooltip open={open}> <ShadCnTooltip open={open}>
<TooltipTrigger className={className} asChild={asChild}> <TooltipTrigger
<div className={clsx("cursor-default", className)}
className={cn("cursor-default", className)} asChild={asChild}
onMouseEnter={() => setOpen(true)} onMouseEnter={() => setOpen(true)}
onMouseLeave={() => setOpen(false)} onMouseLeave={() => setOpen(false)}
onTouchStart={() => setOpen(!open)} onTouchStart={() => setOpen(!open)}
onTouchEnd={() => setOpen(!open)} onTouchEnd={() => setOpen(!open)}
> >
{children} {children}
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="max-w-[350px]" side={side}> <TooltipContent className="max-w-[350px]" side={side}>
{display} {display}

View File

@ -0,0 +1,59 @@
"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>
);
}

View File

@ -0,0 +1,35 @@
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;

View File

@ -0,0 +1,49 @@
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
)}
/>
);
};

View File

@ -0,0 +1,21 @@
"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 };

View File

@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
export function useIsMobile() { export function useIsMobile() {
const checkMobile = () => { const checkMobile = () => {
return window.innerWidth < 768; return window.innerWidth <= 1024;
}; };
const [isMobile, setIsMobile] = useState(checkMobile()); const [isMobile, setIsMobile] = useState(checkMobile());

View File

@ -1,5 +1,8 @@
import type { Config } from "tailwindcss"; import type { Config } from "tailwindcss";
// eslint-disable-next-line @typescript-eslint/no-require-imports
const defaultTheme = require("tailwindcss/defaultTheme");
const config: Config = { const config: Config = {
darkMode: ["class"], darkMode: ["class"],
content: [ content: [
@ -8,6 +11,10 @@ const config: Config = {
"./src/app/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
], ],
theme: { theme: {
screens: {
xs: "475px",
...defaultTheme.screens,
},
extend: { extend: {
colors: { colors: {
pp: "#4858ff", pp: "#4858ff",
@ -64,6 +71,25 @@ const config: Config = {
md: "calc(var(--radius) - 2px)", md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)", 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")], plugins: [require("tailwindcss-animate")],