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!
