It is important to define a protocol to be used between external communications, it can be standard between more than one event.

• bluetooth
• webrtc #33
• websocket #21

for some reason it only behaves badly on physical iPhone/smartphone hardware, but on the cell phone emulator through the browser it works fine.

a gamepad test page for anyone who wants to check the calibration.

It is a simple solution to maintain state and compare them to update necessary buttons thus avoiding conflicting event calls.

investigate small code smells and duplicate codes.

references

• https://codeclimate.com/github/RodrigoDornelles/npm-gamepadzilla

tasks

• create function center2d in src/util.ts
• refactor the function construct()

• data-gpz-color
• data-gpz-color-active

It would be interesting to investigate the possibility of implementing p2p (peer to peer connection), the question would be an intermediate server to resolve connections, but it seems to me that Google provides this.

references

• https://dev.to/alakkadshaw/google-stun-server-list-21n4
• https://developer.mozilla.org/pt-BR/docs/Web/API/WebRTC_API

html attributes

• data-gpz-webrtc-server
• data-gpz-webrtc-channel
• data-gpz-webrtc-player
  • 0, 1, 2, 3
  • auto

Browsers are generating error logs when on computers you have to hover your mouse over two buttons before clicking somewhere.

console log

[Intervention] Blocked call to navigator.vibrate because user hasn't tapped on the frame or any embedded frame yet: <URL>

solution

detect event click in the window.document to activate feedbacks.

Support the cell phone's gyroscope, which can be 1, 2 or 3 axes at the same time.

references

• https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent
• https://developer.mozilla.org/en-US/docs/Web/API/Window/devicemotion_event
• #24

features

• data-gpz-motion add axis to controll

examples

simple controls joystick

<canvas
  class="gpz-joy"
  data-gpz-bind="KeyW KeyA KeyS KeyD"
  data-gpz-motion="X Y">
</canvas>

by default must be activated!

• https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API

Configuring force

• single feedback

<canvas class="gpz-btn" data-gpz-vibrate="200"></canvas>

• annimation

<canvas class="gpz-btn" data-gpz-vibrate="100 200 100"></canvas>

Disable

<canvas class="gpz-btn" data-gpz-vibrate="0"></canvas>

<canvas class="gpz-btn" data-gpz-vibrate="false"></canvas>

arrow style directional buttons

• gpz-data-color #29
• gpz-data-color-action #29
• gpz-data-size
• gpz-data-offset

Like legend of zelda support scream like gamepad action

references

• https://developer.mozilla.org/pt-BR/docs/Web/API/Navigator/getUserMedia
• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
• https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API

features

• data-gpz-loud sound noise tolerance

examples

simple controls joystick

<canvas
  class="gpz-btn"
  data-gpz-bind="KeyF"
  data-gpz-loud="50">
</canvas>

• gpz-hidden-on-startup
• gpz-hidden-on-desktop
• gpz-hidden-on-gamepad
• gpz-show-on-touchevent
• gpz-show-on-gamepad

Create a separate library for npm that depends on gamepadzilla, which allows you to use it as a react component.

• package.json
• react component

path suggestion

src/
wrappers/
--react/
----src/
----package.json
package.json

Support the cell phone's gyroscope, which can be 1, 2 or 3 axes at the same time.

references

• https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope

features

• data-gpz-gryo add axis to controll

examples

car wheel steering

<canvas
  class="gpz-car-steering"
  data-gpz-bind="KeyA KeyD"
  data-gpz-gryo="Y">
</canvas>

simple controls joystick

<canvas
  class="gpz-joy"
  data-gpz-bind="KeyW KeyA KeyS KeyD"
  data-gpz-gryo="X Y">
</canvas>

Bun already has the possibility of receiving test coverage results, but it does not yet generate reports in lcov format.

• start unit tests for frontend
• add coverage results in the pipeline
• generate coverage reports in lcov
• report coverage to quality plataform (like codacy, codeclimate...)
• add badge in the readme

extra

Maybe I can study a temporary way to convert the bun report to a more basic lcov while it is still being developed, with knowledge if you haven't worked on it yet I can contribute to bun and also 3bc.

related

• oven-sh/bun#4015
• oven-sh/bun#2311
• oven-sh/bun#4365
• oven-sh/bun#6716
• https://codefresh.io/blog/codacy-coverage-reports/

The physical gamepad support is very poor, it is only suitable for the Coco Battle Royale game, as it is simpler. It would be interesting to improve the control options.

related #18 #19

• data-gpz-gamepad-player none, all, odd, even, 0, 1...
• data-gpz-gamepad-bind btn1 btn2 xboxA xboxB

support sizes like css with at least the main variations.

data-gpz-radius

border of joystick size

• default (100%)
• 0..1
• `%'
• px
• vh
• vw
• vmin
• vmax

data-gpz-range

how much the center stick can go beyond the edge of the border joystick.

• default (150%)
• 0..1
• %

• https://stackoverflow.com/questions/4032179/how-do-i-get-the-width-and-height-of-a-html5-canvas

• data-gpz-action-up
• data-gpz-action-down

html5 attribute

<canvas class="gpz-btn" data-gpz-action-down="console.log(this)"></canvas>

callback

document.querySelectorAll('.gpz-btn').foreach(el => {
  el.addEventListener('gpz-action-down', ev => {
   console.log(ev)
 })
})