Simo/src/pages/index.astro

---
import Layout from "../layouts/Layout.astro";

import Taskbar from "../components/taskbar.astro";
import App from "../components/app.astro";
import Aboutme from "../components/aboutme.astro";
import Redirect from "../components/redirect.astro";
import Contact from "../components/contact.astro";
import Pgp from "../components/pgp.astro";
import Projects from "../components/projects.astro";

// Projects
import Summize from "../components/projects/summize.astro";
import Notion from "../components/projects/notion.astro";
import Imdb from "../components/projects/imdb.astro";

import "../styles/global.css";

import me from "../assets/apps/me.png";
import github from "../assets/apps/github.png";
import pastwork from "../assets/apps/pastWork.png";
import projects from "../assets/apps/projects.png";
import blog from "../assets/apps/blog.png";
import contact from "../assets/apps/contact.png";
import pgp from "../assets/apps/pgp.png";

function dragElement(elmnt) {
	var pos1 = 0,
		pos2 = 0,
		pos3 = 0,
		pos4 = 0;

	if (document.getElementById(elmnt.id + "header")) {
		// If present, the header is where you move the DIV from:
		document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
		document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
	} else {
		// Otherwise, move the DIV from anywhere inside the DIV:
		elmnt.onmousedown = dragMouseDown;
		elmnt.ontouchstart = dragMouseDown;
	}

	function dragMouseDown(e) {
		// e.preventDefault();
		raiseUpSpec(elmnt.id);
		// Get the initial touch point for touch events
		if (e.type == "touchstart") {
			pos3 = e.touches[0].clientX;
			pos4 = e.touches[0].clientY;
		} else {
			pos3 = e.clientX;
			pos4 = e.clientY;
		}
		document.onmouseup = closeDragElement;
		document.ontouchend = closeDragElement;
		document.onmousemove = elementDrag;
		document.ontouchmove = elementDrag;
	}

	function elementDrag(e) {
		// e.preventDefault();
		if (e.type == "touchmove") {
			// Calculate the new cursor position for touch
			pos1 = pos3 - e.touches[0].clientX;
			pos2 = pos4 - e.touches[0].clientY;
			pos3 = e.touches[0].clientX;
			pos4 = e.touches[0].clientY;
		} else {
			// Calculate the new cursor position for mouse
			pos1 = pos3 - e.clientX;
			pos2 = pos4 - e.clientY;
			pos3 = e.clientX;
			pos4 = e.clientY;
		}
		// Set the element's new position
		elmnt.style.top = elmnt.offsetTop - pos2 + "px";
		elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
	}

	function closeDragElement() {
		// Stop moving when mouse button or touch is released
		document.onmouseup = null;
		document.ontouchend = null;
		document.onmousemove = null;
		document.ontouchmove = null;
	}
}

/** Raise up window with given ID */
function raiseUpSpec(id: string) {
	// console.log("raising ", id);
	let els = document.getElementsByClassName("window");

	let elArray = Array.from(els as HTMLCollectionOf<HTMLElement>);

	// find the highest z-index
	let highestIndex = 0;

	for (let element in elArray) {
		let zindex = parseInt(elArray[element].style.zIndex);
		if (zindex > highestIndex) {
			highestIndex = zindex;
		}
	}

	// set the highest z-index plus one
	document.getElementById(id).style.zIndex = (highestIndex + 1).toString();
}

function updateRedirectMessage() {
	const redirectElement = document.getElementById("redirect");

	const redirectUrl = redirectElement.dataset.redirecturl; // Access the data attribute

	const messageElement = redirectElement.querySelector("h2");
	messageElement.innerHTML = `You are about to be redirected to <a class="redirUrl" style="  cursor: pointer;
    color: blue;
    text-decoration: underline; " href="${redirectUrl}"">${redirectUrl.replace("https://", "")}</a>`;

	const buttonElement = redirectElement.querySelector("#okButton");
	// open redirect url
	buttonElement.setAttribute(
		"onclick",
		`window.location.href = "${redirectUrl}"`
	);
}

let apps: app[] = [
	{
		name: "About Me",
		logo: me.src,
		onclick: () => {
			raiseUpSpec("aboutme");
			document.getElementById("aboutme").style.display = "block";
		},
		row: 1,
	},
	{
		name: "Blog",
		logo: blog.src,
		onclick: () => {
			raiseUpSpec("redirect");
			document.getElementById("redirect").style.display = "block";
			document.getElementById("redirect").dataset.redirecturl =
				"https://blog.simo.ng/";
			updateRedirectMessage();
		},
		row: 1,
	},
	{
		name: "Projects",
		logo: projects.src,
		onclick: () => {
			raiseUpSpec("projects");
			document.getElementById("projects").style.display = "block";
		},
		row: 1,
	},
	// {
	// 	name: "Past Work",
	// 	logo: pastwork.src,
	// 	row: 1,
	// },
	{
		name: "Github",
		logo: github.src,
		onclick: () => {
			// ignore
			raiseUpSpec("redirect");
			document.getElementById("redirect").style.display = "block";
			document.getElementById("redirect").dataset.redirecturl =
				"https://github.com/s1monlol/";
			updateRedirectMessage();
		},
		row: 2,
	},
	{
		name: "Contact",
		logo: contact.src,
		row: 2,
		onclick: () => {
			raiseUpSpec("contact");
			document.getElementById("contact").style.display = "block";
		},
	},
	{
		name: "PGP Key",
		logo: pgp.src,
		row: 2,
		onclick: () => {
			raiseUpSpec("pgp");
			document.getElementById("pgp").classList.add("fullscreen");
			document.getElementById("pgp").style.display = "block";
		},
	},
];

let projectsArr: project[] = [
	{
		title: "Summize",
		id: "summize",
	},
	{
		title: "Notion2Canvas",
		id: "notion",
	},
	{
		title: "PGPCord",
		id: "pgpcord",
	},
	{
		title: "IMDB Frontend",
		id: "imdb",
	},
];

const row1Items = apps.filter((item) => item.row === 1);
const row2Items = apps.filter((item) => item.row === 2);

let clientFunctions: Function[] | String[] = [
	raiseUpSpec,
	updateRedirectMessage,
	dragElement,
	updateRedirectMessage,
];

clientFunctions = clientFunctions.map((item) => String(item));

apps = apps.map((item) => {
	item.onclick = String(item.onclick);

	return item;
});
---

<Layout title="Simo">
	<div style="width: 100%; height: calc(100vh - 3.5rem); ">
		<Pgp />

		<div style="display: flex;">
			<div
				style="height: 20rem; display: flex; flex-direction: column; align-items: flex-start;"
			>
				{row1Items.map((item) => <App {item} />)}
			</div>

			<div
				style="height: 20rem; display: flex; flex-direction: column; align-items: flex-start;"
			>
				{row2Items.map((item) => <App {item} />)}
			</div>
		</div>

		<Aboutme />
		<Redirect />
		<Contact />
		<Projects projects={projectsArr} />
		<Summize />
		<Notion />
		<Imdb />
	</div>
	<Taskbar />
</Layout>

<script define:vars={{ apps, projectsArr, clientFunctions }}>
	let dino = `
	                	██████████████
                      ████░░████████████
                      ██████████████████
                      ██████████████████
                      ██████████████████
                      ████████
                      ██████████████░░
                      ██████
  ██              ██████████
  ██▒▒        ▒▒▒▒██████████▒▒▒▒
  ████▓▓      ██████████████  ▒▒
  ██████▒▒▒▒████████████████
  ██████████████████████████
    ██████████████████████
        ██████████████████
        ▒▒██████████████
          ▒▒██████▒▒██▓▓
            ████      ▓▓
            ██▒▒      ▓▓
            ██        ██
`;

	console.log(dino);

	for (func in clientFunctions) {
		eval(clientFunctions[func]);
	}

	Array.from(document.getElementsByClassName("project")).forEach((project) => {
		// console.log(projectsArr[0].id + "item");

		let id = projectsArr.find((i) => i.id + "item" == project.id).id;

		// console.log(id);

		if (id == "pgpcord") {
			project.onclick = () => {
				setTimeout(() => {
					raiseUpSpec("redirect");
					document.getElementById("redirect").style.display = "block";
					document.getElementById("redirect").dataset.redirecturl =
						"https://blog.simo.ng/articles/WIP/pgpcord";

					updateRedirectMessage();
				}, 1);
			};

			return;
		}
		project.onclick = () => {
			setTimeout(() => {
				document.getElementById(id).style.display = "block";
				raiseUpSpec(id);
				// console.log("test");
			}, 1);
		};
	});

	Array.from(document.getElementsByClassName("window")).forEach((window) => {
		dragElement(window);

		window.addEventListener("click", () => {
			raiseUpSpec(window.id);
		});

		Array.from(document.querySelectorAll(".projectwindow a")).forEach(
			(link) => {
				link.addEventListener("click", (e) => {
					document.getElementById("redirect").style.display = "block";
					document.getElementById("redirect").dataset.redirecturl = link.href;
					updateRedirectMessage();

					e.preventDefault();

					setTimeout(() => {
						raiseUpSpec("redirect");
					}, 1);

					return false;
				});
			}
		);

		Array.from(window.getElementsByClassName("close")).forEach((button) => {
			button.addEventListener("click", () => {
				window.style.display = "none";
			});
		});
	});

	apps.forEach((app) => {
		let itemName = app.name.replace(" ", "");

		// console.log(itemName)

		if (app.onclick == "undefined") {
			return;
		}

		document.getElementById(itemName).addEventListener("click", () => {
			const appFunc = eval(app.onclick);
			appFunc();
		});
	});
</script>