[gamepad] auto detection + css for it

src/gui_easy.css

@@ -49,7 +49,7 @@ div.modal div.row::-webkit-scrollbar-thumb {
 div.modal div.row,
 body,
 textarea {
-    scrollbar-color: var(--main-inverted-color-rgba) var(--main-bg-color-rgba, blue); /* thumb and track color */
+    scrollbar-color: var(--main-inverted-color-rgba) var(--main-bg-color-rgba); /* thumb and track color */
     scrollbar-width: thin;
 }
 /*below makes the body not scrolling together with modals*/
@@ -65,6 +65,61 @@ br {
     display: block !important;
     margin-bottom: -2px !important;
 }
+#template-gamepad {
+    display: none;
+}
+div.is-black ~ div.gamepads {
+    display: none;
+    z-index: 100;
+}
+div.gamepads {
+    position: absolute;
+    left: calc(-3 * var(--default-height-size, 20));
+    top: 50%;
+    transform: translateX(-50%);
+    z-index: 10000;
+    background: rgba(var(--main-inverted-color), 0.3);
+    padding: 3px;
+    border: 2px solid rgba(var(--main-inverted-color), 0.5);
+    border-radius: calc(0 * var(--default-height-size, 20) / var(--button-radius-size, 2)) calc(0.5 * var(--default-height-size, 20) / var(--button-radius-size, 2)) calc(0.5 * var(--default-height-size, 20) / var(--button-radius-size, 2)) calc(0 * var(--default-height-size, 20) / var(--button-radius-size, 2));
+    transition: left 200ms ease-in;
+}
+div.gamepads.show {
+    left: 0;
+}
+div.gamepads:empty {
+    display: none;
+}
+div.gamepad {
+    width: calc(1.45 * var(--default-height-size, 20));
+    padding-top: calc(0.4 * var(--default-height-size, 20));
+    padding-bottom: calc(0.4 * var(--default-height-size, 20));
+    position: relative;
+    margin-left: calc(2 * var(--default-height-size, 20));
+}
+div.gamepad > svg {
+    height: calc(1.45 * var(--default-height-size, 20));
+}
+div.gamepad > div.number {
+    position: absolute;
+    width: calc(0.7 * var(--default-height-size, 20));
+    top: calc(0.75 * var(--default-height-size, 20));
+    right: 0;
+    border-radius: calc(1 * var(--default-height-size, 20) / var(--button-radius-size, 2));
+    font-size: calc(0.6 * var(--default-font-size, 19pt));
+}
+div.gamepad.connected > div.number {
+    color: var(--main-font-color-rgba);
+    background: var(--main-success-color-rgba);
+}
+div.gamepad.disconnected > div.number {
+    color: var(--main-font-color-rgba);
+    background: var(--main-warning-color-rgba);
+    animation: fadeGone 2.5s ease-in forwards;
+}
+div.gamepad.disconnected {
+    animation: fadeGone 3s ease-in forwards;
+}
 div.view-got-box-shadows {
     z-index: 699;
     top: 0;

src/gui_easy_curly.js

@@ -570,4 +570,10 @@ guiEasy.curly.info = function (what) {
     if (what[0] === "patreon") {
         helpEasy.addToLogDOM("patreon", 0, "info");
     }
+};
+
+guiEasy.curly.gamepad = function () {
+    let html = "<div id='template-gamepad'>{{ICON-GAMEPAD}}</div>";
+    html += "<div id='active-gamepads' class='gamepads'></div>";
+    return html;
 };

src/gui_easy_curly_icons.js

@@ -283,6 +283,14 @@ guiEasy.curly.icon = function(arg) {
             </svg>
        `;
     }
+    if (icon === "gamepad") {
+        return `
+           <svg class="` + icon + `" ` + xml + viewbox + `>
+                <path ` + color + `
+                d="m 3.25,15.75 c -1.105,0 -2,0.895 -2,2 v 3 c 0,1.105 0.895,2 2,2 h 18 c 1.105,0 2,-0.895 2,-2 v -3 c 0,-1.105 -0.895,-2 -2,-2 z m 2,-2.629232 c -1.105,0 -2,0.895 -2,2 h 4 c 0,-1.105 -0.895,-2 -2,-2 z m 7,-11.9999998 a 4,4 0 0 0 -4,4 4,4 0 0 0 3,3.8671876 v 4.3105462 c -0.845137,0.30289 -1.51501,0.973541 -1.816406,1.822266 H 11.25 h 2 1.816406 C 14.76501,14.272043 14.095137,13.601392 13.25,13.298502 V 8.9899088 a 4,4 0 0 0 3,-3.8691406 4,4 0 0 0 -4,-4 z"/>
+            </svg>
+       `;
+    }
     //If no icon found, leave blank
     return "";
 };

src/gui_easy_popper.js

@@ -117,23 +117,33 @@ guiEasy.popper.gamepad = function (event) {
     //We only support "standard gamepad" with mapping set to "standard" see w3 standard: https://www.w3.org/TR/gamepad/
     const supportedGP = "STANDARD GAMEPAD";
     if (window.gamepads === undefined) {
-        window.gamepads = 0;
+        window.gamepads = {
+            "number": 0,
+            "active": []
+        };
     }
+    let currentIdx = event.gamepad.index;
     let loopInterval;
     let n = event.gamepad.id.toUpperCase().includes(supportedGP);
     if (event.type === "gamepadconnected" && n !== false && event.gamepad.mapping === "standard") {
-        window.gamepads++;
+        window.gamepads.number++;
         //controllers doesn't do event listeners so we need to query the states over and over again...
         loopInterval = setInterval( function() {
             let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-            let index = 0;
             for (let i = 0; i < gamepads.length; i++) {
                 let gp = gamepads[i];
                 if (gp !== null && gp.id.toUpperCase().includes(supportedGP) && event.gamepad.mapping === "standard") {
-                    index++;
+                    if (window.gamepads.active.includes(gp.index + "-0") === true) {
+                        let idx = window.gamepads.active.indexOf(gp.index + "-0");
+                        window.gamepads.active[idx] = gp.index + "-1"; //0 is now 1 = is active
+                        guiEasy.popper.gamepad.indicator(event.type, gp.index);
+                    } else if (window.gamepads.active.includes(gp.index + "-1") === false) {
+                        window.gamepads.active.push(gp.index + "-1"); //1 = is active
+                        guiEasy.popper.gamepad.indicator(event.type, gp.index);
+                    }
                     let currentGamepadMap = {
                         "gamepadObject": gp,
-                        "gamepad": index,
+                        "gamepad": window.gamepads.active.indexOf(gp.index + "-1") + 1,
                         "joystick": {
                             "left": {
                                 "x": Math.floor(gp.axes[0] * 100)/100,
@@ -180,14 +190,46 @@ guiEasy.popper.gamepad = function (event) {
         }, 100);
     }
     if (event.type === "gamepaddisconnected" && n !== false && event.gamepad.mapping === "standard") {
-        window.gamepads--;
+        window.gamepads.number--;
+        guiEasy.popper.gamepad.indicator(event.type, event.gamepad.index);
     }
-    if (window.gamepads === 0) {
+    if (window.gamepads.number === 0) {
         clearInterval(loopInterval);
         helpEasy.addToLogDOM("Gamepad events disabled, no gamepad active.", 2);
     }
 };
 
+guiEasy.popper.gamepad.indicator = function (type, index) {
+    let container = document.getElementById("active-gamepads");
+    container.classList.add("show");
+    let svg = document.getElementById("template-gamepad").innerHTML;
+    let idx = window.gamepads.active.indexOf(index + "-1");
+    if (type === "gamepadconnected") {
+        let gpElement = document.createElement("div");
+        gpElement.classList.add("gamepad");
+        gpElement.classList.add("connected");
+        gpElement.id = (idx + 1) + "-gamepad-" + index;
+        gpElement.innerHTML = svg +  "<div class='number'>" + (idx + 1) + "</div>"
+        container.appendChild(gpElement);
+    }
+    if (type === "gamepaddisconnected") {
+        let element = document.getElementById((idx + 1) + "-gamepad-" + index);
+        element.classList.remove("connected");
+        element.classList.add("disconnected");
+        window.gamepads.active[idx] = index + "-0"; // its removed.....
+        setTimeout( function () {
+            element.remove();
+        }, 3100)
+    }
+    // sort their placement
+    [...container.children]
+        .sort((a,b)=>a.innerText>b.innerText?1:-1)
+        .map(node=>container.appendChild(node))
+    setTimeout( function () {
+        container.classList.remove("show");
+    }, 5000)
+};
+
 guiEasy.popper.gamepad.eventListener = function (gamepadMap) {
     let x = guiEasy.popper.gamepad;
     //add key combos and stuff here

src/gui_easy_settings.js

@@ -277,6 +277,7 @@ const guiEasy = {
             'notifier',
             'drawer',
             'navbar',
+            'gamepad',
             'unit',
             'unitname',
             'modal',

src/index.html

@@ -177,6 +177,7 @@
 {{NOTIFIER-TOP}}
 {{NAVBAR}}
 {{WAVE}}
+{{GAMEPAD}}
 
 <div class="page-contents" id="page-container">