diff --git a/src/app/fonts/JetBrainsMono.ttf b/apps/frontend/src/app/fonts/JetBrainsMono.ttf
similarity index 100%
rename from src/app/fonts/JetBrainsMono.ttf
rename to apps/frontend/src/app/fonts/JetBrainsMono.ttf
diff --git a/src/app/global-error.tsx b/apps/frontend/src/app/global-error.tsx
similarity index 100%
rename from src/app/global-error.tsx
rename to apps/frontend/src/app/global-error.tsx
diff --git a/src/app/globals.css b/apps/frontend/src/app/globals.css
similarity index 100%
rename from src/app/globals.css
rename to apps/frontend/src/app/globals.css
diff --git a/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
similarity index 90%
rename from src/app/layout.tsx
rename to apps/frontend/src/app/layout.tsx
index e040075..77d9ff6 100644
--- a/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -8,12 +8,11 @@ import { TooltipProvider } from "@/components/ui/tooltip";
import { AnimatePresence } from "framer-motion";
import type { Metadata, Viewport } from "next";
import localFont from "next/font/local";
-import BackgroundCover from "../components/background-cover";
+import BackgroundImage from "../components/background-image";
import DatabaseLoader from "../components/loaders/database-loader";
import NavBar from "../components/navbar/navbar";
import { Colors } from "@/common/colors";
import OfflineNetwork from "@/components/offline-network";
-import Script from "next/script";
const siteFont = localFont({
src: "./fonts/JetBrainsMono.ttf",
@@ -23,7 +22,7 @@ const siteFont = localFont({
export const metadata: Metadata = {
title: {
default: "ScoreSaber Reloaded",
- template: "%s - ScoreSaber Reloaded",
+ template: "%s - SSR",
},
applicationName: "ScoreSaber Reloaded",
authors: [
@@ -69,19 +68,18 @@ export default function RootLayout({
return (
-
-
+
+ ;
/**
- * Cached BeatSaver maps
+ * BeatSaver maps
*/
beatSaverMaps!: EntityTable;
@@ -46,7 +46,10 @@ export default class Database extends Dexie {
* Populates the default settings
*/
async populateDefaults() {
- await this.resetSettings();
+ await this.settings.add({
+ id: SETTINGS_ID, // Fixed ID for the single settings object
+ backgroundImage: "/assets/background.jpg",
+ });
}
/**
@@ -55,7 +58,7 @@ export default class Database extends Dexie {
* @returns the settings
*/
async getSettings(): Promise {
- return this.settings.get(SETTINGS_ID);
+ return await this.settings.get(SETTINGS_ID);
}
/**
@@ -65,20 +68,7 @@ export default class Database extends Dexie {
* @returns the settings
*/
async setSettings(settings: Settings) {
- return this.settings.update(SETTINGS_ID, settings);
- }
-
- /**
- * Resets the settings in the database
- */
- async resetSettings() {
- this.settings.delete(SETTINGS_ID);
- this.settings.add({
- id: SETTINGS_ID, // Fixed ID for the single settings object
- backgroundCover: "/assets/background.jpg",
- });
-
- return this.getSettings();
+ return await this.settings.update(SETTINGS_ID, settings);
}
}
diff --git a/src/common/database/types/beatsaver-map.ts b/apps/frontend/src/common/database/types/beatsaver-map.ts
similarity index 100%
rename from src/common/database/types/beatsaver-map.ts
rename to apps/frontend/src/common/database/types/beatsaver-map.ts
diff --git a/src/common/database/types/settings.ts b/apps/frontend/src/common/database/types/settings.ts
similarity index 86%
rename from src/common/database/types/settings.ts
rename to apps/frontend/src/common/database/types/settings.ts
index a82712e..51f47fd 100644
--- a/src/common/database/types/settings.ts
+++ b/apps/frontend/src/common/database/types/settings.ts
@@ -16,9 +16,9 @@ export default class Settings extends Entity {
playerId?: string;
/**
- * The background image or color to use
+ * The background image to use
*/
- backgroundCover?: string;
+ backgroundImage?: string;
/**
* Sets the players id
@@ -36,7 +36,7 @@ export default class Settings extends Entity {
* @param image the new background image
*/
public setBackgroundImage(image: string) {
- this.backgroundCover = image;
+ this.backgroundImage = image;
this.db.setSettings(this);
}
}
diff --git a/apps/frontend/src/common/image-utils.ts b/apps/frontend/src/common/image-utils.ts
new file mode 100644
index 0000000..9141659
--- /dev/null
+++ b/apps/frontend/src/common/image-utils.ts
@@ -0,0 +1,24 @@
+import { cache } from "react";
+import { config } from "../../config";
+
+/**
+ * Proxies all non-localhost images to make them load faster.
+ *
+ * @param originalUrl the original image url
+ * @returns the new image url
+ */
+export function getImageUrl(originalUrl: string) {
+ return `${!config.siteUrl.includes("localhost") ? "https://img.fascinated.cc/upload/q_70/" : ""}${originalUrl}`;
+}
+
+/**
+ * Gets the average color of an image
+ *
+ * @param src the image url
+ * @returns the average color
+ */
+export const getAverageColor = cache(async (src: string) => {
+ return {
+ hex: "#fff",
+ };
+});
diff --git a/src/common/model/player/impl/scoresaber-player.ts b/apps/frontend/src/common/model/player/impl/scoresaber-player.ts
similarity index 94%
rename from src/common/model/player/impl/scoresaber-player.ts
rename to apps/frontend/src/common/model/player/impl/scoresaber-player.ts
index 2230219..9122d33 100644
--- a/src/common/model/player/impl/scoresaber-player.ts
+++ b/apps/frontend/src/common/model/player/impl/scoresaber-player.ts
@@ -37,7 +37,7 @@ export default interface ScoreSaberPlayer extends Player {
/**
* The rank history for this player.
*/
- statisticHistory: { [key: string]: PlayerHistory };
+ statisticHistory: { [date: string]: PlayerHistory };
/**
* The statistics for this player.
@@ -58,12 +58,6 @@ export default interface ScoreSaberPlayer extends Player {
* Whether the player is inactive or not.
*/
inactive: boolean;
-
- /**
- * Whether the player is having their
- * statistics being tracked or not.
- */
- isBeingTracked?: boolean;
}
export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken): Promise {
@@ -80,7 +74,6 @@ export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken)
};
}) || [];
- let isBeingTracked = false;
const todayDate = formatDateMinimal(getMidnightAlignedDate(new Date()));
let statisticHistory: { [key: string]: PlayerHistory } = {};
try {
@@ -99,12 +92,7 @@ export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken)
rank: token.rank,
countryRank: token.countryRank,
pp: token.pp,
- accuracy: {
- averageRankedAccuracy: token.scoreStats.averageRankedAccuracy,
- },
};
-
- isBeingTracked = true;
}
statisticHistory = history;
} catch (error) {
@@ -177,7 +165,6 @@ export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken)
permissions: token.permissions,
banned: token.banned,
inactive: token.inactive,
- isBeingTracked: isBeingTracked,
};
}
diff --git a/src/common/model/player/player.ts b/apps/frontend/src/common/model/player/player.ts
similarity index 100%
rename from src/common/model/player/player.ts
rename to apps/frontend/src/common/model/player/player.ts
diff --git a/src/common/model/score/impl/scoresaber-score.ts b/apps/frontend/src/common/model/score/impl/scoresaber-score.ts
similarity index 100%
rename from src/common/model/score/impl/scoresaber-score.ts
rename to apps/frontend/src/common/model/score/impl/scoresaber-score.ts
diff --git a/src/common/model/score/modifier.ts b/apps/frontend/src/common/model/score/modifier.ts
similarity index 100%
rename from src/common/model/score/modifier.ts
rename to apps/frontend/src/common/model/score/modifier.ts
diff --git a/src/common/model/score/score-sort.ts b/apps/frontend/src/common/model/score/score-sort.ts
similarity index 100%
rename from src/common/model/score/score-sort.ts
rename to apps/frontend/src/common/model/score/score-sort.ts
diff --git a/src/common/model/score/score.ts b/apps/frontend/src/common/model/score/score.ts
similarity index 100%
rename from src/common/model/score/score.ts
rename to apps/frontend/src/common/model/score/score.ts
diff --git a/src/common/model/token/beatsaver/beat-saver-account-token.ts b/apps/frontend/src/common/model/token/beatsaver/beat-saver-account-token.ts
similarity index 100%
rename from src/common/model/token/beatsaver/beat-saver-account-token.ts
rename to apps/frontend/src/common/model/token/beatsaver/beat-saver-account-token.ts
diff --git a/src/common/model/token/beatsaver/beat-saver-map-metadata-token.ts b/apps/frontend/src/common/model/token/beatsaver/beat-saver-map-metadata-token.ts
similarity index 100%
rename from src/common/model/token/beatsaver/beat-saver-map-metadata-token.ts
rename to apps/frontend/src/common/model/token/beatsaver/beat-saver-map-metadata-token.ts
diff --git a/src/common/model/token/beatsaver/beat-saver-map-stats-token.ts b/apps/frontend/src/common/model/token/beatsaver/beat-saver-map-stats-token.ts
similarity index 100%
rename from src/common/model/token/beatsaver/beat-saver-map-stats-token.ts
rename to apps/frontend/src/common/model/token/beatsaver/beat-saver-map-stats-token.ts
diff --git a/src/common/model/token/beatsaver/beat-saver-map-token.ts b/apps/frontend/src/common/model/token/beatsaver/beat-saver-map-token.ts
similarity index 100%
rename from src/common/model/token/beatsaver/beat-saver-map-token.ts
rename to apps/frontend/src/common/model/token/beatsaver/beat-saver-map-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-badge-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-badge-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-badge-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-badge-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-difficulty-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-difficulty-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-difficulty-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-difficulty-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-leaderboard-player-info-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-player-info-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-leaderboard-player-info-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-player-info-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-leaderboard-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-leaderboard-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-metadata-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-metadata-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-metadata-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-metadata-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-player-score-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-player-score-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-player-score-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-player-score-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-player-scores-page-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-player-scores-page-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-player-scores-page-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-player-scores-page-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-player-search-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-player-search-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-player-search-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-player-search-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-player-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-player-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-player-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-player-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-players-page-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-players-page-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-players-page-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-players-page-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-score-stats-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-score-stats-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-score-stats-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-score-stats-token.ts
diff --git a/src/common/model/token/scoresaber/score-saber-score-token.ts b/apps/frontend/src/common/model/token/scoresaber/score-saber-score-token.ts
similarity index 100%
rename from src/common/model/token/scoresaber/score-saber-score-token.ts
rename to apps/frontend/src/common/model/token/scoresaber/score-saber-score-token.ts
diff --git a/src/common/mongo.ts b/apps/frontend/src/common/mongo.ts
similarity index 100%
rename from src/common/mongo.ts
rename to apps/frontend/src/common/mongo.ts
diff --git a/src/common/number-utils.ts b/apps/frontend/src/common/number-utils.ts
similarity index 100%
rename from src/common/number-utils.ts
rename to apps/frontend/src/common/number-utils.ts
diff --git a/src/common/player-utils.ts b/apps/frontend/src/common/player-utils.ts
similarity index 80%
rename from src/common/player-utils.ts
rename to apps/frontend/src/common/player-utils.ts
index 483e3a2..34024f2 100644
--- a/src/common/player-utils.ts
+++ b/apps/frontend/src/common/player-utils.ts
@@ -6,6 +6,8 @@ import { getDaysAgoDate, getMidnightAlignedDate } from "@/common/time-utils";
import { scoresaberService } from "@/common/service/impl/scoresaber";
import { IO } from "@trigger.dev/sdk";
+const INACTIVE_CHECK_AGAIN_TIME = 3 * 24 * 60 * 60 * 1000; // 3 days
+
/**
* Sorts the player history based on date,
* so the most recent date is first
@@ -18,31 +20,6 @@ export function sortPlayerHistory(history: Map) {
);
}
-/**
- * Gets a value from an {@link PlayerHistory}
- * based on the field
- *
- * @param history the history to get the value from
- * @param field the field to get
- */
-export function getValueFromHistory(history: PlayerHistory, field: string): number | null {
- const keys = field.split(".");
- /* eslint-disable @typescript-eslint/no-explicit-any */
- let value: any = history;
-
- // Navigate through the keys safely
- for (const key of keys) {
- if (value && key in value) {
- value = value[key];
- } else {
- return null; // Return null if the key doesn't exist
- }
- }
-
- // Ensure we return a number or null
- return typeof value === "number" ? value : null;
-}
-
/**
* Sorts the player history based on date,
* so the most recent date is first
@@ -89,6 +66,16 @@ export async function seedPlayerHistory(
export async function trackScoreSaberPlayer(dateToday: Date, foundPlayer: IPlayer, io?: IO) {
io && (await io.logger.info(`Updating statistics for ${foundPlayer.id}...`));
+ // Check if the player is inactive and if we check their inactive status again
+ if (
+ foundPlayer.rawPlayer &&
+ foundPlayer.rawPlayer.inactive &&
+ Date.now() - foundPlayer.getLastTracked().getTime() > INACTIVE_CHECK_AGAIN_TIME
+ ) {
+ io && (await io.logger.warn(`Player ${foundPlayer.id} is inactive, skipping...`));
+ return;
+ }
+
// Lookup player data from the ScoreSaber service
const response = await scoresaberService.lookupPlayer(foundPlayer.id, true);
if (response == undefined) {
@@ -96,9 +83,11 @@ export async function trackScoreSaberPlayer(dateToday: Date, foundPlayer: IPlaye
return;
}
const { player, rawPlayer } = response;
+ foundPlayer.rawPlayer = player; // Update the raw player data
- if (rawPlayer.inactive) {
- io && (await io.logger.warn(`Player ${foundPlayer.id} is inactive on ScoreSaber`));
+ if (player.inactive) {
+ io && (await io.logger.warn(`Player ${foundPlayer.id} is inactive`));
+ await foundPlayer.save(); // Save the player
return;
}
@@ -116,17 +105,12 @@ export async function trackScoreSaberPlayer(dateToday: Date, foundPlayer: IPlaye
if (history == undefined) {
history = {}; // Initialize if history is not found
}
-
// Set the history data
history.pp = player.pp;
history.countryRank = player.countryRank;
history.rank = player.rank;
- history.accuracy = {
- averageRankedAccuracy: rawPlayer.scoreStats.averageRankedAccuracy,
- };
foundPlayer.setStatisticHistory(dateToday, history);
foundPlayer.sortStatisticHistory();
- foundPlayer.lastTracked = new Date();
await foundPlayer.save();
io && (await io.logger.info(`Updated statistics for ${foundPlayer.id}`));
diff --git a/src/common/player/player-history.ts b/apps/frontend/src/common/player/player-history.ts
similarity index 57%
rename from src/common/player/player-history.ts
rename to apps/frontend/src/common/player/player-history.ts
index 5be6d1a..1f7dd81 100644
--- a/src/common/player/player-history.ts
+++ b/apps/frontend/src/common/player/player-history.ts
@@ -13,14 +13,4 @@ export interface PlayerHistory {
* The pp of the player.
*/
pp?: number;
-
- /**
- * The player's accuracy.
- */
- accuracy?: {
- /**
- * The player's average ranked accuracy.
- */
- averageRankedAccuracy?: number;
- };
}
diff --git a/src/common/player/player-tracked-since.ts b/apps/frontend/src/common/player/player-tracked-since.ts
similarity index 100%
rename from src/common/player/player-tracked-since.ts
rename to apps/frontend/src/common/player/player-tracked-since.ts
diff --git a/src/common/schema/player-schema.ts b/apps/frontend/src/common/schema/player-schema.ts
similarity index 95%
rename from src/common/schema/player-schema.ts
rename to apps/frontend/src/common/schema/player-schema.ts
index 93f32e7..0210e79 100644
--- a/src/common/schema/player-schema.ts
+++ b/apps/frontend/src/common/schema/player-schema.ts
@@ -1,6 +1,7 @@
import mongoose, { Document, Schema } from "mongoose";
import { PlayerHistory } from "@/common/player/player-history";
import { formatDateMinimal, getDaysAgo, getMidnightAlignedDate } from "@/common/time-utils";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
import { sortPlayerHistory } from "@/common/player-utils";
// Interface for Player Document
@@ -20,6 +21,11 @@ export interface IPlayer extends Document {
*/
lastTracked: Date;
+ /**
+ * The raw player data.
+ */
+ rawPlayer: ScoreSaberPlayer;
+
/**
* The first time the player was tracked
*/
@@ -75,6 +81,7 @@ export interface IPlayer extends Document {
const PlayerSchema = new Schema({
_id: { type: String, required: true },
lastTracked: { type: Date, default: new Date(), required: false },
+ rawPlayer: { type: Object, required: false },
statisticHistory: { type: Map, default: () => new Map(), required: false },
trackedSince: { type: Date, default: new Date(), required: false },
});
diff --git a/src/common/scoresaber-utils.ts b/apps/frontend/src/common/scoresaber-utils.ts
similarity index 100%
rename from src/common/scoresaber-utils.ts
rename to apps/frontend/src/common/scoresaber-utils.ts
diff --git a/src/common/service/impl/beatsaver.ts b/apps/frontend/src/common/service/impl/beatsaver.ts
similarity index 100%
rename from src/common/service/impl/beatsaver.ts
rename to apps/frontend/src/common/service/impl/beatsaver.ts
diff --git a/src/common/service/impl/scoresaber.ts b/apps/frontend/src/common/service/impl/scoresaber.ts
similarity index 88%
rename from src/common/service/impl/scoresaber.ts
rename to apps/frontend/src/common/service/impl/scoresaber.ts
index 3bd82a5..b40e68d 100644
--- a/src/common/service/impl/scoresaber.ts
+++ b/apps/frontend/src/common/service/impl/scoresaber.ts
@@ -6,23 +6,13 @@ import { ScoreSaberPlayersPageToken } from "@/common/model/token/scoresaber/scor
import { ScoreSort } from "../../model/score/score-sort";
import Service from "../service";
import ScoreSaberPlayer, { getScoreSaberPlayerFromToken } from "@/common/model/player/impl/scoresaber-player";
-import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
const API_BASE = "https://scoresaber.com/api";
-
-/**
- * Player
- */
const SEARCH_PLAYERS_ENDPOINT = `${API_BASE}/players?search=:query`;
const LOOKUP_PLAYER_ENDPOINT = `${API_BASE}/player/:id/full`;
const LOOKUP_PLAYERS_ENDPOINT = `${API_BASE}/players?page=:page`;
const LOOKUP_PLAYERS_BY_COUNTRY_ENDPOINT = `${API_BASE}/players?page=:page&countries=:country`;
const LOOKUP_PLAYER_SCORES_ENDPOINT = `${API_BASE}/player/:id/scores?limit=:limit&sort=:sort&page=:page`;
-
-/**
- * Leaderboard
- */
-const LOOKUP_LEADERBOARD_ENDPOINT = `${API_BASE}/leaderboard/by-id/:id/info`;
const LOOKUP_LEADERBOARD_SCORES_ENDPOINT = `${API_BASE}/leaderboard/by-id/:id/scores?page=:page`;
class ScoreSaberService extends Service {
@@ -175,30 +165,11 @@ class ScoreSaberService extends Service {
return response;
}
- /**
- * Looks up a leaderboard
- *
- * @param leaderboardId the ID of the leaderboard to look up
- * @param useProxy whether to use the proxy or not
- */
- async lookupLeaderboard(leaderboardId: string, useProxy = true): Promise {
- const before = performance.now();
- this.log(`Looking up leaderboard "${leaderboardId}"...`);
- const response = await this.fetch(
- useProxy,
- LOOKUP_LEADERBOARD_ENDPOINT.replace(":id", leaderboardId)
- );
- if (response === undefined) {
- return undefined;
- }
- this.log(`Found leaderboard "${leaderboardId}" in ${(performance.now() - before).toFixed(0)}ms`);
- return response;
- }
-
/**
* Looks up a page of scores for a leaderboard
*
* @param leaderboardId the ID of the leaderboard to look up
+ * @param sort the sort to use
* @param page the page to get scores for
* @param useProxy whether to use the proxy or not
* @returns the scores of the leaderboard, or undefined
diff --git a/src/common/service/service.ts b/apps/frontend/src/common/service/service.ts
similarity index 100%
rename from src/common/service/service.ts
rename to apps/frontend/src/common/service/service.ts
diff --git a/apps/frontend/src/common/song-utils.ts b/apps/frontend/src/common/song-utils.ts
new file mode 100644
index 0000000..e8741ba
--- /dev/null
+++ b/apps/frontend/src/common/song-utils.ts
@@ -0,0 +1,61 @@
+const diffColors: Record = {
+ easy: "#3CB371",
+ normal: "#59b0f4",
+ hard: "#FF6347",
+ expert: "#bf2a42",
+ expertplus: "#8f48db",
+};
+
+export type ScoreBadge = {
+ name: string;
+ min: number | null;
+ max: number | null;
+ color: string;
+};
+
+const scoreBadges: ScoreBadge[] = [
+ { name: "SS+", min: 95, max: null, color: diffColors.expertplus },
+ { name: "SS", min: 90, max: 95, color: diffColors.expert },
+ { name: "S+", min: 85, max: 90, color: diffColors.hard },
+ { name: "S", min: 80, max: 85, color: diffColors.normal },
+ { name: "A", min: 70, max: 80, color: diffColors.easy },
+ { name: "-", min: null, max: 70, color: "hsl(var(--accent))" },
+];
+
+/**
+ * Returns the color based on the accuracy provided.
+ *
+ * @param acc - The accuracy for the score
+ * @returns The corresponding color for the accuracy.
+ */
+export function getScoreBadgeFromAccuracy(acc: number): ScoreBadge {
+ // Check for SS+ first since it has no upper limit
+ if (acc >= 95) {
+ return scoreBadges[0]; // SS+ color
+ }
+
+ // Iterate through the rest of the badges
+ for (const badge of scoreBadges) {
+ const min = badge.min ?? -Infinity; // Treat null `min` as -Infinity
+ const max = badge.max ?? Infinity; // Treat null `max` as Infinity
+
+ // Check if the accuracy falls within the badge's range
+ if (acc >= min && acc < (max === null ? Infinity : max)) {
+ return badge; // Return the color of the matching badge
+ }
+ }
+
+ // Fallback color if no badge matches (should not happen)
+ return scoreBadges[scoreBadges.length - 1];
+}
+
+/**
+ * Turns the difficulty of a song into a color
+ *
+ * @param diff the difficulty to get the color for
+ * @returns the color for the difficulty
+ */
+export function songDifficultyToColor(diff: string) {
+ diff = diff.replace("+", "Plus");
+ return diffColors[diff.toLowerCase() as keyof typeof diffColors];
+}
diff --git a/src/common/string-utils.ts b/apps/frontend/src/common/string-utils.ts
similarity index 100%
rename from src/common/string-utils.ts
rename to apps/frontend/src/common/string-utils.ts
diff --git a/src/common/time-utils.ts b/apps/frontend/src/common/time-utils.ts
similarity index 55%
rename from src/common/time-utils.ts
rename to apps/frontend/src/common/time-utils.ts
index 26c14ac..0a5f929 100644
--- a/src/common/time-utils.ts
+++ b/apps/frontend/src/common/time-utils.ts
@@ -1,41 +1,28 @@
/**
* This function returns the time ago of the input date
*
- * @param input Date | number (timestamp)
+ * @param input Date | number
* @returns the format of the time ago
*/
-export function timeAgo(input: Date) {
- const inputDate = new Date(input).getTime(); // Convert input to a Date object if it's not already
- const now = new Date().getTime();
- const deltaSeconds = Math.floor((now - inputDate) / 1000); // Get time difference in seconds
-
- if (deltaSeconds <= 60) {
- return "just now";
- }
-
- const timeUnits = [
- { unit: "y", seconds: 60 * 60 * 24 * 365 }, // years
- { unit: "mo", seconds: 60 * 60 * 24 * 30 }, // months
- { unit: "d", seconds: 60 * 60 * 24 }, // days
- { unit: "h", seconds: 60 * 60 }, // hours
- { unit: "m", seconds: 60 }, // minutes
- ];
-
- const result = [];
- let remainingSeconds = deltaSeconds;
-
- for (const { unit, seconds } of timeUnits) {
- const count = Math.floor(remainingSeconds / seconds);
- if (count > 0) {
- result.push(`${count}${unit}`);
- remainingSeconds -= count * seconds;
+export function timeAgo(input: Date | number) {
+ const date = input instanceof Date ? input : new Date(input);
+ const formatter = new Intl.RelativeTimeFormat("en");
+ const ranges: { [key: string]: number } = {
+ year: 3600 * 24 * 365,
+ month: 3600 * 24 * 30,
+ week: 3600 * 24 * 7,
+ day: 3600 * 24,
+ hour: 3600,
+ minute: 60,
+ second: 1,
+ };
+ const secondsElapsed = (date.getTime() - Date.now()) / 1000;
+ for (const key in ranges) {
+ if (ranges[key] < Math.abs(secondsElapsed)) {
+ const delta = secondsElapsed / ranges[key];
+ return formatter.format(Math.round(delta), key as Intl.RelativeTimeFormatUnit);
}
- // Stop after two units have been added
- if (result.length === 2) break;
}
-
- // Return formatted result with at most two units
- return result.join(", ") + " ago";
}
/**
diff --git a/src/common/utils.ts b/apps/frontend/src/common/utils.ts
similarity index 100%
rename from src/common/utils.ts
rename to apps/frontend/src/common/utils.ts
diff --git a/src/common/website-utils.ts b/apps/frontend/src/common/website-utils.ts
similarity index 100%
rename from src/common/website-utils.ts
rename to apps/frontend/src/common/website-utils.ts
diff --git a/src/common/worker/worker.ts b/apps/frontend/src/common/worker/worker.ts
similarity index 100%
rename from src/common/worker/worker.ts
rename to apps/frontend/src/common/worker/worker.ts
diff --git a/src/common/worker/workers.ts b/apps/frontend/src/common/worker/workers.ts
similarity index 100%
rename from src/common/worker/workers.ts
rename to apps/frontend/src/common/worker/workers.ts
diff --git a/src/common/youtube-utils.ts b/apps/frontend/src/common/youtube-utils.ts
similarity index 100%
rename from src/common/youtube-utils.ts
rename to apps/frontend/src/common/youtube-utils.ts
diff --git a/src/components/background-cover.tsx b/apps/frontend/src/components/background-image.tsx
similarity index 54%
rename from src/components/background-cover.tsx
rename to apps/frontend/src/components/background-image.tsx
index 87591fa..644dc70 100644
--- a/src/components/background-cover.tsx
+++ b/apps/frontend/src/components/background-image.tsx
@@ -5,40 +5,30 @@ import { config } from "../../config";
import { getImageUrl } from "@/common/image-utils";
import useDatabase from "../hooks/use-database";
-export default function BackgroundCover() {
+export default function BackgroundImage() {
const database = useDatabase();
const settings = useLiveQuery(() => database.getSettings());
- if (settings == undefined || settings?.backgroundCover == undefined || settings?.backgroundCover == "") {
+ if (settings == undefined || settings?.backgroundImage == undefined || settings?.backgroundImage == "") {
return null; // Don't render anything if the background image is not set
}
- let backgroundCover = settings.backgroundCover;
+ let backgroundImage = settings.backgroundImage;
let prependWebsiteUrl = false;
// Remove the prepending slash
- if (backgroundCover.startsWith("/")) {
+ if (backgroundImage.startsWith("/")) {
prependWebsiteUrl = true;
- backgroundCover = backgroundCover.substring(1);
+ backgroundImage = backgroundImage.substring(1);
}
if (prependWebsiteUrl) {
- backgroundCover = config.siteUrl + "/" + backgroundCover;
- }
-
- // Static background color
- if (backgroundCover.startsWith("#")) {
- return (
-
- );
+ backgroundImage = config.siteUrl + "/" + backgroundImage;
}
return (
// eslint-disable-next-line @next/next/no-img-element
})
{
+ return (
+
+
+ {payload.value}
+
+
+ );
+};
diff --git a/src/components/country-flag.tsx b/apps/frontend/src/components/country-flag.tsx
similarity index 100%
rename from src/components/country-flag.tsx
rename to apps/frontend/src/components/country-flag.tsx
diff --git a/src/components/fallback-link.tsx b/apps/frontend/src/components/fallback-link.tsx
similarity index 84%
rename from src/components/fallback-link.tsx
rename to apps/frontend/src/components/fallback-link.tsx
index ce910f1..2e6186f 100644
--- a/src/components/fallback-link.tsx
+++ b/apps/frontend/src/components/fallback-link.tsx
@@ -14,7 +14,7 @@ type Props = {
export default function FallbackLink({ href, children }: Props) {
return href ? (
-
+
{children}
) : (
diff --git a/src/components/footer.tsx b/apps/frontend/src/components/footer.tsx
similarity index 100%
rename from src/components/footer.tsx
rename to apps/frontend/src/components/footer.tsx
diff --git a/src/components/input/pagination.tsx b/apps/frontend/src/components/input/pagination.tsx
similarity index 63%
rename from src/components/input/pagination.tsx
rename to apps/frontend/src/components/input/pagination.tsx
index 7ec1aad..f03f400 100644
--- a/src/components/input/pagination.tsx
+++ b/apps/frontend/src/components/input/pagination.tsx
@@ -60,21 +60,9 @@ type Props = {
* Callback function that is called when the user clicks on a page number.
*/
onPageChange: (page: number) => void;
-
- /**
- * Optional callback to generate the URL for each page.
- */
- generatePageUrl?: (page: number) => string;
};
-export default function Pagination({
- mobilePagination,
- page,
- totalPages,
- loadingPage,
- onPageChange,
- generatePageUrl,
-}: Props) {
+export default function Pagination({ mobilePagination, page, totalPages, loadingPage, onPageChange }: Props) {
totalPages = Math.round(totalPages);
const isLoading = loadingPage !== undefined;
const [currentPage, setCurrentPage] = useState(page);
@@ -84,7 +72,7 @@ export default function Pagination({
}, [page]);
const handlePageChange = (newPage: number) => {
- if (newPage < 1 || newPage > totalPages || newPage === currentPage || isLoading) {
+ if (newPage < 1 || newPage > totalPages || newPage == currentPage || isLoading) {
return;
}
@@ -92,16 +80,6 @@ export default function Pagination({
onPageChange(newPage);
};
- const handleLinkClick = (newPage: number, event: React.MouseEvent) => {
- event.preventDefault(); // Prevent default navigation behavior
-
- // Check if the new page is valid
- if (newPage < 1 || newPage > totalPages || newPage === currentPage || isLoading) {
- return;
- }
- handlePageChange(newPage);
- };
-
const renderPageNumbers = () => {
const pageNumbers = [];
const maxPagesToShow = mobilePagination ? 3 : 4;
@@ -112,14 +90,14 @@ export default function Pagination({
startPage = Math.max(1, endPage - maxPagesToShow + 1);
}
+ // Show "Jump to Start" with Ellipsis if currentPage is greater than 3 in desktop view
if (startPage > 1 && !mobilePagination) {
pageNumbers.push(
<>
- handleLinkClick(1, e)}>
- 1
-
+ handlePageChange(1)}>1
+ {/* Only show ellipsis if more than 2 pages from the start */}
{startPage > 2 && (
- handleLinkClick(i, e)}
- >
+ handlePageChange(i)}>
{loadingPage === i ?
@@ -149,42 +124,28 @@ export default function Pagination({
return (
- {/* Previous button - disabled on the first page */}
+ {/* Previous button for mobile and desktop */}
- 1 && generatePageUrl ? generatePageUrl(currentPage - 1) : ""}
- onClick={e => handleLinkClick(currentPage - 1, e)}
- aria-disabled={currentPage === 1}
- className={clsx(currentPage === 1 && "cursor-not-allowed")}
- />
+ handlePageChange(currentPage - 1)} />
{renderPageNumbers()}
+ {/* For desktop, show ellipsis and link to the last page */}
{!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
<>
- handleLinkClick(totalPages, e)}
- >
- {totalPages}
-
+ handlePageChange(totalPages)}>{totalPages}
)}
- {/* Next button - disabled on the last page */}
+ {/* Next button for mobile and desktop */}
- handleLinkClick(currentPage + 1, e)}
- aria-disabled={currentPage === totalPages}
- className={clsx(currentPage === totalPages && "cursor-not-allowed")}
- />
+ handlePageChange(currentPage + 1)} />
diff --git a/src/components/input/search-player.tsx b/apps/frontend/src/components/input/search-player.tsx
similarity index 100%
rename from src/components/input/search-player.tsx
rename to apps/frontend/src/components/input/search-player.tsx
diff --git a/apps/frontend/src/components/leaderboard/leaderboard-player.tsx b/apps/frontend/src/components/leaderboard/leaderboard-player.tsx
new file mode 100644
index 0000000..cef4262
--- /dev/null
+++ b/apps/frontend/src/components/leaderboard/leaderboard-player.tsx
@@ -0,0 +1,32 @@
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import Image from "next/image";
+import Link from "next/link";
+
+type Props = {
+ score: ScoreSaberScoreToken;
+};
+
+export default function LeaderboardPlayer({ score }: Props) {
+ const player = score.leaderboardPlayerInfo;
+
+ return (
+
{children}
diff --git a/src/common/browser-utils.ts b/apps/frontend/src/common/browser-utils.ts
similarity index 100%
rename from src/common/browser-utils.ts
rename to apps/frontend/src/common/browser-utils.ts
diff --git a/src/common/colors.ts b/apps/frontend/src/common/colors.ts
similarity index 100%
rename from src/common/colors.ts
rename to apps/frontend/src/common/colors.ts
diff --git a/src/common/database/database.ts b/apps/frontend/src/common/database/database.ts
similarity index 80%
rename from src/common/database/database.ts
rename to apps/frontend/src/common/database/database.ts
index 6cd5697..93ce4cc 100644
--- a/src/common/database/database.ts
+++ b/apps/frontend/src/common/database/database.ts
@@ -12,7 +12,7 @@ export default class Database extends Dexie {
settings!: EntityTable
+
+ );
+}
diff --git a/apps/frontend/src/components/leaderboard/leaderboard-score-stats.tsx b/apps/frontend/src/components/leaderboard/leaderboard-score-stats.tsx
new file mode 100644
index 0000000..565dd81
--- /dev/null
+++ b/apps/frontend/src/components/leaderboard/leaderboard-score-stats.tsx
@@ -0,0 +1,67 @@
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import StatValue from "@/components/stat-value";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+
+type Badge = {
+ name: string;
+ create: (
+ score: ScoreSaberScoreToken,
+ leaderboard: ScoreSaberLeaderboardToken
+ ) => string | React.ReactNode | undefined;
+};
+
+const badges: Badge[] = [
+ {
+ name: "PP",
+ create: (score: ScoreSaberScoreToken) => {
+ const pp = score.pp;
+ if (pp === 0) {
+ return undefined;
+ }
+ return `${score.pp.toFixed(2)}pp`;
+ },
+ },
+ {
+ name: "Accuracy",
+ create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+ const acc = (score.baseScore / leaderboard.maxScore) * 100;
+ return `${acc.toFixed(2)}%`;
+ },
+ },
+ {
+ name: "Full Combo",
+ create: (score: ScoreSaberScoreToken) => {
+ const fullCombo = score.missedNotes === 0;
+
+ return (
+ <>
+ {player.name}
+ +{fullCombo ? FC : formatNumberWithCommas(score.missedNotes)}
+
+ {badges.map((badge, index) => {
+ const toRender = badge.create(score, leaderboard);
+ if (toRender === undefined) {
+ return ;
+ }
+
+ return
+ );
+}
diff --git a/src/components/leaderboard/leaderboard-score.tsx b/apps/frontend/src/components/leaderboard/leaderboard-score.tsx
similarity index 51%
rename from src/components/leaderboard/leaderboard-score.tsx
rename to apps/frontend/src/components/leaderboard/leaderboard-score.tsx
index 36aa4a3..251e615 100644
--- a/src/components/leaderboard/leaderboard-score.tsx
+++ b/apps/frontend/src/components/leaderboard/leaderboard-score.tsx
@@ -1,16 +1,12 @@
+"use client";
+
import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
import LeaderboardPlayer from "./leaderboard-player";
import LeaderboardScoreStats from "./leaderboard-score-stats";
import ScoreRankInfo from "@/components/score/score-rank-info";
-import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
type Props = {
- /**
- * The player who set the score.
- */
- player?: ScoreSaberPlayer;
-
/**
* The score to display.
*/
@@ -22,14 +18,12 @@ type Props = {
leaderboard: ScoreSaberLeaderboardToken;
};
-export default function LeaderboardScore({ player, score, leaderboard }: Props) {
+export default function LeaderboardScore({ score, leaderboard }: Props) {
return (
-
- ();
+
+ const {
+ data: scores,
+ isError,
+ isLoading,
+ refetch,
+ } = useQuery({
+ queryKey: ["playerScores", leaderboard.id, currentPage],
+ queryFn: () => scoresaberService.lookupLeaderboardScores(leaderboard.id + "", currentPage),
+ staleTime: 30 * 1000, // Cache data for 30 seconds
+ });
+
+ useEffect(() => {
+ if (scores) {
+ setCurrentScores(scores);
+ }
+ }, [scores]);
+
+ useEffect(() => {
+ refetch();
+ }, [leaderboard, currentPage, refetch]);
+
+ if (currentScores === undefined) {
+ return undefined;
+ }
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/loaders/database-loader.tsx b/apps/frontend/src/components/loaders/database-loader.tsx
similarity index 64%
rename from src/components/loaders/database-loader.tsx
rename to apps/frontend/src/components/loaders/database-loader.tsx
index 1f263d9..2e1a79e 100644
--- a/src/components/loaders/database-loader.tsx
+++ b/apps/frontend/src/components/loaders/database-loader.tsx
@@ -1,6 +1,6 @@
"use client";
-import { createContext, ReactNode, useEffect, useState } from "react";
+import { createContext, useEffect, useState } from "react";
import Database, { db } from "../../common/database/database";
import FullscreenLoader from "./fullscreen-loader";
import { useToast } from "@/hooks/use-toast";
@@ -10,27 +10,23 @@ import { useToast } from "@/hooks/use-toast";
*/
export const DatabaseContext = createContext(undefined);
-type DatabaseLoaderProps = {
- /**
- * The children to render.
- */
- children: ReactNode;
+type Props = {
+ children: React.ReactNode;
};
-export default function DatabaseLoader({ children }: DatabaseLoaderProps) {
+export default function DatabaseLoader({ children }: Props) {
const { toast } = useToast();
const [database, setDatabase] = useState(undefined);
useEffect(() => {
const before = performance.now();
setDatabase(db);
+ console.log(`Loaded database in ${performance.now() - before}ms`);
- db.on("ready", () => {
- const loadTime = (performance.now() - before).toFixed(0);
- console.log(`Loaded database in ${loadTime}ms`);
+ db.on("ready", err => {
toast({
title: "Database loaded",
- description: `The database was loaded in ${loadTime}ms.`,
+ description: "The database was loaded successfully.",
});
});
}, [toast]);
diff --git a/src/components/loaders/fullscreen-loader.tsx b/apps/frontend/src/components/loaders/fullscreen-loader.tsx
similarity index 100%
rename from src/components/loaders/fullscreen-loader.tsx
rename to apps/frontend/src/components/loaders/fullscreen-loader.tsx
diff --git a/src/components/logos/beatsaver-logo.tsx b/apps/frontend/src/components/logos/beatsaver-logo.tsx
similarity index 100%
rename from src/components/logos/beatsaver-logo.tsx
rename to apps/frontend/src/components/logos/beatsaver-logo.tsx
diff --git a/src/components/logos/scoresaber-logo.tsx b/apps/frontend/src/components/logos/scoresaber-logo.tsx
similarity index 100%
rename from src/components/logos/scoresaber-logo.tsx
rename to apps/frontend/src/components/logos/scoresaber-logo.tsx
diff --git a/src/components/logos/youtube-logo.tsx b/apps/frontend/src/components/logos/youtube-logo.tsx
similarity index 100%
rename from src/components/logos/youtube-logo.tsx
rename to apps/frontend/src/components/logos/youtube-logo.tsx
diff --git a/src/components/navbar/navbar-button.tsx b/apps/frontend/src/components/navbar/navbar-button.tsx
similarity index 100%
rename from src/components/navbar/navbar-button.tsx
rename to apps/frontend/src/components/navbar/navbar-button.tsx
diff --git a/src/components/navbar/navbar.tsx b/apps/frontend/src/components/navbar/navbar.tsx
similarity index 50%
rename from src/components/navbar/navbar.tsx
rename to apps/frontend/src/components/navbar/navbar.tsx
index af4a5dc..f562938 100644
--- a/src/components/navbar/navbar.tsx
+++ b/apps/frontend/src/components/navbar/navbar.tsx
@@ -1,4 +1,4 @@
-import { CogIcon, HomeIcon } from "@heroicons/react/24/solid";
+import { HomeIcon } from "@heroicons/react/24/solid";
import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import React from "react";
@@ -8,7 +8,6 @@ import ProfileButton from "./profile-button";
type NavbarItem = {
name: string;
link: string;
- align: "left" | "right";
icon: React.ReactNode;
};
@@ -16,57 +15,44 @@ const items: NavbarItem[] = [
{
name: "Home",
link: "/",
- align: "left",
- icon:
-
+
+
);
}
diff --git a/apps/frontend/src/components/leaderboard/leaderboard-scores.tsx b/apps/frontend/src/components/leaderboard/leaderboard-scores.tsx
new file mode 100644
index 0000000..5a1d73c
--- /dev/null
+++ b/apps/frontend/src/components/leaderboard/leaderboard-scores.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
+import useWindowDimensions from "@/hooks/use-window-dimensions";
+import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import Card from "../card";
+import Pagination from "../input/pagination";
+import LeaderboardScore from "./leaderboard-score";
+
+type Props = {
+ leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export default function LeaderboardScores({ leaderboard }: Props) {
+ const { width } = useWindowDimensions();
+
+ const [currentPage, setCurrentPage] = useState(1);
+ const [currentScores, setCurrentScores] = useState
+ {isError &&
+
+ Oopsies! Something went wrong.
} + {currentScores.scores.length === 0 &&No scores found. Invalid Page?
} +
+ {currentScores.scores.map((playerScore, index) => (
+
+
+
- {item.icon && = {
+ rank: [],
+ countryRank: [],
+ pp: [],
+ };
+
+ const statisticEntries = Object.entries(player.statisticHistory).sort(
+ ([a], [b]) => parseDate(a).getTime() - parseDate(b).getTime()
+ );
+
+ let previousDate: Date | null = null;
+
+ // Create labels and history data
+ for (const [dateString, history] of statisticEntries) {
+ const currentDate = parseDate(dateString);
+
+ // Insert nulls for missing days
+ if (previousDate) {
+ const diffDays = Math.floor((currentDate.getTime() - previousDate.getTime()) / (1000 * 60 * 60 * 24));
+
+ for (let i = 1; i < diffDays; i++) {
+ labels.push(`${getDaysAgo(new Date(currentDate.getTime() - i * 24 * 60 * 60 * 1000))} days ago`);
+ datasetConfig.forEach(config => {
+ histories[config.field].push(null);
+ });
+ }
+ }
+
+ const daysAgo = getDaysAgo(currentDate);
+ labels.push(daysAgo === 0 ? "Today" : `${daysAgo} days ago`);
+
+ // stupid typescript crying wahh wahh wahh - https://youtu.be/hBEKgHDzm_s?si=ekOdMMdb-lFnA1Yz&t=11
+ datasetConfig.forEach(config => {
+ (histories as any)[config.field].push((history as any)[config.field] ?? null);
+ });
+
+ previousDate = currentDate;
+ }
+
+ // Dynamically create axes and datasets based on datasetConfig
+ const axes: Record = {
+ x: {
+ grid: {
+ color: "#252525", // gray grid lines
+ },
+ reverse: false,
+ },
+ };
+
+ const datasets: Dataset[] = datasetConfig
+ .map(config => {
+ if (histories[config.field].some(value => value !== null)) {
+ axes[config.axisId] = generateAxis(
+ config.axisId,
+ config.axisConfig.reverse,
+ isMobile && config.axisConfig.hideOnMobile ? false : config.axisConfig.display,
+ config.axisConfig.position,
+ config.axisConfig.displayName
+ );
+ return generateDataset(config.title, histories[config.field], config.color, config.axisId);
+ }
+ return null;
+ })
+ .filter(Boolean) as Dataset[];
+
+ const options: any = {
+ maintainAspectRatio: false,
+ responsive: true,
+ interaction: {
+ mode: "index",
+ intersect: false,
+ },
+ scales: axes,
+ elements: {
+ point: {
+ radius: 0,
+ },
+ },
+ plugins: {
+ legend: {
+ position: "top" as const,
+ labels: {
+ color: "white",
+ },
+ },
+ tooltip: {
+ callbacks: {
+ label(context: any) {
+ const value = Number(context.parsed.y);
+ const config = datasetConfig.find(cfg => cfg.title === context.dataset.label);
+ return config?.labelFormatter(value) ?? "";
+ },
+ },
+ },
+ },
+ };
+
+ const data = {
+ labels,
+ datasets,
+ };
+
+ return (
+ (initialScoreData);
const [searchTerm, setSearchTerm] = useState(initialSearch || "");
const debouncedSearchTerm = useDebounce(searchTerm, 250);
- const [shouldFetch, setShouldFetch] = useState(false);
- const topOfScoresRef = useRef(null);
+ const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching
+ const topOfScoresRef = useRef(null);
const isSearchActive = debouncedSearchTerm.length >= 3;
const {
@@ -71,7 +76,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
});
},
staleTime: 30 * 1000, // 30 seconds
- enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0),
+ enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0), // Only enable if we set shouldFetch to true
});
/**
@@ -123,32 +128,22 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
if (scores) handleScoreAnimation();
}, [scores, handleScoreAnimation]);
- /**
- * Gets the URL to the page.
- */
- const getUrl = useCallback(
- (page: number) => {
- return `/player/${player.id}/${pageState.sort}/${page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
- },
- [debouncedSearchTerm, player.id, pageState.sort, isSearchActive]
- );
-
/**
* Handle updating the URL when the page number,
* sort, or search term changes.
*/
useEffect(() => {
- const newUrl = getUrl(pageState.page);
+ const newUrl = `/player/${player.id}/${pageState.sort}/${pageState.page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
- }, [pageState, debouncedSearchTerm, player.id, isSearchActive, getUrl]);
+ }, [pageState, debouncedSearchTerm, player.id, isSearchActive]);
- /**k
+ /**
* Handle scrolling to the top of the
* scores when new scores are loaded.
*/
useEffect(() => {
if (topOfScoresRef.current && shouldFetch) {
- const topOfScoresPosition = topOfScoresRef.current.getBoundingClientRect().top + window.scrollY;
+ const topOfScoresPosition = (topOfScoresRef.current as any).getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: topOfScoresPosition - 55, // Navbar height (plus some padding)
behavior: "smooth",
@@ -161,7 +156,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
{item.icon}
}
- {item.name}
+
+ {item.icon &&
);
export default function Navbar() {
- const rightItems = items.filter(item => item.align === "right");
- const leftItems = items.filter(item => item.align === "left");
+ const rightItem = items[items.length - 1];
return (
{item.icon}
}
+ {item.name}
- (null);
- const isMiniRankingsVisible = useIsVisible(miniRankingsRef);
+ console.log("mobile", isMobile);
- let player = initialPlayerData;
+ let player = initalPlayerData;
const { data, isLoading, isError } = useQuery({
queryKey: ["player", player.id],
queryFn: () => scoresaberService.lookupPlayer(player.id),
@@ -52,7 +49,7 @@ export default function PlayerData({
{!player.inactive && (
)}
diff --git a/src/components/player/player-header.tsx b/apps/frontend/src/components/player/player-header.tsx
similarity index 100%
rename from src/components/player/player-header.tsx
rename to apps/frontend/src/components/player/player-header.tsx
diff --git a/apps/frontend/src/components/player/player-rank-chart.tsx b/apps/frontend/src/components/player/player-rank-chart.tsx
new file mode 100644
index 0000000..448ed03
--- /dev/null
+++ b/apps/frontend/src/components/player/player-rank-chart.tsx
@@ -0,0 +1,294 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
+import { Line } from "react-chartjs-2";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { getDaysAgo, parseDate } from "@/common/time-utils";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+type AxisPosition = "left" | "right";
+
+/**
+ * A ChartJS axis
+ */
+type Axis = {
+ id?: string;
+ position?: AxisPosition;
+ display?: boolean;
+ grid?: { color?: string; drawOnChartArea?: boolean };
+ title?: { display: boolean; text: string; color?: string };
+ ticks?: {
+ stepSize?: number;
+ };
+ reverse?: boolean;
+};
+
+/**
+ * A ChartJS dataset
+ */
+type Dataset = {
+ label: string;
+ data: (number | null)[]; // Allow null values for gaps
+ borderColor: string;
+ fill: boolean;
+ lineTension: number;
+ spanGaps: boolean;
+ yAxisID: string;
+};
+
+/**
+ * Generate an axis
+ *
+ * @param id the id of the axis
+ * @param reverse if the axis should be reversed
+ * @param display if the axis should be displayed
+ * @param position the position of the axis
+ * @param displayName the optional name to display for the axis
+ */
+const generateAxis = (
+ id: string,
+ reverse: boolean,
+ display: boolean,
+ position: AxisPosition,
+ displayName: string
+): Axis => ({
+ id,
+ position,
+ display,
+ grid: {
+ drawOnChartArea: id === "y",
+ color: id === "y" ? "#252525" : "",
+ },
+ title: {
+ display: true,
+ text: displayName,
+ color: "#ffffff",
+ },
+ ticks: {
+ stepSize: 10,
+ },
+ reverse,
+});
+
+/**
+ * Generate a dataset
+ *
+ * @param label the label of the dataset
+ * @param data the data of the dataset
+ * @param borderColor the border color of the dataset
+ * @param yAxisID the ID of the y-axis
+ */
+const generateDataset = (label: string, data: (number | null)[], borderColor: string, yAxisID: string): Dataset => ({
+ label,
+ data,
+ borderColor,
+ fill: false,
+ lineTension: 0.5,
+ spanGaps: false, // Set to false, so we can allow gaps
+ yAxisID,
+});
+
+type DatasetConfig = {
+ title: string;
+ field: string;
+ color: string;
+ axisId: string;
+ axisConfig: {
+ reverse: boolean;
+ display: boolean;
+ hideOnMobile?: boolean;
+ displayName: string;
+ position: AxisPosition;
+ };
+ labelFormatter: (value: number) => string;
+};
+
+// Configuration array for datasets and axes with label formatters
+const datasetConfig: DatasetConfig[] = [
+ {
+ title: "Rank",
+ field: "rank",
+ color: "#3EC1D3",
+ axisId: "y",
+ axisConfig: {
+ reverse: true,
+ display: true,
+ displayName: "Global Rank",
+ position: "left",
+ },
+ labelFormatter: (value: number) => `Rank #${formatNumberWithCommas(value)}`,
+ },
+ {
+ title: "Country Rank",
+ field: "countryRank",
+ color: "#FFEA00",
+ axisId: "y1",
+ axisConfig: {
+ reverse: true,
+ display: false,
+ displayName: "Country Rank",
+ position: "left",
+ },
+ labelFormatter: (value: number) => `Country Rank #${formatNumberWithCommas(value)}`,
+ },
+ {
+ title: "PP",
+ field: "pp",
+ color: "#606fff",
+ axisId: "y2",
+ axisConfig: {
+ reverse: false,
+ display: true,
+ hideOnMobile: true,
+ displayName: "PP",
+ position: "right",
+ },
+ labelFormatter: (value: number) => `PP ${formatNumberWithCommas(value)}pp`,
+ },
+];
+
+type Props = {
+ player: ScoreSaberPlayer;
+};
+
+export default function PlayerRankChart({ player }: Props) {
+ const isMobile = useIsMobile();
+
+ if (!player.statisticHistory || Object.keys(player.statisticHistory).length === 0) {
+ return (
+
+
);
diff --git a/src/components/navbar/profile-button.tsx b/apps/frontend/src/components/navbar/profile-button.tsx
similarity index 95%
rename from src/components/navbar/profile-button.tsx
rename to apps/frontend/src/components/navbar/profile-button.tsx
index 74b0bbe..f4353b9 100644
--- a/src/components/navbar/profile-button.tsx
+++ b/apps/frontend/src/components/navbar/profile-button.tsx
@@ -27,7 +27,7 @@ export default function ProfileButton() {
src={`https://img.fascinated.cc/upload/w_24,h_24/https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`}
/>
-
{/* Left-aligned items */}
{renderNavbarItem(item)}
))}
- {/* Right-aligned items */}
- {renderNavbarItem(rightItem)}
+
- {rightItems.map((item, index) => (
-
- {renderNavbarItem(item)}
-
- ))}
-
+ {/* Right-aligned item */}
+
+ You
+You
); diff --git a/src/components/offline-network.tsx b/apps/frontend/src/components/offline-network.tsx similarity index 100% rename from src/components/offline-network.tsx rename to apps/frontend/src/components/offline-network.tsx diff --git a/src/components/player/claim-profile.tsx b/apps/frontend/src/components/player/claim-profile.tsx similarity index 100% rename from src/components/player/claim-profile.tsx rename to apps/frontend/src/components/player/claim-profile.tsx diff --git a/src/components/player/player-badges.tsx b/apps/frontend/src/components/player/player-badges.tsx similarity index 100% rename from src/components/player/player-badges.tsx rename to apps/frontend/src/components/player/player-badges.tsx diff --git a/src/components/player/player-data.tsx b/apps/frontend/src/components/player/player-data.tsx similarity index 73% rename from src/components/player/player-data.tsx rename to apps/frontend/src/components/player/player-data.tsx index 27aff4f..9a83b06 100644 --- a/src/components/player/player-data.tsx +++ b/apps/frontend/src/components/player/player-data.tsx @@ -6,14 +6,12 @@ import { ScoreSort } from "@/common/model/score/score-sort"; import { useQuery } from "@tanstack/react-query"; import Mini from "../ranking/mini"; import PlayerHeader from "./player-header"; +import PlayerRankChart from "./player-rank-chart"; import PlayerScores from "./player-scores"; import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player"; import Card from "@/components/card"; import PlayerBadges from "@/components/player/player-badges"; import { useIsMobile } from "@/hooks/use-is-mobile"; -import { useIsVisible } from "@/hooks/use-is-visible"; -import { useRef } from "react"; -import PlayerCharts from "@/components/player/chart/player-charts"; type Props = { initialPlayerData: ScoreSaberPlayer; @@ -24,17 +22,16 @@ type Props = { }; export default function PlayerData({ - initialPlayerData: initialPlayerData, + initialPlayerData: initalPlayerData, initialScoreData, initialSearch, sort, page, }: Props) { const isMobile = useIsMobile(); - const miniRankingsRef = useRef
+
+ );
+ }
+
+ const labels: string[] = [];
+ const histories: RecordUnable to load player rank chart, missing data...
+
+ {
+ const originalFit = chart.legend.fit;
+
+ chart.legend.fit = function fit() {
+ originalFit.bind(chart.legend)();
+ this.height += 2;
+ };
+ },
+ },
+ ]}
+ />
+
+ );
+}
diff --git a/src/components/player/player-scores.tsx b/apps/frontend/src/components/player/player-scores.tsx
similarity index 87%
rename from src/components/player/player-scores.tsx
rename to apps/frontend/src/components/player/player-scores.tsx
index ddb76ae..22e6d3f 100644
--- a/src/components/player/player-scores.tsx
+++ b/apps/frontend/src/components/player/player-scores.tsx
@@ -2,7 +2,7 @@ import { capitalizeFirstLetter } from "@/common/string-utils";
import useWindowDimensions from "@/hooks/use-window-dimensions";
import { ClockIcon, TrophyIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { useQuery } from "@tanstack/react-query";
-import { motion, useAnimation } from "framer-motion";
+import { motion, useAnimation, Variants } from "framer-motion";
import { useCallback, useEffect, useRef, useState } from "react";
import Card from "../card";
import Pagination from "../input/pagination";
@@ -15,7 +15,6 @@ import { scoresaberService } from "@/common/service/impl/scoresaber";
import { Input } from "@/components/ui/input";
import { clsx } from "clsx";
import { useDebounce } from "@uidotdev/usehooks";
-import { scoreAnimation } from "@/components/score/score-animation";
type Props = {
initialScoreData?: ScoreSaberPlayerScoresPageToken;
@@ -43,6 +42,12 @@ const scoreSort = [
},
];
+const scoreAnimation: Variants = {
+ hiddenRight: { opacity: 0, x: 50 },
+ hiddenLeft: { opacity: 0, x: -50 },
+ visible: { opacity: 1, x: 0, transition: { staggerChildren: 0.03 } },
+};
+
export default function PlayerScores({ initialScoreData, initialSearch, player, sort, page }: Props) {
const { width } = useWindowDimensions();
const controls = useAnimation();
@@ -52,8 +57,8 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
const [currentScores, setCurrentScores] = useState
{/* Where to scroll to when new scores are loaded */}
-
+
{scoreSort.map(sortOption => (
@@ -215,7 +210,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
>
{currentScores.playerScores.map((playerScore, index) => (
-
))}
@@ -225,9 +220,6 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
page={pageState.page}
totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
loadingPage={isLoading ? pageState.page : undefined}
- generatePageUrl={page => {
- return getUrl(page);
- }}
onPageChange={newPage => {
setPreviousPage(pageState.page);
setPageState({ ...pageState, page: newPage });
diff --git a/src/components/player/player-stats.tsx b/apps/frontend/src/components/player/player-stats.tsx
similarity index 100%
rename from src/components/player/player-stats.tsx
rename to apps/frontend/src/components/player/player-stats.tsx
diff --git a/src/components/player/player-tracked-status.tsx b/apps/frontend/src/components/player/player-tracked-status.tsx
similarity index 100%
rename from src/components/player/player-tracked-status.tsx
rename to apps/frontend/src/components/player/player-tracked-status.tsx
diff --git a/src/components/preload-resources.tsx b/apps/frontend/src/components/preload-resources.tsx
similarity index 100%
rename from src/components/preload-resources.tsx
rename to apps/frontend/src/components/preload-resources.tsx
diff --git a/src/components/providers/query-provider.tsx b/apps/frontend/src/components/providers/query-provider.tsx
similarity index 100%
rename from src/components/providers/query-provider.tsx
rename to apps/frontend/src/components/providers/query-provider.tsx
diff --git a/src/components/providers/theme-provider.tsx b/apps/frontend/src/components/providers/theme-provider.tsx
similarity index 100%
rename from src/components/providers/theme-provider.tsx
rename to apps/frontend/src/components/providers/theme-provider.tsx
diff --git a/src/components/ranking/mini.tsx b/apps/frontend/src/components/ranking/mini.tsx
similarity index 78%
rename from src/components/ranking/mini.tsx
rename to apps/frontend/src/components/ranking/mini.tsx
index 0e6995e..469c951 100644
--- a/src/components/ranking/mini.tsx
+++ b/apps/frontend/src/components/ranking/mini.tsx
@@ -10,25 +10,12 @@ import CountryFlag from "../country-flag";
import { Avatar, AvatarImage } from "../ui/avatar";
import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
import { scoresaberService } from "@/common/service/impl/scoresaber";
-import { PlayerRankingSkeleton } from "@/components/ranking/player-ranking-skeleton";
const PLAYER_NAME_MAX_LENGTH = 18;
type MiniProps = {
- /**
- * The type of ranking to display.
- */
type: "Global" | "Country";
-
- /**
- * The player on this profile.
- */
player: ScoreSaberPlayer;
-
- /**
- * Whether the data should be updated
- */
- shouldUpdate?: boolean;
};
type Variants = {
@@ -65,11 +52,7 @@ const miniVariants: Variants = {
},
};
-export default function Mini({ type, player, shouldUpdate }: MiniProps) {
- if (shouldUpdate == undefined) {
- // Default to true
- shouldUpdate = true;
- }
+export default function Mini({ type, player }: MiniProps) {
const variant = miniVariants[type];
const icon = variant.icon(player);
@@ -82,8 +65,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
queryFn: async () => {
// Determine pages to search based on player's rank within the page
const pagesToSearch = [page];
- if (rankWithinPage < 5 && page > 1) {
- // Allow page 1 to be valid
+ if (rankWithinPage < 5 && page > 0) {
// Player is near the start of the page, so search the previous page too
pagesToSearch.push(page - 1);
}
@@ -105,29 +87,13 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
return players;
},
- enabled: shouldUpdate,
});
let players = data; // So we can update it later
if (players && (!isLoading || !isError)) {
- // Find the player's position in the list
+ // Find the player's position and show 3 players above and 1 below
const playerPosition = players.findIndex(p => p.id === player.id);
-
- // Ensure we always show 5 players
- const start = Math.max(0, playerPosition - 3); // Start showing 3 players above the player, but not less than index 0
- const end = Math.min(players.length, start + 5); // Ensure there are 5 players shown
-
- players = players.slice(start, end);
-
- // If there are less than 5 players at the top, append more players from below
- if (players.length < 5 && start === 0) {
- const additionalPlayers = players.slice(playerPosition + 1, playerPosition + (5 - players.length + 1));
- players = [...players, ...additionalPlayers];
- }
- }
-
- if (isLoading) {
- return
{type} Ranking
+ {isLoading &&
Loading...
} {isError &&Error
} {players?.map((playerRanking, index) => { const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank; @@ -153,13 +120,13 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) { className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b" >#{formatNumberWithCommas(rank)}
-
+
-
{playerName}
+
{formatPp(playerRanking.pp)}pp
{playerRanking.id !== player.id && (0 ? "text-green-400" : "text-red-400"}`}> diff --git a/src/components/score/leaderboard-button.tsx b/apps/frontend/src/components/score/leaderboard-button.tsx similarity index 100% rename from src/components/score/leaderboard-button.tsx rename to apps/frontend/src/components/score/leaderboard-button.tsx diff --git a/src/components/score/score-button.tsx b/apps/frontend/src/components/score/score-button.tsx similarity index 96% rename from src/components/score/score-button.tsx rename to apps/frontend/src/components/score/score-button.tsx index 0513ca4..9f68cd4 100644 --- a/src/components/score/score-button.tsx +++ b/apps/frontend/src/components/score/score-button.tsx @@ -20,7 +20,7 @@ type Props = { export default function ScoreButton({ children, tooltip, onClick }: Props) { const button = (