/rock-paper-scissors

Primary LanguageJavaScript

Frontend Mentor - Rock, Paper, Scissors solution

This is my solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the game depending on their device's screen size ✅
  • Play Rock, Paper, Scissors against the computer ✅
  • Maintain the state of the score after refreshing the browser (optional) ✅
  • Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)

Screenshot

Links

My process

Built with

What I learned

Trying to get the latest values in state after an update was tricky to get around. However, I found an insightful blog that helped me navigate this issue. Using a custom React hook worked.

import { useState } from "react";

function useSyncState(someState) {
  const [syncState, setSyncState] = useState(someState);

  let currentState = syncState;

  const getCurrent = () => currentState;

  const setState = (newValue) => {
    currentState = newValue;
    setSyncState(newValue);
    return currentState;
  };

  return { getCurrent, setState };
}

export default useSyncState;

Continued development

I haven't done the last bonus feature. I plan on adding it in the future.

Useful resources

  • scrimba - This is in my opinion the best place to learn web development.
  • stack overflow - Whenever I got stuck, I always found some insight here.

Author

Acknowledgments

I had some trouble trying to make state updates synchronous. This blog helped me to do exactly that.