react web game : 고차함수

react_webgame/main/RSP-class.jsx

@@ -0,0 +1,117 @@
+import React, { Component } from "react";
+
+const rspCoords = {
+  바위: "0",
+  가위: "-142px",
+  보: "-284px",
+};
+
+const scores = {
+  가위: 1,
+  바위: 0,
+  보: -1,
+};
+
+const computerChoice = (imgCoord) => {
+  return Object.entries(rspCoords).find(function (v) {
+    return v[1] === imgCoord;
+  })[0];
+};
+
+class RSP extends Component {
+  state = {
+    result: "",
+    imgCoord: "0",
+    score: 0,
+  };
+
+  interval;
+
+  componentDidMount() {
+    this.interval = setInterval(this.changeHand, 100);
+  }
+
+  componentWillUnMount() {
+    clearInterval(this.interval);
+  }
+
+  changeHand = () => {
+    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.바위,
+      });
+    }
+  };
+
+  onClickBtn = (choice) => () => {
+    const { imgCoord } = this.state;
+    clearInterval(this.interval);
+    const myScore = scores[choice];
+    const cpuScore = scores[computerChoice(imgCoord)];
+    const diff = myScore - cpuScore;
+    if (diff === 0) {
+      this.setState({
+        result: "비겼습니다!",
+      });
+    } else if ([-1, 2].includes(diff)) {
+      this.setState((prevState) => {
+        return {
+          result: "이겼습니다!",
+          score: prevState.score + 1,
+        };
+      });
+    } else {
+      this.setState((prevState) => {
+        return {
+          result: "졌습니다ㅠㅜ",
+          score: prevState.score - 1,
+        };
+      });
+    }
+    setTimeout(() => {
+      this.interval = setInterval(this.changeHand, 100);
+    }, 2000);
+  };
+
+  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={this.onClickBtn("바위")}>
+            바위
+          </button>
+          <button
+            id="scissor"
+            className="btn"
+            onClick={this.onClickBtn("가위")}
+          >
+            가위
+          </button>
+          <button id="paper" className="btn" onClick={this.onClickBtn("보")}>
+            보
+          </button>
+        </div>
+        <div>{result}</div>
+        <div>현재 {score}점</div>
+      </>
+    );
+  }
+}
+
+export default RSP;

react_webgame/main/RSP.jsx

@@ -52,7 +52,7 @@ class RSP extends Component {
     }
   };
 
-  onClickBtn = (choice) => {
+  onClickBtn = (choice) => () => {
     const { imgCoord } = this.state;
     clearInterval(this.interval);
     const myScore = scores[choice];
@@ -93,25 +93,17 @@ class RSP extends Component {
           }}
         />
         <div>
-          <button
-            id="rock"
-            className="btn"
-            onClick={() => this.onClickBtn("바위")}
-          >
+          <button id="rock" className="btn" onClick={this.onClickBtn("바위")}>
             바위
           </button>
           <button
             id="scissor"
             className="btn"
-            onClick={() => this.onClickBtn("가위")}
+            onClick={this.onClickBtn("가위")}
           >
             가위
           </button>
-          <button
-            id="paper"
-            className="btn"
-            onClick={() => this.onClickBtn("보")}
-          >
+          <button id="paper" className="btn" onClick={this.onClickBtn("보")}>
             보
           </button>
         </div>