Issue
So the problem I am running into is passing the press of the start button to my dice.js function to denote to my dice.js to run both mortalWoundDecider and objectiveDecider functions.
Footer.js which holds buttons:
import "./../App.css";
import TextField from '@mui/material/TextField';
import { IconButton, ButtonGroup, Button } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';
import Box from '@mui/material/Box';
import Body from './Body.js';
function Footer () {
//Constants and States
let [round, setRound] = useState(0);
let [objecitveValue, setObjectiveValue] = useState(0);
let [passedValue, setPassedValue] = useState({objective: 0, roundValue: 0});
const changeState = () => {
setPassedValue({objective: objecitveValue, roundValue: round});
};
//Functions for Incrementing and Decrementing Rounds
function incrementRound() {
round = round + 1;
setRound(round);
}
function decrementRound() {
if(round === 0){
round = 0;
setRound(round);
}
else{
round = round - 1;
setRound(round);
}
}
//Clear Function to run on reset
function clear(){
setObjectiveValue(0);
setRound(0);
setPassedValue({objective: 0, roundValue: 0})
}
//Buttons that are stacked for round addition and subtraction as well as start and reset
const buttons = [
<IconButton aria-label="add" size="small" onClick={() => incrementRound()}>
<AddIcon fontSize="inherit" />
</IconButton>,
<IconButton aria-label="remove" size="small" onClick={() => decrementRound()}>
<RemoveIcon fontSize="inherit" />
</IconButton>,
];
const buttons2 = [
<Button variant="text" color="success" onClick={() => {changeState()}}>Start</Button>,
<Button variant="text" color="error" onClick={() => {clear()}}>Reset</Button>
];
return (
<div>
<div class="App-body">
<Body objective={passedValue.objective} roundValue={passedValue.roundValue}/>
</div>
<div class="App-footer">
<Box sx={{ width: 1 }}>
<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
<Box gridColumn="span 9">
</Box>
<Box gridColumn="span 1">
<TextField
id="outlined-number"
label="Number of Objectives"
type="number"
InputLabelProps={{
shrink: true,
}}
variant="standard"
sx={{float: "left", marginTop: "12px"}}
onChange={(newValue) => setObjectiveValue(newValue.target.value)}
value = {objecitveValue}
/>
</Box>
<Box gridColumn="span 1">
<ButtonGroup
orientation="vertical"
aria-label="vertical contained button group"
variant="text"
sx={{float: "left"}}
>
{buttons2}
</ButtonGroup>
</Box>
<Box gridColumn="span 1">
</Box>
<Box gridColumn="span 9">
</Box>
<Box gridColumn="span 1">
<h4 className='vertical-center' style={{textAlign: "left", bottom: "58px"}}>Round: {round}</h4>
</Box>
<Box gridColumn="span 1">
<ButtonGroup
orientation="vertical"
aria-label="vertical contained button group"
variant="text"
sx={{float: "left"}}
>
{buttons}
</ButtonGroup>
</Box>
<Box gridColumn="span 1">
</Box>
</Box>
</Box>
</div>
</div>
);
}
export default Footer;
Dice.js which handles all the logic of Dice
import React from 'react';
//import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Divider from '@mui/material/Divider';
function Dice(props) {
//Variables needed for Dice Function
const min = 1;
const max = 6;
const objectiveNumber = props.objective;
const roundNumber = props.roundNum;
let passedObjectives = [];
let mortalWoundRoll = [];
function diceRoll(){
return Math.floor(min + Math.random() * (max - min));
};
function objectiveDecider(){
for(var i = 0; i < objectiveNumber; i++){
let currentDice= diceRoll();
if(currentDice>=5){
passedObjectives.push(i);
}
else{
};
};
}
function mortalWoundDecider(){
for(var z = 0; z < passedObjectives.length; z++){
let woundArray = [];
for(var r = 0; r < roundNumber; r++){
let currentMWDice = diceRoll();
woundArray.push(currentMWDice);
};
mortalWoundRoll.push(woundArray);
};
}
return (
<div>
<Row>
<Col><h3>Objective Number</h3></Col>
<Col xs={6}><h3>Dice</h3></Col>
<Col><h3>Mortal Wound Number</h3></Col>
</Row>
<Divider />
</div>
);
}
export default Dice;
I am very new to react so I am attempting to build this from scratch but have hit a wall with it. The idea here is that the function Dice.js will return a grid of objectives listed with mortal wounds associated to each objective. If I have those functions without the denotation of function in front of mortalWoundDecider and objectiveDecider it will run it each time I update the round number or objective number. So my thought was that the activation on start button being pressed would solve that issue. I just am unsure how to do this.
Any help would be nice! Thank you!
Solution
FIXED
Ended up just using state to log the start button being pressed. Then when it changed to true that value was then passed to the child and then would trigger all of my functions to run only on the start button being pressed!
Answered By - Fugismar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.