selenite/frontend
1
0
Fork 0
mirror of https://gitlab.com/skysthelimit.dev/selenite.git synced 2025-06-16 10:32:08 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

game loading works 😎

Browse Source
This commit is contained in:
Sky 2023-07-22 18:42:28 -04:00
parent ac5b791264
commit fae4582e46
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -41,6 +41,7 @@
<p>Welcome to the new and updated e-gamepass!</p> <p>Welcome to the new and updated e-gamepass!</p>
<p class="uploadResult" style="font-size:20px"></p> <p class="uploadResult" style="font-size:20px"></p>
<br> <br>
<div id="games"></div>
</div> </div>
</body> </body>
</html> </html>

13
js/games.js
View File

@ -1,5 +1,16 @@
$.getJSON("/games.json", function (data) { $.getJSON("/games.json", function (data) {
for (let i = 0; i < data.length; i++) { 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)
)
);
} }
}) })

10
style.css
View File

@ -39,7 +39,7 @@ button:hover {
color: #0073e6; color: #0073e6;
} }
.game { #game {
width: 10%; width: 10%;
display: inline-block; display: inline-block;
background-color: rgba(83, 118, 235, 0.4); 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); background-color: rgba(113, 142, 238, 0.6);
transform: scale(1.1); transform: scale(1.1);
box-shadow: 0px 0px 5px 5px rgba(113, 142, 238, 0.6); box-shadow: 0px 0px 5px 5px rgba(113, 142, 238, 0.6);
} }
.game h1 { #game h1 {
font-size: 0.7em; font-size: 0.85em;
color: rgb(149, 186, 241) color: rgb(149, 186, 241)
} }
.game img { #game img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10%; border-radius: 10%;