This commit is contained in:
McMistrzYT 2024-01-20 23:32:53 +01:00
commit 9e4f611858
24 changed files with 5343 additions and 0 deletions

18
.eslintrc.cjs Normal file
View File

@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

26
.gitignore vendored Normal file
View File

@ -0,0 +1,26 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.private.*

30
README.md Normal file
View File

@ -0,0 +1,30 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

View File

@ -0,0 +1,17 @@
{
"Name": "Dubidubidu",
"Year": 2003,
"Artist": "Christell",
"Length": 224,
"UUID": "runit",
"PreviewTime": 0,
"MinorMajor": "Minor",
"Key": "A",
"Album": "Christell",
"GuitarType": "Keytar",
"BeatsPerMinute": 145,
"AssetID": "SID_Placeholder_59",
"JoinCode": "0000-0000-0000",
"LipsyncData": "https://cdn2.unrealengine.com/saveyourtears-3b556f295b86.lad",
"Cover": "https://steamuserimages-a.akamaihd.net/ugc/2319980071298431643/13F80F955F3612EF407370E522ABA956D690374E/?imw=512&&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false"
}

26
index.html Normal file
View File

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.webp" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet">
<link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="goku doing party party emote fortnite" property="og:title" />
<meta content="party party party party" property="og:description" />
<meta content="https://partypack.mcthe.dev" property="og:url" />
<meta content="#FFC300" data-react-helmet="true" name="theme-color" />
<title>Partypack</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

4944
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

39
package.json Normal file
View File

@ -0,0 +1,39 @@
{
"name": "snippets",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"create": "mkdir ./Out && npm run build && mv ./dist ./Out/dist && cd Server && tsc && cd .. && cp ./Server/.env ./Out && cp ./Server/package.json ./Out && cp ./Server/package-lock.json ./Out",
"publish": "npm run create && ssh mc \"cd /home/PartypackProd; rm -rf ./Out\" && scp -r ./Out mc:/home/PartypackProd && ssh mc \"cd /home/PartypackProd/Out; npm i; pm2 restart PartypackProd --update-env\" && rm -rf ./Out",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@primer/react": "^36.5.0",
"axios": "^1.6.5",
"deepmerge": "^4.3.1",
"node-watch": "^0.7.4",
"react": "^18.2.0",
"react-cookie": "^7.0.1",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",
"react-toastify": "^9.1.3",
"styled-components": "^5.3.11"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"sass": "^1.69.7",
"typescript": "^5.2.2",
"vite": "^5.0.8"
}
}

BIN
public/favicon.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

45
src/App.tsx Normal file
View File

@ -0,0 +1,45 @@
import { ToastContainer } from "react-toastify";
import { BaseStyles, ThemeProvider, theme } from "@primer/react";
import { SiteHeader } from "./components/SiteHeader";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { CookiesProvider } from "react-cookie";
import { Home } from "./routes/Home";
import { AdminTrackList } from "./routes/AdminTrackList";
import { AdminHome } from "./routes/AdminHome";
import { AdminLogin } from "./routes/AdminLogin";
import { VerifyAdmin } from "./components/VerifyAdmin";
import merge from "deepmerge";
import "react-toastify/dist/ReactToastify.css";
import "./css/index.css";
const DefaultTheme = merge(theme, {}); // we'll use this!! eventually!!!
function App() {
return (
<ThemeProvider colorMode="dark" theme={DefaultTheme}>
<BaseStyles>
<div>
<CookiesProvider />
<ToastContainer theme="dark" position="bottom-right" draggable={false} pauseOnHover={false} pauseOnFocusLoss={false} />
<BrowserRouter>
<SiteHeader />
<div className="content">
<Routes>
{/* User-accessible routes */}
<Route path="/" element={<Home />} />
{/* Admin routes */}
<Route path="/admin/login" element={<AdminLogin />} />
<Route path="/admin" element={<VerifyAdmin><AdminHome /></VerifyAdmin>} />
<Route path="/admin/tracks" element={<VerifyAdmin><AdminTrackList /></VerifyAdmin>} />
</Routes>
</div>
</BrowserRouter>
</div>
</BaseStyles>
</ThemeProvider>
);
}
export default App;

BIN
src/assets/favicon.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

View File

@ -0,0 +1,26 @@
import { Header } from "@primer/react";
import { useCookies } from "react-cookie";
import Favicon from "../assets/favicon.webp";
import { useNavigate } from "react-router-dom";
export function SiteHeader() {
const [cookies] = useCookies();
const navigate = useNavigate();
return (
<Header>
<Header.Item sx={{ cursor: "pointer" }} onClick={() => navigate("/")}>
<img src={Favicon} style={{ width: 32, height: "auto", paddingRight: 5 }} />
<b>Partypack</b>
</Header.Item>
<Header.Item sx={{ cursor: "pointer" }}>Daily Rotation</Header.Item>
<Header.Item sx={{ cursor: "pointer" }}>Leaderboards</Header.Item>
<Header.Item sx={{ cursor: "pointer" }}>Tracks</Header.Item>
<Header.Item sx={{ cursor: "pointer" }}>Tutorials</Header.Item>
<Header.Item sx={{ cursor: "pointer" }}>FAQ</Header.Item>
<Header.Item sx={{ cursor: "pointer" }} onClick={() => window.open("https://discord.gg/KaxknAbqDS")}>Discord</Header.Item>
<Header.Item sx={{ cursor: "pointer", color: "accent.emphasis" }}>Download</Header.Item>
{ cookies["AdminKey"] ? <Header.Item onClick={() => navigate("/admin")} sx={{ cursor: "pointer", color: "danger.emphasis" }}>Admin</Header.Item> : <></> }
</Header>
);
}

View File

@ -0,0 +1,11 @@
import { useCookies } from "react-cookie";
import { Navigate } from "react-router-dom";
export function VerifyAdmin({ children }: { children: JSX.Element }) {
const [cookies] = useCookies();
if (!cookies["AdminKey"])
return <Navigate to="/admin/login" replace />;
return children;
}

3
src/css/index.css Normal file
View File

@ -0,0 +1,3 @@
.content {
padding: 10px;
}

9
src/main.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

27
src/routes/AdminHome.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Box, Text } from "@primer/react";
import { PageHeader } from "@primer/react/drafts";
import { useEffect, useState } from "react";
import { VerifyAdminKey } from "../utils/AdminUtil";
import { useCookies } from "react-cookie";
export function AdminHome() {
const [keyValid, setKeyValid] = useState(false);
const [cookies] = useCookies();
useEffect(() => {
(async() => setKeyValid((await VerifyAdminKey(cookies["AdminKey"])).Success))();
}, [cookies]);
return (
<Box>
<PageHeader>
<PageHeader.TitleArea>
<PageHeader.Title>Partypack Admin Management Panel</PageHeader.Title>
</PageHeader.TitleArea>
<PageHeader.Description>
Your admin key is { keyValid ? <Text sx={{ color: "accent.emphasis" }}>VALID</Text> : <Text sx={{ color: "danger.emphasis" }}>INVALID</Text> }
</PageHeader.Description>
</PageHeader>
</Box>
)
}

46
src/routes/AdminLogin.tsx Normal file
View File

@ -0,0 +1,46 @@
import { Box, Button, Text, TextInput } from "@primer/react";
import { useRef, useState } from "react";
import { VerifyAdminKey } from "../utils/AdminUtil";
import { useCookies } from "react-cookie";
import { useNavigate } from "react-router-dom";
export function AdminLogin() {
const [errorMessage, setErrorMessage] = useState("");
const [success, setSuccess] = useState(false);
const [_, setCookie, removeCookie] = useCookies();
const navigate = useNavigate();
const KeyInputRef = useRef<HTMLInputElement>(null);
return (
<Box>
<center>
<Text>Provide the top secret admin key defined in the environment below:</Text><br />
<TextInput ref={KeyInputRef} size="large" sx={{ minWidth: 400, maxWidth: 600 }} monospace={true} validationStatus={success ? "success" : "error"} />
<Button variant="primary" onClick={
async () => {
const Key = KeyInputRef.current!.value;
const Result = await VerifyAdminKey(Key);
setSuccess(Result.Success);
setErrorMessage(Result.Message);
const D = new Date();
D.setUTCHours(D.getUTCHours() + 4);
if (Result.Success)
{
setCookie("AdminKey", Key, { expires: D });
navigate("/admin");
return;
}
removeCookie("AdminKey");
}
}>Log in</Button>
{
errorMessage !== "" ? (
<Text sx={{ color: success ? "primary.emphasis" : "danger.emphasis" }}>{errorMessage}</Text>
) : <></>
}
</center>
</Box>
)
}

View File

@ -0,0 +1,9 @@
import { Text } from "@primer/react";
export function AdminTrackList() {
return (
<>
<Text>Track list</Text>
</>
)
}

11
src/routes/Home.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Box } from "@primer/react";
export function Home() {
return (
<>
<Box>
</Box>
</>
)
}

6
src/utils/AdminUtil.ts Normal file
View File

@ -0,0 +1,6 @@
import { AxInstance } from "./Requests";
export async function VerifyAdminKey(Key: string): Promise<{ Success: boolean; Message: string; }> {
const { status, data } = await AxInstance.post("/admin/api/key", { Key });
return { Success: status === 200, Message: data };
}

7
src/utils/Requests.ts Normal file
View File

@ -0,0 +1,7 @@
import axios from "axios";
// TODO: grab this data from somewhere idk
axios.defaults.baseURL = import.meta.env.DEV ? "http://localhost:6677" : "https://partypack.mcthe.dev";
axios.defaults.withCredentials = true
axios.defaults.validateStatus = () => true;
export const AxInstance = axios.create();

1
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

25
tsconfig.json Normal file
View File

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
tsconfig.node.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})