mid update
This commit is contained in:
@ -49,7 +49,7 @@ game img {
|
||||
transform: scale(1.1);
|
||||
filter: drop-shadow(0 0 5px var(--color-1))
|
||||
}
|
||||
#games, #starredgames {
|
||||
#games, #starredgames, #topGames {
|
||||
width: 90vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -63,11 +63,11 @@ game img {
|
||||
font-size: 24px;
|
||||
color: var(--color-1);
|
||||
}
|
||||
#starredHeader, #allHeader {
|
||||
#starredHeader, #allHeader, #topHeader {
|
||||
font-size: 32px;
|
||||
color: var(--color-1);
|
||||
}
|
||||
#noResults, #starredHeader, #allHeader {
|
||||
#noResults, #starredHeader, #allHeader, #topHeader {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
|
||||
@ -108,7 +108,7 @@ option:hover {
|
||||
option:focus {
|
||||
background: color-mix(in srgb, var(--color-2) 60%, var(--color-4) 40%);
|
||||
}
|
||||
mobile-warning {
|
||||
mobile-warning, loading-game {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
34
index.html
34
index.html
@ -57,7 +57,38 @@
|
||||
<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script> -->
|
||||
<script>
|
||||
let currentPanic = {key: "", url: ""};
|
||||
document.addEventListener("DOMContentLoaded", ()=>{
|
||||
document.addEventListener("DOMContentLoaded", async ()=>{
|
||||
let hash = location.hash.substring(1);
|
||||
if(hash) {
|
||||
// location.hash = "";
|
||||
if(hash.startsWith("/u/")) {
|
||||
document.getElementById("iframe").src = hash;
|
||||
} else if(hash.startsWith("/g/")) {
|
||||
document.querySelector("loading-game").style.display = "flex";
|
||||
await fetch("/resources/games.json")
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
data.forEach(el => {
|
||||
if(el.directory == hash.substring(3)) {
|
||||
document.getElementById("iframe").src = `/loader.html?title=${encodeURIComponent(el.name)}&dir=${el.directory}&img=${el.image}&type=g`
|
||||
}
|
||||
})
|
||||
})
|
||||
document.querySelector("loading-game").style.display = "none";
|
||||
} else if(hash.startsWith("/a/")) {
|
||||
document.querySelector("loading-game").style.display = "flex";
|
||||
await fetch("/resources/apps.json")
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
data.forEach(el => {
|
||||
if(el.directory == hash.substring(3)) {
|
||||
document.getElementById("iframe").src = `/loader.html?title=${encodeURIComponent(el.name)}&dir=${el.directory}&img=${el.image}&type=g`
|
||||
}
|
||||
})
|
||||
});
|
||||
document.querySelector("loading-game").style.display = "none";
|
||||
}
|
||||
}
|
||||
let socket = new WebSocket("/socket");
|
||||
socket.addEventListener("open", () => {
|
||||
let cookies = document.cookie.split("; ");
|
||||
@ -142,6 +173,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<mobile-warning><h1 class="title">your device is not supported!</h1><p>please rotate your screen for the best experience.</p></mobile-warning>
|
||||
<loading-game><h1 class="title">we are loading your game!</h1><p>please allow us to fetch the data first, this should only take a second.</p></loading-game>
|
||||
<body>
|
||||
<iframe id="iframe" src="home.html"></iframe>
|
||||
<!-- to do
|
||||
|
||||
18
js/games.js
18
js/games.js
@ -17,6 +17,7 @@ async function loadGames() {
|
||||
return 0;
|
||||
});
|
||||
let gamesElement = document.getElementById("games");
|
||||
let topGElement = document.getElementById("topGames");
|
||||
let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
|
||||
sorted.forEach(element => {
|
||||
isStarred = starredGames.indexOf(element.directory) != -1;
|
||||
@ -24,7 +25,8 @@ async function loadGames() {
|
||||
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}`
|
||||
image.src = `/resources/semag/${element.directory}/${element.image}`;
|
||||
image.loading = `lazy`;
|
||||
let holder = document.createElement("div");
|
||||
holder.id = "holder";
|
||||
let title = document.createElement("h1");
|
||||
@ -35,9 +37,18 @@ async function loadGames() {
|
||||
star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg";
|
||||
newElement.appendChild(image);
|
||||
holder.appendChild(title);
|
||||
holder.appendChild(star);
|
||||
newElement.appendChild(holder);
|
||||
gamesElement.appendChild(newElement);
|
||||
if(element.tags) {
|
||||
if(element.tags.includes("top")) {
|
||||
topGElement.appendChild(newElement);
|
||||
} else {
|
||||
gamesElement.appendChild(newElement);
|
||||
holder.appendChild(star);
|
||||
}
|
||||
} else {
|
||||
gamesElement.appendChild(newElement);
|
||||
holder.appendChild(star);
|
||||
}
|
||||
elements.push(newElement);
|
||||
newElement.addEventListener("click", ()=>{
|
||||
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=g`
|
||||
@ -51,6 +62,7 @@ async function loadGames() {
|
||||
document.getElementById("gameCount").innerText = `${data.length} games loaded!`;
|
||||
document.getElementById("loadingMsg").style.display = "none";
|
||||
document.getElementById("allHeader").style.display = "block";
|
||||
document.getElementById("topHeader").style.display = "block";
|
||||
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
|
||||
if(starredGames.length > 0) {
|
||||
document.getElementById("starredHeader").style.display = "block";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 100,
|
||||
"value": 30,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
@ -25,7 +25,7 @@
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"speed": 0.4,
|
||||
"opacity_min": 0,
|
||||
"sync": false
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"speed": 0.4,
|
||||
"size_min": 0.3,
|
||||
"sync": false
|
||||
}
|
||||
|
||||
@ -36,9 +36,10 @@
|
||||
<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
|
||||
<p id="gameCount">xx games loaded..</p>
|
||||
<p id="starredHeader">starred games</p>
|
||||
<div id="starredgames">
|
||||
</div>
|
||||
<p id="allHeader">all games</p>
|
||||
<div id="starredgames"></div>
|
||||
<p id="topHeader" class="title">top games</p>
|
||||
<div id="topGames"></div>
|
||||
<p id="allHeader" class="title">all games</p>
|
||||
<div id="games">
|
||||
<p id="loadingMsg">games loading..</p>
|
||||
<p id="noResults">nothing was found! try a new search query.</p>
|
||||
|
||||
Reference in New Issue
Block a user