Rocket Input Controller

🎮 React component that displays a controller operated by inputs from a CSV file, generated by the associated bakkesmod plugin -> InputLogger in Rocket League.

The component takes a CSV that looks like this...

| time | throttle | jump | boost | dodgeForward | dodgeStrafe | handBrake | roll | directionalAirRoll | | :--------- | ------------ | -------- | --------- | ---------------- | --------------- | ------------- | -------- | ---------------------- | | 0 | 1.000000 | 0 | 0 | 0.238865 | 0.999967 | 0 | 0.000000 | 0 | | 19398 | 1.000000 | 0 | 0 | 0.238865 | 0.999967 | 0 | 0.000000 | 0 | | 71106 | 1.000000 | 0 | 0 | 0.238865 | 0.999967 | 0 | 0.000000 | 0 | | 108450 | 1.000000 | 0 | 0 | 0.230432 | 0.999967 | 0 | 0.000000 | 0 | | 148690 | 1.000000 | 0 | 0 | 0.230432 | 0.999967 | 0 | 0.000000 | 0 | | ... | ... | ... | ... | ... | ... | ... | ... | ... |

And displays a controller that follows a timer, here orchestrated by a video playback :

Install

With npm:

npm i rocket-input-controller

or with yarn:

yarn add rocket-input-controller

Usage

Prerequisites

• A CSV file that follows the format described above using the bakkesmod plugin -> InputLogger.
• (optional) A video that matches actions described in the CSV.

The main component is ControllerOperator, which takes a CSV file and a mapping, and displays a controller that follows the CSV.

import { ControllerOperator, ControllerType, Color, defaultMapping } from 'rocket-input-controller'

return (
  <ControllerOperator
    intervalTiming={75}
    csv={...}
    controller={{
      type: ControllerType.XboxOne,
      color: Color.Black,
    }}
    mapping={defaultMapping}
    playing={true}
    currentTime={...}
  />
)

Configuration

Everything configurable will be stored using localforage so the configuration will be kept between page reloads.

Controller

Controller can be changed using saveController, getController will return the current saved controller (or default one if there's not).

Available controllers are XboxOne and PS4, each with a black and white variation.

Example

import { saveController } from 'rocket-input-controller'

await saveController({
  ...controller,
  type: ControllerType.PS4,
  color: Color.White,
})

Mapping

Controller mapping can be changed using saveControllerMapping, getControllerMapping will return the current saved mapping (or default one if there's not).

Example

import { saveControllerMapping, ControllerInputs } from 'rocket-input-controller'

await saveControllerMapping({
  throttle: ControllerInputs.TriggerRight,
  brake: ControllerInputs.TriggerLeft,
  jump: ControllerInputs.FaceDown,
  boost: ControllerInputs.BumperRight,
  handBrake: ControllerInputs.FaceLeft,
  directionalAirRoll: ControllerInputs.BumperLeft,
  airRollLeft: ControllerInputs.FaceLeft,
  airRollRight: ControllerInputs.FaceRight,
})

Full example

You can clone the repo and run the example shown in the video to see how it works. Have fun ! 🎉