From f1b95462ff505c6dfbbf53e5e4dfaef6bab6b07b Mon Sep 17 00:00:00 2001 From: yyrin <101495970+yyrin@users.noreply.github.com> Date: Sun, 28 Jul 2024 21:06:22 +0900 Subject: [PATCH] Add code file MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 5주차 과제 업로드 --- rock-scissor-paper/package.json | 32 +++++++++ rock-scissor-paper/public/index.html | 16 +++++ rock-scissor-paper/src/App.js | 76 ++++++++++++++++++++ rock-scissor-paper/src/Button.js | 5 ++ rock-scissor-paper/src/HandButton.css | 27 +++++++ rock-scissor-paper/src/HandButton.js | 14 ++++ rock-scissor-paper/src/HandIcon.js | 17 +++++ rock-scissor-paper/src/assets/ic-reset.svg | 29 ++++++++ rock-scissor-paper/src/assets/logo.svg | 1 + rock-scissor-paper/src/assets/paper.svg | 7 ++ rock-scissor-paper/src/assets/purple.svg | 21 ++++++ rock-scissor-paper/src/assets/rock.svg | 7 ++ rock-scissor-paper/src/assets/scissor.svg | 7 ++ rock-scissor-paper/src/assets/yellow-win.svg | 23 ++++++ rock-scissor-paper/src/assets/yellow.svg | 21 ++++++ rock-scissor-paper/src/index.js | 4 ++ rock-scissor-paper/src/utils.js | 22 ++++++ 17 files changed, 329 insertions(+) create mode 100644 rock-scissor-paper/package.json create mode 100644 rock-scissor-paper/public/index.html create mode 100644 rock-scissor-paper/src/App.js create mode 100644 rock-scissor-paper/src/Button.js create mode 100644 rock-scissor-paper/src/HandButton.css create mode 100644 rock-scissor-paper/src/HandButton.js create mode 100644 rock-scissor-paper/src/HandIcon.js create mode 100644 rock-scissor-paper/src/assets/ic-reset.svg create mode 100644 rock-scissor-paper/src/assets/logo.svg create mode 100644 rock-scissor-paper/src/assets/paper.svg create mode 100644 rock-scissor-paper/src/assets/purple.svg create mode 100644 rock-scissor-paper/src/assets/rock.svg create mode 100644 rock-scissor-paper/src/assets/scissor.svg create mode 100644 rock-scissor-paper/src/assets/yellow-win.svg create mode 100644 rock-scissor-paper/src/assets/yellow.svg create mode 100644 rock-scissor-paper/src/index.js create mode 100644 rock-scissor-paper/src/utils.js diff --git a/rock-scissor-paper/package.json b/rock-scissor-paper/package.json new file mode 100644 index 0000000..b4d592a --- /dev/null +++ b/rock-scissor-paper/package.json @@ -0,0 +1,32 @@ +{ + "name": "rock-scissor-paper", + "version": "0.1.0", + "private": true, + "dependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "5.0.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/rock-scissor-paper/public/index.html b/rock-scissor-paper/public/index.html new file mode 100644 index 0000000..f7e26f1 --- /dev/null +++ b/rock-scissor-paper/public/index.html @@ -0,0 +1,16 @@ + + + + + 가위바위보 + + + +
+ + diff --git a/rock-scissor-paper/src/App.js b/rock-scissor-paper/src/App.js new file mode 100644 index 0000000..146d01b --- /dev/null +++ b/rock-scissor-paper/src/App.js @@ -0,0 +1,76 @@ +import { useState } from 'react'; +import Button from './Button'; +import HandButton from './HandButton'; +import HandIcon from './HandIcon'; +import { compareHand, generateRandomHand } from './utils'; + +const INITIAL_VALUE = 'rock'; + +function getResult(me, other) { + const comparison = compareHand(me, other); + if (comparison > 0) return '승리'; + if (comparison < 0) return '패배'; + return '무승부'; +} + +function App() { + const [hand, setHand] = useState(INITIAL_VALUE); + const [otherHand, setOtherHand] = useState(INITIAL_VALUE); + const [gameHistory, setGameHistory] = useState([]); + const [score, setScore] = useState(0); + const [otherScore, setOtherScore] = useState(0); + const [bet, setBet] = useState(1); + + const handleButtonClick = (nextHand) => { + const nextOtherHand = generateRandomHand(); + const nextHistoryItem = getResult(nextHand, nextOtherHand); + const comparison = compareHand(nextHand, nextOtherHand); + setHand(nextHand); + setOtherHand(nextOtherHand); + setGameHistory([...gameHistory, nextHistoryItem]); + if (comparison > 0) setScore(score + bet); + if (comparison < 0) setOtherScore(otherScore + bet); + }; + + const handleClearClick = () => { + setHand(INITIAL_VALUE); + setOtherHand(INITIAL_VALUE); + setGameHistory([]); + setScore(0); + setOtherScore(0); + setBet(1); + }; + + const handleBetChange = (e) => { + let num = Number(e.target.value); + if (num > 9) num %= 10; + if (num < 1) num = 1; + num = Math.floor(num); + setBet(num); + }; + + return ( +
+ +
+ {score} : {otherScore} +
+
+ + VS + +
+
+ +
+

승부 기록: {gameHistory.join(', ')}

+
+ + + +
+
+ ); +} + +export default App; diff --git a/rock-scissor-paper/src/Button.js b/rock-scissor-paper/src/Button.js new file mode 100644 index 0000000..ca75062 --- /dev/null +++ b/rock-scissor-paper/src/Button.js @@ -0,0 +1,5 @@ +function Button({ children, onClick }) { + return ; +} + +export default Button; diff --git a/rock-scissor-paper/src/HandButton.css b/rock-scissor-paper/src/HandButton.css new file mode 100644 index 0000000..809a0b1 --- /dev/null +++ b/rock-scissor-paper/src/HandButton.css @@ -0,0 +1,27 @@ +.HandButton { + width: 166px; + height: 166px; + border: none; + outline: none; + text-align: center; + cursor: pointer; + background-color: transparent; + background-image: url('./assets/purple.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +.HandButton .HandButton-icon { + opacity: 0.45; + width: 55px; + height: 55px; +} + +.HandButton:hover { + background-image: url('./assets/yellow.svg'); +} + +.HandButton:hover .HandButton-icon { + opacity: 0.87; +} diff --git a/rock-scissor-paper/src/HandButton.js b/rock-scissor-paper/src/HandButton.js new file mode 100644 index 0000000..b4b419d --- /dev/null +++ b/rock-scissor-paper/src/HandButton.js @@ -0,0 +1,14 @@ +import HandIcon from './HandIcon'; +import './HandButton.css'; + +// CSS 파일로 스타일을 적용해 주세요 +function HandButton({ value, onClick }) { + const handleClick = () => onClick(value); + return ( + + ); +} + +export default HandButton; diff --git a/rock-scissor-paper/src/HandIcon.js b/rock-scissor-paper/src/HandIcon.js new file mode 100644 index 0000000..36a7af4 --- /dev/null +++ b/rock-scissor-paper/src/HandIcon.js @@ -0,0 +1,17 @@ +import rockImg from './assets/rock.svg'; +import scissorImg from './assets/scissor.svg'; +import paperImg from './assets/paper.svg'; + +const IMAGES = { + rock: rockImg, + scissor: scissorImg, + paper: paperImg, +}; + +// className prop을 추가하고, img 태그에 적용해주세요 +function HandIcon({ value, className }) { + const src = IMAGES[value]; + return {value}; +} + +export default HandIcon; diff --git a/rock-scissor-paper/src/assets/ic-reset.svg b/rock-scissor-paper/src/assets/ic-reset.svg new file mode 100644 index 0000000..9f227c9 --- /dev/null +++ b/rock-scissor-paper/src/assets/ic-reset.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rock-scissor-paper/src/assets/logo.svg b/rock-scissor-paper/src/assets/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/rock-scissor-paper/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-scissor-paper/src/assets/paper.svg b/rock-scissor-paper/src/assets/paper.svg new file mode 100644 index 0000000..c81e252 --- /dev/null +++ b/rock-scissor-paper/src/assets/paper.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/rock-scissor-paper/src/assets/purple.svg b/rock-scissor-paper/src/assets/purple.svg new file mode 100644 index 0000000..c2fd80e --- /dev/null +++ b/rock-scissor-paper/src/assets/purple.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/rock-scissor-paper/src/assets/rock.svg b/rock-scissor-paper/src/assets/rock.svg new file mode 100644 index 0000000..01bc743 --- /dev/null +++ b/rock-scissor-paper/src/assets/rock.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/rock-scissor-paper/src/assets/scissor.svg b/rock-scissor-paper/src/assets/scissor.svg new file mode 100644 index 0000000..8975fc7 --- /dev/null +++ b/rock-scissor-paper/src/assets/scissor.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/rock-scissor-paper/src/assets/yellow-win.svg b/rock-scissor-paper/src/assets/yellow-win.svg new file mode 100644 index 0000000..946db2b --- /dev/null +++ b/rock-scissor-paper/src/assets/yellow-win.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rock-scissor-paper/src/assets/yellow.svg b/rock-scissor-paper/src/assets/yellow.svg new file mode 100644 index 0000000..bedb057 --- /dev/null +++ b/rock-scissor-paper/src/assets/yellow.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/rock-scissor-paper/src/index.js b/rock-scissor-paper/src/index.js new file mode 100644 index 0000000..606d7ac --- /dev/null +++ b/rock-scissor-paper/src/index.js @@ -0,0 +1,4 @@ +import ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); diff --git a/rock-scissor-paper/src/utils.js b/rock-scissor-paper/src/utils.js new file mode 100644 index 0000000..ee002c3 --- /dev/null +++ b/rock-scissor-paper/src/utils.js @@ -0,0 +1,22 @@ +const HANDS = ['rock', 'scissor', 'paper']; + +const WINS = { + rock: 'scissor', + scissor: 'paper', + paper: 'rock', +}; + +export function compareHand(a, b) { + if (WINS[a] === b) return 1; + if (WINS[b] === a) return -1; + return 0; +} + +function random(n) { + return Math.floor(Math.random() * n); +} + +export function generateRandomHand() { + const idx = random(HANDS.length); + return HANDS[idx]; +}