From fae4582e466dcb735a9727982023959bf2a30bf2 Mon Sep 17 00:00:00 2001
From: Sky <skysth3limit@pm.me>
Date: Sat, 22 Jul 2023 18:42:28 -0400
Subject: [PATCH] game loading works :sunglasses:

---
 index.html  |  1 +
 js/games.js | 13 ++++++++++++-
 style.css   | 10 +++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index a53ba87f..532227cc 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,7 @@
 		<p>Welcome to the new and updated e-gamepass!</p>
 		<p class="uploadResult" style="font-size:20px"></p>
 		<br>
+		<div id="games"></div>
   </div>
   </body>
 </html>
diff --git a/js/games.js b/js/games.js
index bcb074f9..5118fd45 100644
--- a/js/games.js
+++ b/js/games.js
@@ -1,5 +1,16 @@
 $.getJSON("/games.json", function (data) {
     for (let i = 0; i < data.length; i++) {
-        console.log(data[i].name);
+        $('#games').append(
+            $('<div>').prop({
+                id: 'game',
+                style: 'cursor: pointer;'
+            }).append(
+                $('<img>').prop({
+                    src: data[i].directory + "/" + data[i].image
+                })
+            ).append(
+                $('<h1>').text(data[i].name)
+            )
+        );
     } 
 })
\ No newline at end of file
diff --git a/style.css b/style.css
index 15b10890..2d39b8bc 100644
--- a/style.css
+++ b/style.css
@@ -39,7 +39,7 @@ button:hover {
     color: #0073e6;
   }
   
-.game {
+#game {
   width: 10%;
   display: inline-block;
   background-color: rgba(83, 118, 235, 0.4);
@@ -51,17 +51,17 @@ button:hover {
 
 }
 
-.game:hover {
+#game:hover {
   background-color: rgba(113, 142, 238, 0.6);
   transform: scale(1.1);
   box-shadow: 0px 0px 5px 5px rgba(113, 142, 238, 0.6);
 }
 
-.game h1 {
-  font-size: 0.7em;
+#game h1 {
+  font-size: 0.85em;
   color: rgb(149, 186, 241)
 }
-.game img {
+#game img {
   width: 100%;
   height: 100%;
   border-radius: 10%;