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

Updated the Calculate.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-11-20 21:17:52 +01:00
parent 46b3f5952b
commit e87356b27a
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 75 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
client/src/pages/Game/states/Calculate/Calculate.jsx
View File

@ -2,11 +2,12 @@ import "./styles.sass";
import {GroupContext} from "@/common/contexts/GroupContext.jsx";
import {useContext, useEffect, useState} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faShoppingCart} from "@fortawesome/free-solid-svg-icons";
import {faForward, faShoppingCart} from "@fortawesome/free-solid-svg-icons";
import InterfaceSound from "@/common/sounds/interface.mp3";
import Sound from "react-sound";
import {MusicContext} from "@/common/contexts/MusicContext.jsx";
import BeginSound from "@/common/sounds/begin.mp3";
import Button from "@/common/components/Button";
const localeOptions = {
style: "decimal",
@ -23,6 +24,7 @@ export const Calculate = ({setState}) => {
const {musicEnabled} = useContext(MusicContext);
const [nachfrage, setNachfrage] = useState(0);
const [showNewCapital, setShowNewCapital] = useState(false);
const animateNext = () => {
const current = round.shift();
@ -33,7 +35,8 @@ export const Calculate = ({setState}) => {
let profit = sold * current.price - (current.amount * 1000 + 4000);
setAnimatedGroups(old => [...old, {...current, profit, name: getGroupById(current.id).name}]);
setAnimatedGroups(old => [...old, {...current, profit, name: getGroupById(current.id).name, sold,
newCapital: getGroupById(current.id).capital + profit}]);
updateCapital(current.id, getGroupById(current.id).capital + profit);
}
@ -41,7 +44,6 @@ export const Calculate = ({setState}) => {
useEffect(() => {
if (round.length === 0) {
endRound();
setTimeout(() => setState("waiting"), 8000);
return;
}
@ -52,10 +54,25 @@ export const Calculate = ({setState}) => {
return () => clearTimeout(timeout);
}, [animatedGroups]);
useEffect(() => {
if (animatedGroups.length === 0) return;
const timeout = setTimeout(() => {
setShowNewCapital(true);
}, 3000);
return () => clearTimeout(timeout);
}, [round]);
useEffect(() => {
let avg = 0;
round.forEach(r => avg += r.price);
avg /= round.length;
let amount = 0;
round.forEach(r => {
avg += r.price * r.amount;
amount += parseInt(r.amount);
});
avg /= amount;
setNachfrage(avg < 1800 ? 50 : avg > 2200 ? 30 : 40);
setAnimatedGroups([]);
@ -64,49 +81,65 @@ export const Calculate = ({setState}) => {
return (
<div className="calculate-state">
<div className="calculate-container">
{animatedGroups.length === 0 && <>
<Sound url={BeginSound} playStatus={Sound.status.PLAYING} volume={musicEnabled ? 60 : 0} loop={false}/>
<h2 className="hint">Die Kuchen werden verkauft...</h2>
</>}
{animatedGroups.map((r, i) => {
return (
<div key={i} className="glassy round">
{animatedGroups.length - 1 === i && musicEnabled &&
<Sound url={InterfaceSound} playStatus={Sound.status.PLAYING} volume={50} loop={false}/>}
<div className="round-item">
<p>Unternehmen</p>
<h2>{r.name}</h2>
</div>
<div className="calculate-state-inner">
<div className="calculate-container">
{animatedGroups.length === 0 && <>
<Sound url={BeginSound} playStatus={Sound.status.PLAYING} volume={musicEnabled ? 60 : 0} loop={false}/>
<h2 className="hint">Die Kuchen werden verkauft...</h2>
</>}
{animatedGroups.map((r, i) => {
return (
<div key={i} className="glassy round">
{animatedGroups.length - 1 === i && musicEnabled &&
<Sound url={InterfaceSound} playStatus={Sound.status.PLAYING} volume={50} loop={false}/>}
<div className="round-item">
<p>Unternehmen</p>
<h2>{r.name}</h2>
</div>
<div className="round-item">
<p>Absatzpreis</p>
<h2>{r.price?.toLocaleString("de-DE", localeOptions)} €</h2>
</div>
<div className="round-item">
<p>Absatzpreis</p>
<h2>{r.price?.toLocaleString("de-DE", localeOptions)} €</h2>
</div>
<div className="round-item">
<p>Menge</p>
<h2>{r.amount} Kisten</h2>
</div>
<div className="round-item">
<p>Menge</p>
<h2>{r.amount} Kisten</h2>
</div>
<div className="round-item">
<p>Gewinn/Verlust</p>
{r.profit > 0 && <h2 className="round-green">+ {r.profit?.toLocaleString("de-DE", localeOptions)} €</h2>}
{r.profit < 0 && <h2 className="round-red">- {r.profit?.toLocaleString("de-DE", localeOptions)} €</h2>}
{r.profit === 0 && <h2>0 €</h2>}
<div className="round-item">
<p>Verkauft</p>
<h2>{r.sold} Kisten</h2>
</div>
{!showNewCapital && <div className="round-item">
<p>Gewinn/Verlust</p>
{r.profit > 0 && <h2 className="round-green">+ {r.profit?.toLocaleString("de-DE", localeOptions)} €</h2>}
{r.profit < 0 && <h2 className="round-red">- {r.profit?.toLocaleString("de-DE", localeOptions)} €</h2>}
{r.profit === 0 && <h2>0 €</h2>}
</div>}
{showNewCapital && <div className="round-item">
<p>Kapital
{r.profit > 0 && <span className="round-green"> + {r.profit?.toLocaleString("de-DE", localeOptions)} €</span>}
{r.profit < 0 && <span className="round-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>
</div>
)
})}
</div>
<div className="glassy customer" style={{marginTop: (6.2 * animatedGroups.length) + "rem"}}>
<FontAwesomeIcon icon={faShoppingCart} />
<div className="customer-item">
<p>Nachfrage</p>
<h2 className="round-green">{nachfrage}</h2>
)
})}
{showNewCapital && <Button text="Nächste Runde" onClick={() => setState("waiting")} icon={faForward}/>}
</div>
<div className="glassy customer" style={{marginTop: (6.2 * animatedGroups.length) + "rem"}}>
<FontAwesomeIcon icon={faShoppingCart} />
<div className="customer-item">
<p>Nachfrage</p>
<h2 className="round-green">{nachfrage}</h2>
</div>
</div>
</div>
</div>
);
}