From a126b6454059ac20012aeeded8aee160b60e0a48 Mon Sep 17 00:00:00 2001
From: "Dean @ Skool" <dbjones3@students.wcpss.net>
Date: Fri, 23 Feb 2024 08:28:09 -0500
Subject: [PATCH] Add random game selector

---
 static/assets/JSON/changelog.json |  4 ++++
 static/assets/css/main.css        | 18 ++++++++++++++----
 static/assets/js/games.js         | 10 ++++++++++
 static/games.html                 |  2 ++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/static/assets/JSON/changelog.json b/static/assets/JSON/changelog.json
index 2fc7494..2a7f5f3 100644
--- a/static/assets/JSON/changelog.json
+++ b/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"
diff --git a/static/assets/css/main.css b/static/assets/css/main.css
index 881c63b..d91a8bb 100644
--- a/static/assets/css/main.css
+++ b/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;
diff --git a/static/assets/js/games.js b/static/assets/js/games.js
index ccae4ae..01e1340 100644
--- a/static/assets/js/games.js
+++ b/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 {
diff --git a/static/games.html b/static/games.html
index 6fb90f7..5beaa14 100644
--- a/static/games.html
+++ b/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>