Unverified Commit a37bff3f authored by Maxime FRIESS's avatar Maxime FRIESS 💙
Browse files

[components] Switched to react-router-dom

parent a91c7d0d
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>);
}
......
......@@ -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%" }}>
......
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')
......
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} />
</>);
};
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>
</>);
};
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>
</>);
}
......@@ -10,8 +10,8 @@ interface AppState {
const initialState: AppState = {
stats: {
run: 10,
reputation: 500
run: 0,
reputation: 10
},
current_effects: []
};
......
......@@ -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"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment