Files
excel-download/react_webgame/6. 로또추첨기/Lotto-class.jsx
2021-03-08 19:32:34 +09:00

94 lines
2.0 KiB
JavaScript

import React, { Component } from "react";
import Ball from "./Ball";
function getWinNumbers() {
console.log("getWinNumbers");
const candidate = Array(45)
.fill()
.map((v, i) => i + 1);
const shuffle = [];
while (candidate.length > 0) {
shuffle.push(
candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]
);
}
const bonusNumber = shuffle[shuffle.length - 1];
const winNumbers = shuffle.slice(0, 6).sort((p, c) => p - c);
return [...winNumbers, bonusNumber];
}
class Lotto extends Component {
state = {
winNumbers: getWinNumbers(),
winBalls: [],
bonus: null,
redo: false,
};
timeouts = [];
runTimeouts = () => {
const { winNumbers } = this.state;
for (let i = 0; i < this.state.winNumbers.length - 1; i++) {
this.timeouts[i] = setTimeout(() => {
this.setState((prevState) => {
return {
winBalls: [...prevState.winBalls, winNumbers[i]],
};
});
}, (i + 1) * 1000);
}
this.timeouts[6] = setTimeout(() => {
this.setState({
bonus: winNumbers[6],
redo: true,
});
}, 7000);
};
componentDidMount() {
this.runTimeouts();
}
componentWillUnmount() {
this.timeouts.forEach((v) => {
clearTimeout(v);
});
}
componentDidUpdate(prevProps, prevState) {
if (this.timeouts.length === 0) {
this.runTimeouts();
}
}
onClickRedo = () => {
this.setState({
winNumbers: getWinNumbers(),
winBalls: [],
bonus: null,
redo: false,
});
this.timeouts = [];
};
render() {
const { winBalls, bonus, redo } = this.state;
return (
<>
<div>당첨 숫자</div>
<div id="결과창">
{winBalls.map((v) => (
<Ball key={v} number={v} />
))}
</div>
<div>보너스</div>
{bonus && <Ball number={bonus} />}
{redo && <button onClick={this.onClickRedo}> !</button>}
</>
);
}
}
export default Lotto;