From a0408a1d1d311d0d210c57999b2625944b99bf5a Mon Sep 17 00:00:00 2001
From: Michael Green <84688932+michael-j-green@users.noreply.github.com>
Date: Wed, 20 Sep 2023 12:07:25 +1000
Subject: [PATCH] Added EmulatorJS core selection help link (#124)

---
 gaseous-server/wwwroot/images/help.svg        |  4 ++
 .../pages/dialogs/platformmapedit.html        | 57 +++++++++++++++++--
 .../wwwroot/pages/settings/mapping.html       |  2 +-
 3 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 gaseous-server/wwwroot/images/help.svg

diff --git a/gaseous-server/wwwroot/images/help.svg b/gaseous-server/wwwroot/images/help.svg
new file mode 100644
index 0000000..bb8249c
--- /dev/null
+++ b/gaseous-server/wwwroot/images/help.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17H12.01M12 14C12.8906 12.0938 15 12.2344 15 10C15 8.5 14 7 12 7C10.4521 7 9.50325 7.89844 9.15332 9M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html b/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html
index 47470b4..a4153ee 100644
--- a/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html
+++ b/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html
@@ -27,7 +27,7 @@
                     <h4>Standard Directory Naming</h4>
                 </td>
                 <td style="text-align: right;">
-                    <input id="mapping_edit_igdbslug" readonly="readonly" type="text" style="width: 95%;"/>
+                    <input id="mapping_edit_igdbslug" readonly="readonly" type="text" style="width: 98%;"/>
                 </td>
             </tr>
             <tr>
@@ -38,7 +38,7 @@
                     <h4>RetroPie Directory Naming</h4>
                 </td>
                 <td style="text-align: right;">
-                    <input id="mapping_edit_retropie" type="text" style="width: 95%;"/>
+                    <input id="mapping_edit_retropie" type="text" style="width: 98%;"/>
                 </td>
             </tr>
         </table>
@@ -53,7 +53,7 @@
                     <input id="mapping_edit_enablewebemulator" type="checkbox"><label for="mapping_edit_enablewebemulator" style="margin-left: 5px;">Enabled</label>
                 </td>
             </tr>
-            <tr>
+            <tr name="mapping_edit_webemulator">
                 <td style="width: 25%;">
                     <h4>Engine</h4>
                 </td>
@@ -64,12 +64,20 @@
                     </select>
                 </td>
             </tr>
-            <tr>
+            <tr name="mapping_edit_webemulator">
                 <td style="width: 25%;">
                     <h4>Core</h4>
                 </td>
                 <td style="text-align: right;">
-                    <input id="mapping_edit_webemulatorcore" type="text" style="width: 95%;"/>
+                    <input id="mapping_edit_webemulatorcore" type="text" style="width: 98%;"/>
+                </td>
+            </tr>
+            <tr name="mapping_edit_webemulator">
+                <td style="width: 25%;">
+                
+                </td>
+                <td id="mapping_edit_webemulatorhelp">
+                    
                 </td>
             </tr>
         </table>
@@ -129,10 +137,15 @@
             if (result.webEmulator.type.length > 0) {
                 document.getElementById('mapping_edit_enablewebemulator').checked = true;
                 $('#mapping_edit_webemulatorengine').val(result.webEmulator.type);
+                DisplayWebEmulatorHelp(result.webEmulator.type);
                 $('#mapping_edit_webemulatorengine').trigger('change');
                 document.getElementById('mapping_edit_webemulatorcore').value = result.webEmulator.core;
+
+                DisplayWebEmulatorContent(true);
             } else {
                 document.getElementById('mapping_edit_enablewebemulator').checked = false;
+
+                DisplayWebEmulatorContent(false);
             }
 
             var biosTableHeaders = [
@@ -254,4 +267,38 @@
             JSON.stringify(item)
         );
     }
+
+    $('#mapping_edit_webemulatorengine').on('select2:select', function (e) {
+        DisplayWebEmulatorHelp(e.params.data.id);
+    });
+
+    function DisplayWebEmulatorHelp(Emulator) {
+        var helpCell = document.getElementById('mapping_edit_webemulatorhelp');
+        switch (Emulator) {
+            case 'EmulatorJS':
+                helpCell.innerHTML = '<img src="/images/help.svg" class="banner_button_image banner_button_image_smaller" alt="Help" title="Help" /> See <a href="https://emulatorjs.org/docs4devs/Cores.html" target="_blank" class="romlink">https://emulatorjs.org/docs4devs/Cores.html</a> for more information regarding EmulatorJS cores.';
+                break;
+
+            default:
+                helpCell.innerHTML = '';
+                break;
+
+        }
+    }
+
+    $('#mapping_edit_enablewebemulator').change(function() {
+        DisplayWebEmulatorContent(this.checked);
+    });
+
+    function DisplayWebEmulatorContent(showContent) {
+        var webEmulatorRows = document.getElementsByName('mapping_edit_webemulator');
+
+        for (var i = 0; i < webEmulatorRows.length; i++) {
+            if (showContent == true) {
+                webEmulatorRows[i].style.display = '';
+            } else {
+                webEmulatorRows[i].style.display = 'none';
+            }
+        }
+    }
 </script>
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/pages/settings/mapping.html b/gaseous-server/wwwroot/pages/settings/mapping.html
index 5e97ae2..83c0bcf 100644
--- a/gaseous-server/wwwroot/pages/settings/mapping.html
+++ b/gaseous-server/wwwroot/pages/settings/mapping.html
@@ -48,7 +48,7 @@
                     }
 
                     var newRow = [
-                        '<span onclick="ShowPlatformMappingDialog(' + result[i].igdbId + ');" class="romlink">' + result[i].igdbName + '</span>',
+                        '<a href="#/" onclick="ShowPlatformMappingDialog(' + result[i].igdbId + ');" class="romlink">' + result[i].igdbName + '</a>',
                         result[i].extensions.supportedFileExtensions.join(', '),
                         result[i].extensions.uniqueFileExtensions.join(', '),
                         hasWebEmulator