From 4a76436223fcab1aba093c35b754f89255ea23c3 Mon Sep 17 00:00:00 2001
From: Michael Green <84688932+michael-j-green@users.noreply.github.com>
Date: Wed, 2 Oct 2024 13:08:19 +1000
Subject: [PATCH] Hide favourite icon in similar games list + minor UI tweaks
 and fixes

---
 gaseous-server/wwwroot/index.html             |  2 -
 gaseous-server/wwwroot/pages/game.js          |  2 +-
 gaseous-server/wwwroot/pages/home.js          |  2 +-
 .../wwwroot/scripts/gamesformating.js         | 96 ++++++++++---------
 gaseous-server/wwwroot/styles/style.css       | 23 +++++
 5 files changed, 76 insertions(+), 49 deletions(-)

diff --git a/gaseous-server/wwwroot/index.html b/gaseous-server/wwwroot/index.html
index 42f68de..7fa578b 100644
--- a/gaseous-server/wwwroot/index.html
+++ b/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";
diff --git a/gaseous-server/wwwroot/pages/game.js b/gaseous-server/wwwroot/pages/game.js
index e133059..68b99fd 100644
--- a/gaseous-server/wwwroot/pages/game.js
+++ b/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);
                 }
 
diff --git a/gaseous-server/wwwroot/pages/home.js b/gaseous-server/wwwroot/pages/home.js
index f712fba..63d5cd4 100644
--- a/gaseous-server/wwwroot/pages/home.js
+++ b/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);
                     }
diff --git a/gaseous-server/wwwroot/scripts/gamesformating.js b/gaseous-server/wwwroot/scripts/gamesformating.js
index 7f7c3b5..e1363f5 100644
--- a/gaseous-server/wwwroot/scripts/gamesformating.js
+++ b/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,49 +468,6 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
         gameImageBox.appendChild(gameSaveIcon);
     }
 
-    // add favourite game icon
-    let gameFavIconBox = document.createElement('div');
-    gameFavIconBox.classList.add(...classes['game_tile_box_favouritegame']);
-
-    let gameFavIcon = document.createElement('img');
-    gameFavIcon.classList.add(...classes['favouriteicon']);
-    if (gameObject.isFavourite == true) {
-        gameFavIcon.src = '/images/favourite-filled.svg';
-        gameFavIconBox.classList.add('favourite-filled');
-    } else {
-        gameFavIcon.src = '/images/favourite-empty.svg';
-        gameFavIconBox.classList.add('favourite-empty');
-    }
-    gameFavIconBox.appendChild(gameFavIcon);
-
-    gameFavIconBox.addEventListener('click', (e) => {
-        e.stopPropagation();
-
-        if (gameFavIconBox.classList.contains('favourite-filled')) {
-            gameFavIcon.src = '/images/favourite-empty.svg';
-            gameFavIconBox.classList.remove('favourite-filled');
-            gameFavIconBox.classList.add('favourite-empty');
-            gameObject.isFavourite = false;
-        } else {
-            gameFavIcon.src = '/images/favourite-filled.svg';
-            gameFavIconBox.classList.remove('favourite-empty');
-            gameFavIconBox.classList.add('favourite-filled');
-            gameObject.isFavourite = true;
-        }
-
-        fetch('/api/v1.1/Games/' + gameObject.id + '/favourite?favourite=' + gameObject.isFavourite, {
-            method: 'POST'
-        }).then(response => {
-            if (response.ok) {
-                // console.log('Favourite status updated');
-            } else {
-                // console.log('Failed to update favourite status');
-            }
-        });
-    });
-
-    gameImageBox.appendChild(gameFavIconBox);
-
     // add ratings banner
     if (gameObject.totalRating || displayClassification == true) {
         let gameImageRatingBanner = document.createElement('div');
@@ -538,6 +499,51 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
     }
     gameBox.appendChild(gameImageBox);
 
+    // add favourite game icon
+    if (showFavourite == true) {
+        let gameFavIconBox = document.createElement('div');
+        gameFavIconBox.classList.add(...classes['game_tile_box_favouritegame']);
+
+        let gameFavIcon = document.createElement('img');
+        gameFavIcon.classList.add(...classes['favouriteicon']);
+        if (gameObject.isFavourite == true) {
+            gameFavIcon.src = '/images/favourite-filled.svg';
+            gameFavIconBox.classList.add('favourite-filled');
+        } else {
+            gameFavIcon.src = '/images/favourite-empty.svg';
+            gameFavIconBox.classList.add('favourite-empty');
+        }
+        gameFavIconBox.appendChild(gameFavIcon);
+
+        gameFavIconBox.addEventListener('click', (e) => {
+            e.stopPropagation();
+
+            if (gameFavIconBox.classList.contains('favourite-filled')) {
+                gameFavIcon.src = '/images/favourite-empty.svg';
+                gameFavIconBox.classList.remove('favourite-filled');
+                gameFavIconBox.classList.add('favourite-empty');
+                gameObject.isFavourite = false;
+            } else {
+                gameFavIcon.src = '/images/favourite-filled.svg';
+                gameFavIconBox.classList.remove('favourite-empty');
+                gameFavIconBox.classList.add('favourite-filled');
+                gameObject.isFavourite = true;
+            }
+
+            fetch('/api/v1.1/Games/' + gameObject.id + '/favourite?favourite=' + gameObject.isFavourite, {
+                method: 'POST'
+            }).then(response => {
+                if (response.ok) {
+                    // console.log('Favourite status updated');
+                } else {
+                    // console.log('Failed to update favourite status');
+                }
+            });
+        });
+
+        gameImageBox.appendChild(gameFavIconBox);
+    }
+
     if (showTitle == true) {
         let gameBoxTitle = document.createElement('div');
         gameBoxTitle.classList.add(...classes['game_tile_label']);
diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css
index e8e26ea..ebf8b30 100644
--- a/gaseous-server/wwwroot/styles/style.css
+++ b/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 {