[components] Switched to react-router-dom

package.json

@@ -14,6 +14,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
+    "react-router-dom": "^6.1.1",
     "react-scripts": "4.0.3",
     "sass": "^1.43.4",
     "typescript": "^4.1.2",

src/App.tsx

-import React, { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import EndRunScreen from './components/EndRunScreen';
-import MultistageCardSelect from './components/MultistageCardSelect';
-import StatsDisplay from './components/StatsDisplay';
-import calc from './models/calc';
-import { Cards } from './models/Data';
-import filterCards from './models/filter';
-import { EndEffect } from './models/PlayableCard';
-import score from './models/score';
-import { AppState } from './store/reducer';
+import React, { FC } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { End } from './pages/End';
+import { Game } from './pages/Game';
+import { Menu } from './pages/Menu';
 import './styles/App.scss';
 
-
-type Page = "game" | "end";
-
-function App() {
-    const stats = useSelector((state: AppState) => state.stats);
-    const effects = useSelector((state: AppState) => state.current_effects);
-    const [page, setPage] = useState<Page>("game");
-    const dispatch = useDispatch();
-    const [shownEffects, setShownEffects] = useState<EndEffect[]>([{name: 'danger', value: 0, max: 1}, {name: 'difficulty', value: 0, max: 1}, {name: 'reputation', value: 0, max: 1}]);
-    const [scorr, setScore] = useState<number>(-1);
-
-    const onValidate = (val: number[]) => {
-        console.log(val);
-        dispatch({
-            type: "game/end",
-            effects: calc(val, Cards)
-        });
-        setPage("end");
-    }
-
-    const onChange = (val: number[]) => {
-        let effects = calc(val, Cards);
-        let scor = score(effects, stats.reputation);
-        setShownEffects(effects);
-        setScore(scor);
-
-        console.log(effects, scor);
-    }
-
-    let component = <></>;
-
-    switch (page) {
-        case "game":
-            component = <>
-                <MultistageCardSelect cards={filterCards(Cards, stats)} onValidate={onValidate} onChange={onChange} />
-                <div className="stats__right">
-                    <StatsDisplay effects={shownEffects} score={scorr}/>
-                </div>
-            </>;
-            break;
-        case "end":
-            component = <EndRunScreen run={1} effects={effects} />;
-            break;
-    }
-
+export const App: FC = () => {
     return (<div className="App">
-        {component}
+        <Routes>
+            <Route path="/" element={<Menu />} />
+            <Route path="game" element={<Game />} />
+            <Route path="end" element={<End />} />
+        </Routes>
     </div>);
 }
 

src/components/StatsDisplay.tsx

@@ -10,7 +10,7 @@ interface ProgressProps {
 const Progress: FC<ProgressProps> = ({ effect }: ProgressProps) => {
     return (
         <div style={{ display: "flex", marginBottom: "1rem", marginLeft: "1em", marginRight: "1em" }}>
-            <div style={{ width: "33%" }}>
+            <div style={{ width: "35%" }}>
                 {EffectTranslations[effect.name]}
             </div>
             <div style={{ width: "65%" }}>

src/index.tsx

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import appStore from './store/store';
 
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={appStore}>
-      <App />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </Provider>
   </React.StrictMode>,
   document.getElementById('root')

src/pages/End.tsx

+import React, { FC } from 'react';
+import { useSelector } from 'react-redux';
+import EndRunScreen from "../components/EndRunScreen";
+import { AppState } from '../store/reducer';
+
+export const End:FC = () => {
+    const stats = useSelector((state: AppState) => state.stats);
+    const effects = useSelector((state: AppState) => state.current_effects);
+    return (<>
+        <EndRunScreen run={stats.run} effects={effects} />
+    </>);
+};

src/pages/Game.tsx

+import React, { FC, useState } from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from 'react-router-dom';
+import MultistageCardSelect from "../components/MultistageCardSelect";
+import StatsDisplay from "../components/StatsDisplay";
+import calc from "../models/calc";
+import { Cards } from "../models/Data";
+import filterCards from "../models/filter";
+import { EndEffect } from "../models/PlayableCard";
+import score from "../models/score";
+import { AppState } from "../store/reducer";
+
+export const Game: FC = () => {
+    const stats = useSelector((state: AppState) => state.stats);
+    const effects = useSelector((state: AppState) => state.current_effects);
+    const [shownEffects, setShownEffects] = useState<EndEffect[]>(calc([], Cards));
+    const [scorr, setScore] = useState<number>(score(calc([], Cards), stats.reputation));
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+
+    const onValidate = (val: number[]) => {
+        console.log(val);
+        dispatch({
+            type: "game/end",
+            effects: calc(val, Cards)
+        });
+        navigate("/end");
+    }
+
+    const onChange = (val: number[]) => {
+        let effects = calc(val, Cards);
+        let scor = score(effects, stats.reputation);
+        setShownEffects(effects);
+        setScore(scor);
+
+        console.log(effects, scor);
+    }
+
+    return (<>
+        <MultistageCardSelect cards={filterCards(Cards, stats)} onValidate={onValidate} onChange={onChange} />
+        <div className="stats__right">
+            <StatsDisplay effects={shownEffects} score={scorr}/>
+        </div>
+    </>);
+};

src/pages/Menu.tsx

+import React, { FC } from "react";
+import { useNavigate } from 'react-router-dom';
+import Button from "../components/Button";
+
+export const Menu: FC = () => {
+    const navigate = useNavigate();
+
+    return (<>
+        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", height: "100vh" }}>
+            <div style={{ fontSize: "72px", marginBottom: "1em" }}>
+                XTremTrail
+            </div>
+            <div style={{ marginTop: "3em" }}>
+                <Button bordered={false} variation="success" onClick={() => navigate("/game")}>Jouer</Button>
+            </div>
+        </div>
+    </>);
+}

src/store/reducer.ts

@@ -10,8 +10,8 @@ interface AppState {
 
 const initialState: AppState = {
     stats: {
-        run: 10,
-        reputation: 500
+        run: 0,
+        reputation: 10
     },
     current_effects: []
 };

yarn.lock

@@ -1105,7 +1105,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
-"@babel/runtime@^7.15.4":
+"@babel/runtime@^7.15.4", "@babel/runtime@^7.7.6":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
   integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
@@ -5842,6 +5842,13 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+history@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.1.0.tgz#2e93c09c064194d38d52ed62afd0afc9d9b01ece"
+  integrity sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -9786,6 +9793,21 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
+react-router-dom@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.1.1.tgz#ed59376ff9115bc49227e87982a32e91e9530ca3"
+  integrity sha512-O3UH89DI4o+swd2q6lF4dSmpuNCxwkUXcj0zAFcVc1H+YoPE6T7uwoFMX0ws1pUvCY8lYDucFpOqCCdal6VFzg==
+  dependencies:
+    history "^5.1.0"
+    react-router "6.1.1"
+
+react-router@6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.1.1.tgz#16f41bf54e87d995bcd4d447720a693f77d8fcb9"
+  integrity sha512-55o96RiDZmC0uD17DPqVmzzfdNd2Dc+EjkYvMAmHl43du/GItaTdFr5WwjTryNWPXZ+OOVQxQhwAX25UwxpHtw==
+  dependencies:
+    history "^5.1.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"