Planspiele/PerfectMarketGame
Planspiele/PerfectMarketGame
1
0
Fork 0
Code Actions Packages

Integrated the round history in the End.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-11-22 12:14:07 +01:00
parent a67f2ba617
commit 46ed52f21d
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 87 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
client/src/pages/End/End.jsx
View File

@ -1,11 +1,13 @@
import "./styles.sass";
import {useContext, useEffect} from "react";
import {useContext, useEffect, useState} from "react";
import {socket} from "@/common/utils/socket.js";
import {GroupContext} from "@/common/contexts/GroupContext.jsx";
import Sound from "react-sound";
import ThemeSound from "@/common/sounds/end.mp3";
import {MusicContext} from "@/common/contexts/MusicContext.jsx";
import {Navigate} from "react-router";
import Button from "@/common/components/Button";
import {faArrowLeft, faArrowRight} from "@fortawesome/free-solid-svg-icons";
const localeOptions = {
style: "decimal",
@ -16,47 +18,107 @@ const localeOptions = {
export const End = () => {
const {groups, allGroups} = useContext(GroupContext);
const {groups, allGroups, roundHistory} = useContext(GroupContext);
const {musicEnabled} = useContext(MusicContext);
const [roundShown, setRoundShown] = useState(roundHistory.length + 1);
useEffect(() => {
socket.disconnect();
socket.connect();
}, []);
const nextRound = () => {
if (roundShown === roundHistory.length + 1) return;
setRoundShown(round => round + 1);
}
const prevRound = () => {
if (roundShown === 1) return;
setRoundShown(round => round - 1);
}
if (groups.length === 0 && allGroups.length === 0)
return <Navigate to="/"/>;
return (
<div className="end-page">
<Sound url={ThemeSound} playStatus={Sound.status.PLAYING} volume={musicEnabled ? 50 : 0} loop={true}/>
{[...groups, ...allGroups].sort((a, b) => b.capital - a.capital).map(group => (
<div key={group.id} className="glassy group">
<div className="group-item">
<p>Unternehmen</p>
<h2>{group.name}</h2>
</div>
<div className="group-item">
<p>Startkapital</p>
<h2>25.000 €</h2>
</div>
<div className="end-content">
<div className="end-header">
<h1>{roundShown === roundHistory.length + 1 ? "Endergebnis" : "Runde " + roundShown}</h1>
<div className="group-item">
<p>Gewinn/Verlust</p>
{group.capital - 25000 > 0 &&
<h2 className="group-green">+ {(group.capital - 25000)?.toLocaleString("de-DE", localeOptions)} €</h2>}
{group.capital - 25000 < 0 &&
<h2 className="group-red">- {(group.capital - 25000)?.toLocaleString("de-DE", localeOptions)} €</h2>}
{group.capital - 25000 === 0 && <h2>0 €</h2>}
</div>
<div className="group-item">
<p>Firmenwert</p>
<h2>{group.capital < 5000 ? "Pleite" : group.capital?.toLocaleString("de-DE", localeOptions) + " €"}</h2>
<div className="end-actions">
{roundShown !== 1 && <Button icon={faArrowLeft} onClick={prevRound}/>}
{roundShown !== roundHistory.length+1 && <Button icon={faArrowRight} onClick={nextRound} />}
</div>
</div>
))}
{roundShown !== roundHistory.length + 1 && roundHistory[roundShown - 1].sort((a, b) => b.capital - a.capital).map(r => (
<div key={r.id} className="glassy group">
<div className="group-item">
<p>Unternehmen</p>
<h2>{r.name}</h2>
</div>
<div className="group-item">
<p>Absatzpreis</p>
<h2>{r.price?.toLocaleString("de-DE", localeOptions)} €</h2>
</div>
<div className="group-item">
<p>Menge</p>
<h2>{r.amount} Kisten</h2>
</div>
<div className="group-item">
<p>Verkauft</p>
<h2>{r.sold} Kisten</h2>
</div>
<div className="group-item">
<p>Kapital
{r.profit > 0 && <span
className="group-green"> + {r.profit?.toLocaleString("de-DE", localeOptions)} €</span>}
{r.profit < 0 && <span
className="group-red"> - {r.profit?.toLocaleString("de-DE", localeOptions)} €</span>}
{r.profit === 0 && <span> (Unverändert)</span>}
</p>
<h2>{r.newCapital?.toLocaleString("de-DE", localeOptions)} €</h2>
</div>
</div>
))}
{roundShown === roundHistory.length + 1 && [...groups, ...allGroups].sort((a, b) => b.capital - a.capital).map(group => (
<div key={group.id} className="glassy group">
<div className="group-item">
<p>Unternehmen</p>
<h2>{group.name}</h2>
</div>
<div className="group-item">
<p>Startkapital</p>
<h2>25.000 €</h2>
</div>
<div className="group-item">
<p>Gewinn/Verlust</p>
{group.capital - 25000 > 0 &&
<h2 className="group-green">+ {(group.capital - 25000)?.toLocaleString("de-DE", localeOptions)} €</h2>}
{group.capital - 25000 < 0 &&
<h2 className="group-red">- {(group.capital - 25000)?.toLocaleString("de-DE", localeOptions)} €</h2>}
{group.capital - 25000 === 0 && <h2>0 €</h2>}
</div>
<div className="group-item">
<p>Firmenwert</p>
<h2>{group.capital < 5000 ? "Pleite" : group.capital?.toLocaleString("de-DE", localeOptions) + " €"}</h2>
</div>
</div>
))}
</div>
</div>
);
}