Fedi.CrowdedGames.Group/JS/index.js

import * as MastodonAPI from "./MastodonAPI.js";
import * as BlueskyAPI from "./BlueskyAPI.js";
import * as TumblrAPI from "./TumblrAPI.js";
import * as Cookie from "./Cookies.js";

// GLOBAL VARS
// fuck you. I see why website developers use divs so fucking often.
let Warning = document.getElementsByClassName("WarningMessage")[0];
let Main = document.getElementsByClassName("MainBefore")[0];
let ContainerContainer = document.getElementsByClassName("PostContainerContainer")[0];

let BrowserWidth = window.innerWidth;
let BrowserHeight = window.innerHeight;

let ArrowsButton = document.getElementsByClassName("Arrow");
let SettingButton = document.getElementsByClassName("Setting")[0];
let MailButton = document.getElementsByClassName("Mail")[0];
let PostingButton = document.getElementsByClassName("Posting")[0];

// Sounds
const ButtonSound = new Audio("Audio/button-305770.mp3");
const WarningClick = new Audio("Audio/button-pressed-38129.mp3");
const BackgroundMusic = new Audio("Audio/soft-piano-music-312509.mp3");

// Update a timer
function UpdateTime() {
	let TimeNow = new Date();
	let Hour = TimeNow.getHours();
	let Minute = TimeNow.getMinutes();
	
	var WebsiteTime = document.getElementsByClassName("Time")[0]
	WebsiteTime.innerHTML = "";
	if (Hour < 10) {
		WebsiteTime.innerHTML = WebsiteTime.innerHTML + "0" + Hour;
	} else {
		WebsiteTime.innerHTML = WebsiteTime.innerHTML + Hour;
	}
	WebsiteTime.innerHTML = WebsiteTime.innerHTML + ":";
	if (Minute < 10) {
		WebsiteTime.innerHTML = WebsiteTime.innerHTML + "0" + Minute;
	} else {
		WebsiteTime.innerHTML = WebsiteTime.innerHTML + Minute;
	}
}

setInterval(UpdateTime, 1000);

// When the window is resized
onresize = (event) => {
	BrowserWidth = window.innerWidth;
	BrowserHeight = window.innerHeight;
	window.dispatchEvent(new Event("load"));
}

// When the window finally reloads
onload = (event) => {
	Warning.setAttribute("style", "height: " + BrowserHeight + "px; width: " + BrowserWidth + "px;");
	Main.setAttribute("style", "height: " + BrowserHeight + "px; width: " + BrowserWidth + "px;");
	ArrowsButton[1].setAttribute("style", "left: " + (BrowserWidth - 100) + "px;");
}

// On clicking the warning message
Warning.onclick = (event) => {
	Warning.classList.add("WarningFadeOutAnimation");
	// fixes a damn stupid bug
	document.getElementsByClassName("BlinkAnimation")[0].classList.remove("BlinkAnimation");
	Main.classList.add("MainFadeInAnimation");
	Main.classList.remove("MainBefore");
	WarningClick.play();
	setTimeout(() => {
		Main.classList.remove("MainFadeInAnimation");
		Main.classList.add("MainAfter");
		BackgroundMusic.play();
	}, 5000);
	Main = document.getElementsByClassName("MainFadeInAnimation")[0];
	PosterContainerUpdate();
}

// Clicking the next button
ArrowsButton[1].onclick = (event) => {
	if (!ContainerContainer.classList.contains("NextAnimation")) {
		ContainerContainer.classList.add("NextAnimation");
		ButtonSound.play();
		console.log("loading next posts...");
		setTimeout(() => {
			ContainerContainer.classList.remove("NextAnimation");
		}, 1000);
	}
	PosterContainerUpdate();
}

// Clicking the back button
ArrowsButton[0].onclick = (event) => {
	if (!ContainerContainer.classList.contains("BackAnimation")) {
		ContainerContainer.classList.add("BackAnimation");
		ButtonSound.play();
		console.log("getting previous posts...");
		setTimeout(() => {
			ContainerContainer.classList.remove("BackAnimation");
		}, 1000);
	}
	PosterContainerUpdate();
}

// MastodonAPI integration
async function PosterContainerUpdate() {
	// Cookies for the public timelines
	let LocalCookie = Cookie.GetCookie("Local");
	var LocalTrue = (LocalCookie === "true");
	let RemoteCookie = Cookie.GetCookie("Remote");
	var RemoteTrue = (RemoteCookie === "true");
	let Website = Cookie.MastodonWebsiteCookie;
	
	if (!(Cookie.IsCookieReal(Cookie.MastodonWebsiteCookie))) {
		Website = "https://wetdry.world";
	}
	
	let Timeline = await MastodonAPI.GetPublicTimeline(LocalTrue, RemoteTrue, Website);
	let Content = [];
	let Users = [];
	for (let i in Timeline) {
		Content[i] = Timeline[i].content;
		Users[i] = Timeline[i].account.username;
	}
	let CenterContainer = document.getElementsByClassName("PostContainer")[2].children;
	for (let i in CenterContainer) {
		CenterContainer[i].getElementsByClassName("PostContent")[0].innerHTML = Content[i];
		CenterContainer[i].getElementsByClassName("Username")[0].innerHTML = Users[i];
	}
}

// Open the settings
SettingButton.onclick = (event) => {
	window.location.href = "./HTML/setting.html";
}

// Open the notifs, private message, favorites, ... anything mail related!
MailButton.onclick = (event) => {
	window.location.href = "./HTML/mail.html";
}

// Open the posting area
PostingButton.onclick = (event) => {
	window.location.href = "./HTML/post.html";
}