add random game button

index.html

@@ -63,6 +63,7 @@
       <br />
       <p id="gamecounter"></p>
       <input type="text" id="gamesearch" placeholder="Type here to search.." />
+      <button id="random" onclick="selectRandomGame()">Click to play a random game!</button>
       <br />
       <br />
       <h2>Pinned Games</h2>

js/games.js

@@ -8,6 +8,7 @@ $.getJSON("/games.json", function (data) {
   console.log(starredgames);
   $("#gamesearch").prop({ placeholder: "Click here to search through our " + data.length + " games!" });
   data.sort(dynamicSort("name"));
+  gamelist = data;
   for (let i = 0; i < data.length; i++) {
     let $element = $("<div>")
       .prop({
@@ -135,3 +136,22 @@ function dynamicSort(property) {
     }
   };
 }
+
+function selectRandomGame() {
+  randomgame = Math.floor(Math.random() * gamelist.length - 1);
+  Toastify({
+    text: 'You will be redirected to ' + gamelist[randomgame].name + ' in 3 seconds',
+    duration: 3000,
+    gravity: "top", // `top` or `bottom`
+    position: "center", // `left`, `center` or `right`
+    style: {
+      background: "linear-gradient(42deg, rgba(36, 69, 128, 1) 100%, rgb(24, 17, 87) 0%)",
+      width: "25%",
+    },
+    onClick: function () {}, // Callback after click
+  }).showToast();
+  setTimeout(() => {
+    redirectGame(gamelist[randomgame].directory);s
+  }, 3000);
+  
+}

style.css

@@ -232,3 +232,7 @@ h3 {
 #starred {
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
 }
+
+#random {
+  padding: 0.8% 0.8%;
+}