diff --git a/backgrounds.html b/backgrounds.html deleted file mode 100755 index db85240..0000000 --- a/backgrounds.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - Selenite - - - - - - - - - - - -
- Home - Bookmarklets - Games - Apps - Settings - Open Blank - - -
-
- - 邦乔彦 - - - Matt Vince - - - Rafaël De Jongh - - - a456pur -
- - - - - diff --git a/css/games.css b/css/games.css index e1af4d6..cf8960e 100755 --- a/css/games.css +++ b/css/games.css @@ -24,27 +24,52 @@ game img { justify-self: left; margin-right: auto; } -game h1 { +#holder h1 { font-size: 14px; margin: 15px; - max-width: 50%; + width: 100%; + text-align: right; + height: 70%; } -#games { +#holder { + width: 70%; + height: auto; + display: flex; + flex-direction: column; + align-items: flex-end; +} +#star { + width: 10%; + justify-self: right; + margin-left: auto; + margin-right: 15px; + transition-duration: 0.25s; +} +#star:hover { + transform: scale(1.1); + filter: drop-shadow(0 0 5px var(--color-1)) +} +#games, #starredgames { width: 90vw; - height: 100%; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; - min-height: calc(100vh - (18px * 2 + 5px * 2 + 20px * 2)); + height: 100%; gap: 0px; } #noResults, #loadingMsg { - font-size: 28px; + font-size: 24px; color: var(--color-1); - text-shadow: var(--color-1) 0 0 10px; } -#noResults { +#starredHeader, #allHeader { + font-size: 32px; + color: var(--color-1); +} +#noResults, #starredHeader, #allHeader { display: none; +} +body { + justify-content: flex-start; } \ No newline at end of file diff --git a/css/loader.css b/css/loader.css index 838443f..0a481b2 100644 --- a/css/loader.css +++ b/css/loader.css @@ -23,7 +23,7 @@ } #infobox img { height: 100%; - margin: 1.5%; + margin: 0.5%; aspect-ratio: 1 / 1; border-radius: 8px; } diff --git a/css/main.css b/css/main.css index e5afa66..99442f7 100755 --- a/css/main.css +++ b/css/main.css @@ -25,6 +25,7 @@ body { } body { animation: 1s ease-out loadIn; + user-select: none; } @keyframes loadIn { from {opacity: 0;transform: translateY(-32px);} @@ -67,4 +68,7 @@ h3 { p { font-size: 16px; margin: 2px; +} +img { + image-rendering: pixelated; } \ No newline at end of file diff --git a/js/games.js b/js/games.js index 03a27d3..4053a9a 100755 --- a/js/games.js +++ b/js/games.js @@ -4,7 +4,7 @@ async function loadGames() { // taken from mdn // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort let data = await (await fetch("/resources/games.json")).json(); - sorted = data.sort((a, b) => { + let sorted = data.sort((a, b) => { const n1 = a.name.toUpperCase(); const n2 = b.name.toUpperCase(); if (n1 < n2) { @@ -17,23 +17,58 @@ async function loadGames() { return 0; }); let gamesElement = document.getElementById("games"); + let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]'); sorted.forEach(element => { - console.log(element); + isStarred = starredGames.indexOf(element.directory) != -1; let newElement = document.createElement("game"); newElement.setAttribute("data-target", element.directory); + newElement.setAttribute("data-image", element.image); let image = document.createElement("img"); image.src = `/resources/semag/${element.directory}/${element.image}` + let holder = document.createElement("div"); + holder.id = "holder"; let title = document.createElement("h1"); title.innerText = element.name; + let star = document.createElement("img"); + star.id = "star"; + star.classList = "star"; + star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg"; newElement.appendChild(image); - newElement.appendChild(title); + holder.appendChild(title); + holder.appendChild(star); + newElement.appendChild(holder); gamesElement.appendChild(newElement); + elements.push(newElement); newElement.addEventListener("click", ()=>{ location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}` - }) - elements.push(newElement); + }); + star.addEventListener("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + starEvent(e); + }); }); document.getElementById("loadingMsg").style.display = "none"; + document.getElementById("allHeader").style.display = "block"; + starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]'); + if(starredGames.length > 0) { + document.getElementById("starredHeader").style.display = "block"; + starredGames.forEach((e) => { + let element = document.querySelector(`#games game[data-target='${e}']`); + let newElement = element.cloneNode(true); + document.getElementById("starredgames").appendChild(newElement); + newElement.addEventListener("click", ()=>{ + location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}` + }); + }); + document.querySelectorAll("#starredgames #star").forEach((e) => { + e.addEventListener("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + starEvent(e); + }) + }) + } } document.addEventListener("DOMContentLoaded", ()=>{ document.getElementById("gamesearch").addEventListener("input", ()=>{ @@ -41,7 +76,7 @@ document.addEventListener("DOMContentLoaded", ()=>{ let total = 0; if(elements.length > 0) { elements.forEach((element) => { - let title = element.childNodes[1].innerText.toUpperCase(); + let title = element.childNodes[1].childNodes[0].innerText.toUpperCase(); if(title.includes(input)) { element.style.display = "flex"; } else { @@ -52,4 +87,56 @@ document.addEventListener("DOMContentLoaded", ()=>{ } document.getElementById("noResults").style.display = total >= elements.length ? "flex" : "none" }) -}) \ No newline at end of file +}); + +function starEvent(e) { + let game = e.target.parentNode.parentNode.getAttribute("data-target"); + starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]'); + if(starredGames.indexOf(game) == -1) { + starredGames.push(game); + starredGames.sort(); + if(starredGames.length > 0) { + document.getElementById("starredHeader").style.display = "block"; + } else { + document.getElementById("starredHeader").style.display = "none"; + } + localStorage.setItem("selenite.starred", JSON.stringify(starredGames)); + e.target.src = "/img/star-fill.svg"; + starredgames.innerHTML = ""; + starredGames.forEach((e) => { + let element = document.querySelector(`#games game[data-target='${e}']`); + let newElement = element.cloneNode(true); + document.getElementById("starredgames").appendChild(newElement); + newElement.addEventListener("click", ()=>{ + location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}` + }); + }) + } else { + starredGames.splice(starredGames.indexOf(game), 1); + document.querySelectorAll(`game[data-target='${game}'] #star`).forEach((e) => { + e.src = "/img/star.svg"; + }) + if(starredGames.length > 0) { + document.getElementById("starredHeader").style.display = "block"; + } else { + document.getElementById("starredHeader").style.display = "none"; + } + localStorage.setItem("selenite.starred", JSON.stringify(starredGames)); + starredgames.innerHTML = ""; + starredGames.forEach((e) => { + let element = document.querySelector(`#games game[data-target='${e}']`); + let newElement = element.cloneNode(true); + document.getElementById("starredgames").appendChild(newElement); + newElement.addEventListener("click", ()=>{ + location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}` + }); + }) + } + document.querySelectorAll("#starredgames #star").forEach((e) => { + e.addEventListener("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + starEvent(e); + }) + }) +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 5489d71..8ad8a71 100755 --- a/js/main.js +++ b/js/main.js @@ -28,7 +28,6 @@ function cursor() { cursor.style.pointerEvents = "none"; document.body.appendChild(cursor); document.addEventListener("mousemove", (e) => { - console.log(e); cursor.style.top = `${e.pageY - 15}px`; cursor.style.left = `${e.pageX - 15}px`; }) diff --git a/projects.html b/projects.html index 9fb11a3..d42cb28 100755 --- a/projects.html +++ b/projects.html @@ -52,6 +52,10 @@ +

starred games

+
+
+

all games

games loading..

nothing was found! try a new search query.