react web game : react lifecycle
This commit is contained in:
haerong22
7
react_webgame/4. 반응속도 체크/client.jsx
Normal file
7
react_webgame/4. 반응속도 체크/client.jsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDom from 'react-dom';
|
||||
|
||||
import ResponseCheck from './ResponseCheck';
|
||||
|
||||
|
||||
ReactDom.render(<ResponseCheck />, document.querySelector('#root'));
|
||||
28
react_webgame/4. 반응속도 체크/index.html
Normal file
28
react_webgame/4. 반응속도 체크/index.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>반응속도체크</title>
|
||||
<style>
|
||||
#screen {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
#screen.waiting {
|
||||
background-color: aqua;
|
||||
}
|
||||
#screen.ready {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
#screen.now {
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./dist/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
6071
react_webgame/4. 반응속도 체크/package-lock.json
generated
Normal file
6071
react_webgame/4. 반응속도 체크/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
react_webgame/4. 반응속도 체크/package.json
Normal file
27
react_webgame/4. 반응속도 체크/package.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "main",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "webpack serve --env development"
|
||||
},
|
||||
"author": "kim",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/plugin-proposal-class-properties": "^7.12.1",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"babel-loader": "^8.2.2",
|
||||
"react-refresh": "^0.9.0",
|
||||
"webpack": "^5.11.0",
|
||||
"webpack-cli": "^4.2.0",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
}
|
||||
}
|
||||
53
react_webgame/4. 반응속도 체크/webpack.config.js
Normal file
53
react_webgame/4. 반응속도 체크/webpack.config.js
Normal file
@@ -0,0 +1,53 @@
|
||||
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']
|
||||
},
|
||||
|
||||
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()
|
||||
],
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist'),
|
||||
filename: 'app.js',
|
||||
publicPath: '/dist/',
|
||||
}, // 출력
|
||||
|
||||
devServer: {
|
||||
publicPath: '/dist/',
|
||||
hot: true,
|
||||
},
|
||||
};
|
||||
42
react_webgame/main/RSP.jsx
Normal file
42
react_webgame/main/RSP.jsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
class RSP extends Compnent {
|
||||
state = {
|
||||
result: "",
|
||||
imgCoord: 0,
|
||||
score: 0,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { result, score, imgCoord } = this.state;
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="computer"
|
||||
style={{
|
||||
background: `url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ${imgCoord} 0`,
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<button id="rock" className="btn" onClick={() => onClickBtn("바위")}>
|
||||
바위
|
||||
</button>
|
||||
<button
|
||||
id="scissor"
|
||||
className="btn"
|
||||
onClick={() => onClickBtn("가위")}
|
||||
>
|
||||
가위
|
||||
</button>
|
||||
<button id="paper" className="btn" onClick={() => onClickBtn("보")}>
|
||||
보
|
||||
</button>
|
||||
</div>
|
||||
<div>{result}</div>
|
||||
<div>현재 {score}점</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RSP;
|
||||
@@ -1,7 +1,5 @@
|
||||
import React from 'react';
|
||||
import ReactDom from 'react-dom';
|
||||
import React from "react";
|
||||
import ReactDom from "react-dom";
|
||||
import RSP from "./RSP";
|
||||
|
||||
import ResponseCheck from './ResponseCheck';
|
||||
|
||||
|
||||
ReactDom.render(<ResponseCheck />, document.querySelector('#root'));
|
||||
ReactDom.render(<RSP />, document.querySelector("#root"));
|
||||
|
||||
@@ -1,28 +1,17 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>반응속도체크</title>
|
||||
<style>
|
||||
#screen {
|
||||
width: 300px;
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>반응속도체크</title>
|
||||
<style>
|
||||
#computer {
|
||||
width: 142px;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
#screen.waiting {
|
||||
background-color: aqua;
|
||||
}
|
||||
#screen.ready {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
#screen.now {
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./dist/app.js"></script>
|
||||
</body>
|
||||
background-position: 0 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./dist/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user