I have a function that calculate a "total price" based on a quantity argument passed from a different component (qty) and uses this to display a div:
calculateTotal(qty) {
var t;
if (qty === 1) {
t = 250 //total = total + 250
}
else if (qty > 1) {
t = (qty * 250); //total = qty * 250
}
else {
t = this.state.total
}
return this.setState( { total: this.state.total + t })
}
It would always display the previous calculation rather than the current. So if I enter 1, and then 2 as the quantity, the first time I enter 1, nothing is displayed, and the second time I press 2, the amount displayed is 250 (when it should be 500)
If anyone has any advice as to what the best course of action would be, it would be greatly appreciated.
If it helps, here is the function in the other component that triggers it (they enter a quantity, it sends that quantity to the function):
handleChange(event) {
const key = Number(event.key)
if (key === "Backspace") {
this.setState({qty: 0})
this.props.handleTotal(0);
} else {
this.setState({qty: key})
this.props.handleTotal(this.state.qty);
}
}
Looks like the problem is in the parent component's handleChange. You're calling setState and then hoping to pass the new value to the next function, but this.state.qty will be unchanged in the next line because setState is async.
handleChange(event) {
const key = Number(event.key)
if (key === "Backspace") {
this.setState({qty: 0})
this.props.handleTotal(0);
} else {
this.setState({qty: key})
// this.props.handleTotal(this.state.qty); // <-- this will return the old value because setState above isn't done running
this.props.handleTotal(key); // <-- try this instead
}
}
calculateTotal(qty) {
var t;
if (qty === 1) {
t = 250 //total = total + 250
}
else if (qty > 1) {
t = (qty * 250); //total = qty * 250
}
else {
t = (this.state.total * 2);
}
this.setState( { total: t });
return t;
}
Please, check if this works out!
Related
I have two drawer components and inside those drawer user can select maximum 3 rows. Each row has a Accessory Qty property which cannot be greater than Max Qty.
Two Drawers, each with clickHandler which triggers inner row sections
Each row has Accessory Qty and Max Qty. as mentioned above.
Selecting all the rows and clicking Associate to all which adds the selected rows in the other drawers. You can see in the breadcrumbs that currently I'm in SET F. Now after going back to Image one, when I click the 2nd drawer which is SET H I can see that the selected Items are added here.
Now if I change any value in any of the rows of SET H the same change is reflected in the SET F
This is the whole problem, I want the changes not to reflect in other drawers.
For this data is getting fetched from the API. I'm setting a copy of the data in the backupdata. Then with the index and values I'm changing the values in the corresponding rows.
handleQtyChange
const handleQtyChange = (event, i) => {
console.log("Set Index QTY", index, i);
const backupdata = [...billOfMaterials];
var data = event.target.value;
if (backupdata[index].accessory_details[i].accessory[0].code !== "") {
var accesory_code =
backupdata[index].accessory_details[i].accessory[0].code;
var max_qty = backupdata[index].accessory_details[i].max_qty;
var updated_qty = event.target.value;
if (parseFloat(updated_qty) > parseFloat(max_qty)) {
setMessageDialog({
isOpen: true,
message: "Qty must be less than or equal to Max qty",
severity: "error",
});
} else {
if (data == "" || (!isNaN(+data) && parseFloat(data) >= 0)) {
console.log("AccessoryChildIndex", i);
console.log("Max qty", accessoryListWithMaxQty);
console.log("Set Index", index);
setMessageDialog({
isOpen: false,
message: "",
severity: "error",
});
var accessory_total_qty_index = backupdata[
index
].accessory_total_qty.findIndex(
(x) =>
x.code == backupdata[index].accessory_details[i].accessory[0].code
);
console.log("accessory_total_qty Index", accessory_total_qty_index);
backupdata[index].accessory_total_qty[accessory_total_qty_index].qty =
updated_qty;
backupdata[index].accessory_details[i].accessory_qty = updated_qty;
backupdata[index].accessory_details[i].total = (
parseFloat(
event.target.value == undefined || event.target.value == ""
? 0
: event.target.value
) * parseFloat(backupdata[index].accessory_details[i].rate)
).toFixed(2);
backupdata[index].grand_total = grandTotal();
setBillOfMaterials(backupdata);
if (!checkBomAccessoryWiseTotalQty(accesory_code, max_qty)) {
setMessageDialog({
isOpen: true,
message: "Qty limit exceed max qty would be " + max_qty,
severity: "error",
});
backupdata[index].accessory_total_qty[
accessory_total_qty_index
].qty = 0;
backupdata[index].accessory_details[i].accessory_qty = 0;
backupdata[index].accessory_details[i].total = 0;
backupdata[index].grand_total = grandTotal();
setBillOfMaterials(backupdata);
}
console.log("Change BOM", billOfMaterials);
}
}
}
};
handleAssociateToAll
const handleAssociateToAll = () => {
//var data = [...billOfMaterials];
var backupdata = [...billOfMaterials];
//var backupdata = JSON.parse(JSON.stringify([...billOfMaterials]));
var selectedData = backupdata[index].accessory_details.filter((el) => {
return el.is_selected == true;
});
console.log(selectedData);
console.log(index);
backupdata.map((el, i) => {
if (index != i) {
console.log(selectedData);
selectedData.map((dt) => {
dt.accessory_qty = "0";
dt.is_selected = false;
let checkAccessory = backupdata[i].accessory_details.find((data) => {
return (
data.accessory[0].code != "" &&
data.accessory[0].code == dt.accessory[0].code
);
});
console.log("Check", checkAccessory);
if (checkAccessory == undefined) {
backupdata[i].accessory_details = [
dt,
...backupdata[i].accessory_details,
];
}
});
backupdata[index].accessory_total_qty &&
backupdata[index].accessory_total_qty.map((qty) => {
qty.qty = "0";
let checkTotalQty = backupdata[i].accessory_total_qty.find(
(data) => {
return data.code == qty.code;
}
);
if (checkTotalQty == undefined) {
backupdata[i].accessory_total_qty = [
...backupdata[i].accessory_total_qty,
qty,
];
}
});
}
});
setBillOfMaterials(backupdata);
checkAllSelected();
};
console.log("bill", billOfMaterials);
I guess I've explained well. So how do I keep the other drawer's data unchanged and change only the selected drawers rows.
The api response
After clicking Associate to all:
The overall bill, the selected rows are added in accessory_total_qty:
This question already has an answer here:
Discord.js v12 code breaks when upgrading to v13
(1 answer)
Closed 1 year ago.
So basically I had this blackjack command that worked fine with v12 discord.js but as soon as I updated to discord v13. Bugs starting to appear like:
node:5932) DeprecationWarning: The message event is deprecated. Use messageCreate instead
(Use node --trace-deprecation ... to show where the warning was created)
(Only error showing up)
So I made some research and figured out that what happens to embed, but this command does not content an embed.. I came here to ask help. I would appreciate it :)
Blackjack.js
const { stripIndents } = require('common-tags');
const { shuffle, verify } = require('../../functions');
const db = require('quick.db');
const suits = ['♣', '♥', '♦', '♠'];
const faces = ['Jack', 'Queen', 'King'];
const hitWords = ['hit', 'hit me'];
const standWords = ['stand'];
module.exports = {
config: {
name: 'blackjack',
aliases: ['bj'],
category: 'games',
usage: '[deck] <bet>',
description: 'Play A Game Of Blackjack!',
accessableby: 'everyone'
},
run: async (bot, message, args, ops) => {
if (!args[0]) return message.channel.send('**Please Enter Your Deck Amount!**')
let deckCount = parseInt(args[0])
if (isNaN(args[0])) return message.channel.send('**Please Enter A Number!**')
if (deckCount <= 0 || deckCount >= 9) return message.channel.send("**Please Enter A Number Between 1 - 8!**")
let user = message.author;
let bal = db.fetch(`money_${user.id}`)
if (!bal === null) bal = 0;
if (!args[1]) return message.channel.send("**Please Enter Your Bet!**")
let amount = parseInt(args[1])
if (isNaN(args[1])) return message.channel.send("**Please Enter A Number**")
if (amount > 10000) return message.channel.send("**Cannot Place Bet More Than \`10000\`**")
if (bal < amount) return message.channel.send("**You Are Betting More Than You Have!**")
const current = ops.games.get(message.channel.id);
if (current) return message.channel.send(`**Please Wait Until The Current Game Of \`${current.name}\` Is Finished!**`);
try {
ops.games.set(message.channel.id, { name: 'blackjack', data: generateDeck(deckCount) });
const dealerHand = [];
draw(message.channel, dealerHand);
draw(message.channel, dealerHand);
const playerHand = [];
draw(message.channel, playerHand);
draw(message.channel, playerHand);
const dealerInitialTotal = calculate(dealerHand);
const playerInitialTotal = calculate(playerHand);
if (dealerInitialTotal === 21 && playerInitialTotal === 21) {
ops.games.delete(message.channel.id);
return message.channel.send('**Both Of You Just Hit Blackjack!**');
} else if (dealerInitialTotal === 21) {
ops.games.delete(message.channel.id);
db.subtract(`money_${user.id}`, amount);
return message.channel.send(`**The Dealer Hit Blackjack Right Away!\nNew Balance - **\` ${bal - amount}\``);
} else if (playerInitialTotal === 21) {
ops.games.delete(message.channel.id);
db.add(`money_${user.id}`, amount)
return message.channel.send(`**You Hit Blackjack Right Away!\nNew Balance -**\`${bal + amount}\``);
}
let playerTurn = true;
let win = false;
let reason;
while (!win) {
if (playerTurn) {
await message.channel.send(stripIndents`
**First Dealer Card -** ${dealerHand[0].display}
**You [${calculate(playerHand)}] -**
**${playerHand.map(card => card.display).join('\n')}**
\`[Hit / Stand]\`
`);
const hit = await verify(message.channel, message.author, { extraYes: hitWords, extraNo: standWords });
if (hit) {
const card = draw(message.channel, playerHand);
const total = calculate(playerHand);
if (total > 21) {
reason = `You Drew ${card.display}, Total Of ${total}! Bust`;
break;
} else if (total === 21) {
reason = `You Drew ${card.display} And Hit 21!`;
win = true;
}
} else {
const dealerTotal = calculate(dealerHand);
await message.channel.send(`**Second Dealer Card Is ${dealerHand[1].display}, Total Of ${dealerTotal}!**`);
playerTurn = false;
}
} else {
const inital = calculate(dealerHand);
let card;
if (inital < 17) card = draw(message.channel, dealerHand);
const total = calculate(dealerHand);
if (total > 21) {
reason = `Dealer Drew ${card.display}, Total Of ${total}! Dealer Bust`;
win = true;
} else if (total >= 17) {
const playerTotal = calculate(playerHand);
if (total === playerTotal) {
reason = `${card ? `Dealer Drew ${card.display}, Making It ` : ''}${playerTotal}-${total}`;
break;
} else if (total > playerTotal) {
reason = `${card ? `Dealer Drew ${card.display}, Making It ` : ''}${playerTotal}-\`${total}\``;
break;
} else {
reason = `${card ? `Dealer Drew ${card.display}, Making It ` : ''}\`${playerTotal}\`-${total}`;
win = true;
}
} else {
await message.channel.send(`**Dealer Drew ${card.display}, Total Of ${total}!**`);
}
}
}
db.add(`games_${user.id}`, 1)
ops.games.delete(message.channel.id);
if (win) {
db.add(`money_${user.id}`, amount);
return message.channel.send(`**${reason}, You Won ${amount}!**`);
} else {
db.subtract(`money_${user.id}`, amount);
return message.channel.send(`**${reason}, You Lost ${amount}!**`);
}
} catch (err) {
ops.games.delete(message.channel.id);
throw err;
}
function generateDeck(deckCount) {
const deck = [];
for (let i = 0; i < deckCount; i++) {
for (const suit of suits) {
deck.push({
value: 11,
display: `${suit} Ace!`
});
for (let j = 2; j <= 10; j++) {
deck.push({
value: j,
display: `${suit} ${j}`
});
}
for (const face of faces) {
deck.push({
value: 10,
display: `${suit} ${face}`
});
}
}
}
return shuffle(deck);
}
function draw(channel, hand) {
const deck = ops.games.get(channel.id).data;
const card = deck[0];
deck.shift();
hand.push(card);
return card;
}
function calculate(hand) {
return hand.sort((a, b) => a.value - b.value).reduce((a, b) => {
let { value } = b;
if (value === 11 && a + value > 21) value = 1;
return a + value;
}, 0);
}
}
};
Event Handler:
const { readdirSync } = require("fs")
module.exports = (bot) => {
const load = dirs => {
const events = readdirSync(`./events/${dirs}/`).filter(d => d.endsWith('.js'));
for (let file of events) {
const evt = require(`../events/${dirs}/${file}`);
let eName = file.split('.')[0];
bot.on(eName, evt.bind(null, bot));
};
};
["client", "guild"].forEach(x => load(x));
};
message is an event. you have an event handler, which fires, when a message event is triggered by a user. (they send a message).
What this error is saying is that the message event is deprecated. messageCreate (or messageUpdate) are the new events, and your event handlers need to use that syntax to address the message events (accordingly to creation or update).
I've written the code below (please be noted that some unrelated functions have been removed).
I'm trying to make a Player-vs-Computer TicTacToe game. But every time I try to run the code on Android Studio, Uncaught error: Maximum call stack size exceeded will be shown, specifically when it's Computer's turn to make a move. I think the error is in the onTilePress function, but I'm not sure how to solve it. Does anyone have an idea what is wrong there? Any suggestion will be much appreciated. Thank you in advance.
/* eslint-disable prettier/prettier */
...
export default class TicTacToe2 extends React.Component {
constructor(props){
super(props);
this.state = {
gameState: [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
] ,
currentPlayer: 1,
}
//tilesSelected : 0;
}
componentDidMount(){ //To start the first render... I guess
this.initializeGame();
}
//Reset the gameboard
initializeGame = () => {
this.setState({gameState:
[
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
],
currentPlayer: 1,
});
}
checkTie = () => {
...
}
//To check if the tile selected is owned
checkTilesOwner = (row, col) => {
var arr = this.state.gameState;
if (arr[row][col] == 1){ //Tile owned by Player 1
//Alert.alert("Owned by player 1!"); //remove comment for trial-and-error
this.BotMove();
}
else if (arr[row][col] == -1) { //Tile owned by Bot
//Alert.alert("Owned by Bot!"); //remove comment for trial-and-error
this.BotMove();
}
else { //Empty tile
this.onTilePress(row, col); //Select the tile
}
}
//Return 1 if player 1 won, -1 if player 2 / bot won, or 0 if no one has won
getWinner = () => {
...
}
BotMove = () => {
var RandRow = Math.floor(Math.random() * 3) + 0; //Generate random number for Row
var RandCol = Math.floor(Math.random() * 3) + 0; //Generate random number for Col
this.checkTilesOwner(RandRow, RandCol);
}
onTilePress = (row, col) => {
//Dont allow tiles to change
var value = this.state.gameState[row][col];
if (value !== 0) { return;}
//Identify and grab current player
var currentPlayer = this.state.currentPlayer;
//Set the correct tile...
var arr = this.state.gameState.slice();
arr[row][col] = currentPlayer;
this.setState({gameState: arr});
//Switch to other player
var nextPlayer = (currentPlayer == 1) ? -1 : 1; //if yes, then change to -1; else, then change to 1
this.setState({currentPlayer: nextPlayer});
//Alert.alert(nextPlayer);
//Check if the match is tie
var checkDraw = this.checkTie();
//check winner
var winner = this.getWinner(); //get the winner update
if (winner == 1) {
Alert.alert("Player 1 has won!");
this.initializeGame();
}
else if (winner == -1){
Alert.alert("Bot has won!");
this.initializeGame();
}
else if (checkDraw == 9){
Alert.alert("It's a draw!");
this.initializeGame();
}
//Identify the current player: 1 is human, -1 is bot
var takePlayer = '' + nextPlayer;
if (takePlayer == 1) {
Alert.alert("Player 1's turn!");
}
else if (takePlayer == -1) { //If it is Bot's turn to nmake a move, then trigger BotMove
Alert.alert("Bot's turn!");
this.BotMove(); //Uncaught error: Maximum call stack size exceeded //possible cause: endless loop
}
}
onNewGamePress = () => {
this.initializeGame();
}
renderIcon = (row, col) => {
var value = this.state.gameState[row][col];
switch(value) {
case 1:
return <TouchableOpacity><Text style={styles.tileX}>X</Text></TouchableOpacity>;
case -1:
return <TouchableOpacity><Text style={styles.tileO}>O</Text></TouchableOpacity>;
default:
return <View />
}
}
render() {
return (
//Container for Gameboard
...
);
}
}
Yes, your BotMove and checkTilesOwner are circular.
Try to simplify your logic into
onTilePress(...) {
// think what needs to be done
// get only stuff you need without moving it
this.BotMove(...)
}
Don't blend the thinking code (logic) with the action itself. Because otherwise you will end up with lots of this.setState call. Not only this could cause lots of circular problem, but only it won't help you understand your business logic, in your case, your game logic :)
Separate your logic from your rendering.
So i'm building a calculator/estimator that is basically just a more complicated version of this margin calculator: https://www.omnicalculator.com/finance/margin
So here's one edge case that I'm trying to fix right now.
My costs are broken into 3 parts due to outsourced data- labor, material and laborAndMaterial. LaborAndMaterial is the sum of labor and material, but it can be the only known cost factor so that's why it's broken into 3 parts.
So here's the problem. Say we know that laborAndMaterial is set to 100 and labor and material are 0
cost: {
labor: 0,
material: 0,
laborAndMaterial: 100
}
Then the user enters 50 for labor. Because laborAndMaterial is 100 and labor is now 50 we can autofill material to 50.
But what's happening right now as the user is typing "50" it autofills material to 95 as the user types the 5 in 50. Then when they enter the "0" it sets the laborAndMaterial to 145 (50 + 95). But in that example I need to adjust how I autofill material to continue to update as the user enters more numbers (labor = 5 -> 50 -> 506) (material = 95, 50, -406). As of now I basically have my formula run like:
if(key === "cogs.labor") {
if(laborAndMaterial > 0) {
params["cogs.material"] = laborAndMaterial - value // value is what was entered
}
}
But I still need to allow for the other edge cause that as labor is entered and material is known it updates the laborAndMaterial value
cost {
labor: 50,
material: 50,
laborAndMaterial: 100
}
So if someone enters 100 for labor and we know material is 50 we can autofill laborAndMaterial to 150.
So I have something like:
if(material > 0) {
params["cogs.laborAndMaterial"] = material + value // value is what was entered
}
Any ideas how I can tweak my formula to decide the autofill and continue to update that paramater while still allowing for multiple edge cases?
The margin calculator from omnicalculator is a good example as they solved the issue, but I've been scratching my head over it for some time.
I think you basically need to differentiate between which cost centers are treated as input and which are treated as output. So when you start, each piece of data you're provided is input, and the data you use to autofill the rest of the form is output.
As the user types, any information they give is then treated as input data. Given that any two values can be used to calculate the third, you can only have two of the fields be treated as input at a time.
Here's a code sample to get an idea of what I mean:
// This is a queue to hold your two input cost centers
const inputFields = [];
// Determine the odd one out that we need to calculate
function getVariableCostCenter() {
if (!inputFields.includes('labor')) {
return 'labor';
}
if (!inputFields.includes('material')) {
return 'material';
}
return 'laborAndMaterial';
}
function calculateCostCenters(costCenters) {
const variableCostCenter = getVariableCostCenter();
if (variableCostCenter === 'labor') {
return {
...costCenters,
labor: costCenters.laborAndMaterial - costCenters.material,
};
}
if (variableCostCenter === 'material') {
return {
...costCenters,
material: costCenters.laborAndMaterial - costCenters.labor,
};
}
return {
...costCenters,
laborAndMaterial: costCenters.labor + costCenters.material,
};
}
function initializeCostCenters(costCenters) {
// First, we determine which field(s) are known up front
if (costCenters.labor > 0) {
inputFields.push('labor');
}
if (costCenters.material > 0) {
inputFields.push('material');
}
if (costCenters.laborAndMaterial > 0 && inputFields.length < 2) {
inputFields.push('laborAndMaterial');
}
// ...then do whatever you normally do to populate the form
}
function updateCostCenters(previousCostCenters) {
// Update the input fields so that the user's input
// is always treated as one of the two input fields
if (!inputFields.includes(key)) {
inputFields.shift();
inputFields.push(field);
}
const costCenters = calculateCostCenters({
...previousCostCenters,
[key]: value,
});
params['cogs.labor'] = costCenters.labor;
params['cogs.material'] = costCenters.material;
params['cogs.laborAndMaterial'] = costCenters.laborAndMaterial;
}
Pretty roughly it might look like below.
Note that I remembering last touched fields, which are became "fixed", because we can not recalculate values circularly.
Also, note that I use direct value update, while in some frameworks/libs it might generate change/input event, so you would want to set values silently.
setup = {
labor: {
value: 0
},
material: {
value: 0
},
laborAndMaterial: {
value: 100
}
};
// the number which we are treat as "fixed", may be changed later
let prevFixed = 'labor';
let fixed = 'labor';
const calculateTheRest = () => {
if (!setup.material.touched && !setup.laborAndMaterial.touched ||
!setup.labor.touched && !setup.laborAndMaterial.touched ||
!setup.labor.touched && !setup.material.touched) {
return false; // two unknowns, can't recalculate
}
if (!setup.labor.touched || fixed !== 'labor' && prevFixed !== 'labor') {
setup.labor.value = setup.laborAndMaterial.value - setup.material.value;
} else if (!setup.material.touched || fixed !== 'material' && prevFixed !== 'material') {
setup.material.value = setup.laborAndMaterial.value - setup.labor.value;
} else {
setup.laborAndMaterial.value = setup.material.value + setup.labor.value;
}
}
const $els = {};
Object.keys(setup).forEach(key => $els[key] = document.querySelector('#' + key))
const onInputChanged = (e) => {
const key = e.target.id;
setup[key].value = +e.target.value;
setup[key].touched = true;
if (fixed !== key) {
prevFixed = fixed;
fixed = key;
}
calculateTheRest();
Object.keys(setup).forEach(key => $els[key].value = setup[key].value);
}
Object.keys(setup).forEach(key => {
$els[key].value = setup[key].value; // initial set
setup[key].touched = setup[key].value !== 0; // 0 on initial setup are the numbers that not set
$els[key].addEventListener('input', onInputChanged);
})
<p><label>labor: <input id="labor" type="number"/></label></p>
<p><label>material: <input id="material" type="number"/></label></p>
<p><label> laborAndMaterial: <input id="laborAndMaterial" type="number" /></label></p>
I think you need to implement a condition on your laborAndMaterial field.
Check the condition: -
if(labor > 0 && material > 0){
let laborAndMaterial = labor + material;
}
And after that set the laborAndMaterial variable value into field,
I think it will may help you.
Im trying to get an alert to pop up after a certain number of cards are drawn, but when attempting to use the callback in setState the alert pops before the render occurs.
checkWin() {
if (cards[Object.keys(cards)[12]].number === 0) {
alert("GAME OVER");
}
}
drawCard() {
let cardNumber;
do {
cardNumber = Math.floor(Math.random() * (Object.keys(cards).length));
}
while (cards[Object.keys(cards)[cardNumber]].number === 0);
var card = cards[Object.keys(cards)[cardNumber]];
card.number = card.number - 1;
console.log()
this.setState({
card: card.images[card.number + 1],
total: this.state.total -1,
description: card.description
}, this.checkWin());
}
I have tried putting the function in the callback and it doesn't work either.
edit: the alert comes up before the new card is shown
it works as intended by changing checkWin() to this:
if (cards[Object.keys(cards)[12]].number === 0) {
setTimeout(function(){
alert("GAME OVER");
}, 500);
}
you are doing the callback function wrong. try this
this.setState({
card: card.images[card.number + 1],
total: this.state.total -1,
description: card.description
}, () => this.checkWin() ); ///-> see here