Hide favourite icon in similar games list + minor UI tweaks and fixes

gaseous-server/wwwroot/index.html

@@ -61,8 +61,6 @@
     <script type="text/javascript">
         // Gaseous Games - Main Application Script
 
-        let APIVersion = "v1.1";
-
         // start the application
         let AppVersion = "0.0.0";
         let DBSchemaVersion = "1000";

gaseous-server/wwwroot/pages/game.js

@@ -388,7 +388,7 @@ function SetupPage() {
 
                 var gameSummarySimilarContent = document.getElementById('gamesummarysimilarcontent');
                 for (var i = 0; i < result.games.length; i++) {
-                    var similarObject = renderGameIcon(result.games[i], true, true, true, GetRatingsBoards(), false, true);
+                    var similarObject = renderGameIcon(result.games[i], true, true, true, GetRatingsBoards(), false, true, false);
                     gameSummarySimilarContent.appendChild(similarObject);
                 }
 

gaseous-server/wwwroot/pages/home.js

@@ -55,7 +55,7 @@ class HomePageGameRow {
                         let gameItem = document.createElement("li");
                         gameItem.classList.add("homegame-item");
 
-                        let gameIcon = renderGameIcon(game, true, showRatings, showClassification, classificationDisplayOrder, true, false);
+                        let gameIcon = renderGameIcon(game, true, showRatings, showClassification, classificationDisplayOrder, true, false, true);
                         gameItem.appendChild(gameIcon);
                         scroller.appendChild(gameItem);
                     }

gaseous-server/wwwroot/scripts/gamesformating.js

@@ -181,7 +181,7 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
     }
 
     for (let i = 0; i < result.games.length; i++) {
-        let game = renderGameIcon(result.games[i], showTitle, showRatings, showClassification, classificationDisplayOrder, false, listView);
+        let game = renderGameIcon(result.games[i], showTitle, showRatings, showClassification, classificationDisplayOrder, false, listView, true);
         switch (pageMode) {
             case "paged":
                 targetElement.appendChild(game);
@@ -396,11 +396,15 @@ function IsInView() {
     }
 }
 
-function renderGameIcon(gameObject, showTitle, showRatings, showClassification, classificationDisplayOrder, useSmallCover, listView) {
+function renderGameIcon(gameObject, showTitle, showRatings, showClassification, classificationDisplayOrder, useSmallCover, listView, showFavourite) {
     if (listView == undefined) {
         listView = false;
     }
 
+    if (showFavourite == undefined) {
+        showFavourite = true;
+    }
+
     let classes = getViewModeClasses(listView);
 
     let gameBox = document.createElement('div');
@@ -464,7 +468,39 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
         gameImageBox.appendChild(gameSaveIcon);
     }
 
+    // add ratings banner
+    if (gameObject.totalRating || displayClassification == true) {
+        let gameImageRatingBanner = document.createElement('div');
+        gameImageRatingBanner.classList.add(...classes['game_tile_box_ratingbanner']);
+
+        if (showRatings == true || displayClassification == true) {
+            if (showRatings == true) {
+                if (gameObject.totalRating) {
+                    let gameImageRatingBannerLogo = document.createElement('img');
+                    gameImageRatingBannerLogo.src = '/images/IGDB_logo.svg';
+                    gameImageRatingBannerLogo.setAttribute('style', 'filter: invert(100%); height: 10px; margin-right: 5px; padding-top: 4px;');
+                    gameImageRatingBanner.appendChild(gameImageRatingBannerLogo);
+
+                    let gameImageRatingBannerValue = document.createElement('span');
+                    gameImageRatingBannerValue.innerHTML = Math.floor(gameObject.totalRating) + '% / ' + gameObject.totalRatingCount;
+                    gameImageRatingBanner.appendChild(gameImageRatingBannerValue);
+                }
+            }
+
+            gameImageBox.appendChild(gameImageRatingBanner);
+
+            if (displayClassification == true) {
+                let gameImageClassificationLogo = document.createElement('img');
+                gameImageClassificationLogo.src = classificationPath;
+                gameImageClassificationLogo.classList.add(...classes['rating_image_overlay']);
+                gameImageBox.appendChild(gameImageClassificationLogo);
+            }
+        }
+    }
+    gameBox.appendChild(gameImageBox);
+
     // add favourite game icon
+    if (showFavourite == true) {
         let gameFavIconBox = document.createElement('div');
         gameFavIconBox.classList.add(...classes['game_tile_box_favouritegame']);
 
@@ -506,37 +542,7 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
         });
 
         gameImageBox.appendChild(gameFavIconBox);
-
-    // add ratings banner
-    if (gameObject.totalRating || displayClassification == true) {
-        let gameImageRatingBanner = document.createElement('div');
-        gameImageRatingBanner.classList.add(...classes['game_tile_box_ratingbanner']);
-
-        if (showRatings == true || displayClassification == true) {
-            if (showRatings == true) {
-                if (gameObject.totalRating) {
-                    let gameImageRatingBannerLogo = document.createElement('img');
-                    gameImageRatingBannerLogo.src = '/images/IGDB_logo.svg';
-                    gameImageRatingBannerLogo.setAttribute('style', 'filter: invert(100%); height: 10px; margin-right: 5px; padding-top: 4px;');
-                    gameImageRatingBanner.appendChild(gameImageRatingBannerLogo);
-
-                    let gameImageRatingBannerValue = document.createElement('span');
-                    gameImageRatingBannerValue.innerHTML = Math.floor(gameObject.totalRating) + '% / ' + gameObject.totalRatingCount;
-                    gameImageRatingBanner.appendChild(gameImageRatingBannerValue);
     }
-            }
-
-            gameImageBox.appendChild(gameImageRatingBanner);
-
-            if (displayClassification == true) {
-                let gameImageClassificationLogo = document.createElement('img');
-                gameImageClassificationLogo.src = classificationPath;
-                gameImageClassificationLogo.classList.add(...classes['rating_image_overlay']);
-                gameImageBox.appendChild(gameImageClassificationLogo);
-            }
-        }
-    }
-    gameBox.appendChild(gameImageBox);
 
     if (showTitle == true) {
         let gameBoxTitle = document.createElement('div');

gaseous-server/wwwroot/styles/style.css

@@ -1109,6 +1109,7 @@ input[name='filter_panel_range_max'] {
     position: absolute;
     display: inline-block;
     top: 30%;
+    padding-top: 7px;
     right: 10px;
 }
 
@@ -1138,6 +1139,28 @@ input[name='filter_panel_range_max'] {
     display: inline-block;
     top: 30%;
     right: 50px;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    padding-top: 5px;
+    padding-left: 4px;
+    padding-right: 3px;
+    padding-bottom: 5px;
+    border-color: transparent;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: var(--standard-radius);
+    z-index: +1;
+}
+
+.game_tile_box_row:hover>.game_tile_box_favouritegame_row {
+    border-color: var(--input-border);
+    background-color: var(--fancybutton-background);
+}
+
+.game_tile_box_row:hover>.game_tile_box_favouritegame_row:hover {
+    border-color: var(--input-border-hover);
+    background-color: var(--fancybutton-background-hover);
 }
 
 .game_tile_image {