人類玩家選擇一步棋后，不要立即讓 CPU 選擇一步棋。實現(xiàn)componentDidUpdate生命周期函數(shù)并將CPU的選擇邏輯移到那里。這也需要移動對獲勝邏輯的檢查。
/*function that handles the user choice*/
handleClick = (
choiceName,
choiceImage,
choiceBorderColor,
choiceExtraBorderColor
) => () => {
this.setState({
onScreen: false,
choiceName,
choiceImage,
choiceBorderColor,
choiceExtraBorderColor
});
};
一旦人類玩家選擇了一個動作，就獲得房子的隨機(jī)動作，但不要立即將狀態(tài)更新排入隊列，而是稍后使用進(jìn)入setTimeout更新狀態(tài)。
僅當(dāng)兩個玩家都選擇了移動但結(jié)果尚未計算并存儲在狀態(tài)中時才檢查勝利。
componentDidUpdate(prevProps, prevState) {
if (
prevState.choiceName !== this.state.choiceName &&
this.state.choiceName
) {
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
const index = getRandomInt(3);
setTimeout(() => {
this.setState({
houseChoice: index
});
}, 2000);
}
if (
this.state.choiceName &&
[0, 1, 2].includes(this.state.houseChoice) && // We want 0 to be truthy :)
!this.state.results
) {
const results = this.getResults(
this.state.choiceName,
this.state.houseChoice
).toUpperCase();
this.setState({
results: results
});
/*****************calling setScore()********************/
if (results === "WIN") {
this.props.setScore(1);
} else if (results === "LOSE") {
this.props.setScore(-1);
} else {
this.props.setScore(0);
}
}
}
有條件地渲染“等待 CPU”UI
<h4 className="result-title">
{this.state.houseChoice === ""
? "THE HOUSE CHOOSING"
: "THE HOUSE PICKED"}
</h4>
{this.state.houseChoice === "" ? (
<div>...</div>
) : this.state.houseChoice === 0 ? (
/*1*/
<div
className="elem-container result-container"
style={{
borderColor: "hsl(230, 89%, 62%)",
color: "hsl(230, 89%, 65%)"
}}
>
<img src={paper} className="choice-image" alt="img" />
</div>
) : this.state.houseChoice === 1 ? (
/*2*/
<div
className="elem-container result-container"
style={{
borderColor: "hsl(39, 89%, 49%)",
color: "hsl(40, 84%, 53%)"
}}
>
<img src={scissors} className="choice-image" alt="img" />
</div>
) : (
/*3*/
<div
className="elem-container result-container"
style={{
borderColor: "hsl(349, 71%, 52%)",
color: "hsl(349, 70%, 56%)"
}}
>
<img src={rock} className="choice-image" alt="img" />
</div>
)}
有條件地渲染結(jié)果并重試按鈕。
<div className="final-result-container">
{this.state.results && (
<>
<h1 className="bold">YOU {this.state.results}</h1>
<TryAgain onClick={this.handleTryAgainClick} />
</>
)}
</div>
再次玩時不要忘記重置所有狀態(tài)
handleTryAgainClick() {
this.setState({
onScreen: true,
choiceName: "",
choiceImage: "",
choiceBorderColor: "",
choiceExtraBorderColor: "",
houseChoice: "",
results: ""
});
}
