favorite game visuals

css/style.css

@@ -191,6 +191,16 @@ body.noscript {
   background-color: var(--hover-color);
 }
 
+.star {
+  cursor: pointer;
+  color: #ccc;
+  float: right;
+}
+
+.filled {
+  color: gold;
+}
+
 .searchbar {
   display: flex;
   width: 75%;

js/index.js

@@ -211,6 +211,12 @@ $("#sort").on("change", updateList);
 dragElement(document.getElementById("gameButton"));
 dragElement(document.getElementById("refresh"));
 
+function toggleStar(event, star) {
+    event.preventDefault();
+    event.stopPropagation();
+    star.classList.toggle('filled');
+}
+
 /**
  * Adds drag functionality to an HTML element.
  *

js/loading.js

@@ -25,7 +25,7 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
     
     let gamesList = $("#gamesList");
     for (game in games) {
-        gamesList.append(`<li url="games/${games[game]["path"]}" ${games[game]["aliases"] ? "aliases=\"" + games[game]["aliases"].join(',') + "\"" : ''}>${game}</li>`);
+        gamesList.append(`<li url="games/${games[game]["path"]}" ${games[game]["aliases"] ? "aliases=\"" + games[game]["aliases"].join(',') + "\"" : ''}>${game} <span class="star" onclick="toggleStar(event, this)">★</span> </li>`);
     }
 
     $("#gamesList li").on("click", function() {