Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gamepad API events #302

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open

Conversation

poirierlouis
Copy link
Contributor

@poirierlouis poirierlouis commented Jul 24, 2021

Gamepad API

Introducing gamepad events, I'll let pictures spoke for them self:

2021-07-24_keycode_gamepad-demo-index

2021-07-24_keycode_gamepad-demo-connected

2021-07-24_keycode_gamepad-demo-light-theme

I've tested it on Firefox, Chrome and Edge with success using an Xbox One Controller.
Key events are ignored while at least one gamepad is connected.

This is still a draft as I await for your feedback and suggestions.
Could someone with controllers of other vendors try this ?

Roadmap

  • Table should show gamepad buttons / axes when a gamepad is connected.
  • Verify responsiveness.
  • ...

Tests

  • Xbox One controller
  • Xbox Series X controller
  • Dual Shock controller
  • Joy-con controller
  • ...

License

SVG comes from Gamepad W3C Editor's draft and is linked along with W3C license. Thanks @sgraham for the original asset.

@palashmon Eventually, is it ok to include my name with this contribution ? (see footer)

…vents and gamepad events.

Gamepad logic : listen to gamepad events and show buttons / axes mapping.
Gamepad UI : show a custom gamepad svg based on w3c/gamepad@bcbdd92.
Gamepad UX : cards and svg are responsive and reuse current theme styles.
…ad compatible across browsers.

UX : triggers notifications to warn user when a gamepad is already connected or when at least one gamepad is still connected.
Fix SVG : implements a function to retrieve the gamepad SVG document.
Documentation : adds types information for comments.
…through the gamepad listening loop.

Improved UX: notifications are now readable using longer timeouts.
@poirierlouis poirierlouis marked this pull request as ready for review August 7, 2021 00:41
@cabinfvr
Copy link

cabinfvr commented Nov 7, 2021

thats cool

@wesbos
Copy link
Contributor

wesbos commented Jan 11, 2022

man this is really cool! I'm sorry I didn't see this earlier! Will look a bit more into it

@poirierlouis
Copy link
Contributor Author

Thanks, I figure I may have refactored too much code...
I also noticed that you started a with-nextjs branch with React. If you feel this content is ok but need it on with-nextjs, I'd be more than happy to code it for React.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants