All comments

• 

  Emre Kalfa• 180

  @rustysym

  Submitted 11 months ago

  Hey! I'm Emre and this is my Rock,Paper,Scissors project

  There are some problems with my project

  • Score doesn't seem to be updating correctly
  • Score takes negative values

  I think the main problem is due to the use of useEffect

  Any suggestions on how I can improve are welcome

  GameContext.js

  const onSelect = () => {
      const userSelect = GameRules[selection].value;
      const number = Math.floor(Math.random() * 3);
      setHouseSelection(number);
      setTimeout(() => {
        setShow(true);
        if (GameRules[houseSelection].beats.includes(userSelect)) {
          setResult("You Lose");
          setScore((score) => score - 1);
        } else {
          if (GameRules[houseSelection].value == userSelect) {
            setResult("Tie");
          } else {
            setResult("You Win");
            setScore((score) => score + 1);
          }
        }
      }, 3000);
    };
  

  containers\game\index.js

  const { onSelect, houseSelection, result, show, playAgain } =
      useContext(GameContext);
  useEffect(() => {
        onSelect();
    }, [houseSelection]);
  

  

  Rock, Paper, Scissors | (NextJS,TailwindCSS,Framer Motion)

  1

  20

  

  Kyle Johnson• 250

  @11kyle

  Posted 11 months ago

  Hey Emre! Great job on your solution! I checked into your question and have some feedback.

  • Score takes a negative value.

  This can be fixed by wrapping your setScore((score) => score -1) inside an if statement like so

  if (score > 0) {
    setScore((score) => score - 1)
  }
  

  • Score doesn't seem to be updating correctly

  You are right on thinking it is the useEffect hook that is causing problems here. useEffect gets called on initial render and again every time anything in the dependency array changes. You also never want to update anything from the dependency array from inside the useEffect. This could cause an infinite loop. In your case, the useEffect is running a minimum of 2 times and that is part of why you are seeing weird scores. The way your game is setup you can actually leave the dependency array empty like so

   useEffect(() => {
     onSelect();
   }, []);
  

  In addition, there's a weird thing happening with useState inside your GameContext.js. useState actually takes 'time' to update its value. It's just a part of react. When you setState and then ask your function to do something with it, it is using the previous value. You can replace houseSelection with number inside your function like so

  const onSelect = () => {
    const userSelect = GameRules[selection].value;
    const number = Math.floor(Math.random() * 3);
    setHouseSelection(number);
  
    setTimeout(() => {
      setShow(true);
      if (GameRules[number].beats.includes(userSelect)) {
        setResult("You Lose");
        setScore((score) => score - 1);
      } else {
        if (GameRules[number].value == userSelect) {
          setResult("Tie");
        } else {
          setResult("You Win");
          setScore((score) => score + 1);
        }
      }
    }, 3000);
  };
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Lucas Matheus• 400

  @Lukiticas

  Submitted about 2 years ago

  I loved this one! I was learning about react's libraries for styling and decided to built with one of them: Styled components!

  I tried to differ a little from the original project, i settled the ground for some additional things - like an section with different nfts and so on -.

  One thing that was a struggle for me was deciding what tag to use, is there any good practice for building product cards like this one? I used article, h2, figure (figure, figcaption and img) and p, did i done it right?

  I might have done some mistakes, so i would love some feedback.

  

  NFT cards with animations and themes!

  1

  90

  

  Kyle Johnson• 250

  @11kyle

  Posted about 2 years ago

  Great work! I really like that you took the challenge and added your own twist. The only negative thing I noticed is the colors used. I feel like the neon green text with a green background is hard for the eye to pickup.

  As for your question about when to use article, h2, etc. Here's a very good link on what elements should be used and why. Some key benefits to using the right elements include better readability and improved SEO.

  MDN Semantics

  Marked as helpful

  1

  This comment has received 2 repliesShow