This commit is contained in:
Michael Zhang 2024-05-14 17:03:59 -04:00
commit 60ea2d6510
15 changed files with 5240 additions and 0 deletions

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
node_modules
dist
certs

17
biome.json Normal file
View file

@ -0,0 +1,17 @@
{
"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
"organizeImports": {
"enabled": true
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}

10
index.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.tsx"></script>
</body>
</html>

36
package.json Normal file
View file

@ -0,0 +1,36 @@
{
"name": "DDRCompanion",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"type": "module",
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@biomejs/biome": "^1.7.3",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-basic-ssl": "^1.1.0",
"@vitejs/plugin-react-swc": "^3.6.0",
"sass": "^1.77.1",
"typescript": "^5.4.5",
"vite": "^5.2.11",
"vite-plugin-mkcert": "^1.17.5",
"vite-plugin-pwa": "^0.20.0"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.17",
"@mui/material": "^5.15.17",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^6.23.1",
"react-router-dom": "^6.23.1"
}
}

5022
pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load diff

11
src/App.module.scss Normal file
View file

@ -0,0 +1,11 @@
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}

73
src/App.tsx Normal file
View file

@ -0,0 +1,73 @@
import { BottomNavigation, BottomNavigationAction, Icon } from "@mui/material";
import LineWeightIcon from "@mui/icons-material/LineWeight";
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
import SettingsIcon from "@mui/icons-material/Settings";
import { useState } from "react";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
redirect,
useNavigate,
Outlet,
useMatches,
useMatch,
} from "react-router-dom";
import Charts from "./pages/Charts";
import styles from "./App.module.scss";
import Scores from "./pages/Scores";
import Settings from "./pages/Settings";
const router = createBrowserRouter([
{
path: "/",
element: <AppWrapper />,
children: [
{ path: "", loader: () => redirect("/charts") },
{ path: "charts", element: <Charts />, handle: { navId: 0 } },
{ path: "scores", element: <Scores />, handle: { navId: 1 } },
{ path: "settings", element: <Settings />, handle: { navId: 2 } },
],
},
]);
export function AppWrapper() {
const navigate = useNavigate();
const matches = useMatches();
const handle = matches.reduceRight(
// biome-ignore lint/performance/noAccumulatingSpread: <explanation>
(prev, curr) => ({ ...prev, ...curr.handle }),
{},
);
const navId = handle.navId ?? 0;
const urls = ["/charts", "/scores", "/settings"];
return (
<>
<div className={styles.container}>
<div className={styles.content}>
<Outlet />
</div>
<BottomNavigation
showLabels
value={navId}
onChange={(event, newValue) => {
navigate(urls[newValue]);
}}
>
<BottomNavigationAction label="Charts" icon={<ManageSearchIcon />} />
<BottomNavigationAction label="Scores" icon={<LineWeightIcon />} />
<BottomNavigationAction label="Settings" icon={<SettingsIcon />} />
</BottomNavigation>
</div>
</>
);
}
export default function App() {
return (
<>
<RouterProvider router={router} />
</>
);
}

8
src/global.scss Normal file
View file

@ -0,0 +1,8 @@
html,
body,
#root {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

12
src/index.tsx Normal file
View file

@ -0,0 +1,12 @@
import App from "./App";
import { createRoot } from "react-dom/client";
import { StrictMode } from "react";
import "./global.scss";
// biome-ignore lint/style/noNonNullAssertion: don't care
const el = document.getElementById("root")!;
createRoot(el).render(
<StrictMode>
<App />
</StrictMode>,
);

7
src/pages/Charts.tsx Normal file
View file

@ -0,0 +1,7 @@
export default function Charts() {
return (
<>
<h1>Charts</h1>
</>
);
}

7
src/pages/Scores.tsx Normal file
View file

@ -0,0 +1,7 @@
export default function Scores() {
return (
<>
<h1>Scores</h1>
</>
);
}

7
src/pages/Settings.tsx Normal file
View file

@ -0,0 +1,7 @@
export default function Settings() {
return (
<>
<h1>Settings</h1>
</>
);
}

3
tsconfig.json Normal file
View file

@ -0,0 +1,3 @@
{
"compilerOptions": { "jsx": "react-jsx" }
}

23
vite.config.ts Normal file
View file

@ -0,0 +1,23 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { VitePWA } from "vite-plugin-pwa";
import basicSsl from "@vitejs/plugin-basic-ssl";
export default defineConfig({
server: {
https: {},
},
plugins: [
react(),
VitePWA({ registerType: "autoUpdate" }),
basicSsl({
/** name of certification */
name: "test",
/** custom trust domains */
domains: ["*.custom.com"],
/** custom certification directory */
certDir: "/Users/.../.devServer/cert",
}),
],
});

1
vite.d.ts vendored Normal file
View file

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