From 6bfe12cc42bca1602c2abeb8aeddbe7f563c3171 Mon Sep 17 00:00:00 2001 From: mileswa1q22 Date: Thu, 2 Apr 2026 16:43:16 -0500 Subject: [PATCH] Add React Router for navigation and update dependencies --- app/package-lock.json | 86 ++++++++++---- app/package.json | 3 +- app/src/App.jsx | 270 ++++++++++++++++++++++-------------------- 3 files changed, 201 insertions(+), 158 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index dbc6c8d..e926ec6 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^19.2.4", - "react-dom": "^19.2.4" + "react-dom": "^19.2.4", + "react-router-dom": "^7.14.0" }, "devDependencies": { "@eslint/js": "^9.39.4", @@ -264,31 +265,6 @@ "node": ">=6.9.0" } }, - "node_modules/@emnapi/core": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz", - "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@emnapi/wasi-threads": "1.2.1", - "tslib": "^2.4.0" - } - }, - "node_modules/@emnapi/runtime": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz", - "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/@emnapi/wasi-threads": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", @@ -1134,6 +1110,19 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2247,6 +2236,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -2254,6 +2244,44 @@ "react": "^19.2.4" } }, + "node_modules/react-router": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz", + "integrity": "sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.0.tgz", + "integrity": "sha512-2G3ajSVSZMEtmTjIklRWlNvo8wICEpLihfD/0YMDxbWK2UyP5EGfnoIn9AIQGnF3G/FX0MRbHXdFcD+rL1ZreQ==", + "license": "MIT", + "dependencies": { + "react-router": "7.14.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2321,6 +2349,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/app/package.json b/app/package.json index 80f61b9..3f7442e 100644 --- a/app/package.json +++ b/app/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^19.2.4", - "react-dom": "^19.2.4" + "react-dom": "^19.2.4", + "react-router-dom": "^7.14.0" }, "devDependencies": { "@eslint/js": "^9.39.4", diff --git a/app/src/App.jsx b/app/src/App.jsx index 6b7863a..40ca794 100644 --- a/app/src/App.jsx +++ b/app/src/App.jsx @@ -1,138 +1,146 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from './assets/vite.svg' -import heroImg from './assets/hero.png' import './App.css' +import { BrowserRouter, Routes, Route, Link } from 'react-router-dom' + +const SiteHeader = () => ( +
+

FEDL - Ranked Demon List

+ +
+) + +const HomePage = () => ( +
+
+
+

FEDL Hub

+

Track ranked demons, learn submission rules, and master the challenge.

+

A quick homepage with action buttons to all sections.

+
+ Open The List + Play Guess Game + Submit A Run + Submission Rules + Spin Roulette +
+
+
+
+
+
+ 📱 +
+

Download

+

FEDL App (Coming Soon)

+
+
+

Mobile/desktop app is in progress. This is the React conversion of the site.

+
+
+ +
+
+
+) + +const GuessPage = () => ( +
+
+
+

Guess The Rank

+

Placeholder page: game logic is from old app.js if needed after port.

+
+
+
+) + +const PlayersPage = () => ( +
+
+

Players

+

Player tracking interface (placeholder).

+
+
+) + +const ListsPage = () => ( +
+
+

FEDL Ranked List

+

Full demon list content (placeholder).

+
+
+) + +const RunPage = () => ( +
+
+

Submit Run

+

Run submission form is ported here. Inputs are currently disabled.

+
+
+) + +const RulesPage = () => ( +
+
+

Submission Rules

+

All current FEDL rules are visible in the site style.

+
+
+) + +const RoulettePage = () => ( +
+
+

Demon Roulette

+

Random demon draw - logic to be implemented.

+
+
+) + +const AdminPage = () => ( +
+
+

Admin login

+

Admin features are available once backend auth is connected.

+
+
+) + +const NotFoundPage = () => ( +
+

404 - Page not found

+

Return Home.

+
+) function App() { - const [count, setCount] = useState(0) - return ( - <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.jsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
- -
-
-
- -
-

Download

-

FEDL App (Coming Soon)

-
-
-

A mobile and desktop companion is on the way. Stay tuned for the FEDL app release with fast access to ranked demons, quick roulette spins, and submission tools.

-
-
- -
-
- -
-
- + + +
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ ) }