DEV Community: evanryan210

Making Your First Game With React Hooks

evanryan210 — Wed, 24 May 2023 18:59:25 +0000

I. Overview

In this article I will being going over how to create a simple multiple choice game using React. In this walkthrough we will be creating a 'color guessing game' that can be used to familiarize yourself with the hex values of different colors. Building apps like these are a great way to solidify your understanding on the usage of React hooks as they are foundational in what makes the React framework so powerful!

Take a look at the final product on CodeSandbox here.

II. Setup

Here is the basic HTML that we will use for our app. We will add in the rest later.

<div style={{ display: 'flex', flexDirection: 'column' }}>
      <h1 style={{ textAlign: 'center' }}>Pick the Color Value</h1>
      <div className={styles.container}>
        <div style={{ backgroundColor: `${divColor}` }} className={styles.colorBox}>
          <span>{INCORRECT/CORRECT DISPLAY GOES HERE}</span>
        </div>
      </div>
      <div className={styles.buttonContainer}>
        {WHERE MULTIPLE CHOICE OPTIONS GO HERE}
      </div>
      <p style={{ textAlign: 'center' }}>{CORRECT ANSWER COUNT GOES HERE}</p>
      <p style={{ textAlign: 'center' }}>{INCORRECT ANSWER COUNT GOES HERE}</p>
</div>

III. Generating values for initial render of our app

Lets start by initializing the random color that will be displayed in our container box. We will do this by using the 'useState' hook, and giving it an initial value.

Create a function that return 3 random hex values in an array getRandomHexArray().

const getRandomHexArray = () => {
    const value1 = ('#' + Math.floor(Math.random() * 16777215).toString(16))
    const value2 = ('#' + Math.floor(Math.random() * 16777215).toString(16))
    const value3 = ('#' + Math.floor(Math.random() * 16777215).toString(16))
    return [value1, value2, value3]
  }

Now we want to create a variable initialRandomArray that will call the function we just created on each render, so we will have a new random array of hex values every time there is a state change.

let initialRandomArray = getRandomHexArray();

We also need a state that holds a random value of range 0-initialRandomArray.length. This will decide which color code is "Correct" for each question. And we will create another state to hold our initialRandomArrayas well.

const [answerIndex, setAnswerIndex] = useState(Math.floor(Math.random()*3))
const [hexArray, setHexArray] = useState(initialRandomArray);

IV. Displaying buttons using map()

      <div className={styles.buttonContainer}>
        {WHERE MULTIPLE CHOICE OPTIONS GO HERE}
      </div>

Now we will finish this code to properly display our multiple choice options that the user will be clicking on.

<div className={styles.buttonContainer}>
        {hexArray.map((button, index) => {
          return (
            <button key={index} className={styles.button} onClick={()=>{handleSubmit(index)}}>{hexArray[index].toUpperCase()}</button>
          )
        })}

This code returns a element for every value we have inside hexArray. We pass a child to the element of {hexArray[index].toUpperCase()} which displays the hex code on each of our buttons. We also pass to our onClick property a arrow function that runs our submission handler function which we will create now.

V. Handling submissions

const handleSubmit = (index: any) =>{
    hexArray[index] == hexArray[answerIndex] ? handleCorrect() : handleIncorrect()
    let newRandomArray = getRandomHexArray()
    setHexArray(newRandomArray)
    setAnswerIndex(Math.floor(Math.random() * 3))
    setIsOpen(true)
    setTimeout(()=> setIsOpen(false), 1000)
  }

const handleCorrect = () =>{
    setIsCorrect(true)
  }

  const handleIncorrect = () =>{
    setIsCorrect(false)
  }

This function does a few things:

It checks to see if the answer was correct by passing on index of the click event and comparing that to the hexArray at the answerIndex variable we store.
Generates a new random array newRandomArray
Sets isOpen to true, which lets us conditionally render feedback for the user to display 'Correct' or 'Incorrect' on each question as shown below.

<div style={{ backgroundColor: `${hexArray[answerIndex]}` }} className={styles.colorBox}>
     <span className={styles.colorBoxText}>&nbsp;{isOpen ? isCorrect ? 'Correct!' : 'Incorrect' : ''}</span>
</div>

The setTimeout allows us to only display the 'Correct/Incorrect' text briefly for 1000 milliseconds by running an arrow function to set our isOpen variable back to false.

There you go! Your first React game using hooks.

Extra Credit: Add a count for incorrect and correct answers using useRef

Author: Evan Ryan
OrangeSpark Solutions

Sharp Resizer: A CLI App For Resizing Images in Bulk

evanryan210 — Tue, 25 Apr 2023 22:48:17 +0000

Intro

In this article, we will be building a command line interface (CLI) application to assist in creating copies of an image to any number of specified sizes. This tool can be super useful and save you a lot of time, especially when building mobile apps that require different image sizes to display in different parts of the app.

You can download the code through GitHub here: https://github.com/evanryan210/sharp-resize

Getting Started

For this CLI app we will need to install a few node packages. We will be using node package manager so make sure you have that installed at this point. If you do not have it installed you can download it here: https://nodejs.org/en/download. The commands to install the packages we will be using are listed below.

npm install sharp
npm install fs
npm install path

Sharp: A high-speed Node.js module that converts large images to varying dimensions.
Fs: A module that allows you to work with the file system on your computer.
Path: The Path module provides a way of working with directories and file paths.

In our project folder, lets make a json file and name it resize.json. This is where we will store our path to the image we want to resize, our path to the destination we want to save our resized images to, and an array of our desired sizes.

{
    "imagePath" : "[IMAGE PATH TO BE RESIZED]",
    "outputPath": "[DESTINATION FOLDER PATH TO STORE IMAGES]",
    "settings": {
        "ios": [20,29,40,40,58,60,60,76,80,87,120,120,152,167,180,1024],
        "android": [36,48,64,72,96,144,192,512]
    }
}

Note: You can add however many 'settings' values you need. For this example, I did two since I wanted two sets of resized images in their own respective folder.

Setting Up a Watcher

If you are not aware, since we are using Typescript we must compile our code before we run it in node. To avoid having to compile each time we make changes to our app, I prefer to run a watcher in the terminal to save some time. This watcher will look for changes in our file and compile instantly. The command to run the watcher is as follows:

tsc -w

And your terminal should display something like this:

[5:05:25 PM] Starting compilation in watch mode...

[5:05:27 PM] Found 0 errors. Watching for file changes.

(P.S. Make sure not to accidentally close this terminal)

Index.ts

Now we will be working in the root index.ts file of the project. Lets start by defining a 'type', PlatformData, for our json object we just created.

type PlatformData = {
    imagePath: string,
    outputPath: string,
    settings: Record<string, number[]>
}

Now we are going to use the fs module we installed to get the data from our resize.json file using the fs.readFileSync() method.

const data = fs.readFileSync(path.join(`resize.json`), 'utf8');
const parsedData: PlatformData = JSON.parse(data);
const imgPath = parsedData.imagePath //"[IMAGE PATH]"
const folderPath = parsedData.outputPath //"[DESTINATION FOLDER PATH]"

We are then going to parse that data and store it in a variable, parsedData. Now we can use this parsed data and also create imgPath and folderPath.

Now lets make the actual function that is going to take the image size and platform as arguments, and give us a file from the resized image data at the specified path.

const resize = (imgSize: number, platform: string) =>{
    sharp(imgPath)
        .resize(imgSize)
        .toFile(`${folderPath}/${platform}/sample_${imgSize}.jpg`, function (err) {
        });
}

Now that our function to resize our image is done, lets make sure there is a directory to store our new set of resized images by checking if it exists using fs.existsSync(folderPath). If it does not exist, we can use fs.mkdirSync(folderPath) to create a folder as shown below.

if (!fs.existsSync(folderPath)){
    fs.mkdirSync(folderPath)
}

Lastly, we need to do a try...catch that will use a forEach() loop to iterate through the values in our array(s) and resize the image to each size being passed. After this stage you have a completed resizing app!

try {
    const platforms = parsedData.settings
    Object.keys(platforms).forEach(platform => {
        if (!fs.existsSync(`${folderPath}/${platform}`)) {
            fs.mkdirSync(`${folderPath}/${platform}`)
            //Only if you want platform specific folders
        }
        const platformSizes = platforms[platform]
        platformSizes.forEach(size => {
            resize(size, platform)
        })
    })
    console.log(`Resizer has loaded images here: ${folderPath} `)
} catch (err) {
    console.error(err);
}

Usage

To use the app we just created, make sure the resize.json has the proper values for imagePathand outputPath, and simply run the following command in the terminal.

node index

I hoped you enjoyed this walkthrough! Best of luck in your coding endeavors :D

Author,
Evan Ryan, OrangeSpark Solutions