From c396a81c1b566222f3221ee5f15abff687535b3c Mon Sep 17 00:00:00 2001
From: Michael Green <84688932+michael-j-green@users.noreply.github.com>
Date: Fri, 4 Aug 2023 10:30:22 +1000
Subject: [PATCH] Implement Bulk Change Function (#44)

* feat: added Sega 32X and Sega CD mappings

* feat: added lazy loading to the main game library

* fix: using full file name when loading roms into the emulator #43

* feat: introduced bulk rom matching #25

* fix: xss fix
---
 gaseous-server/.DS_Store                      | Bin 6148 -> 6148 bytes
 gaseous-server/Controllers/GamesController.cs |  35 ++++
 gaseous-server/Support/PlatformMap.json       |  50 +++++
 gaseous-server/wwwroot/emulators/EmulatorJS   |   2 +-
 gaseous-server/wwwroot/index.html             |  16 +-
 gaseous-server/wwwroot/pages/EmulatorJS.html  |   4 +-
 .../wwwroot/pages/dialogs/rominfo.html        |  78 +------
 .../wwwroot/pages/dialogs/romsdelete.html     |  10 +
 gaseous-server/wwwroot/pages/emulator.html    |   8 +-
 gaseous-server/wwwroot/pages/game.html        | 193 +++++++++++++++++-
 gaseous-server/wwwroot/pages/settings.html    |   3 +-
 .../wwwroot/scripts/gamesformating.js         |  10 +-
 .../wwwroot/scripts/jquery.lazy.min.js        |   2 +
 .../scripts/jquery.lazy.plugins.min.js        |   2 +
 gaseous-server/wwwroot/scripts/main.js        |  98 ++++++++-
 gaseous-server/wwwroot/styles/style.css       |  32 ++-
 16 files changed, 443 insertions(+), 100 deletions(-)
 create mode 100644 gaseous-server/wwwroot/pages/dialogs/romsdelete.html
 create mode 100644 gaseous-server/wwwroot/scripts/jquery.lazy.min.js
 create mode 100644 gaseous-server/wwwroot/scripts/jquery.lazy.plugins.min.js

diff --git a/gaseous-server/.DS_Store b/gaseous-server/.DS_Store
index a7c3482cc9dbe5a618cc1215317f80fc330237c1..b1a38183a98217d25ced27d6553110b593c5141f 100644
GIT binary patch
delta 122
zcmZoMXfc=|#>B!ku~2NHo+2aL#(>?7i&&T#*(UQaz2pvNC}k)B!hD9JNz6?mCI-ej
z3MQr|wK@vbmPQ6Zwx!YJRZPbG><maM8A>)kVbW*X%+A5j0W^8@N9OO$lles)IT#rj
Nm>7UybA-qmW&k^Q9L4|u

delta 67
zcmZoMXfc=|#>B)qu~2NHo+2a5#(>?7j4YFRSYB>^$tuURvEd8TW_AvK4xp0Ff*jwO
VC-aLqaxee^BLf4=<_M8B%m8&?5X}Gp

diff --git a/gaseous-server/Controllers/GamesController.cs b/gaseous-server/Controllers/GamesController.cs
index d94ed6a..260a79a 100644
--- a/gaseous-server/Controllers/GamesController.cs
+++ b/gaseous-server/Controllers/GamesController.cs
@@ -783,6 +783,41 @@ namespace gaseous_server.Controllers
             }
         }
 
+        [HttpGet]
+        [HttpHead]
+        [Route("{GameId}/roms/{RomId}/{FileName}")]
+        [ProducesResponseType(typeof(FileStreamResult), StatusCodes.Status200OK)]
+        [ProducesResponseType(StatusCodes.Status404NotFound)]
+        public ActionResult GameRomFile(long GameId, long RomId, string FileName)
+        {
+            try
+            {
+                IGDB.Models.Game gameObject = Classes.Metadata.Games.GetGame(GameId, false, false);
+
+                Classes.Roms.GameRomItem rom = Classes.Roms.GetRom(RomId);
+                if (rom.GameId != GameId || rom.Name != FileName)
+                {
+                    return NotFound();
+                }
+
+                string romFilePath = rom.Path;
+                if (System.IO.File.Exists(romFilePath))
+                {
+                    FileStream content = new FileStream(romFilePath, FileMode.Open, FileAccess.Read, FileShare.Read);
+                    FileStreamResult response = File(content, "application/octet-stream", rom.Name);
+                    return response;
+                }
+                else
+                {
+                    return NotFound();
+                }
+            }
+            catch
+            {
+                return NotFound();
+            }
+        }
+
         [HttpGet]
         [Route("search")]
         [ProducesResponseType(typeof(List<Game>), StatusCodes.Status200OK)]
diff --git a/gaseous-server/Support/PlatformMap.json b/gaseous-server/Support/PlatformMap.json
index cc688a2..7943952 100644
--- a/gaseous-server/Support/PlatformMap.json
+++ b/gaseous-server/Support/PlatformMap.json
@@ -187,5 +187,55 @@
             "Core": "arcade",
             "Bios": []
         }
+    },
+    {
+        "IGDBId": 30,
+        "IGDBName": "Sega 32X",
+        "AlternateNames": [
+            "Sega 32X",
+            "Sega32",
+            "Sega32X"
+        ],
+        "KnownFileExtensions": [],
+        "WebEmulator": {
+            "Type": "EmulatorJS",
+            "Core": "sega32x",
+            "Bios": []
+        }
+    },
+    {
+        "IGDBId": 78,
+        "IGDBName": "Sega CD",
+        "AlternateNames": [
+            "Sega CD",
+            "Mega CD",
+            "segacd",
+            "Sega Mega-CD & Sega CD"
+        ],
+        "KnownFileExtensions": [],
+        "WebEmulator": {
+            "Type": "EmulatorJS",
+            "Core": "segaCD",
+            "Bios": [
+                {
+                    "hash": "e66fa1dc5820d254611fdcdba0662372",
+                    "description": "MegaCD EU BIOS - Required",
+                    "filename": "bios_CD_E.bin",
+                    "region": "EU"
+                },
+                {
+                    "hash": "2efd74e3232ff260e371b99f84024f7f",
+                    "description": "SegaCD US BIOS - Required",
+                    "filename": "bios_CD_U.bin",
+                    "region": "US"
+                },
+                {
+                    "hash": "278a9397d192149e84e820ac621a8edd",
+                    "description": "MegaCD JP BIOS - Required",
+                    "filename": "bios_CD_J.bin",
+                    "region": "JP"
+                }
+            ]
+        }
     }
 ]
diff --git a/gaseous-server/wwwroot/emulators/EmulatorJS b/gaseous-server/wwwroot/emulators/EmulatorJS
index 109a832..328a02b 160000
--- a/gaseous-server/wwwroot/emulators/EmulatorJS
+++ b/gaseous-server/wwwroot/emulators/EmulatorJS
@@ -1 +1 @@
-Subproject commit 109a832ffd25035ffb9d7a128fce469b08aca257
+Subproject commit 328a02bbb613a754b97c19f937d930735d3bca1c
diff --git a/gaseous-server/wwwroot/index.html b/gaseous-server/wwwroot/index.html
index f1c1104..5d11070 100644
--- a/gaseous-server/wwwroot/index.html
+++ b/gaseous-server/wwwroot/index.html
@@ -7,6 +7,8 @@
     <script src="/scripts/moment.js"></script>
     <link href="/styles/select2.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="/styles/dropzone.min.css" type="text/css" />
+    <script src="/scripts/jquery.lazy.min.js"></script>
+    <script src="/scripts/jquery.lazy.plugins.min.js"></script>
     <script src="/scripts/select2.min.js"></script>
     <script src="/scripts/dropzone.min.js"></script>
     <script src="/scripts/main.js" type="text/javascript"></script>
@@ -49,11 +51,21 @@
 
     </div>
 
+    <!-- The Modal -->
+    <div id="myModalSub" class="modal">
+
+        <!-- Modal content -->
+        <div class="modal-content-sub">
+            <span id="modal-close-sub" class="close">&times;</span>
+            <div id="modal-content-sub">Some text in the Modal..</div>
+        </div>
+
+    </div>
+
     <script type="text/javascript">var modalVariables = null;
 
         $(document).ready(function () {
-            const urlParams = new URLSearchParams(window.location.search);
-            var myParam = urlParams.get('page');
+            var myParam = getQueryString('page', 'string');
 
             if (!myParam) {
                 myParam = 'home';
diff --git a/gaseous-server/wwwroot/pages/EmulatorJS.html b/gaseous-server/wwwroot/pages/EmulatorJS.html
index ba52a32..f56185f 100644
--- a/gaseous-server/wwwroot/pages/EmulatorJS.html
+++ b/gaseous-server/wwwroot/pages/EmulatorJS.html
@@ -6,7 +6,7 @@
     EJS_player = '#game';
 
     // Can also be fceumm or nestopia
-    EJS_core = urlParams.get('core');
+    EJS_core = getQueryString('core', 'string');
 
     // Lightgun
     EJS_lightgun = false; // can be true or false
@@ -15,7 +15,7 @@
     EJS_biosUrl = emuBios;
 
     // URL to Game rom
-    EJS_gameUrl = decodeURIComponent(urlParams.get('rompath'));
+    EJS_gameUrl = decodeURIComponent(getQueryString('rompath', 'string'));
 
     // Path to the data directory
     EJS_pathtodata = '/emulators/EmulatorJS/data/';
diff --git a/gaseous-server/wwwroot/pages/dialogs/rominfo.html b/gaseous-server/wwwroot/pages/dialogs/rominfo.html
index 773d1a1..78fb8f7 100644
--- a/gaseous-server/wwwroot/pages/dialogs/rominfo.html
+++ b/gaseous-server/wwwroot/pages/dialogs/rominfo.html
@@ -1,15 +1,4 @@
-<!-- The Modal -->
-<div id="myModalSub" class="modal">
-
-    <!-- Modal content -->
-    <div class="modal-content-sub">
-        <span id="modal-close-sub" class="close">&times;</span>
-       <div id="modal-content-sub">Some text in the Modal..</div>
-    </div>
-
-</div>
-
-<div id="properties_toc">
+<div id="properties_toc">
     <div id="properties_toc_general" name="properties_toc_item" onclick="SelectTab('general');">General</div>
     <div id="properties_toc_match" name="properties_toc_item" onclick="SelectTab('match');">Title Match</div>
     <!--<div id="properties_toc_manage" name="properties_toc_item" onclick="SelectTab('manage');">Manage</div>-->
@@ -88,7 +77,7 @@
 <script type="text/javascript">
     document.getElementById('modal-heading').innerHTML = "Properties";
 
-    var gameId = urlParams.get('id');
+    var gameId = getQueryString('id', 'int');
 
     var romData;
 
@@ -222,27 +211,6 @@
         }
     });
 
-    function DropDownRenderGameOption(state) {
-        console.log(JSON.stringify(state));
-
-        if (state.loading) {
-            return state;
-        }
-
-        var response;
-
-        if (state.cover) {
-            response = $(
-                '<table class="dropdown-div"><tr><td class="dropdown-cover"><img src="https://images.igdb.com/igdb/image/upload/t_cover_small/' + state.cover.value.imageId + '.jpg" /></td><td class="dropdown-label"><span>' + state.text + '</span></td></tr></table>'
-            );
-        } else {
-            response = $(
-                '<table class="dropdown-div"><tr><td class="dropdown-cover"><img src="/images/unknowngame.png" /></td><td class="dropdown-label"><span>' + state.text + '</span></td></tr></table>'
-            );
-        }
-        return response;
-    }
-
     function SaveFixedGame() {
         var fixplatform = $('#properties_fixplatform').select2('data');
         var fixgame = $('#properties_fixgame').select2('data');
@@ -254,48 +222,6 @@
         });
     }
 
-    var subModalVariables;
-
-    function showSubDialog(dialogPage, variables) {
-        // Get the modal
-        var submodal = document.getElementById("myModalSub");
-
-        // Get the modal content
-        var subModalContent = document.getElementById("modal-content-sub");
-
-        // Get the button that opens the modal
-        var subbtn = document.getElementById("romDelete");
-
-        // Get the <span> element that closes the modal
-        var subspan = document.getElementById("modal-close-sub");
-
-        // When the user clicks on the button, open the modal 
-        submodal.style.display = "block";
-
-        // When the user clicks on <span> (x), close the modal
-        subspan.onclick = function () {
-            submodal.style.display = "none";
-            subModalContent.innerHTML = "";
-            subModalVariables = null;
-        }
-
-        subModalVariables = modalVariables;
-
-        $('#modal-content-sub').load('/pages/dialogs/' + dialogPage + '.html');
-    }
-
-    function closeSubDialog() {
-        // Get the modal
-        var submodal = document.getElementById("myModalSub");
-
-        // Get the modal content
-        var subModalContent = document.getElementById("modal-content-sub");
-
-        submodal.style.display = "none";
-        subModalContent.innerHTML = "";
-        subModalVariables = null;
-    }
-
     SelectTab('general');
 
     document.getElementById('romDelete').setAttribute("onclick", "showSubDialog('romdelete', " + modalVariables + ");");
diff --git a/gaseous-server/wwwroot/pages/dialogs/romsdelete.html b/gaseous-server/wwwroot/pages/dialogs/romsdelete.html
new file mode 100644
index 0000000..1f92a8d
--- /dev/null
+++ b/gaseous-server/wwwroot/pages/dialogs/romsdelete.html
@@ -0,0 +1,10 @@
+<p>Are you sure you want to delete the selected ROMs?</p>
+<p><strong>Warning:</strong> This cannot be undone!</p>
+<div style="width: 100%; text-align: center;">
+    <div style="display: inline-block; margin-right: 20px;">
+        <button class="redbutton" value="Delete" onclick="deleteGameRomsCallback(); closeSubDialog();">Delete</button>
+    </div>
+    <div style="display: inline-block; margin-left: 20px;">
+        <button value="Cancel" onclick="closeSubDialog();">Cancel</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/pages/emulator.html b/gaseous-server/wwwroot/pages/emulator.html
index b47622f..a9cca57 100644
--- a/gaseous-server/wwwroot/pages/emulator.html
+++ b/gaseous-server/wwwroot/pages/emulator.html
@@ -5,10 +5,8 @@
 <div id="emulator"></div>
 
 <script type="text/javascript">
-    const urlParams = new URLSearchParams(window.location.search);
-
-    var gameId = urlParams.get('gameid');
-    var platformId = urlParams.get('platformid');
+    var gameId = getQueryString('gameid', 'int');
+    var platformId = getQueryString('platformid', 'int');
     var gameData;
     var artworks = null;
     var artworksPosition = 0;
@@ -39,7 +37,7 @@
             emuBios = '/api/v1/Bios/zip/' + platformId;
         }
 
-        switch (urlParams.get('engine')) {
+        switch (getQueryString('engine', 'string')) {
             case 'EmulatorJS':
                 $('#emulator').load('/pages/EmulatorJS.html');
                 break;
diff --git a/gaseous-server/wwwroot/pages/game.html b/gaseous-server/wwwroot/pages/game.html
index b9c3669..5f862a1 100644
--- a/gaseous-server/wwwroot/pages/game.html
+++ b/gaseous-server/wwwroot/pages/game.html
@@ -46,15 +46,24 @@
             <p id="gamesummarytext_label_button_contract" class="text_link" style="display: none;" onclick="document.querySelector('#gamesummarytext_label').classList.add('line-clamp-4'); document.querySelector('#gamesummarytext_label_button_expand').setAttribute('style', ''); document.querySelector('#gamesummarytext_label_button_contract').setAttribute('style', 'display: none;');">Read less...</p>
         </div>
         <div id="gamesummaryroms">
+            <span id="rom_edit" class="romlink" onclick="DisplayROMCheckboxes(true);">Edit</span>
             <h3>ROM's/Images</h3>
+            <div id="rom_edit_panel" style="display: none;">
+                <div id="rom_edit_panel_center">
+                    <button id="rom_edit_delete" class="redbutton" onclick="deleteGameRoms();">Delete</button>
+
+                    <select id="rom_edit_fixplatform" style="width: 150px;"></select>
+                    <select id="rom_edit_fixgame" style="width: 300px;"></select>
+                    <button id="rom_edit_update" onclick="remapTitles();">Update</button>
+                </div>
+            </div>
         </div>
     </div>
 
     
 </div>
 <script type="text/javascript">
-    const urlParams = new URLSearchParams(window.location.search);
-    var gameId = urlParams.get('id');
+    var gameId = getQueryString('id', 'int');
     var gameData;
     var artworks = null;
     var artworksPosition = 0;
@@ -296,15 +305,25 @@
         }
 
         // load roms
+        loadRoms();
+    });
+
+    function loadRoms(displayCheckboxes) {
+        var existingTable = document.getElementById('romtable');
+        if (existingTable) {
+            existingTable.remove();
+        }
+
         var gameRoms = document.getElementById('gamesummaryroms');
         ajaxCall('/api/v1/Games/' + gameId + '/roms', 'GET', function (result) {
             if (result) {
                 result.sort((a, b) => a.platform.name.charCodeAt(0) - b.platform.name.charCodeAt(0));
 
                 var newTable = document.createElement('table');
+                newTable.id = 'romtable';
                 newTable.className = 'romtable';
                 newTable.setAttribute('cellspacing', 0);
-                newTable.appendChild(createTableRow(true, ['Name', 'Size', 'Media', '', '', '']));
+                newTable.appendChild(createTableRow(true, [['<input id="rom_mastercheck" type="checkbox" onclick="selectAllChecks();"/>', 'rom_checkbox_box_hidden', 'rom_edit_checkbox'], 'Name', 'Size', 'Media', '', '', '']));
 
                 var lastPlatform = '';
                 for (var i = 0; i < result.length; i++) {
@@ -320,11 +339,12 @@
 
                     var launchButton = '';
                     if (result[i].emulator) {
-                        launchButton = '<a href="/index.html?page=emulator&engine=' + result[i].emulator.type + '&core=' + result[i].emulator.core + '&platformid=' + result[i].platform.id + '&gameid=' + gameId + '&rompath=' + encodeURIComponent('/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/file') + '" class="romstart">Launch</a>';
+                        launchButton = '<a href="/index.html?page=emulator&engine=' + result[i].emulator.type + '&core=' + result[i].emulator.core + '&platformid=' + result[i].platform.id + '&gameid=' + gameId + '&rompath=' + encodeURIComponent('/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/' + encodeURIComponent(result[i].name)) + '" class="romstart">Launch</a>';
                     }
 
                     var newRow = [
-                        '<a href="/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/file" class="romlink">' + result[i].name + '</a>',
+                        ['<input type="checkbox" name="rom_checkbox" data-romid="' + result[i].id + '" />', 'rom_checkbox_box_hidden', 'rom_edit_checkbox'],
+                        '<a href="/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/' + encodeURIComponent(result[i].name) +'" class="romlink">' + result[i].name + '</a>',
                         formatBytes(result[i].size, 2),
                         result[i].romTypeMedia,
                         result[i].mediaLabel,
@@ -335,11 +355,15 @@
                 }
 
                 gameRoms.appendChild(newTable);
+
+                if (displayCheckboxes == true) {
+                    DisplayROMCheckboxes(true);
+                }
             } else {
                 gameRoms.setAttribute('style', 'display: none;');
             }
         });
-    });
+    }
 
     function rotateBackground() {
         if (artworks) {
@@ -416,4 +440,161 @@
 
         selectScreenshot(selectedScreenshot);
     }
+
+    function DisplayROMCheckboxes(visible) {
+        var checkbox_boxes = document.getElementsByName('rom_edit_checkbox');
+
+        for (var i = 0; i < checkbox_boxes.length; i++) {
+            if (visible == true) {
+                checkbox_boxes[i].className = 'rom_checkbox_box';
+            } else {
+                checkbox_boxes[i].className = 'rom_checkbox_box_hidden';
+            }
+        }
+
+        var editButton = document.getElementById('rom_edit');
+        var deleteButton = document.getElementById('rom_edit_panel');
+        if (visible == true) {
+            editButton.innerHTML = 'Cancel';
+            deleteButton.style.display = '';
+        } else {
+            editButton.innerHTML = 'Edit';
+            document.getElementById('rom_mastercheck').checked = false;
+            deleteButton.style.display = 'none';
+            selectAllChecks(false);
+        }
+        editButton.setAttribute('onclick', 'DisplayROMCheckboxes(' + !visible + ');');
+    }
+
+    function selectAllChecks(value) {
+        var mastercheckbox = document.getElementById('rom_mastercheck');
+        var checkboxes = document.getElementsByName('rom_checkbox');
+        for (var i = 0; i < checkboxes.length; i++) {
+            if (value) {
+                checkboxes[i].checked = value;
+            } else {
+                checkboxes[i].checked = mastercheckbox.checked;
+            }
+        }
+    }
+
+    $('#rom_edit_fixplatform').select2({
+        minimumInputLength: 3,
+        placeholder: "Platform",
+        ajax: {
+            url: '/api/v1/Search/Platform',
+            data: function (params) {
+                var query = {
+                    SearchString: params.term
+                }
+
+                // Query parameters will be ?SearchString=[term]
+                return query;
+            },
+            processResults: function (data) {
+                var arr = [];
+
+                for (var i = 0; i < data.length; i++) {
+                    arr.push({
+                        id: data[i].id,
+                        text: data[i].name
+                    });
+                }
+
+                return {
+                    results: arr
+                };
+
+            }
+        }
+    });
+
+    $('#rom_edit_fixgame').select2({
+        minimumInputLength: 3,
+        templateResult: DropDownRenderGameOption,
+        placeholder: "Game",
+        ajax: {
+            url: '/api/v1/Search/Game',
+            data: function (params) {
+                fixplatform = $('#rom_edit_fixplatform').select2('data');
+
+                var query = {
+                    PlatformId: fixplatform[0].id,
+                    SearchString: params.term
+                }
+
+                // Query parameters will be ?SearchString=[term]
+                return query;
+            },
+            processResults: function (data) {
+                var arr = [];
+
+                for (var i = 0; i < data.length; i++) {
+                    arr.push({
+                        id: data[i].id,
+                        text: data[i].name,
+                        cover: data[i].cover
+                    });
+                }
+
+                return {
+                    results: arr
+                };
+            }
+        }
+    });
+
+    var remapCallCounter = 0;
+    function remapTitles() {
+        var fixplatform = $('#rom_edit_fixplatform').select2('data');
+        var fixgame = $('#rom_edit_fixgame').select2('data');
+
+        if (fixplatform[0] && fixgame[0]) {
+            var rom_checks = document.getElementsByName('rom_checkbox');
+            for (var i = 0; i < rom_checks.length; i++) {
+                if (rom_checks[i].checked == true) {
+                    var romId = rom_checks[i].getAttribute('data-romid');
+                    remapCallCounter += 1;
+                    ajaxCall('/api/v1/Games/' + gameId + '/roms/' + romId + '?NewPlatformId=' + fixplatform[0].id + '&NewGameId=' + fixgame[0].id, 'PATCH', function (result) {
+                        remapTitlesCallback();
+                    });
+                }
+            }
+        }
+    }
+
+    function remapTitlesCallback() {
+        remapCallCounter = remapCallCounter - 1;
+        if (remapCallCounter <= 0) {
+            loadRoms(true);
+            remapCallCounter = 0;
+        }
+    }
+
+    function deleteGameRoms() {
+        var rom_checks = document.getElementsByName('rom_checkbox');
+        var itemsChecked = false;
+        for (var i = 0; i < rom_checks.length; i++) {
+            if (rom_checks[i].checked == true) {
+                itemsChecked = true;
+                break;
+            }
+        }
+        if (itemsChecked == true) {
+            showSubDialog('romsdelete');
+        }
+    }
+
+    function deleteGameRomsCallback() {
+        var rom_checks = document.getElementsByName('rom_checkbox');
+        for (var i = 0; i < rom_checks.length; i++) {
+            if (rom_checks[i].checked == true) {
+                var romId = rom_checks[i].getAttribute('data-romid');
+                remapCallCounter += 1;
+                ajaxCall('/api/v1/Games/' + gameId + '/roms/' + romId, 'DELETE', function (result) {
+                    remapTitlesCallback();
+                });
+            }
+        }
+    }
 </script>
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/pages/settings.html b/gaseous-server/wwwroot/pages/settings.html
index d001ce8..00ba206 100644
--- a/gaseous-server/wwwroot/pages/settings.html
+++ b/gaseous-server/wwwroot/pages/settings.html
@@ -20,8 +20,7 @@
 </div>
 
 <script type="text/javascript">
-    const urlParams = new URLSearchParams(window.location.search);
-    var myParam = urlParams.get('sub');
+    var myParam = getQueryString('sub', 'string');
 
     var selectedTab = '';
 
diff --git a/gaseous-server/wwwroot/scripts/gamesformating.js b/gaseous-server/wwwroot/scripts/gamesformating.js
index 1dc237e..a8e5691 100644
--- a/gaseous-server/wwwroot/scripts/gamesformating.js
+++ b/gaseous-server/wwwroot/scripts/gamesformating.js
@@ -4,6 +4,12 @@
         var game = renderGameIcon(result[i], true, false);
         targetElement.appendChild(game);
     }
+
+    $('.lazy').Lazy({
+        scrollDirection: 'vertical',
+        effect: 'fadeIn',
+        visibleOnly: true
+    });
 }
 
 function renderGameIcon(gameObject, showTitle, showRatings) {
@@ -12,9 +18,9 @@ function renderGameIcon(gameObject, showTitle, showRatings) {
     gameBox.setAttribute('onclick', 'window.location.href = "/index.html?page=game&id=' + gameObject.id + '";');
 
     var gameImage = document.createElement('img');
-    gameImage.className = 'game_tile_image';
+    gameImage.className = 'game_tile_image lazy';
     if (gameObject.cover) {
-        gameImage.src = '/api/v1/Games/' + gameObject.id + '/cover/image';
+        gameImage.setAttribute('data-src', '/api/v1/Games/' + gameObject.id + '/cover/image');
     } else {
         gameImage.src = '/images/unknowngame.png';
         gameImage.className = 'game_tile_image unknown';
diff --git a/gaseous-server/wwwroot/scripts/jquery.lazy.min.js b/gaseous-server/wwwroot/scripts/jquery.lazy.min.js
new file mode 100644
index 0000000..7c5adde
--- /dev/null
+++ b/gaseous-server/wwwroot/scripts/jquery.lazy.min.js
@@ -0,0 +1,2 @@
+/*! jQuery & Zepto Lazy v1.7.10 - http://jquery.eisbehr.de/lazy - MIT&GPL-2.0 license - Copyright 2012-2018 Daniel 'Eisbehr' Kern */
+!function(t,e){"use strict";function r(r,a,i,u,l){function f(){L=t.devicePixelRatio>1,i=c(i),a.delay>=0&&setTimeout(function(){s(!0)},a.delay),(a.delay<0||a.combined)&&(u.e=v(a.throttle,function(t){"resize"===t.type&&(w=B=-1),s(t.all)}),u.a=function(t){t=c(t),i.push.apply(i,t)},u.g=function(){return i=n(i).filter(function(){return!n(this).data(a.loadedName)})},u.f=function(t){for(var e=0;e<t.length;e++){var r=i.filter(function(){return this===t[e]});r.length&&s(!1,r)}},s(),n(a.appendScroll).on("scroll."+l+" resize."+l,u.e))}function c(t){var i=a.defaultImage,o=a.placeholder,u=a.imageBase,l=a.srcsetAttribute,f=a.loaderAttribute,c=a._f||{};t=n(t).filter(function(){var t=n(this),r=m(this);return!t.data(a.handledName)&&(t.attr(a.attribute)||t.attr(l)||t.attr(f)||c[r]!==e)}).data("plugin_"+a.name,r);for(var s=0,d=t.length;s<d;s++){var A=n(t[s]),g=m(t[s]),h=A.attr(a.imageBaseAttribute)||u;g===N&&h&&A.attr(l)&&A.attr(l,b(A.attr(l),h)),c[g]===e||A.attr(f)||A.attr(f,c[g]),g===N&&i&&!A.attr(E)?A.attr(E,i):g===N||!o||A.css(O)&&"none"!==A.css(O)||A.css(O,"url('"+o+"')")}return t}function s(t,e){if(!i.length)return void(a.autoDestroy&&r.destroy());for(var o=e||i,u=!1,l=a.imageBase||"",f=a.srcsetAttribute,c=a.handledName,s=0;s<o.length;s++)if(t||e||A(o[s])){var g=n(o[s]),h=m(o[s]),b=g.attr(a.attribute),v=g.attr(a.imageBaseAttribute)||l,p=g.attr(a.loaderAttribute);g.data(c)||a.visibleOnly&&!g.is(":visible")||!((b||g.attr(f))&&(h===N&&(v+b!==g.attr(E)||g.attr(f)!==g.attr(F))||h!==N&&v+b!==g.css(O))||p)||(u=!0,g.data(c,!0),d(g,h,v,p))}u&&(i=n(i).filter(function(){return!n(this).data(c)}))}function d(t,e,r,i){++z;var o=function(){y("onError",t),p(),o=n.noop};y("beforeLoad",t);var u=a.attribute,l=a.srcsetAttribute,f=a.sizesAttribute,c=a.retinaAttribute,s=a.removeAttribute,d=a.loadedName,A=t.attr(c);if(i){var g=function(){s&&t.removeAttr(a.loaderAttribute),t.data(d,!0),y(T,t),setTimeout(p,1),g=n.noop};t.off(I).one(I,o).one(D,g),y(i,t,function(e){e?(t.off(D),g()):(t.off(I),o())})||t.trigger(I)}else{var h=n(new Image);h.one(I,o).one(D,function(){t.hide(),e===N?t.attr(C,h.attr(C)).attr(F,h.attr(F)).attr(E,h.attr(E)):t.css(O,"url('"+h.attr(E)+"')"),t[a.effect](a.effectTime),s&&(t.removeAttr(u+" "+l+" "+c+" "+a.imageBaseAttribute),f!==C&&t.removeAttr(f)),t.data(d,!0),y(T,t),h.remove(),p()});var m=(L&&A?A:t.attr(u))||"";h.attr(C,t.attr(f)).attr(F,t.attr(l)).attr(E,m?r+m:null),h.complete&&h.trigger(D)}}function A(t){var e=t.getBoundingClientRect(),r=a.scrollDirection,n=a.threshold,i=h()+n>e.top&&-n<e.bottom,o=g()+n>e.left&&-n<e.right;return"vertical"===r?i:"horizontal"===r?o:i&&o}function g(){return w>=0?w:w=n(t).width()}function h(){return B>=0?B:B=n(t).height()}function m(t){return t.tagName.toLowerCase()}function b(t,e){if(e){var r=t.split(",");t="";for(var a=0,n=r.length;a<n;a++)t+=e+r[a].trim()+(a!==n-1?",":"")}return t}function v(t,e){var n,i=0;return function(o,u){function l(){i=+new Date,e.call(r,o)}var f=+new Date-i;n&&clearTimeout(n),f>t||!a.enableThrottle||u?l():n=setTimeout(l,t-f)}}function p(){--z,i.length||z||y("onFinishedAll")}function y(t,e,n){return!!(t=a[t])&&(t.apply(r,[].slice.call(arguments,1)),!0)}var z=0,w=-1,B=-1,L=!1,T="afterLoad",D="load",I="error",N="img",E="src",F="srcset",C="sizes",O="background-image";"event"===a.bind||o?f():n(t).on(D+"."+l,f)}function a(a,o){var u=this,l=n.extend({},u.config,o),f={},c=l.name+"-"+ ++i;return u.config=function(t,r){return r===e?l[t]:(l[t]=r,u)},u.addItems=function(t){return f.a&&f.a("string"===n.type(t)?n(t):t),u},u.getItems=function(){return f.g?f.g():{}},u.update=function(t){return f.e&&f.e({},!t),u},u.force=function(t){return f.f&&f.f("string"===n.type(t)?n(t):t),u},u.loadAll=function(){return f.e&&f.e({all:!0},!0),u},u.destroy=function(){return n(l.appendScroll).off("."+c,f.e),n(t).off("."+c),f={},e},r(u,l,a,f,c),l.chainable?a:u}var n=t.jQuery||t.Zepto,i=0,o=!1;n.fn.Lazy=n.fn.lazy=function(t){return new a(this,t)},n.Lazy=n.lazy=function(t,r,i){if(n.isFunction(r)&&(i=r,r=[]),n.isFunction(i)){t=n.isArray(t)?t:[t],r=n.isArray(r)?r:[r];for(var o=a.prototype.config,u=o._f||(o._f={}),l=0,f=t.length;l<f;l++)(o[t[l]]===e||n.isFunction(o[t[l]]))&&(o[t[l]]=i);for(var c=0,s=r.length;c<s;c++)u[r[c]]=t[0]}},a.prototype.config={name:"lazy",chainable:!0,autoDestroy:!0,bind:"load",threshold:500,visibleOnly:!1,appendScroll:t,scrollDirection:"both",imageBase:null,defaultImage:"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",placeholder:null,delay:-1,combined:!1,attribute:"data-src",srcsetAttribute:"data-srcset",sizesAttribute:"data-sizes",retinaAttribute:"data-retina",loaderAttribute:"data-loader",imageBaseAttribute:"data-imagebase",removeAttribute:!0,handledName:"handled",loadedName:"loaded",effect:"show",effectTime:0,enableThrottle:!0,throttle:250,beforeLoad:e,afterLoad:e,onError:e,onFinishedAll:e},n(t).on("load",function(){o=!0})}(window);
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/scripts/jquery.lazy.plugins.min.js b/gaseous-server/wwwroot/scripts/jquery.lazy.plugins.min.js
new file mode 100644
index 0000000..90a0b1a
--- /dev/null
+++ b/gaseous-server/wwwroot/scripts/jquery.lazy.plugins.min.js
@@ -0,0 +1,2 @@
+/*! jQuery & Zepto Lazy - All Plugins v1.7.10 - http://jquery.eisbehr.de/lazy - MIT&GPL-2.0 license - Copyright 2012-2018 Daniel 'Eisbehr' Kern */
+!function(t){function a(a,e,r,o){o=o?o.toUpperCase():"GET";var i;"POST"!==o&&"PUT"!==o||!a.config("ajaxCreateData")||(i=a.config("ajaxCreateData").apply(a,[e])),t.ajax({url:e.attr("data-src"),type:"POST"===o||"PUT"===o?o:"GET",data:i,dataType:e.attr("data-type")||"html",success:function(t){e.html(t),r(!0),a.config("removeAttribute")&&e.removeAttr("data-src data-method data-type")},error:function(){r(!1)}})}t.lazy("ajax",function(t,e){a(this,t,e,t.attr("data-method"))}),t.lazy("get",function(t,e){a(this,t,e,"GET")}),t.lazy("post",function(t,e){a(this,t,e,"POST")}),t.lazy("put",function(t,e){a(this,t,e,"PUT")})}(window.jQuery||window.Zepto),function(t){t.lazy(["av","audio","video"],["audio","video"],function(a,e){var r=a[0].tagName.toLowerCase();if("audio"===r||"video"===r){var o=a.find("data-src"),i=a.find("data-track"),n=0,c=function(){++n===o.length&&e(!1)},s=function(){var a=t(this),e=a[0].tagName.toLowerCase(),r=a.prop("attributes"),o=t("data-src"===e?"<source>":"<track>");"data-src"===e&&o.one("error",c),t.each(r,function(t,a){o.attr(a.name,a.value)}),a.replaceWith(o)};a.one("loadedmetadata",function(){e(!0)}).off("load error").attr("poster",a.attr("data-poster")),o.length?o.each(s):a.attr("data-src")?(t.each(a.attr("data-src").split(","),function(e,r){var o=r.split("|");a.append(t("<source>").one("error",c).attr({src:o[0].trim(),type:o[1].trim()}))}),this.config("removeAttribute")&&a.removeAttr("data-src")):e(!1),i.length&&i.each(s)}else e(!1)})}(window.jQuery||window.Zepto),function(t){t.lazy(["frame","iframe"],"iframe",function(a,e){var r=this;if("iframe"===a[0].tagName.toLowerCase()){var o=a.attr("data-error-detect");"true"!==o&&"1"!==o?(a.attr("src",a.attr("data-src")),r.config("removeAttribute")&&a.removeAttr("data-src data-error-detect")):t.ajax({url:a.attr("data-src"),dataType:"html",crossDomain:!0,xhrFields:{withCredentials:!0},success:function(t){a.html(t).attr("src",a.attr("data-src")),r.config("removeAttribute")&&a.removeAttr("data-src data-error-detect")},error:function(){e(!1)}})}else e(!1)})}(window.jQuery||window.Zepto),function(t){t.lazy("noop",function(){}),t.lazy("noop-success",function(t,a){a(!0)}),t.lazy("noop-error",function(t,a){a(!1)})}(window.jQuery||window.Zepto),function(t){function a(a,e,i){var n=a.prop("attributes"),c=t("<"+e+">");return t.each(n,function(t,a){"srcset"!==a.name&&a.name!==o||(a.value=r(a.value,i)),c.attr(a.name,a.value)}),a.replaceWith(c),c}function e(a,e,r){var o=t("<img>").one("load",function(){r(!0)}).one("error",function(){r(!1)}).appendTo(a).attr("src",e);o.complete&&o.load()}function r(t,a){if(a){var e=t.split(",");t="";for(var r=0,o=e.length;r<o;r++)t+=a+e[r].trim()+(r!==o-1?",":"")}return t}var o="data-src";t.lazy(["pic","picture"],["picture"],function(i,n){if("picture"===i[0].tagName.toLowerCase()){var c=i.find(o),s=i.find("data-img"),d=this.config("imageBase")||"";c.length?(c.each(function(){a(t(this),"source",d)}),1===s.length?(s=a(s,"img",d),s.on("load",function(){n(!0)}).on("error",function(){n(!1)}),s.attr("src",s.attr(o)),this.config("removeAttribute")&&s.removeAttr(o)):i.attr(o)?(e(i,d+i.attr(o),n),this.config("removeAttribute")&&i.removeAttr(o)):n(!1)):i.attr("data-srcset")?(t("<source>").attr({media:i.attr("data-media"),sizes:i.attr("data-sizes"),type:i.attr("data-type"),srcset:r(i.attr("data-srcset"),d)}).appendTo(i),e(i,d+i.attr(o),n),this.config("removeAttribute")&&i.removeAttr(o+" data-srcset data-media data-sizes data-type")):n(!1)}else n(!1)})}(window.jQuery||window.Zepto),function(t){t.lazy(["js","javascript","script"],"script",function(t,a){"script"===t[0].tagName.toLowerCase()?(t.attr("src",t.attr("data-src")),this.config("removeAttribute")&&t.removeAttr("data-src")):a(!1)})}(window.jQuery||window.Zepto),function(t){t.lazy("vimeo",function(t,a){"iframe"===t[0].tagName.toLowerCase()?(t.attr("src","https://player.vimeo.com/video/"+t.attr("data-src")),this.config("removeAttribute")&&t.removeAttr("data-src")):a(!1)})}(window.jQuery||window.Zepto),function(t){t.lazy(["yt","youtube"],function(t,a){if("iframe"===t[0].tagName.toLowerCase()){var e=/1|true/.test(t.attr("data-nocookie"));t.attr("src","https://www.youtube"+(e?"-nocookie":"")+".com/embed/"+t.attr("data-src")+"?rel=0&amp;showinfo=0"),this.config("removeAttribute")&&t.removeAttr("data-src")}else a(!1)})}(window.jQuery||window.Zepto);
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/scripts/main.js b/gaseous-server/wwwroot/scripts/main.js
index b275216..a46d9e6 100644
--- a/gaseous-server/wwwroot/scripts/main.js
+++ b/gaseous-server/wwwroot/scripts/main.js
@@ -23,6 +23,30 @@
     });
 }
 
+function getQueryString(stringName, type) {
+    const urlParams = new URLSearchParams(window.location.search);
+    var myParam =  urlParams.get(stringName);
+
+    switch (type) {
+        case "int":
+            if (typeof (Number(myParam)) == 'number') {
+                return Number(myParam);
+            } else {
+                return null;
+            }
+            break;
+        case "string":
+            if (typeof (myParam) == 'string') {
+                return encodeURIComponent(myParam);
+            } else {
+                return null;
+            }
+        default:
+            return null;
+            break;
+    }
+}
+
 function formatBytes(bytes, decimals = 2) {
     if (!+bytes) return '0 Bytes'
 
@@ -72,6 +96,48 @@ function showDialog(dialogPage, variables) {
     $('#modal-content').load('/pages/dialogs/' + dialogPage + '.html');
 }
 
+var subModalVariables;
+
+function showSubDialog(dialogPage, variables) {
+    // Get the modal
+    var submodal = document.getElementById("myModalSub");
+
+    // Get the modal content
+    var subModalContent = document.getElementById("modal-content-sub");
+
+    // Get the button that opens the modal
+    var subbtn = document.getElementById("romDelete");
+
+    // Get the <span> element that closes the modal
+    var subspan = document.getElementById("modal-close-sub");
+
+    // When the user clicks on the button, open the modal 
+    submodal.style.display = "block";
+
+    // When the user clicks on <span> (x), close the modal
+    subspan.onclick = function () {
+        submodal.style.display = "none";
+        subModalContent.innerHTML = "";
+        subModalVariables = null;
+    }
+
+    subModalVariables = modalVariables;
+
+    $('#modal-content-sub').load('/pages/dialogs/' + dialogPage + '.html');
+}
+
+function closeSubDialog() {
+    // Get the modal
+    var submodal = document.getElementById("myModalSub");
+
+    // Get the modal content
+    var subModalContent = document.getElementById("modal-content-sub");
+
+    submodal.style.display = "none";
+    subModalContent.innerHTML = "";
+    subModalVariables = null;
+}
+
 function randomIntFromInterval(min, max) { // min and max included 
     var rand = Math.floor(Math.random() * (max - min + 1) + min);
     return rand;
@@ -90,10 +156,17 @@ function createTableRow(isHeader, row, rowClass, cellClass) {
         var newCell = document.createElement(cellType);
         if (typeof(row[i]) != "object") {
             newCell.innerHTML = row[i];
+            newCell.className = cellClass;
         } else {
-            newCell.appendChild(row[i]);
+            if (Array.isArray(row[i])) {
+                newCell.innerHTML = row[i][0];
+                if (row[i][1]) { newCell.className = row[i][1]; }
+                if (row[i][2]) { newCell.setAttribute('name', row[i][2]); }
+            } else {
+                newCell.appendChild(row[i]);
+                newCell.className = cellClass;
+            }
         }
-        newCell.className = cellClass;
 
         newRow.appendChild(newCell);
     }
@@ -116,4 +189,25 @@ function intToRGB(i) {
         .toUpperCase();
 
     return "00000".substring(0, 6 - c.length) + c;
+}
+
+function DropDownRenderGameOption(state) {
+    console.log(JSON.stringify(state));
+
+    if (state.loading) {
+        return state;
+    }
+
+    var response;
+
+    if (state.cover) {
+        response = $(
+            '<table class="dropdown-div"><tr><td class="dropdown-cover"><img src="https://images.igdb.com/igdb/image/upload/t_cover_small/' + state.cover.value.imageId + '.jpg" /></td><td class="dropdown-label"><span>' + state.text + '</span></td></tr></table>'
+        );
+    } else {
+        response = $(
+            '<table class="dropdown-div"><tr><td class="dropdown-cover"><img src="/images/unknowngame.png" /></td><td class="dropdown-label"><span>' + state.text + '</span></td></tr></table>'
+        );
+    }
+    return response;
 }
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css
index 96d609b..47997a8 100644
--- a/gaseous-server/wwwroot/styles/style.css
+++ b/gaseous-server/wwwroot/styles/style.css
@@ -647,7 +647,7 @@ div[name="properties_toc_item"]:hover {
 }
 
 button {
-    background-color: #888;
+    background-color: #555;
     color: white;
     border-width: 1px;
     border-color: #555;
@@ -656,10 +656,12 @@ button {
     padding-bottom: 5px;
     padding-left: 10px;
     padding-right: 10px;
+    margin-right: 3px;
+    margin-bottom: 3px;
 }
 
 button:hover {
-    background-color: #555;
+    background-color: #888;
     cursor: pointer;
 }
 
@@ -742,4 +744,30 @@ button:disabled {
 
 .legend_label {
     margin-left: 15px;
+}
+
+.rom_checkbox_box {
+    
+}
+
+.rom_checkbox_box_hidden {
+    display: none;
+}
+
+#rom_edit, #rom_edit_delete {
+    float: right;
+}
+
+#rom_edit_panel {
+    background-color: rgba(56, 56, 56, 0.3);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    padding: 15px;
+    margin-bottom: 10px;
+}
+
+#game {
+    box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
+    -webkit-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
+    -moz-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
 }
\ No newline at end of file