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";
import Duolingo from "../components/duolingo.astro";
import GitHubGraph from "../components/githubgraph.astro";
import NowPlaying from "../components/nowplaying.astro";
import Ram from "../components/ram.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";
import Glance from "../components/projects/glance.astro";

import ramIcon from "../assets/apps/blog.png";

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

	if (document.getElementById(elmnt.id + "header")) {
		document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
		document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
	} else {
		elmnt.onmousedown = dragMouseDown;
		elmnt.ontouchstart = dragMouseDown;
	}

	function dragMouseDown(e) {
		// e.preventDefault();
		raiseUpSpec(elmnt.id);
		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") {
			pos1 = pos3 - e.touches[0].clientX;
			pos2 = pos4 - e.touches[0].clientY;
			pos3 = e.touches[0].clientX;
			pos4 = e.touches[0].clientY;
		} else {
			pos1 = pos3 - e.clientX;
			pos2 = pos4 - e.clientY;
			pos3 = e.clientX;
			pos4 = e.clientY;
		}

		elmnt.style.top = elmnt.offsetTop - pos2 + "px";
		elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
	}

	function closeDragElement() {
		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("About Me");
			document.getElementById("About Me").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: "Git",
		logo: github.src,
		onclick: () => {
			// ignore
			raiseUpSpec("Redirect");
			document.getElementById("Redirect").style.display = "block";
			document.getElementById("Redirect").dataset.redirecturl =
				"https://git.simo.ng/simo";
			updateRedirectMessage();
		},
		row: 2,
	},
	{
		name: "RAM",
		logo: ramIcon.src,
		onclick: () => {
			raiseUpSpec("ram");
			document.getElementById("ram").style.display = "block";
		},
		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: 1,
		onclick: () => {
			raiseUpSpec("pgp");
			document.getElementById("pgp").classList.add("fullscreen");
			document.getElementById("pgp").style.display = "block";
		},
	},
];

let projectsArr: project[] = [
 	{
		title: "Glance",
		id: "glance",
	},
	{
		title: "Summize",
		id: "summize",
	},
	{
		title: "Notion2Canvas",
		id: "notion",
	},
];

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 />
		<iframe
			id="SimoSearch"
			title="SimoSearch"
			src="https://search.simo.ng/#embed"
			loading="lazy"
			referrerpolicy="no-referrer"
			allowfullscreen
			style="
				display: none;
				position: absolute;
				left: 62%;
				top: 10%;
				border: 0;
				outline: 0;
				background: transparent;
			"
		></iframe>

		<Ram />
		<NowPlaying />
		<Projects projects={projectsArr} />
		<Summize />
		<Notion />
		<Glance />
		<Duolingo />
		<GitHubGraph />
	</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(() => {
			  console.log(id)
				document.getElementsByClassName(id)[0].style.display = "block";
				raiseUpSpec(document.getElementsByClassName(id)[0].id);
			}, 1);
		};
	});

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

		window.querySelectorAll('.title-bar-controls button').forEach((btn) => {
			btn.addEventListener('mousedown', (e) => e.stopPropagation());
			btn.addEventListener('touchstart', (e) => e.stopPropagation());
		});

		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, index) => {
			if (index === 0) {
				button.addEventListener("click", () => {
					minimizeWindow(window.id);
				});
			} else {
				button.addEventListener("click", () => {
					window.classList.add("closed");
					removeFromTaskbar(window.id);

					const onEnd = () => {
						window.classList.remove("closed");
						window.style.display = "none";
					};
					window.addEventListener('animationend', onEnd, { once: true });

					setTimeout(() => {
						if (window.style.display !== 'none') {
							window.classList.remove('closed');
							window.style.display = 'none';
						}
					}, 250);
				});
			}
		});
	});

	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();
		});
	});

	function minimizeWindow(windowId) {
		const window = document.getElementById(windowId);

		addToTaskbar(windowId);

		const windowRect = window.getBoundingClientRect();
		const taskbarButton = document.getElementById(`taskbar-${windowId}`);
		const buttonRect = taskbarButton.getBoundingClientRect();

		const translateX = buttonRect.left - windowRect.left;
		const translateY = buttonRect.top - windowRect.top;

		window.style.transition = "all 0.3s ease-out";
		window.style.transform = `translate(${translateX}px, ${translateY}px) scale(0.1)`;
		window.style.opacity = "0";

		setTimeout(() => {
			window.style.display = "none";
			window.style.transition = "";
			window.style.transform = "";
			window.style.opacity = "";
		}, 300);
	}

	function restoreWindow(windowId) {
		const window = document.getElementById(windowId);
		const taskbarButton = document.getElementById(`taskbar-${windowId}`);
		const buttonRect = taskbarButton.getBoundingClientRect();
		const windowRect = window.getBoundingClientRect();

		const translateX = buttonRect.left - windowRect.left;
		const translateY = buttonRect.top - windowRect.top;

		window.style.transform = `translate(${translateX}px, ${translateY}px) scale(0.1)`;
		window.style.opacity = "0";
		window.style.display = "block";

		removeFromTaskbar(windowId);
		raiseUpSpec(windowId);

		requestAnimationFrame(() => {
			window.style.transition = "all 0.3s ease-out";
			window.style.transform = "translate(0, 0) scale(1)";
			window.style.opacity = "1";

			setTimeout(() => {
				window.style.transition = "";
				window.style.transform = "";
				window.style.opacity = "";
			}, 300);
		});
	}

	function addToTaskbar(windowId) {
		const taskbarWindows = document.getElementById("taskbar-windows");

		if (document.getElementById(`taskbar-${windowId}`)) {
			return;
		}

		const window = document.getElementById(windowId);
		const titleBar = window.querySelector(".title-bar-text");
		const title = titleBar ? titleBar.textContent : windowId;

		const icon = "";
		
		const button = document.createElement("button");
		button.id = `taskbar-${windowId}`;
		button.style.cssText = `
			min-width: 140px;
			max-width: 180px;
			height: 2.25rem;
			padding: 0 0.5rem;
			overflow: hidden;
			cursor: pointer;
			background-color: #c0c0c0;
			box-shadow: -2px -2px #e0dede, -2px 0 #e0dede, 0 -2px #e0dede, -4px -4px white, -4px 0 white, 0 -4px white, 2px 2px #818181, 0 2px #818181, 2px 0 #818181, 2px -2px #e0dede, -2px 2px #818181, -4px 2px white, -4px 4px black, 4px 4px black, 4px 0 black, 0 4px black, 2px -4px white, 4px -4px black;
			display: flex;
			align-items: center;
			gap: 0.35rem;
			border: none;
		`;

		const iconSpan = document.createElement("span");
		iconSpan.textContent = icon;
		iconSpan.style.cssText = `
			font-size: 18px;
			flex-shrink: 0;
			line-height: 1;
		`;

		const textSpan = document.createElement("span");
		textSpan.textContent = title;
		textSpan.style.cssText = `
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-weight: bold;
			font-size: 11px;
			letter-spacing: 0.3px;
		`;

		button.appendChild(iconSpan);
		button.appendChild(textSpan);

		button.addEventListener("mousedown", () => {
			button.style.boxShadow = "-2px -2px #818181, -2px 0 #818181, 0 -2px #818181, -4px -4px black, -4px 0 black, 0 -4px black, 2px 2px #e0dede, 0 2px #e0dede, 2px 0 #e0dede, 2px -2px #818181, -2px 2px #e0dede, -4px 2px black, -4px 4px white, 4px 4px white, 4px 0 white, 0 4px white, 2px -4px black, 4px -4px white";
		});

		button.addEventListener("mouseup", () => {
			button.style.boxShadow = "-2px -2px #e0dede, -2px 0 #e0dede, 0 -2px #e0dede, -4px -4px white, -4px 0 white, 0 -4px white, 2px 2px #818181, 0 2px #818181, 2px 0 #818181, 2px -2px #e0dede, -2px 2px #818181, -4px 2px white, -4px 4px black, 4px 4px black, 4px 0 black, 0 4px black, 2px -4px white, 4px -4px black";
		});

		button.addEventListener("click", () => {
			restoreWindow(windowId);
		});

		taskbarWindows.appendChild(button);
	}

	function removeFromTaskbar(windowId) {
		const button = document.getElementById(`taskbar-${windowId}`);
		if (button) {
			button.remove();
		}
	}

	const startButton = document.querySelector('button[aria-label="startButton"]');
	if (startButton) {
		startButton.addEventListener('click', () => {
			const w = document.getElementById('SimoSearch');
			if (!w) return;
			w.style.display = 'block';
			w.style.zIndex = '9999';
		});
	}
</script>