mindol1004/excel-download
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

react web game : 로또 추첨기 - 클래스

Browse Source
This commit is contained in:
haerong22
2021-03-07 18:18:18 +09:00
parent 765691e6fa
commit 70dd095285
8 changed files with 132 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
react_webgame/main/RSP-class.jsx → react_webgame/5, 로또 추첨기/RSP-class.jsx
View File

0
react_webgame/main/RSP.jsx → react_webgame/5, 로또 추첨기/RSP.jsx
View File

6
react_webgame/5, 로또 추첨기/client.jsx Normal file
View File

@@ -0,0 +1,6 @@
import React from "react";
import ReactDom from "react-dom";
import RSP from "./RSP";
ReactDom.render(<RSP />, document.querySelector("#root"));

17
react_webgame/5, 로또 추첨기/index.html Normal file
View File

@@ -0,0 +1,17 @@
<html>
<head>
<meta charset="utf-8" />
<title>가위바위보</title>
<style>
#computer {
width: 142px;
height: 200px;
background-position: 0 0;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>

23
react_webgame/main/Ball.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React, { memo } from "react";
const Ball = memo(({ number }) => {
let background;
if (number <= 10) {
background = "red";
} else if (number <= 20) {
background = "orange";
} else if (number <= 30) {
background = "yellow";
} else if (number <= 40) {
background = "blue";
} else {
background = "green";
}
return (
<div className="ball" style={{ background }}>
{number}
</div>
);
});
export default Ball;

73
react_webgame/main/Lotto.jsx Normal file
View File

@@ -0,0 +1,73 @@
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 = [];
componentDidMount() {
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);
}
componentWillUnmount() {
this.timeouts.forEach((v) => {
clearTimeout(v);
});
}
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;

4
react_webgame/main/client.jsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import ReactDom from "react-dom";
import RSP from "./RSP";
import Lotto from "./Lotto";
ReactDom.render(<RSP />, document.querySelector("#root"));
ReactDom.render(<Lotto />, document.querySelector("#root"));

16
react_webgame/main/index.html
View File

@@ -1,12 +1,18 @@
<html>
<head>
<meta charset="utf-8" />
<title>가위바위보</title>
<title>로또 추첨기</title>
<style>
#computer {
width: 142px;
height: 200px;
background-position: 0 0;
.ball {
display: inline-block;
border: 1px solid black;
border-radius: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
margin-right: 20px;
}
</style>
</head>