Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

color changes and added a navbar
Some checks failed
deploy / deploy (push) Failing after 39s
Details

Browse Source
This commit is contained in:
Lee 2023-10-20 11:54:20 +01:00
parent d3d076654e
commit 17baa366c8
10 changed files with 78 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
next.config.js
View File

@ -1,7 +1,12 @@
const nextBuildId = require("next-build-id");
/** @type {import('next').NextConfig} */
const nextConfig = {
generateEtags: true,
compress: true,
env: {
NEXT_PUBLIC_BUILD_ID: nextBuildId.sync({ dir: __dirname }),
},
images: {
remotePatterns: [
{

9
package-lock.json generated
View File

@ -14,6 +14,7 @@
"encoding": "^0.1.13",
"moment": "^2.29.4",
"next": "13.5.6",
"next-build-id": "^3.0.0",
"node-fetch-cache": "^3.1.3",
"react": "^18",
"react-country-flag": "^3.1.0",
@ -3411,6 +3412,14 @@
}
}
},
"node_modules/next-build-id": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/next-build-id/-/next-build-id-3.0.0.tgz",
"integrity": "sha512-B3JCsL/9Z/wkmo3EySukQHCgx89Aw0i4LPi2MEhCboQBJ6wpkYTIu1z6hOYKuw/S1Wy8ZRqCEq0dVY/ST6jGqg==",
"engines": {
"node": ">=8"
}
},
"node_modules/node-abi": {
"version": "3.51.0",
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.51.0.tgz",

1
package.json
View File

@ -15,6 +15,7 @@
"encoding": "^0.1.13",
"moment": "^2.29.4",
"next": "13.5.6",
"next-build-id": "^3.0.0",
"node-fetch-cache": "^3.1.3",
"react": "^18",
"react-country-flag": "^3.1.0",

8
src/app/player/[id]/page.tsx
View File

@ -96,7 +96,7 @@ export default function Player({ params }: { params: { id: string } }) {
return (
<main>
<Container>
<div className="mt-2 flex w-full flex-col justify-center rounded-sm bg-neutral-800">
<div className="mt-2 flex w-full flex-col justify-center rounded-md bg-gray-800">
<div className="p-3 text-center">
<div role="status">
{player.loading && <Spinner />}
@ -127,7 +127,7 @@ export default function Player({ params }: { params: { id: string } }) {
<main>
<Container>
{/* Player Info */}
<div className="mt-2 flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col">
<div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
<div className="flex flex-col items-center gap-3 p-3 xs:flex-row xs:items-start">
<Avatar url={playerData.profilePicture} label="Avatar" />
<div className="flex flex-col items-center gap-2 xs:items-start">
@ -184,7 +184,7 @@ export default function Player({ params }: { params: { id: string } }) {
</div>
{/* Scores */}
<div className="mt-2 flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col">
<div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
<div className="p-3">
{scores.loading ? (
<div className="flex justify-center">
@ -249,7 +249,7 @@ export default function Player({ params }: { params: { id: string } }) {
</div>
{/* Pagination */}
<div className="flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col">
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
<div className="p-3">
<Pagination
currentPage={scores.page}

2
src/app/search/page.tsx
View File

@ -12,7 +12,7 @@ export default function Home() {
return (
<main>
<Container>
<div className="mt-2 flex w-full flex-col items-center justify-center rounded-sm bg-neutral-800">
<div className="mt-2 flex w-full flex-col items-center justify-center rounded-md bg-gray-800">
<Avatar
className="m-6"
label="Player Avatar"

9
src/components/Container.tsx
View File

@ -1,11 +1,14 @@
import Footer from "./Footer";
import Navbar from "./Navbar";
export default function Container({ children }: { children: React.ReactNode }) {
return (
<>
<div className="m-auto flex flex-col items-center justify-center opacity-90 md:max-w-[1200px]">
<Navbar></Navbar>
{children}
<div className="m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
<Navbar />
<div className="w-full flex-1">{children}</div>
<Footer />
</div>
</>
);

44
src/components/Footer.tsx Normal file
View File

@ -0,0 +1,44 @@
import { isProduction } from "@/utils/utils";
const buttons = [
{
name: "Privacy",
url: "/privacy",
},
];
const buildId = process.env.NEXT_PUBLIC_BUILD_ID
? process.env.NEXT_PUBLIC_BUILD_ID.slice(0, 7) +
(isProduction() ? "" : "-dev")
: "";
export default function Footer() {
return (
<footer className="m-3 rounded-md bg-gray-800 text-gray-300">
<div className="m-3 flex flex-col items-center justify-center gap-1">
<div className="flex flex-row gap-3">
<p>Scoresaber Reloaded</p>
{buttons.map((button, index) => {
return (
<div
key={index}
className="flex flex-row items-center justify-center gap-3"
>
<div className="h-4 w-[1px] bg-neutral-100"></div>
<a
href={button.url}
className="transform-gpu transition-all hover:text-blue-500"
>
{button.name}
</a>
</div>
);
})}
</div>
<div className="text-sm text-gray-400">Build ID: {buildId}</div>
</div>
</footer>
);
}

6
src/components/Navbar.tsx
View File

@ -17,7 +17,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
return (
<div className="group">
<a
className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-sm p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-md p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
href={href}
>
<>
@ -27,7 +27,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
</a>
{children && (
<div className="absolute z-20 hidden divide-y rounded-sm bg-neutral-600 shadow-sm group-hover:flex">
<div className="absolute z-20 hidden divide-y rounded-md bg-neutral-600 shadow-sm group-hover:flex">
<div className="p-2">{children}</div>
</div>
)}
@ -38,7 +38,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
export default function Navbar() {
return (
<>
<div className="flex h-fit w-full rounded-sm bg-neutral-800">
<div className="flex h-fit w-full rounded-md bg-gray-800">
<NavbarButton text="Friends" icon={<UserIcon height={20} width={20} />}>
<p className="text-sm font-bold">No friends, add someone!</p>

4
src/components/SearchPlayer.tsx
View File

@ -54,14 +54,14 @@ export default function SearchPlayer() {
<div
className={clsx(
"absolute z-20 mt-7 flex min-w-[14rem] flex-col divide-y rounded-sm bg-neutral-700 shadow-sm",
"absolute z-20 mt-7 flex min-w-[14rem] flex-col divide-y rounded-md bg-neutral-700 shadow-sm",
players.length > 0 ? "flex" : "hidden",
)}
>
{players.map((player: ScoresaberPlayer) => (
<a
key={player.id}
className="flex min-w-[14rem] items-center gap-2 rounded-sm p-2 transition-all hover:bg-neutral-600"
className="flex min-w-[14rem] items-center gap-2 rounded-md p-2 transition-all hover:bg-neutral-600"
href={`/player/${player.id}`}
>
<Avatar label="Account" size={40} url={player.profilePicture} />

3
src/utils/utils.ts Normal file
View File

@ -0,0 +1,3 @@
export function isProduction() {
return process.env.NODE_ENV === "production";
}