feat: roms are now display by platform

gaseous-server/wwwroot/pages/game.html

@@ -1,7 +1,12 @@
 <div id="bgImage"></div>
 
 <div id="gamepage">
-    <div id="gametitle"><h1 id="gametitle_label"></h1></div>
+    <div id="gametitle">
+        <h1 id="gametitle_label"></h1>
+        <p id="gametitle_alts">
+            <span>Also known as: </span><span id="gametitle_alts_label"></span>
+        </p>
+    </div>
 
 
     <div id="gamesummary">
@@ -28,6 +33,9 @@
 
             <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">
+            <h3>ROM's</h3>
+        </div>
     </div>
 
     
@@ -47,6 +55,24 @@
         var gameTitleLabel = document.getElementById('gametitle_label');
         gameTitleLabel.innerHTML = result.name;
 
+        // get alt name
+        var gameTitleAltLabel = document.getElementById('gametitle_alts');
+        if (result.alternativeNames) {
+            ajaxCall('/api/v1/Games/' + gameId + '/alternativename', 'GET', function (result) {
+                var altNames = '';
+                for (var i = 0; i < result.length; i++) {
+                    if (altNames.length > 0) {
+                        altNames += ', ';
+                    }
+                    altNames += result[i].name;
+                }
+                var gameTitleAltLabelText = document.getElementById('gametitle_alts_label');
+                gameTitleAltLabelText.innerHTML = altNames;
+            });
+        } else {
+            gameTitleAltLabel.setAttribute('style', 'display: none;');
+        }
+
         // get summary
         var gameSummaryLabel = document.getElementById('gamesummarytext_label');
         if (result.summary || result.storyline) {
@@ -170,6 +196,44 @@
         } else {
             gamescreenshots.setAttribute('style', 'display: none;');
         }
+
+        // load roms
+        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.className = 'romtable';
+                newTable.setAttribute('cellspacing', 0);
+                newTable.appendChild(createTableRow(true, ['Name', 'Size', 'Media', '']));
+
+                var lastPlatform = '';
+                for (var i = 0; i < result.length; i++) {
+                    if (result[i].platform.name != lastPlatform) {
+                        lastPlatform = result[i].platform.name;
+                        var platformRow = document.createElement('tr');
+                        var platformHeader = document.createElement('th');
+                        platformHeader.setAttribute('colspan', 4);
+                        platformHeader.innerHTML = result[i].platform.name;
+                        platformRow.appendChild(platformHeader);
+                        newTable.appendChild(platformRow);
+                    }
+
+                    var newRow = [
+                        '<a href="/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/file" class="romlink">' + result[i].name + '</a>',
+                        formatBytes(result[i].size, 2),
+                        result[i].romTypeMedia,
+                        result[i].mediaLabel
+                    ];
+                    newTable.appendChild(createTableRow(false, newRow, 'romrow', 'romcell'));
+                }
+
+                gameRoms.appendChild(newTable);
+            } else {
+                gameRoms.setAttribute('style', 'display: none;');
+            }
+        });
     });
 
     function rotateBackground() {
@@ -247,4 +311,24 @@
 
         selectScreenshot(selectedScreenshot);
     }
+
+    function createTableRow(isHeader, row, rowClass, cellClass) {
+        var newRow = document.createElement('tr');
+        newRow.className = rowClass;
+
+        for (var i = 0; i < row.length; i++) {
+            var cellType = 'td';
+            if (isHeader == true) {
+                cellType = 'th';
+            }
+
+            var newCell = document.createElement(cellType);
+            newCell.innerHTML = row[i];
+            newCell.className = cellClass;
+
+            newRow.appendChild(newCell);
+        }
+
+        return newRow;
+    }
 </script>

gaseous-server/wwwroot/scripts/main.js

@@ -22,3 +22,15 @@
         }
     });
 }
+
+function formatBytes(bytes, decimals = 2) {
+    if (!+bytes) return '0 Bytes'
+
+    const k = 1024
+    const dm = decimals < 0 ? 0 : decimals
+    const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+}

gaseous-server/wwwroot/styles/style.css

@@ -9,9 +9,12 @@
 }
 
 h3 {
-    text-decoration: underline;
-    text-decoration-color: #916b01;
-    text-decoration-thickness: 3px;
+    border-bottom-style: solid;
+    /*border-bottom-color: #916b01;*/
+    border-bottom-width: 3px;
+    /*border-image: linear-gradient(to right, blue 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;*/
+
+    border-image: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(251,255,0,1) 16%, rgba(0,255,250,1) 30%, rgba(0,16,255,1) 46%, rgba(250,0,255,1) 62%, rgba(255,0,0,1) 78%, rgba(255,237,0,1) 90%, rgba(20,255,0,1) 100%) 5;
 }
 
 #banner_icon {
@@ -326,4 +329,32 @@ iframe {
     -webkit-box-orient: vertical;
     /* truncate to 4 lines */
     -webkit-line-clamp: 4;
+}
+
+.romtable {
+    width: 100%;
+}
+
+.romrow:hover {
+    background-color: #383838;
+}
+
+.romcell {
+    padding: 5px;
+}
+
+th {
+    text-align: left;
+    padding: 5px;
+}
+
+.romlink {
+    color: white;
+    text-decoration: none;
+}
+
+.romlink:hover {
+    color: white;
+    text-decoration: underline;
+    cursor: pointer;
 }