Show percentage for amount L2 and R2 is pressed

Add "Don't show again" option to the Edge disclaimer modal

assets/dualshock-controller.svg

@@ -105,4 +105,8 @@
       <path d="M664.07,419.78c-.01,26.37-21.16,47.39-47.6,47.32-26.19-.06-48.19-21.58-47.62-47.5.59-26.82,21.12-47.52,48.44-47.45,26.83.08,46.79,21.47,46.78,47.62ZM658.23,419.7c.55-22.76-17.76-41.19-40.35-41.72-23.43-.55-42.68,18.19-43.29,40.74-.65,23.92,18.7,41.15,39.11,42.46,25.96,1.66,44.96-18.72,44.52-41.48Z"/>
     </g>
   </g>
+  <g id="TriggerPercentages" transform="translate(0,0.65) scale(0.70)">
+    <text id="L2_percentage" x="160" y="80" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#1a237e" text-anchor="middle" opacity="0">0 %</text>
+    <text id="R2_percentage" x="750" y="80" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#1a237e" text-anchor="middle" opacity="0">0 %</text>
+  </g>
 </svg>

js/core.js

@@ -110,6 +110,11 @@ function gboot() {
     show_welcome_modal();
 
     $("input[name='displayMode']").on('change', on_stick_mode_change);
+
+    // Setup edge modal "Don't show again" checkbox
+    $('#edgeModalDontShowAgain').on('change', function() {
+      localStorage.setItem('edgeModalDontShowAgain', this.checked.toString());
+    });
   }
 
   // Since modules are deferred, DOM might already be loaded
@@ -583,6 +588,15 @@ function update_ds_button_svg(changes, BUTTON_MAP) {
       const svg = trigger.toUpperCase() + '_infill';
       const infill = document.getElementById(svg);
       set_svg_group_color(infill, color);
+
+      // Update percentage text
+      const percentage = Math.round((val / 255) * 100);
+      const percentageText = document.getElementById(trigger.toUpperCase() + '_percentage');
+      if (percentageText) {
+        percentageText.textContent = `${percentage} %`;
+        percentageText.setAttribute('opacity', percentage > 0 ? '1' : '0');
+        percentageText.setAttribute('fill', percentage < 35 ? pressedColor : 'white');
+      }
     }
   }
 
@@ -880,6 +894,12 @@ function show_donate_modal() {
 }
 
 function show_edge_modal() {
+  // Check if user has chosen not to show the modal again
+  const dontShowAgain = localStorage.getItem('edgeModalDontShowAgain');
+  if (dontShowAgain === 'true') {
+    return;
+  }
+
   la("edge_modal");
   bootstrap.Modal.getOrCreateInstance('#edgeModal').show();
 }

js/modals/calib-center-modal.js

@@ -120,7 +120,7 @@ export class CalibCenterModal {
       return;
 
     this.setProgress(0);
-    new bootstrap.Modal(document.getElementById('calibrateModal'), {}).show();
+    new bootstrap.Modal(document.getElementById('autoCalibCenterModal'), {}).show();
 
     await sleep(1000);
 

js/template-loader.js

@@ -77,7 +77,7 @@ export async function loadAllTemplates() {
   const finetuneModalHtml = await loadTemplate('finetune-modal');
   const calibCenterModalHtml = await loadTemplate('calib-center-modal');
   const welcomeModalHtml = await loadTemplate('welcome-modal');
-  const calibrateModalHtml = await loadTemplate('calibrate-modal');
+  const autoCalibCenterModalHtml = await loadTemplate('auto-calib-center-modal');
   const rangeModalHtml = await loadTemplate('range-modal');
   const edgeProgressModalHtml = await loadTemplate('edge-progress-modal');
   const edgeModalHtml = await loadTemplate('edge-modal');
@@ -87,6 +87,6 @@ export async function loadAllTemplates() {
   // Create modals container
   const modalsContainer = document.createElement('div');
   modalsContainer.id = 'modals-container';
-  modalsContainer.innerHTML = faqModalHtml + popupModalHtml + finetuneModalHtml + calibCenterModalHtml + welcomeModalHtml + calibrateModalHtml + rangeModalHtml + edgeProgressModalHtml + edgeModalHtml + donateModalHtml + quickTestModalHtml;
+  modalsContainer.innerHTML = faqModalHtml + popupModalHtml + finetuneModalHtml + calibCenterModalHtml + welcomeModalHtml + autoCalibCenterModalHtml + rangeModalHtml + edgeProgressModalHtml + edgeModalHtml + donateModalHtml + quickTestModalHtml;
   document.body.appendChild(modalsContainer);
 }

templates/auto-calib-center-modal.html

@@ -1,5 +1,5 @@
 <!-- Modal -->
-<div class="modal fade" id="calibrateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+<div class="modal fade" id="autoCalibCenterModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">

templates/edge-modal.html

@@ -28,6 +28,10 @@
 
       </div>
       <div class="modal-footer">
+        <div class="form-check me-auto">
+          <input class="form-check-input" type="checkbox" id="edgeModalDontShowAgain">
+          <label class="form-check-label ds-i18n" for="edgeModalDontShowAgain">Don't show again</label>
+        </div>
         <button type="button" class="btn btn-primary ds-i18n" data-bs-dismiss="modal">Understood</button>
       </div>
     </div>