Compare commits

...

2 Commits

Author SHA1 Message Date
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
a80213aa51 Begin on the new landing page 2024-10-28 22:47:45 -04:00
22 changed files with 359 additions and 41 deletions

BIN
bun.lockb

Binary file not shown.

@ -20,6 +20,7 @@
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slider": "^1.2.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1",

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

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

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

@ -79,9 +79,9 @@ export default function RootLayout({
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
<QueryProvider>
<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 />
<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}
</div>
<Footer />

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

@ -0,0 +1,26 @@
import { Database } from "lucide-react";
export default function DataCollection() {
return (
<div className="px-5 -mt-32 flex flex-col gap-10 select-none">
{/* Header */}
<div className="flex flex-col gap-2.5">
<div className="flex gap-3.5 items-center">
<Database className="size-7 text-pp" />
<h1 className="text-4xl font-bold text-ssr">Data Collection</h1>
</div>
<p className="opacity-85">posidonium novum ancillae ius conclusionemque splendide vel.</p>
</div>
{/* Content */}
<div className="max-w-[900px]">
<img
className="w-full h-full rounded-xl border border-ssr/20"
src="/assets/home/data-collection.png"
alt="Data Collection"
draggable={false}
/>
</div>
</div>
);
}

@ -0,0 +1,26 @@
import { Database } from "lucide-react";
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 items-end">
<div className="flex gap-3.5 items-center">
<Database className="size-7 text-pp" />
<h1 className="text-4xl font-bold text-ssr">Friends</h1>
</div>
<p className="opacity-85">posidonium novum ancillae ius conclusionemque splendide vel.</p>
</div>
{/* Content */}
<div className="max-w-[900px]">
<img
className="w-full h-full rounded-xl border border-ssr/20"
src="/assets/home/friends.png"
alt="Friends"
draggable={false}
/>
</div>
</div>
);
}

@ -0,0 +1,82 @@
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";
export default function HeroSection() {
return (
<div className="flex flex-col gap-3.5 text-center items-center select-none">
<Alert />
<Title />
<Buttons />
<AppPreview />
<Separator className="my-14 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 your and your plays
</p>
</>
);
}
function Buttons() {
return (
<div className="mt-4 flex gap-4">
<Link href="https://discord.gg/kmNfWGA4A8" 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>
</div>
);
}
function AppPreview() {
return (
<div className="mx-5 my-24 relative max-w-[1280px] shadow-[0_3rem_20rem_-15px_rgba(15,15,15,0.6)] shadow-pp/50 rounded-xl overflow-hidden">
<BorderBeam colorFrom="#6773ff" colorTo="#4858ff" />
<img
className="w-full h-full border-4 border-pp/20 rounded-xl"
src="/assets/home/app-preview.png"
draggable={false}
/>
</div>
);
}

@ -0,0 +1,26 @@
import { Database } from "lucide-react";
export default function RealtimeScores() {
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 items-end">
<div className="flex gap-3.5 items-center">
<Database className="size-7 text-pp" />
<h1 className="text-4xl font-bold text-ssr">Realtime Scores</h1>
</div>
<p className="opacity-85">posidonium novum ancillae ius conclusionemque splendide vel.</p>
</div>
{/* Content */}
<div className="max-w-[900px]">
<img
className="w-full h-full rounded-xl border border-ssr/20"
src="/assets/home/realtime-scores.png"
alt="Realtime Scores"
draggable={false}
/>
</div>
</div>
);
}

@ -0,0 +1,24 @@
import { 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.5 items-center">
<Database className="size-7 text-pp" />
<h1 className="text-4xl font-bold text-ssr">Site Statistics</h1>
</div>
<p className="opacity-85">posidonium novum ancillae ius conclusionemque splendide vel.</p>
</div>
{/* Content */}
{statistics && <AppStats initialStatistics={statistics} />}
</div>
);
}

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

@ -10,7 +10,7 @@ export default function FullscreenLoader({ reason }: Props) {
<div className="absolute w-screen h-screen bg-background brightness-[66%] flex flex-col gap-6 items-center justify-center">
<div className="flex flex-col items-center justify-center">
<p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
<p className="text-gray-300 text-md text-center">{reason}</p>
<div className="text-gray-300 text-md text-center">{reason}</div>
</div>
<div className="animate-spin">
<ScoreSaberLogo />

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

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

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

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

@ -64,6 +64,25 @@ const config: Config = {
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
animation: {
"shiny-text": "shiny-text 8s infinite",
"border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
},
keyframes: {
"shiny-text": {
"0%, 90%, 100%": {
"background-position": "calc(-100% - var(--shiny-width)) 0",
},
"30%, 60%": {
"background-position": "calc(100% + var(--shiny-width)) 0",
},
},
"border-beam": {
"100%": {
"offset-distance": "100%",
},
},
},
},
},
plugins: [require("tailwindcss-animate")],