Planspiele/PerfectMarketGame
1
0
Fork 0
Code Actions Packages Activity

Integrated the end state in the Calculate.jsx

Browse Source
This commit is contained in:
Mathias Wagner
2023-11-21 10:36:37 +01:00
parent b4190464e5
commit 79f8a262dd
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,14 @@ import "./styles.sass";
import {GroupContext} from "@/common/contexts/GroupContext.jsx"; import {GroupContext} from "@/common/contexts/GroupContext.jsx";
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faForward, faShoppingCart} from "@fortawesome/free-solid-svg-icons"; import {faForward, faShoppingCart, faStop} from "@fortawesome/free-solid-svg-icons";
import InterfaceSound from "@/common/sounds/interface.mp3"; import InterfaceSound from "@/common/sounds/interface.mp3";
import Sound from "react-sound"; import Sound from "react-sound";
import {MusicContext} from "@/common/contexts/MusicContext.jsx"; import {MusicContext} from "@/common/contexts/MusicContext.jsx";
import BeginSound from "@/common/sounds/begin.mp3"; import BeginSound from "@/common/sounds/begin.mp3";
import Button from "@/common/components/Button"; import Button from "@/common/components/Button";
import {SettingsContext} from "@/common/contexts/SettingsProvider.jsx";
import {useNavigate} from "react-router";
const localeOptions = { const localeOptions = {
style: "decimal", style: "decimal",
@ -16,9 +18,13 @@ const localeOptions = {
signDisplay: "never" signDisplay: "never"
} }
export const Calculate = ({setState}) => { export const Calculate = ({setState, currentRound}) => {
const {round, getGroupById, updateCapital, endRound} = useContext(GroupContext); const {round, getGroupById, updateCapital, endRound} = useContext(GroupContext);
const {rounds} = useContext(SettingsContext);
const navigate = useNavigate();
const [animatedGroups, setAnimatedGroups] = useState([]); const [animatedGroups, setAnimatedGroups] = useState([]);
const {musicEnabled} = useContext(MusicContext); const {musicEnabled} = useContext(MusicContext);
@ -83,6 +89,9 @@ export const Calculate = ({setState}) => {
<div className="calculate-state-inner"> <div className="calculate-state-inner">
<div className="calculate-container"> <div className="calculate-container">
<div className="glassy current-round">
<h2>Runde {currentRound}</h2>
</div>
{animatedGroups.length === 0 && <> {animatedGroups.length === 0 && <>
<Sound url={BeginSound} playStatus={Sound.status.PLAYING} volume={musicEnabled ? 60 : 0} loop={false}/> <Sound url={BeginSound} playStatus={Sound.status.PLAYING} volume={musicEnabled ? 60 : 0} loop={false}/>
<h2 className="hint">Die Kuchen werden verkauft...</h2> <h2 className="hint">Die Kuchen werden verkauft...</h2>
@ -130,7 +139,10 @@ export const Calculate = ({setState}) => {
</div> </div>
) )
})} })}
{showNewCapital && <Button text="Nächste Runde" onClick={() => setState("waiting")} icon={faForward}/>} <div className="button-area">
{showNewCapital && <Button text="Nächste Runde" onClick={() => setState("waiting")} icon={faForward}/>}
{showNewCapital && currentRound >= rounds && <Button text="Spiel beenden" onClick={() => navigate("/end")} icon={faStop}/>}
</div>
</div> </div>
<div className="glassy customer" style={{marginTop: (6.2 * animatedGroups.length) + "rem"}}> <div className="glassy customer" style={{marginTop: (6.2 * animatedGroups.length) + "rem"}}>
<FontAwesomeIcon icon={faShoppingCart} /> <FontAwesomeIcon icon={faShoppingCart} />