feat(gamepad-tester): add button images #233
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces button images into the gamepad tester UI and migrates to an externally hosted gamepad helper library. Key changes include updating the HTML to load the new dependency and tweaking UI labels, as well as refactoring gamepad-tester.js to call methods on a gamepadHelper instance instead of a static GamepadHelper object.
Reviewed Changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| gamepad-tester.html | Adds external dependency and updates UI text for stick labels. |
| assets/js/gamepad-tester.js | Instantiates gamepadHelper, updates helper method calls, and improves DOM creation. |
| assets/js/gamepad-helper.js | Removal of the local helper in favor of the externally maintained library. |
Files not reviewed (1)
- _sass/circular-progress.scss: Language not supported
Comments suppressed due to low confidence (1)
gamepad-tester.html:9
- Verify that the external gamepad-helper library provides all the necessary methods (including getButtonImagePath) and that its version is compatible with the current integration.
- https://cdn.jsdelivr.net/npm/@lizardbyte/[email protected]/dist/gamepad-helper.js
| // Create the progress elements | ||
| const progressLeft = document.createElement('span'); | ||
| progressLeft.className = 'progress-left'; | ||
| progressLeft.innerHTML = `<span class="progress-bar" id="progress-bar-left-${i}"></span>`; | ||
|
|
||
| const progressRight = document.createElement('span'); | ||
| progressRight.className = 'progress-right'; | ||
| progressRight.innerHTML = `<span class="progress-bar" id="progress-bar-right-${i}"></span>`; | ||
|
|
||
| // Create the button content | ||
| const buttonContent = document.createElement('div'); | ||
| buttonContent.className = 'button-content'; | ||
|
|
||
| // Add either image with fallback text, or just text | ||
| if (buttonImagePath) { | ||
| buttonContent.innerHTML = ` | ||
| <div class="button-image-container"> | ||
| <img src="${buttonImagePath}" alt="${buttonName}" class="button-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"> | ||
| <div class="button-name" style="display: none;">${buttonName}</div> | ||
| </div> | ||
| <div class="button-value" id="button-value-${i}">0.00</div> | ||
| `; | ||
| } else { | ||
| buttonContent.innerHTML = ` | ||
| <div class="button-name">${buttonName}</div> | ||
| <div class="button-value" id="button-value-${i}">0.00</div> | ||
| </div> | ||
| `; | ||
| `; | ||
| } | ||
|
|
There was a problem hiding this comment.
[nitpick] Consider refactoring the repeated DOM creation logic for progress elements and button content into a separate helper function to improve code maintainability.
Copilot uses AI. Check for mistakes.
assets/js/gamepad-tester.js
Outdated
| @@ -1,4 +1,6 @@ | |||
| document.addEventListener('DOMContentLoaded', function() { | |||
| const gamepadHelper = new GamepadHelper() | |||
| const gamepadHelperVersion = '2025.501.232754' | |||
There was a problem hiding this comment.
[nitpick] Consider externalizing the version constant to a centralized configuration so that updates to the dependency version can be managed more easily.
Copilot uses AI. Check for mistakes.
Description
This PR adds button images and moves the gamepad-helper.js to the new https://github.com/LizardByte/gamepad-helper library.
Buttons icons change depending on the type of gamepad connected.
TODO:
Screenshot
Issues Fixed or Closed
Type of Change
.github/...)Checklist