Add random game selector

static/assets/JSON/changelog.json

@@ -1,4 +1,8 @@
 [
+	{
+		"date": "2/23/2024",
+		"simpleDescription": "Added a random game selector to the games page"
+	},
 	{
 		"date": "2/22/2024",
 		"simpleDescription": "Added 17 games (200+ games 🎉), and removed 1 game"

static/assets/css/main.css

@@ -114,6 +114,20 @@ body::-webkit-scrollbar-corner {
         opacity: 0;
     }
 
+    .randomGame{
+        height: calc(7vh + 2px);
+        font-size: 3vh;
+        background: var(--sidebar-bg);
+        margin-left: 0px;
+        border-radius: 0px;
+        box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
+        transition: opacity 0.3s ease;
+    }
+
+    .randomGame:hover i{
+        opacity: 0.8;
+    }
+
     select {
         height: calc(7vh + 2px);
         border-radius: 2vh;
@@ -263,10 +277,6 @@ select {
     margin-top: 2vh;
 }
 
-button:hover {
-    opacity: 0.8;
-}
-
 .switch {
     position: relative;
     display: inline-block;

static/assets/js/games.js

@@ -173,6 +173,16 @@ const load = () => {
             });
         })
         .catch(e => new PolarisError('Failed to load games'));
+const randomGame = () => {
+    const games = document.querySelectorAll('.games>.game');
+    if (games.length > 0) {
+      const randomIndex = Math.floor(Math.random() * games.length);
+      const randomGame = games[randomIndex];
+      
+      randomGame.click();
+    }
+  };
+  document.querySelector('.randomGame').addEventListener('click', randomGame);
 };
 
 export default {

static/games.html

@@ -38,6 +38,8 @@
 
     <div class="search">
       <input type="text" id="searchInput" placeholder="Search Games">
+      
+      <button class="randomGame"><i class="fa-solid fa-dice"></i></button>
 
       <select id="searchSort">
         <option value="none" selected>Don't Sort</option>