Forem: Zachary Shifrel

React: generating elements wherever you click on the screen

Zachary Shifrel — Tue, 06 Dec 2022 20:34:34 +0000

After seeing Josh's animated sparkles in react tutorial, I played around with doing something similar using react-spring. Suppose you want to generate an image, text, “+1 exp,” etc. whenever a user clicks on a certain part of the screen.

First, create the component to be generated on the user’s click. I’ll call it Spawn:

// App.tsx
const Spawn = () => {
  return (
    <div>
      Spawn
    </div>
  )
}

We want to place this at a certain (x,y) coordinate on the screen, which we can grab from a mouse event, specifically from the clientX and clientY properties.

In a higher up component, create a click handler and pass the event as a parameter. Then we’ll destructure the clientX/clientY properties from event:

// App.tsx
const App = () => {
    const clickHandler = (event: React.MouseEvent) => {
        const { clientX, clientY } = event
        console.log(clientX, clientY)
    }

    return (
        <div
            className="App"
            onClick={(event) => clickHandler(event)} # hover over event to see type
        >
        </div>
    )
}

Whenever you click inside the div, the x and y coordinates of the click should be logged to your console. Make sure to give the div some height and width (and a border to see its bounds).

We’re going to want to keep track of the Spawns that are being generated, and pass the clientX/clientY properties to our Spawns component whenever the user clicks in a new spot. We can do this in a state array, typing the array with an array of Spawn types that will have x and y coordinates:

// App.tsx
type Spawn = {
    x: number,
    y: number
}

const App = () => {
    const [spawns, setSpawns] = useState<Spawn[]>([]) # state array

    const clickHandler = (event: React.MouseEvent) => {
        const { clientX, clientY } = event
        console.log(clientX, clientY)

    // on each click, add a new x, y pair to the spawns array
    setSpawns([
            ...spawns, 
            {
                x: clientX,
                y: clientY
            }
        ])
    }

    return (
        <div
            className="App"
            onClick={(event) => clickHandler(event)} # hover over event to see type
        >
            {/* map over the spawns array and return the Spawn component for each
            x, y coordinate pair inside the spawns state array
            */}
            {
                spawns.map(spawn => {
                    return (
                        <Spawn
                            x={spawn.x}
                            y={spawn.y}
                        />
                    )
                })
            }
        </div>
    )
}

Now, when you click inside the App div, you should see the word “Spawn” appear. We need to make sure the word appears near the click.

Let’s give the Spawn div a style to correct its placement. I also changed the text in the div to “+1” instead.

// App.tsx
const Spawn = ({x, y}: Spawn) => {
    const spawnStyles = {
    position: 'absolute',
        left: x + 'px',
        top: y + 'px',
        transform: `translate(-50%, -50%)`
    }

    return (
        <animated.div 
            style={spawnStyles}
        >
            <p>+1</p>
        </animated.div>
    )
}

Next, declutter the screen by cleaning up the generated Spawns. We can use the combination of a useEffect hook and setInterval to do so:

// App.tsx
const App = () => {
    const [spawns, setSpawns] = useState<Spawn[]>([])

    const clickHandler = (event: React.MouseEvent) => {
        const { clientX, clientY } = event
        console.log(clientX, clientY)

        setSpawns([
            ...spawns,
            {
                x: clientX,
                y: clientY
            }
        ])
    }

    useEffect(() => {
        // until there are no spawns, remove the 
    // first added spawn every interval
        const interval = setInterval(() => {
            if (spawns.length > 0) {
                const newSpawns = [...spawns]
                newSpawns.shift()
                setSpawns(newSpawns)
            }
        }, 200)

        // cleanup
        return () => clearInterval(interval)
    }, [spawns])

    return (
        <div 
            className="main-container"
            onClick={(event) => clickHandler(event)}
        >
           {/* map over the spawns array and return the Spawn component for each
        x, y coordinate pair inside the spawns state array
        */}
            {
                spawns.map(spawn => {
                    return (
                        <Spawn
                            x={spawn.x}
                            y={spawn.y}
                        />
                    )
                })
            }
        </div>
    )
}

The effect takes spawns as a dependency, and is run whenever the spawns array changes. Then, at an interval of 200 ms, the first added spawn (because of the .shift() method) is removed from the state array until the array is empty.

Animating the Spawns [ Optional ]

The only thing left to do is animate the spawns once they’re added to the screen. We could do this with css keyframes, framer motion, or react spring. I chose react spring.

npm install react-spring

// App.tsx
import { useSpring, animated } from 'react-spring'

Divs and other elements can be turned into animated.divs in order to apply the useSpring hook to them.

react-spring can be used to change the styles applied to a div over a certain duration (I use the default duration). Config options can also be supplied to make the animation more or less springy, changing the bounce, velocity, and so on. Here, I simply change the Y value of transform: translate(x%, y%) to make the +1 spawn rise on the screen before it disappears. I also change the opacity from 0 to 1. Lastly, Object.assign() lets us combine two style objects into one.

const Spawn = ({x, y}: Spawn) => {
    const animation = useSpring({
        to: { 
                transform: `translate(-50%, -130%)`,
                opacity: 1
            },
        from: { 
                transform: `translate(-50%, -50%)`,
                opacity: 0
            },
        config: {
            frequency: .5,
            bounce: 2,
            damping: .8
        }
    })

    const spawnStyles = {
    position: absolute,
        left: x + 'px',
        top: y + 'px',
        // transform: `translate(-50%, -50%)`,
    }
    return (
        <animated.div
    // Object.assign() combines the two different style objects
            style={Object.assign(animation, spawnStyles)}
        >
            <p>+1</p>
        </animated.div>
    )
}

Here's a sandbox of the code without typescript.

Bugs

A problem with this implementation is that the cleanup method leaves a lot to be desired. If the user clicks too quickly, too many elements will be generated on the screen and will take noticeably longer times to leave the screen. The way Josh handled this in his blog (under "generation and cleanup") is way more elegant.

React clicker game: useState vs redux toolkit

Zachary Shifrel — Tue, 06 Dec 2022 20:18:35 +0000

Let's make the skeleton of a clicker (idle) game in React. To manage our game's state, I'll start off by using the useState hook, and later upgrade it to redux toolkit. I came across this clicker vanilla javascript tutorial and thought it'd be helpful to expand upon it using React and its hooks.

useState Clicker

Create a new react project using create-react-app or Vite. I'm using Vite with typescript:

npm create vite@latest .

Create a "components" folder and a file named "Game.tsx" if you're using typescript. In that file, I use the "tsrafce" snippet to generate the boilerplate:

// Game.tsx
import React from 'react'

type Props = {}

const Game = (props: Props) => {
  return (
    <div>Game</div>
  )
}

export default Game

I then import Game from components into App.tsx:

// App.tsx
import Game from "./components/Game"

function App() {
  return (
    <div className="App">
      <Game />
    </div>
  )
}

Setup

To set up the clicker game, we'll need to store some state: how much currency the user has, how powerful their clicks are (in generating currency), how much currency they generate idly, etc. For now, store the state in a useState object:

// Game.tsx
import React, { useState } from 'react'

type Props = {}

const Game = (props: Props) => {
  // store game state
  const [gameState, setGameState] = useState({
        currency: 0,
        clickPower: 10,
        currencyPerMs: .001
    })

  return (
    <div>Game</div>
  )
}

export default Game

Give the div inside the Game component a style so that users have some area to click in, and make sure that your App itself has some width and height.

.game__container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

// Game.tsx
import React, { useState } from 'react'

import './styles.css'

type Props = {}

const Game = (props: Props) => {
  // store game state
  const [gameState, setGameState] = useState({
        currency: 0,
        clickPower: 10,
        currencyPerMs: .001
    })

  return (
    <div className="game__container">Game</div>
  )
}

export default Game

User Clicks

To update the game on each user click, add a click handler to mutate the currency inside gameState. You could do this with a button or svg, whereas I'm simply allowing users to click inside the game div to increment their currency.

// Game.tsx
const Game = (props: Props) => {
  // store game state
  const [gameState, setGameState] = useState({
        currency: 0,
        clickPower: 10,
        currencyPerMs: .001
    })

   const handleClick = () => {
        setGameState(prevState => ({
            ...prevState, // spread prevState values
            currency: parseFloat((prevState.currency + prevState.clickPower).toFixed(2)) // update currency
        }))

        console.log("clicked")
    }

  return (
    <div
      className="game__container"
      onClick={() => handleClick()}
    >
      <h3>Currency: {gameState.currency}</h3>
    </div>
  )
}

export default Game

The parseFloat((prevState.currency + prevState.clickPower).toFixed(2)) code uses toFixed(2) to round the number to two places just in case our values are decimals later on, while parseFloat converts the string returned by toFixed(2) to a number.

Now, when the user clicks inside the box, the currency value should be updated inside state.

AutoClicker

Let's move on to autoclicking: the user will gain some amount of currency every millisecond (or some other interval). We'll have to use useEffect and setInterval.

// Game.tsx
const Game = (props: Props) => {
  // store game state
  const [gameState, setGameState] = useState({
        currency: 0,
        clickPower: 10,
        currencyPerMs: .001
    })

   const handleClick = () => {
        setGameState(prevState => ({
            ...prevState, // spread prevState values
            currency: parseFloat((prevState.currency + prevState.clickPower).toFixed(2)) // update currency
        }))

        console.log("clicked")
    }

   const updateGame = (delta_time: number) => {
         setGameState(prevState => ({
                  ...gameState,
                  currency: parseFloat((prevState.currency + prevState.currencyPerMs * delta_time).toFixed(2))
              }))
   }

   // game loop
   useEffect(() => {
        let last_time: null | number = null // previous current time
        const loop = setInterval(() => {
            const time_now = performance.now() // current time
            if (last_time === null) {
                last_time = time_now
            }
            const delta_time = time_now - last_time // change in time
            last_time = time_now 

            updateGame(delta_time)
        }, 1000 / 60) // frequency

        return () => clearInterval(loop) // clean up the interval
    }, [])

  return (
    <div
      className="game__container"
      onClick={() => handleClick()}
    >
      <h3>Currency: {gameState.currency}</h3>
    </div>
  )
}

export default Game

We add an updateGame function in order to update the currency in the effect, every time the interval runs. In the interval inside the effect, we first initialize a variable to store the previous time, last_time, in order to later calculate the change in time const delta_time = time_now - last_time between then and const time_now = performance.now().

Here's a sandbox with the current code so far without typescript.

Redux Clicker

To implement the clicker using redux toolkit instead of useState, we'll need a store, a slice with some reducers, and a few custom hooks to grab the data from the store (useSelector) and to update the data in the store (useDispatch).

Store Setup

Download react-redux and redux toolkit:

npm i react-redux @reduxjs/toolkit

Create a State folder, with the files store.ts and gameSlice.ts. In store.ts, do some initial setup:

// store.ts
import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
    reducer: {
    }
})

// some typing
export type RootState = ReturnType<typeof store.getState> 
export type AppDispatch = typeof store.dispatch

At the moment we don't have any reducers, so we'll need to create them in gameSlice, import them into store.tsx, and place them inside the store.

First, wrap the App in a store provider so we can access and update the store wherever we want in the app:

// main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'

import './index.css'
import App from './App'
import { store } from './State/store'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

Now setup the gameSlice. We'll use the same state data structure as we did in the useState version.

// gameSlice.ts
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    currency: 0,
    clickPower: 10,
    currencyPerMs: .001
}

const gameSlice = createSlice({
    name: "game",
    initialState,
    reducers: {}
})

// export reducer
export default gameSlice.reducer

Inside the reducers: {} in gameSlice is where we'll store the logic to update the game state. For now, we export the gameSlice.reducer to import it into store.tsx:

// store.ts
import { configureStore } from '@reduxjs/toolkit'
import { useDispatch, useSelector } from 'react-redux'
import type { TypedUseSelectorHook } from 'react-redux'

import gameReducer from './gameSlice'

export const store = configureStore({
    reducer: {
      game: gameReducer // here's where your reducers live if you want to add more
    }
})

// store typing
export type RootState = ReturnType<typeof store.getState> 
export type AppDispatch = typeof store.dispatch

// hooks typing
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Instead of using the base useSelector and useDispatch hooks, we'll use gently typed hooks exported from the store.tsx file above.

Game Logic

As an alternative to the updateGame function used in the useState clicker's game loop, we'll dispatch actions to update state. We need to create those actions inside the game slice. For now, we'll make two: increment and auto increment.

// gameSlice.ts
const gameSlice = createSlice({
    name: "game",
    initialState,
    reducers: {
        // auto increment currency 
        autoIncrement: (state, action) => {
            const newCurrency = parseFloat((state.currency + state.currencyPerMs * action.payload).toFixed(2))
            state.currency = newCurrency
        },

        // increment currency by click
        increment: (state) => {
            const newCurrency = parseFloat((state.currency + state.clickPower).toFixed(2))
            state.currency = newCurrency
        },
    }
})

// export actions
export const {
    increment,
    autoIncrement
} = gameSlice.actions

The actions use the same logic as the useState Clicker, except the autoIncrement action receives a payload, specifically the delta_time information that was passed to updateGame. The increment action simply adds the state's clickPower to the state's currency, so it doesn't need to receive any data through the action.payload.

Selecting and Dispatching

We now need to retrieve the state data and update it. Since we exported the useAppSelector and useAppDispatch hooks (the slightly modified useSelector and useDispatch hooks that redux provides) from store, and the incremenent and autoIncrement actions from gameSlice, we import them to be used in our main game file.

We'll use the same useEffect and setInterval structure as before for the game loop.

// Game.tsx
import { useAppDispatch, useAppSelector } from '../../State/stateHooks'
import { increment, click, upgrade } from '../../State/gameSlice'

const GameLoop = () => {
  // initialize useAppDispatch and useAppSelector
  const currency = useAppSelector((state) => state.game.currency)
  const dispatch = useAppDispatch()

  // redux user click handler
  const handleClick = () => {
    dispatch(click())
  }

  // redux game loop
  useEffect(() => {
    let last_time: null | number = null
    const loop = setInterval(() => {
      const time_now = performance.now()
      if (last_time === null) {
        last_time = time_now
      }
      const delta_time = time_now - last_time
      setTotalTime(prevTotalTime => prevTotalTime + delta_time)
      last_time = time_now 

      dispatch(increment(delta_time))
    }, 1000 / 60) // fps

    return () => clearInterval(loop)
   }, [])

  return (
    <div
      className="game__container"
      onClick={() => handleClick()}
    >
      <h3>Currency: {currency}</h3>
    </div>
  )
}

Going Farther

Of course, this is barely a skeleton of an actual clicker game. We'll need to add upgrades to the autoClicker, to the user's clickPower, some sort of mechanism to save the user's progress, styling, and other optional features.