refactor: rules

3 files changed, 42 insertions, 0 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 095cbbe..3980e1b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -11,6 +11,7 @@ import Maps from './pages/Maps';
 import User from './pages/User';
 import Homepage from './pages/Homepage';
 import UploadRunDialog from './components/UploadRunDialog';
+import Rules from './pages/Rules';
 import About from './pages/About';
 import { Game } from './types/Game';
 import { API } from './api/Api';
@@ -59,6 +60,7 @@ const App: React.FC = () => {
         <Route path="/games" element={<Games games={games} />} />
         <Route path='/games/:id' element={<Maplist />}></Route>
         <Route path="/maps/*" element={<Maps profile={profile} isModerator={isModerator} onUploadRun={(mapID) => {setUploadRunDialog(true);setUploadRunDialogMapID(mapID)}} />}/>
+        <Route path="/rules" element={<Rules />} />
         <Route path="/about" element={<About />} />
         <Route path='/rankings' element={<Rankings></Rankings>}></Route>
         <Route path="*" element={"404"} />
diff --git a/frontend/src/css/Rules.css b/frontend/src/css/Rules.css
new file mode 100644
index 0000000..bbc84c0
--- /dev/null
+++ b/frontend/src/css/Rules.css
@@ -0,0 +1,3 @@
+main {
+    font-size: 24px;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
new file mode 100644
index 0000000..516b73c
--- /dev/null
+++ b/frontend/src/pages/Rules.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import '../css/Rules.css';
+
+const Rules: React.FC = () => {
+
+    const [rulesText, setRulesText] = React.useState<string>("");
+
+    React.useEffect(() => {
+        const fetchRules = async () => {
+            try {
+                const response = await fetch(
+                    'https://raw.githubusercontent.com/pektezol/leastportalshub/main/README.md'
+                );
+                if (!response.ok) {
+                    throw new Error('Failed to fetch README');
+                }
+                const rulesText = await response.text();
+                setRulesText(rulesText);
+            } catch (error) {
+                console.error('Error fetching Rules:', error);
+            }
+            setRulesText(rulesText)
+        };
+        fetchRules();
+    }, []);
+
+
+    return (
+        <main>
+            <ReactMarkdown>{rulesText}</ReactMarkdown>
+        </main>
+    );
+};
+
+export default Rules;