From 03be36b16528e2f288489a7dea4e0c2cfc10f8fb Mon Sep 17 00:00:00 2001
From: Ethan O'Brien <ethan.a.obrien@gmail.com>
Date: Mon, 14 Apr 2025 10:40:20 -0500
Subject: [PATCH] Dropdown for gamepad selection

---
 data/emulator.css    | 15 ++++++++++++++
 data/src/emulator.js | 49 ++++++++++++++++++++++++++++++++++++++------
 2 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/data/emulator.css b/data/emulator.css
index 6ab06b2..33f087d 100644
--- a/data/emulator.css
+++ b/data/emulator.css
@@ -1396,3 +1396,18 @@
 .ejs_netplay_table_row:hover {
     background-color: #2d2d2d;
 }
+
+.ejs_gamepad_dropdown {
+  background-color: var(--ejs-background-color);
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-family: inherit;
+  outline: none;
+  cursor: pointer;
+}
+
+.ejs_gamepad_dropdown:focus {
+  box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.6);
+}
diff --git a/data/src/emulator.js b/data/src/emulator.js
index bc82c17..ea85114 100644
--- a/data/src/emulator.js
+++ b/data/src/emulator.js
@@ -1112,6 +1112,12 @@ class EmulatorJS {
         this.gamepad = new GamepadHandler(); //https://github.com/ethanaobrien/Gamepad
         this.gamepad.on('connected', (e) => {
             if (!this.gamepadLabels) return;
+            for (let i=0; i<this.gamepadSelection.length; i++) {
+                if (this.gamepadSelection[i] === "") {
+                    this.gamepadSelection[i] = this.gamepad.gamepads[e.gamepadIndex].id;
+                    break;
+                }
+            }
             this.updateGamepadLabels();
         })
         this.gamepad.on('disconnected', (e) => {
@@ -1135,11 +1141,18 @@ class EmulatorJS {
     }
     updateGamepadLabels() {
         for (let i=0; i<this.gamepadLabels.length; i++) {
-            if (this.gamepad.gamepads[i]) {
-                this.gamepadLabels[i].innerText = this.gamepad.gamepads[i].id;
-            } else {
-                this.gamepadLabels[i].innerText = "n/a";
+            this.gamepadLabels[i].innerHTML = ""
+            const def = this.createElement("option");
+            def.setAttribute("value", "notconnected");
+            def.innerText = "Not Connected";
+            this.gamepadLabels[i].appendChild(def);
+            for (let j=0; j<this.gamepad.gamepads.length; j++) {
+                const opt = this.createElement("option");
+                opt.setAttribute("value", this.gamepad.gamepads[j].id);
+                opt.innerText = this.gamepad.gamepads[j].id;
+                this.gamepadLabels[i].appendChild(opt);
             }
+            this.gamepadLabels[i].value = this.gamepadSelection[i] || "notconnected";
         }
     }
     createLink(elem, link, text, useP) {
@@ -2081,6 +2094,7 @@ class EmulatorJS {
         let buttonListeners = [];
         this.checkGamepadInputs = () => buttonListeners.forEach(elem => elem());
         this.gamepadLabels = [];
+        this.gamepadSelection = [];
         this.controls = JSON.parse(JSON.stringify(this.defaultControllers));
         const body = this.createPopup("Control Settings", {
             "Reset": () => {
@@ -2523,9 +2537,32 @@ class EmulatorJS {
             gamepadTitle.style = "font-size:12px;";
             gamepadTitle.innerText = this.localization("Connected Gamepad")+": ";
             
-            const gamepadName = this.createElement("span");
+            const gamepadName = this.createElement("select");
+            gamepadName.classList.add("ejs_gamepad_dropdown");
+            gamepadName.setAttribute("title", "gamepad-"+i);
+            gamepadName.setAttribute("index", i);
             this.gamepadLabels.push(gamepadName);
-            gamepadName.innerText = "n/a";
+            this.gamepadSelection.push("");
+            this.addEventListener(gamepadName, "change", e => {
+                const controller = e.target.value;
+                const player = parseInt(e.target.getAttribute("index"));
+                if (controller === "notconnected") {
+                    this.gamepadSelection[player] = "";
+                } else {
+                    for (let i=0; i<this.gamepadSelection.length; i++) {
+                        if (player === i) continue;
+                        if (this.gamepadSelection[i] === controller) {
+                            this.gamepadSelection[i] = "";
+                        }
+                    }
+                    this.gamepadSelection[player] = controller;
+                    this.updateGamepadLabels();
+                }
+            });
+            const def = this.createElement("option");
+            def.setAttribute("value", "notconnected");
+            def.innerText = "Not Connected";
+            gamepadName.appendChild(def);
             gamepadTitle.appendChild(gamepadName);
             
             const leftPadding = this.createElement("div");