Joystick Support

[calejvaldez]

Summary

Iris should be able to support joysticks for accessibility purposes.

Concept images and/or code

gilrs

[calejvaldez]

A way I think we can approach this is by creating a JoystickWrapper component that takes props labeled left, right, up, down and would include an id, like {left: "COMPONENT_ID"} . When a user makes a movement using a joystick, the JoystickWrapper would have a red border. If a user makes a valid movement (that is, a key is available in the object for that movement), it'll add a red border to the COMPONENT_ID.

Pseudocode:

type JoystickWrapperProps = {
  left?: string;
  right?: string;
  up?: string;
  down?: string;
}

export default function JoystickWrapper({left, right, up, down}) {
   
}

The biggest downside to this is needing to implement this to all the other existing Iris code.