diff --git a/index.html b/index.html index f2f02d02..53750593 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,12 @@ + + + + + @@ -51,7 +56,12 @@



+
+

Pinned Games

+

Looks like you haven't pinned any games, click the star icon next to any game in order to pin them up here!

+
+

All Games

Please wait for the games to load.. If you see this for more than a second, try reloading and reporting a bug report.

diff --git a/js/games.js b/js/games.js index 30006c6b..9108d64f 100644 --- a/js/games.js +++ b/js/games.js @@ -1,33 +1,91 @@ $.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!"}); data.sort(dynamicSort("name")); for (let i = 0; i < data.length; i++) { - $('#games').append( - $('
').prop({ - id: 'game', - style: 'cursor: pointer;', - dir: data[i].directory - }).append( - $('').prop({ - src: data[i].directory + "/" + data[i].image, - alt: data[i].name + " logo" - }) - ).append( - $('

').text(data[i].name) - ) + console.log("Loop iteration:", i); + let $element = $('
').prop({ + class: 'game', + style: 'cursor: pointer;', + id: data[i].directory + }).append( + $('').prop({ + src: data[i].directory + "/" + data[i].image, + alt: data[i].name + " logo" + }) + ).append( + $('

').text(data[i].name) + ).append( + $("").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(); }); $(document).ready(function() { - $(document).on("click", "#game", function(event) { - redirectGame($(this).attr("dir")); + let starred; + $(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"}) }); }); function redirectGame(dir) { - window.location.href = window.location.origin + "/" + dir + "/index.html"; + window.location.href = window.location.origin + "/" + dir + "/index.html"; } function dynamicSort(property) { var sortOrder = 1; diff --git a/js/search.js b/js/search.js index cc9d1416..26afc66b 100644 --- a/js/search.js +++ b/js/search.js @@ -1,8 +1,8 @@ $(document).ready(function() { $('#gamesearch').on('input propertychange paste', function() { - $('#games #game').hide(); + $('#games .game').hide(); var txt = $('#gamesearch').val(); - $('#games #game').each(function(){ + $('#games .game').each(function(){ if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){ $(this).show(); } diff --git a/style.css b/style.css index 322730f4..ab68e0c0 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,7 @@ html { text-align: center; align-content: center; font-family: "Share Tech Mono", monospace; + padding: 0; } .content { @@ -39,8 +40,8 @@ button:hover { -#game { - width: 10%; +.game { + width: 13%; display: inline-block; background-color: rgba(83, 118, 235, 0.4); padding: 1%; @@ -51,18 +52,18 @@ button:hover { height: 100%; } -#game:hover { +.game:hover { background-color: rgba(113, 142, 238, 0.6); transform: scale(1.05); box-shadow: 0px 0px 5px 5px rgba(113, 142, 238, 0.6); } -#game h1 { +.game h1 { float: right; font-size: 0.85em; color: rgb(149, 186, 241) } -#game img { +.game img { width: 100%; height: 100%; border-radius: 10%; @@ -209,3 +210,23 @@ h3 { cursor:pointer; 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 +} \ No newline at end of file