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

Integrated music in the Calculate.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-11-19 15:13:22 +01:00
parent b78aed6502
commit 2e1ede00cf
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,10 @@ 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 {faShoppingCart} from "@fortawesome/free-solid-svg-icons"; import {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";
const localeOptions = { const localeOptions = {
style: "decimal", style: "decimal",
@ -16,6 +20,8 @@ export const Calculate = ({setState}) => {
const [animatedGroups, setAnimatedGroups] = useState([]); const [animatedGroups, setAnimatedGroups] = useState([]);
const {musicEnabled} = useContext(MusicContext);
const [nachfrage, setNachfrage] = useState(0); const [nachfrage, setNachfrage] = useState(0);
const animateNext = () => { const animateNext = () => {
@ -29,12 +35,9 @@ export const Calculate = ({setState}) => {
setAnimatedGroups(old => [...old, {...current, profit, name: getGroupById(current.id).name}]); setAnimatedGroups(old => [...old, {...current, profit, name: getGroupById(current.id).name}]);
console.log(current.id, getGroupById(current.id).capital, profit);
updateCapital(current.id, getGroupById(current.id).capital + profit); updateCapital(current.id, getGroupById(current.id).capital + profit);
} }
useEffect(() => { useEffect(() => {
if (round.length === 0) { if (round.length === 0) {
endRound(); endRound();
@ -51,7 +54,7 @@ export const Calculate = ({setState}) => {
useEffect(() => { useEffect(() => {
let avg = 0; let avg = 0;
round.forEach(r => avg += r.amount); round.forEach(r => avg += r.price);
avg /= round.length; avg /= round.length;
setNachfrage(avg < 1800 ? 50 : avg > 2200 ? 30 : 40); setNachfrage(avg < 1800 ? 50 : avg > 2200 ? 30 : 40);
@ -60,11 +63,17 @@ export const Calculate = ({setState}) => {
return ( return (
<div className="calculate-state"> <div className="calculate-state">
<div className="calculate-container"> <div className="calculate-container">
{animatedGroups.length === 0 && <h2 className="hint">Die Kuchen werden verkauft...</h2>} {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) => { {animatedGroups.map((r, i) => {
return ( return (
<div key={i} className="glassy round"> <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"> <div className="round-item">
<p>Unternehmen</p> <p>Unternehmen</p>
<h2>{r.name}</h2> <h2>{r.name}</h2>