feat(useGamepad): add PS5 DualSense mapping

packages/core/useGamepad/index.md

@@ -85,7 +85,7 @@ function vibrate() {
 
 To make the Gamepad API easier to use, we provide mappings to map a controller to a controllers button layout.
 
-#### Xbox360 Controller
+#### Xbox360 / PS5 DualSense Controller
 
 ```vue
 <script setup>
@@ -102,4 +102,19 @@ const controller = mapGamepadToXbox360Controller(gamepad)
 </template>
 ```
 
-Currently there are only mappings for the Xbox 360 controller. If you have controller you want to add mappings for, feel free to open a PR for more controller mappings!
+```vue
+<script setup>
+import { mapGamepadToPS5DualSenseController } from '@vueuse/core'
+
+const controller = mapGamepadToPS5DualSenseController(gamepad)
+</script>
+
+<template>
+ <span>{{ controller.buttons["⨯"].pressed }}</span>
+ <span>{{ controller.buttons["○"].pressed }}</span>
+ <span>{{ controller.buttons["□"].pressed }}</span>
+ <span>{{ controller.buttons["△"].pressed }}</span>
+</template>
+```
+
+Currently there are only mappings for the Xbox 360 and the PS5 DualSense controller. If you have controller you want to add mappings for, feel free to open a PR for more controller mappings!

packages/core/useGamepad/index.ts

@@ -12,44 +12,20 @@ export interface UseGamepadOptions extends ConfigurableWindow, ConfigurableNavig
 }
 
 /**
- * Maps a standard standard gamepad to an Xbox 360 Controller.
+ * Maps a [standard gamepad](https://w3c.github.io/gamepad/#remapping) to an Xbox 360 Controller.
+ * https://support.xbox.com/en-US/help/xbox-360/accessories/controllers
  */
 export function mapGamepadToXbox360Controller(gamepad: Ref<Gamepad | undefined>) {
  return computed(() => {
  if (gamepad.value) {
  return {
+ ...mapGamepadToStandardController(gamepad.value),
  buttons: {
  a: gamepad.value.buttons[0],
  b: gamepad.value.buttons[1],
  x: gamepad.value.buttons[2],
  y: gamepad.value.buttons[3],
  },
- bumper: {
- left: gamepad.value.buttons[4],
- right: gamepad.value.buttons[5],
- },
- triggers: {
- left: gamepad.value.buttons[6],
- right: gamepad.value.buttons[7],
- },
- stick: {
- left: {
- horizontal: gamepad.value.axes[0],
- vertical: gamepad.value.axes[1],
- button: gamepad.value.buttons[10],
- },
- right: {
- horizontal: gamepad.value.axes[2],
- vertical: gamepad.value.axes[3],
- button: gamepad.value.buttons[11],
- },
- },
- dpad: {
- up: gamepad.value.buttons[12],
- down: gamepad.value.buttons[13],
- left: gamepad.value.buttons[14],
- right: gamepad.value.buttons[15],
- },
  back: gamepad.value.buttons[8],
  start: gamepad.value.buttons[9],
  }
@@ -59,6 +35,69 @@ export function mapGamepadToXbox360Controller(gamepad: Ref<Gamepad | undefined>)
  })
 }
 
+/**
+ * Maps a [standard gamepad](https://w3c.github.io/gamepad/#remapping) to a PS5 DualSense Controller.
+ *
+ * You can find more about PS5 DualSense controller's original part names at
+ * https://controller.dl.playstation.net/controller/lang/en/DS_partnames.html.
+ */
+export function mapGamepadToPS5DualSenseController(gamepad: Ref<Gamepad | undefined>) {
+ return computed(() => {
+ if (gamepad.value) {
+ return {
+ ...mapGamepadToStandardController(gamepad.value),
+ buttons: {
+ '⨯': gamepad.value.buttons[0],
+ '○': gamepad.value.buttons[1],
+ '□': gamepad.value.buttons[2],
+ '△': gamepad.value.buttons[3],
+ 'L1': gamepad.value.buttons[4],
+ 'R1': gamepad.value.buttons[5],
+ 'L2': gamepad.value.buttons[6],
+ 'R2': gamepad.value.buttons[7],
+ },
+ create: gamepad.value.buttons[8],
+ options: gamepad.value.buttons[9],
+ }
+ }
+ return null
+ })
+}
+
+/**
+ * Shared name mapping across different controllers
+ */
+function mapGamepadToStandardController(gamepad: Gamepad) {
+ return {
+ bumper: {
+ left: gamepad.buttons[4],
+ right: gamepad.buttons[5],
+ },
+ triggers: {
+ left: gamepad.buttons[6],
+ right: gamepad.buttons[7],
+ },
+ stick: {
+ left: {
+ horizontal: gamepad.axes[0],
+ vertical: gamepad.axes[1],
+ button: gamepad.buttons[10],
+ },
+ right: {
+ horizontal: gamepad.axes[2],
+ vertical: gamepad.axes[3],
+ button: gamepad.buttons[11],
+ },
+ },
+ dpad: {
+ up: gamepad.buttons[12],
+ down: gamepad.buttons[13],
+ left: gamepad.buttons[14],
+ right: gamepad.buttons[15],
+ },
+ }
+}
+
 export function useGamepad(options: UseGamepadOptions = {}) {
  const {
  navigator = defaultNavigator,