Блог

Итак, я работаю с REACT уже около месяца, и для своего первого проекта я решил сделать игру RPS (rock paper scissor). Чтобы добавить к этому, я хочу добавить табло, которое просто увеличивается на 2 очка для победителя и на одно очко, если это ничья. Я искал похожие табло, но они, похоже, не работают с моим кодом. Буду признателен за любую помощь или предложения. Заранее спасибо!

 import React, { Component } from "react"; import { useState } from "react"; import ReactDOM from "react-dom"; import Player from "./player"; import "./styles.css";  const choices = ["rock", "paper", "scissors"];  class App extends Component {  state = {  user: choices[0],  computer: choices[0],  winner: ""  };   beginGame = () =gt; {  let counter = 0;  let gameInterval = setInterval(() =gt; {  counter  ;  this.setState({  computer: choices[Math.floor(Math.random() * choices.length)],  winner: ""  });  if (counter gt; 5) {  clearInterval(gameInterval);  this.setState({  winner: this.selectWinner()  });  }  }, 100);  };   selectWinner = () =gt; {  const { user, computer } = this.state;   if (user === computer) {  return "It's a draw!";  } else if (  (user === "rock" amp;amp; computer === "scissors") ||  (user === "paper" amp;amp; computer === "rock") ||  (user === "scissors" amp;amp; computer === "paper")  ) {  return "You Win!";  } else {  return "You Lose";  }  };   selectChoice = (choice) =gt; {  this.setState({  user: choice,  winner: ""  });  };  // --------- Score board ----------  Players = () =gt; {  const [player, setPlayer] = useState(0);   return (  lt;divgt; lt;/divgt;  );  };  handlePlus = () =gt; {  this.setState({  clicks: this.state.clicks   1  });  };   handleMinus = () =gt; {  this.setState({  clicks: this.state.clicks - 1  });  };   

и вот Html-сторона этого

 render() {  const { user, computer, winner } = this.state;  return (  lt;gt;  lt;headergt;  lt;h1gt;Rock Paper Scissorslt;/h1gt;  lt;/headergt;   lt;div className="winner"gt;{winner ? this.selectWinner() : null}lt;/divgt;   lt;divgt;  lt;Player choice={user} /gt;  lt;Player choice={computer} /gt;  lt;/divgt;  lt;divgt;  lt;button  className="choiceBtn"  onClick={() =gt; this.selectChoice("rock")}  gt;  rock  lt;/buttongt;  lt;button  className="choiceBtn"  onClick={() =gt; this.selectChoice("paper")}  gt;  paper  lt;/buttongt;  lt;button  className="choiceBtn"  onClick={() =gt; this.selectChoice("scissors")}  gt;  scissor  lt;/buttongt;  lt;/divgt;  lt;button type="button" onClick={this.beginGame}gt;  Shoot!  lt;/buttongt;  lt;div className="score-board"gt;  lt;h2gt; Score Board lt;/h2gt;  lt;h3gt;Name Points Scorelt;/h3gt;   lt;button onClick={this.handlePlus}gt; lt;/buttongt;  lt;button onClick={this.handleMinus}gt;-lt;/buttongt;  lt;/divgt;  lt;/gt;  );  } }  const rootElement = document.getElementById("root"); ReactDOM.render(lt;App /gt;, rootElement);