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

react web game :

Browse Source 
componentDidMount 안에 setInterval 넣기
This commit is contained in:
haerong22
2021-03-06 00:38:25 +09:00
parent 165b4e4fd6
commit 37c8a5c61c
5 changed files with 1090 additions and 1287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
react_webgame/main/RSP.jsx
View File

@@ -1,12 +1,51 @@
import React, { Component } from "react";
class RSP extends Compnent {
const rspCoords = {
바위: "0",
가위: "-142px",
보: "-284px",
};
const scores = {
가위: 1,
바위: 0,
보: -1,
};
class RSP extends Component {
state = {
result: "",
imgCoord: 0,
imgCoord: "0",
score: 0,
};
interval;
componentDidMount() {
this.interval = setInterval(() => {
const { imgCoord } = this.state;
if (imgCoord === rspCoords.바위) {
this.setState({
imgCoord: rspCoords.가위,
});
} else if (imgCoord === rspCoords.가위) {
this.setState({
imgCoord: rspCoords.보,
});
} else if (imgCoord === rspCoords.보) {
this.setState({
imgCoord: rspCoords.바위,
});
}
}, 1000);
}
componentWillUnMount() {
clearInterval(this.interval);
}
onClickBtn = (choice) => {};
render() {
const { result, score, imgCoord } = this.state;
return (
@@ -18,17 +57,25 @@ class RSP extends Compnent {
}}
/>
<div>
<button id="rock" className="btn" onClick={() => onClickBtn("바위")}>
<button
id="rock"
className="btn"
onClick={() => this.onClickBtn("바위")}
>
바위
</button>
<button
id="scissor"
className="btn"
onClick={() => onClickBtn("가위")}
onClick={() => this.onClickBtn("가위")}
>
가위
</button>
<button id="paper" className="btn" onClick={() => onClickBtn("보")}>
<button
id="paper"
className="btn"
onClick={() => this.onClickBtn("보")}
>
보
</button>
</div>

1
react_webgame/main/client.jsx
View File

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

2
react_webgame/main/index.html
View File

@@ -1,7 +1,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>반응속도체크</title>
<title>가위바위보</title>
<style>
#computer {
width: 142px;

2221
react_webgame/main/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

96
react_webgame/main/webpack.config.js
View File

@@ -1,53 +1,55 @@
const path = require('path'); // 경로 조작하는 모듈
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const path = require("path"); // 경로 조작하는 모듈
const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
name: 'wordrelay-setting',
mode: 'development', // 실 서비스 에서는 production
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx']
},
name: "wordrelay-setting",
mode: "development", // 실 서비스 에서는 production
devtool: "eval",
resolve: {
extensions: [".js", ".jsx"],
},
entry: {
app:['./client'],
}, // 입력
entry: {
app: ["./client"],
}, // 입력
module: {
rules: [{
test: /\.jsx?$/, // js, jsx 파일에 babel-loader적용
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['> 5% in KR','last 2 chrome versions'],
},
debug: true,
}],
'@babel/preset-react'
],
plugins: [
'@babel/plugin-proposal-class-properties',
'react-refresh/babel',
],
},
}],
}, // 모듈적용
plugins: [
new RefreshWebpackPlugin()
],
module: {
rules: [
{
test: /\.jsx?$/, // js, jsx 파일에 babel-loader적용
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: ["> 5% in KR", "last 2 chrome versions"],
},
debug: true,
},
],
"@babel/preset-react",
],
plugins: [
"@babel/plugin-proposal-class-properties",
"react-refresh/babel",
],
},
},
],
}, // 모듈적용
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/dist/',
}, // 출력
plugins: [new RefreshWebpackPlugin()],
devServer: {
publicPath: '/dist/',
hot: true,
},
};
output: {
path: path.join(__dirname, "dist"),
filename: "app.js",
publicPath: "/dist/",
}, // 출력
devServer: {
publicPath: "/dist/",
hot: true,
},
};