Made highlights to start dyamically

This commit is contained in:
Glitch (t404null-unstable)
2025-06-18 14:59:29 +00:00
parent 6f559de2fc
commit c7847344f3
2 changed files with 90 additions and 87 deletions

View File

@@ -18,24 +18,6 @@ const supabaseKey =
//the moment you notice you need an API endpoint.
const supabase = createClient(supabaseUrl, supabaseKey);
//prototype
let img = [
"https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png?v=1717353087051",
"https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
],
pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"],
title = [
"This page is still under construction.",
"Oblitus Requiem \\\\Against the Forsaken Legacy//",
"A Lake With Endless Stars",
],
desc = [
"The page is still under development. In cases, this page will change after reload or after a few days and a reload.",
'"Even if you don\'t remember me now, I will bring the you I once knew back from them."',
'"Under the coruscating night sky, gaze into the kaleidoscopic waters..."',
];
if (!document) console.log("press f");
if (!next) console.log("Class next missing.");
if (!prev) console.log("Class prev missing.");
@@ -45,10 +27,38 @@ if (!carousel) console.log("Class carousel missing.");
let slider_index = 0;
let touchstartX = 0;
let touchendX = 0;
let highlights = [],
releases = [],
activities = [],
default_highlights = [
{
img_url:
"https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
url: "/",
title: "This page is still under construction.",
context:
"The page is still under development. In cases, this page will change after reload or after a few days and a reload.",
},
{
img_url:
"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png?v=1717353087051",
url: "release/Oblitus_Requiem",
title: "Oblitus Requiem \\\\Against the Forsaken Legacy//",
context:
'"Even if you don\'t remember me now, I will bring the you I once knew back from them."',
},
{
img_url:
"https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
url: "release/A_Lake_With_Endless_Stars",
title: "A Lake With Endless Stars",
context:
'"Under the coruscating night sky, gaze into the kaleidoscopic waters..."',
},
];
//create pages and add buttons
init_page();
pg_ctrl();
start_page();
pgctrl.push(document.querySelectorAll(".pgctrl li"));
if (pgctrl[1])
@@ -60,24 +70,6 @@ if (pgctrl[1])
})
);
//refresh
reset();
set();
let highlights, releases, activities;
async function fetch_highlights() {
let { data, error } = await supabase
.from("events")
.select("url, title, subtitle, context, img_src")
.eq("event_type", "highlight"); //note it only shows u public stuffs
if (error) {
console.error("Error fetching data:", error);
} else {
return (highlights = data);
}
}
async function fetch_releases() {
let { data, error } = await supabase
.from("events")
@@ -101,33 +93,70 @@ async function fetch_activities() {
}
}
function start_page() {
fetch_releases();
fetch_activities();
supabase
.from("events")
.select("url, title, subtitle, context, img_src")
.eq("event_type", "highlight")
.then(init_page);
}
fetch_releases();
function init_page(d) {
if (d.error) {
console.error("Error fetching data:", d.error);
} else {
highlights = d.data;
if (d.data.length === 0) highlights = default_highlights;
console.log(releases);
highlights.forEach((a) => {
let _pg = document.createElement("section"),
_div = document.createElement("div");
let _h1 = document.createElement("h1"),
_p = document.createElement("p");
_h1.classList.add("title");
_h1.textContent = a.title;
function init_page() {
for (var i = 0; i < 3; i++) {
let _pg = document.createElement("section"),
_div = document.createElement("div"),
_desc = desc[i],
_title = title[i];
let _h1 = document.createElement("h1"),
_p = document.createElement("p");
_p.classList.add("desc");
_p.textContent = a.context;
_h1.classList.add("title");
_h1.textContent = _title;
_div.appendChild(_h1);
_div.appendChild(_p);
_pg.appendChild(_div);
pages.appendChild(_pg);
});
pg_ctrl();
_p.classList.add("desc");
_p.textContent = _desc;
//refresh
reset();
set();
_div.appendChild(_h1);
_div.appendChild(_p);
_pg.appendChild(_div);
pages.appendChild(_pg);
//next
if (next) {
next.addEventListener("click", nxt);
setInterval(nxt, 30000);
}
//previous
if (prev) prev.addEventListener("click", prv);
slider.onclick = function () {
location.assign(highlights[slider_index].url);
};
//slider.children.forEach((carousel, num) => {
carousel.addEventListener("touchstart", (e) => {
touchstartX = e.changedTouches[0].screenX;
});
carousel.addEventListener("touchend", (e) => {
touchendX = e.changedTouches[0].screenX;
checkX();
});
}
}
function pg_ctrl() {
for (var i = 0; i < slider.children.length; i++) {
let button = document.createElement("li");
@@ -141,16 +170,10 @@ function set() {
slider.children[slider_index].style.opacity = 1;
slider.children[slider_index].style.zIndex = 1;
pgctrl[0].children[slider_index].style.opacity = 1;
if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`;
if (bg)
bg.style.backgroundImage = `url('${highlights[slider_index].img_src}')`;
}
// setInterval(getinfo, 60000);
// async function getinfo() {
// let res = await fetch("");
// const info = await res.json();
// if (bg) bg.style.backgroundImage = `url('${info.slider[1].img}')`;
// }
function reset() {
for (var i = 0; i < slider.children.length; i++) {
slider.children[i].style.opacity = 0;
@@ -182,31 +205,8 @@ function prv() {
set();
}
//next
if (next) {
next.addEventListener("click", nxt);
setInterval(nxt, 30000);
}
//previous
if (prev) prev.addEventListener("click", prv);
slider.onclick = function () {
location.assign(pg[slider_index]);
};
//touchswipe control
function checkX() {
if (touchendX < touchstartX && touchstartX - touchendX > 60) nxt();
if (touchendX > touchstartX && touchendX - touchstartX > 60) prv();
}
//slider.children.forEach((carousel, num) => {
carousel.addEventListener("touchstart", (e) => {
touchstartX = e.changedTouches[0].screenX;
});
carousel.addEventListener("touchend", (e) => {
touchendX = e.changedTouches[0].screenX;
checkX();
});
//location.reload(true);