diff --git a/assets/js/index.js b/assets/js/index.js index 35ecf6e..649da09 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -1,13 +1,18 @@ +//Carousel let next = document.querySelector(".next"); let prev = document.querySelector(".prev"); let pages = document.getElementById("pages"); -let pgctrl = [document.querySelector(".pgctrl")]; +let pgctrl = document.querySelector(".pgctrl"); let slider = document.querySelector(".slider"); let carousel = document.querySelector(".carousel"); let bg = document.querySelector(".slider-bg"); +//Album-cards +let album_cards = document.querySelector(".album-cards"); + +//The Database call. import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm"; const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co"; @@ -18,24 +23,7 @@ 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..."', - ]; - +//the elements for the carousel if (!document) console.log("press f"); if (!next) console.log("Class next missing."); if (!prev) console.log("Class prev missing."); @@ -45,117 +33,187 @@ 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.", + preview: + "The page is still under development. In cases, this page will change after reload or after a few days and a reload.", + }, + ]; -//create pages and add buttons -init_page(); -pg_ctrl(); - -pgctrl.push(document.querySelectorAll(".pgctrl li")); -if (pgctrl[1]) - pgctrl[1].forEach((m, n) => - m.addEventListener("click", function () { - reset(); - slider_index = n; - set(); - }) - ); - -//refresh -reset(); -set(); - - -let highlights, releases, activities; - -async function fetch_highlights() { - let { data, error } = await supabase +let path_name = window.location.pathname; +//Start building the page by calling data +let params = new URLSearchParams(location.search); +if (!params.get("release")) { + if (path_name === "/") { + document.title = "t404:null | Home"; + build_event(0); + } + if (path_name === "/" || path_name === "/release") build_event(1); + if (path_name === "/" || path_name === "/activity") build_event(2); +} else { + let main = document.querySelector("main"); + main.innerHTML = ""; + /* +
+
+

+ Insert Title here +

+ (Raw Context here) +
+
+ */ + let id = params.get("release").replace(/^\//g, ""); + console.log(id); + 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); - } + .select("title, context, bg_src") + .eq("event_id", id) + .then((d) => { + let res = d.data; + if (res !== null && res.length > 0) { + let _pg = document.createElement("div"), + _box = document.createElement("div"), + _h1 = document.createElement("h1"), + title = document.createElement("strong"), + data = res[0]; + + _pg.classList.add("release-track"); + _pg.style = + "background-image: url(" + + data.bg_src + + ");" + + "background-size: cover;" + + "background-position: center;"; + + _box.classList.add("text-box"); + title.textContent = data.title; + + + main.appendChild(_pg); + _pg.appendChild(_box); + _box.appendChild(_h1); + _h1.appendChild(title); + _box.innerHTML+=data.context; + + document.title = "t404:null | " + data.title; + } else { + main.innerHTML = "404"; + document.title = "t404:null | Not Found"; + } + }); } -async function fetch_releases() { - let { data, error } = await supabase + +// #region Slider section + +function build_event(i) { + let conditions = [ + "event_type.eq.highlight,event_type.eq.highlight_activity,event_type.eq.highlight_release", + "event_type.eq.release,event_type.eq.highlight_release", + "event_type.eq.activity,event_type.eq.highlight_activity", + ], + inits = [init_highlights, init_releases, init_activities]; + supabase .from("events") - .select("url, title, subtitle, context, img_src") - .eq("event_type", "release"); //note it only shows u public stuffs - if (error) { - console.error("Error fetching data:", error); + .select("url, title, subtitle, preview, img_src") + .order("id", i < 1 ? { ascending: true } : { descending: true }) + .limit(10) + .or(conditions[i]) + .then(inits[i]); +} + +function init_highlights(d) { + if (d.error) { + console.error("Error fetching data:", d.error); } else { - return (releases = data); - } -} -async function fetch_activities() { - let { data, error } = await supabase - .from("events") - .select("url, title, subtitle, context, img_src") - .eq("event_type", "activity"); //note it only shows u public stuffs - if (error) { - console.error("Error fetching data:", error); - } else { - return (activities = data); + highlights = d.data; + if (d.data.length === 0) highlights = default_highlights; + + 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; + + _p.classList.add("desc"); + _p.textContent = a.preview; + + _div.appendChild(_h1); + _div.appendChild(_p); + _pg.appendChild(_div); + pages.appendChild(_pg); + }); + pg_ctrl(); + + //refresh + reset(); + set(); + + //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(); + }); } } - -fetch_releases(); - -console.log(releases); - - -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"); - - _h1.classList.add("title"); - _h1.textContent = _title; - - _p.classList.add("desc"); - _p.textContent = _desc; - - _div.appendChild(_h1); - _div.appendChild(_p); - _pg.appendChild(_div); - pages.appendChild(_pg); - } -} function pg_ctrl() { for (var i = 0; i < slider.children.length; i++) { let button = document.createElement("li"); let n = i; button.textContent = "•"; //• not · - pgctrl[0].append(button); + pgctrl.appendChild(button); + + if (pgctrl) + button.addEventListener("click", function () { + reset(); + slider_index = n; + set(); + }); } } 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]}')`; + [].slice.call(pgctrl.children)[slider_index].style.opacity = 1; + 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; slider.children[i].style.zIndex = 0; - pgctrl[0].children[i].style.opacity = 0.4; + [].slice.call(pgctrl.children)[i].style.opacity = 0.4; if (bg) bg.style.backgroundImage = null; } } @@ -182,31 +240,152 @@ 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); +// #endregion + +async function init_releases(d) { + if (d.error) { + console.error("Error fetching data:", d.error); + } else { + releases = d.data; + /* + +
+

PoΣΣεssion (Possession)

+

Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.

+

Ghost and monsters are gathering you...

+ + +
+

Hyper Liminality

+

t404:null & trung-nova & AXiS

+

"until you reach it... the two hyper sides."

+ + +
+

A Lake With Endless Stars

+

"Under the coruscating night sky, gaze into the kaleidoscopic waters..."

+ + +
+

Oblitus Requiem \\Against the Forsaken Legacy//

+

VNMC2023 Grand Finals Tiebreaker.

+

"Even if you don't remember me now, I will bring the you I once knew back from them."

+ +*/ + releases.forEach((a) => { + let _card = document.createElement("a"), + _bg_img = document.createElement("div"), + _h2 = document.createElement("h2"), + _p_subtitle = document.createElement("p"), + _p_preview = document.createElement("p"); + _card.href = a.url; + + _card.classList.add("card"); + + _bg_img.classList.add("bg-img"); + _bg_img.style = "background-image: url(" + a.img_src + ");"; + + _h2.textContent = a.title; + + _p_subtitle.textContent = a.subtitle; + _p_preview.textContent = a.preview; + + _card.appendChild(_bg_img); + _card.appendChild(_h2); + _card.appendChild(_p_subtitle); + _card.appendChild(_p_preview); + album_cards.appendChild(_card); + }); + } +} +async function init_activities(d) { + if (d.error) { + console.error("Error fetching data:", d.error); + } else { + releases = d.data; + /* +
+

Fanmade of Fighters I: Genesis

+

BOF-like Contest Releases.

+

Our team (Sine Fine Stellae) Achieved #2 :D
+
+ A Lake With Endless Stars is one of the soundtracks from Sine Fine Stellae produced by me, thanks to the help of Riprider500 and more people :D +

+ + +
+

VNMC 2023

+

(Vietnamese National Mania Championship 2023) Grand Finals Tiebreaker by me (t404:null)

+

+ Oblitus Requiem \\Against the Forsaken Legacy// +
+
"Even if you don't remember me now, I will bring the you I once knew back from them."
+
Sivelia (the host of VNMC) has asked me making a custom soundtrack round for the tourney. The soundtrack get much likes and subscribers on Youtube within 2 weeks as the tournament got a big impact gained. Big thank you to all VNMC staffs for that! +

+ + +
+

VNMC 2024 (???)

+

???

+

Li4tLiAuLS0gLS4uIC0tLi4u
\-...-4buoe2v1qZuiULSrOPuzXZBn
YZt0ULSr9PuzvfuiaZwo5ZBseZB39
fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO

+ + +
+

VNMC 2024 (???) (w/ ??? as ???)

+

???

+ + +
+

???? 5 (????2024) (w/ ??? as ???)

+

???

+

???

+ */ + releases.forEach((a) => { + let _card = document.createElement("a"), + _bg_img = document.createElement("div"), + _h2 = document.createElement("h2"), + _p_subtitle = document.createElement("p"), + _p_preview = document.createElement("p"); + _card.href = a.url; + _card.classList.add("card"); + + _bg_img.classList.add("bg-img"); + _bg_img.style = "background-image: url(" + a.img_src + ");"; + + _h2.textContent = a.title; + + _p_subtitle.textContent = a.subtitle; + _p_preview.textContent = a.preview; + + _card.appendChild(_bg_img); + _card.appendChild(_h2); + _card.appendChild(_p_subtitle); + _card.appendChild(_p_preview); + album_cards.appendChild(_card); + }); + } +} diff --git a/index.html b/index.html index d062500..c13d3f5 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,23 @@ - t404:null | Home - - + t404:null + + + +