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

pinned games

Browse Source
This commit is contained in:
Sky 2023-07-27 21:26:28 -04:00
parent df369b1284
commit b8a04b602f
4 changed files with 112 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -1,7 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script src="/js/all.js"></script> <script src="/js/all.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js "></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
@ -51,7 +56,12 @@
<p id="gamecounter"></p> <p id="gamecounter"></p>
<input type="text" id="gamesearch" placeholder="Type here to search.."> <br> <input type="text" id="gamesearch" placeholder="Type here to search.."> <br>
<br> <br>
<div id="pinnedgames">
<h2>Pinned Games</h2>
<p id="message">Looks like you haven't pinned any games, click the star icon next to any game in order to pin them up here!</p>
</div>
<div id="games"> <div id="games">
<h2>All Games</h2>
<p id="message">Please wait for the games to load.. If you see this for more than a second, try reloading and reporting a <a href="https://forms.gle/j75WUn6UhdqsRZgf7">bug report</a>.</p> <p id="message">Please wait for the games to load.. If you see this for more than a second, try reloading and reporting a <a href="https://forms.gle/j75WUn6UhdqsRZgf7">bug report</a>.</p>
</div> </div>

72
js/games.js
View File

@ -1,12 +1,21 @@
$.getJSON("/games.json", function (data) { $.getJSON("/games.json", function (data) {
starredgames = getCookie("starred");
if(starredgames == "") {
starredgames = []
} else {
starredgames = JSON.parse(starredgames)
}
console.log(starredgames);
$("#gamesearch").prop({placeholder: "Click here to search through our " + data.length + " games!"}); $("#gamesearch").prop({placeholder: "Click here to search through our " + data.length + " games!"});
data.sort(dynamicSort("name")); data.sort(dynamicSort("name"));
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
$('#games').append( console.log("Loop iteration:", i);
$('<div>').prop({ let $element = $('<div>').prop({
id: 'game', class: 'game',
style: 'cursor: pointer;', style: 'cursor: pointer;',
dir: data[i].directory id: data[i].directory
}).append( }).append(
$('<img>').prop({ $('<img>').prop({
src: data[i].directory + "/" + data[i].image, src: data[i].directory + "/" + data[i].image,
@ -14,15 +23,64 @@ $.getJSON("/games.json", function (data) {
}) })
).append( ).append(
$('<h1>').text(data[i].name) $('<h1>').text(data[i].name)
) ).append(
$("<mat-icon>").prop({
class: 'material-symbols-rounded'
}).text("star")
); );
if (starredgames.includes(data[i].directory)) {
$element.find("mat-icon").attr("id", "starred");
let $pinnedelement = $element.clone();
$('#pinnedgames').append($pinnedelement);
if($("#pinnedgames #message")) {
$("#pinnedgames #message").hide();
}
}
$('#games').append($element);
} }
$("#games #message").remove(); $("#games #message").remove();
}); });
$(document).ready(function() { $(document).ready(function() {
$(document).on("click", "#game", function(event) { let starred;
redirectGame($(this).attr("dir")); $(document).on("click", ".game", function(event) {
if($(event.target).is('mat-icon')) {
if(!$(event.target).attr("id")) {
$(event.target).prop({id: "starred"})
starred = Cookies.get("starred")
if(starred) {
starred = JSON.parse(starred);
} else {
starred = []
}
starred.push($(this).attr("id"));
Cookies.set("starred", JSON.stringify(starred));
$element = $(this).clone();
$('#pinnedgames').append($element);
$("#pinnedgames #message").hide();
} else {
$(event.target).removeAttr("id");
$thisdiv = '#' + $(this).attr("id")
starred = Cookies.get("starred")
starred = JSON.parse(starred);
starred.pop(starred.indexOf($(this).attr("dir")), starred.indexOf($(this).attr("dir")));
Cookies.set("starred", JSON.stringify(starred));
$("#pinnedgames " + $thisdiv).remove();
if(!$("#pinnedgames div") == "") {
$("#pinnedgames #message").show();
}
$($thisdiv + " #starred").removeAttr("id");
}
} else {
redirectGame($(this).attr("id"));
}
});
$(document).on("click", "#game span", function(event) {
$(this).prop({class: "material-symbols-outlined fill"})
}); });
}); });

4
js/search.js
View File

@ -1,8 +1,8 @@
$(document).ready(function() { $(document).ready(function() {
$('#gamesearch').on('input propertychange paste', function() { $('#gamesearch').on('input propertychange paste', function() {
$('#games #game').hide(); $('#games .game').hide();
var txt = $('#gamesearch').val(); var txt = $('#gamesearch').val();
$('#games #game').each(function(){ $('#games .game').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){ if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show(); $(this).show();
} }

31
style.css
View File

@ -2,6 +2,7 @@ html {
text-align: center; text-align: center;
align-content: center; align-content: center;
font-family: "Share Tech Mono", monospace; font-family: "Share Tech Mono", monospace;
padding: 0;
} }
.content { .content {
@ -39,8 +40,8 @@ button:hover {
#game { .game {
width: 10%; width: 13%;
display: inline-block; display: inline-block;
background-color: rgba(83, 118, 235, 0.4); background-color: rgba(83, 118, 235, 0.4);
padding: 1%; padding: 1%;
@ -51,18 +52,18 @@ button:hover {
height: 100%; height: 100%;
} }
#game:hover { .game:hover {
background-color: rgba(113, 142, 238, 0.6); background-color: rgba(113, 142, 238, 0.6);
transform: scale(1.05); transform: scale(1.05);
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 {
float: right; float: right;
font-size: 0.85em; 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%;
@ -209,3 +210,23 @@ h3 {
cursor:pointer; cursor:pointer;
opacity: 90%; opacity: 90%;
} }
.material-symbols-rounded {
float: left;
color: white;
font-size: 1.9em;
transition-duration: 0.75s;
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
#starred {
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 48
}