Conversation
…rom current hand code
…lcards function to be loaded into the return section of the code
…er than prev to press deal again to determine overall winner
…also added css for playing-card
…t and dice, change display of card img to flex row space around
| currComputerCards: newComputerCurrCards, | ||
| roundsLeft: this.state.roundsLeft - 1, | ||
| }, | ||
| () => this.determineWinner() |
There was a problem hiding this comment.
| () => this.determineWinner() | |
| this.determineWinner |
I think you should be able to just pass the function itself like so
| dealCards = () => { | ||
| // this.state.cardDeck.pop() modifies this.state.cardDeck array | ||
| const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()]; | ||
| const newCurrCards = [this.state.cardDeck.pop()]; |
There was a problem hiding this comment.
Since it is just a single card, do we need an array? Also, does the variable need to be in plural?
| () => this.determineWinner() | ||
| ); | ||
| if (this.state.cardDeck.length === 0) { | ||
| this.setState(() => this.determineOverallWinner()); |
There was a problem hiding this comment.
determineOverallWinner() is already updating state. I think we don't need to call the function within a state update
| }; | ||
|
|
||
| determineWinner = () => { | ||
| const playerRank = this.state.currCards[0].rank; |
There was a problem hiding this comment.
could currCards be empty? If so, you could have an edge case bug here, trying to access .rank on undefined
| <> | ||
| <div key={`${name}${suit}`}>{/*{name} of {suit}*/}</div> | ||
| <div> | ||
| <PlayingCard value={name} suit={suit} /> | ||
| </div> | ||
| </> | ||
| )); | ||
|
|
||
| const currComputerCardElems = this.state.currComputerCards.map( | ||
| ({ name, suit }) => ( | ||
| // Give each list element a unique key | ||
| <> | ||
| <div key={`${name}${suit}`}>{/* {name} of {suit}*/}</div> | ||
| <div> | ||
| <PlayingCard value={name} suit={suit} /> | ||
| </div> | ||
| </> | ||
| ) | ||
| ); |
There was a problem hiding this comment.
We repeat the same html here. Could this be a separate component, into which we pass the name and suit prop?
| <p>Computer Hand {currComputerCardElems}</p> | ||
| </div> | ||
| )} | ||
| {this.state.roundsLeft !== 26 && ( |
There was a problem hiding this comment.
what is the 26? It seems to be some kind of game logic, but is not explained here. Maybe it would be better to pack it into a variable, say maxNumberOfRounds = 26 or whatever it represents. This would make it easier to read the code here as the variable would explain in English what it is used for or means.
2 participants
No description provided.