slightly less stupid

src/components/app.astro

@@ -1,18 +1,21 @@
 ---
 let app = Astro.props.item;
 
+
+
 let itemName = app.name.replace(" ", "")
 
+
 ---
 
-<a id={itemName} data-click={app.onclick} data-id={app.name} href={app.link}>
+<a id={itemName} data-id={app.name} href={app.link}>
   <div class="h-100 m-4">
     <img src={app.logo} class="w-auto h-16 mx-auto my-2" />
     <h3 class="font-sans text-white text-center">{app.name}</h3>
   </div>
 </a>
 
-<script is:inline define:vars={{ itemName }}>
+<!-- <script is:inline define:vars={{ itemName }}>
   let tgt = document.querySelector(`#${itemName}`);
 
   if(!tgt) {
@@ -32,7 +35,7 @@ let itemName = app.name.replace(" ", "")
     // remove data-click attribute
     tgt.removeAttribute("data-click");
   }
-</script>
+</script> -->
 
 <style>
   h3 {

src/env.d.ts

@@ -5,5 +5,5 @@ interface app {
     link?: string;
     logo: string;
     row: number;
-    onclick?: () => void;
+    onclick?: (() => void) | string;
 }

src/pages/index.astro

@@ -15,14 +15,51 @@ import blog from "../assets/apps/blog.png";
 import contact from "../assets/apps/contact.png";
 import Redirect from "../components/redirect.astro";
 
-const apps: app[] = [
+function raiseUpSpec(id) {
+  let els = document.getElementsByClassName("window");
+
+  let elArray = Array.from(els);
+
+  // find the highest z-index
+  let highestIndex = 0;
+
+  for (let element in elArray) {
+    // @ts-ignore
+    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}</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");
+      String(raiseUpSpec("aboutme"));
       document.getElementById("aboutme").style.display = "block";
-
     },
     row: 1,
   },
@@ -36,7 +73,6 @@ const apps: app[] = [
       document.getElementById("redirect").dataset.redirecturl =
         "https://blog.simo.ng/";
       updateRedirectMessage();
-
     },
     row: 1,
   },
@@ -59,8 +95,7 @@ const apps: app[] = [
       document.getElementById("redirect").style.display = "block";
       document.getElementById("redirect").dataset.redirecturl =
         "https://github.com/s1monlol/";
-      updateRedirectMessage();
-
+      String(updateRedirectMessage());
     },
     row: 2,
   },
@@ -71,11 +106,37 @@ const apps: app[] = [
   },
 ];
 
+apps = apps.map((item, index) => {
+  item.onclick = String(item.onclick);
+
+  // replace all functions inside with a string that expresses the function
+  item.onclick = item.onclick.toString();
+
+  return item;
+});
+
 const row1Items = apps.filter((item) => item.row === 1);
 const row2Items = apps.filter((item) => item.row === 2);
 ---
 
-<script is:inline>
+<Layout title="Simo">
+  <div class="flex">
+    <div class="h-80 flex flex-col items-start">
+      {row1Items.map((item) => <App {item} />)}
+    </div>
+
+    <div class="h-80 flex flex-col items-start">
+      {row2Items.map((item) => <App {item} />)}
+    </div>
+  </div>
+</Layout>
+
+<Aboutme />
+<Redirect />
+
+<Taskbar />
+
+<script define:vars={{ apps }}>
   function raiseUpSpec(id) {
     let els = document.getElementsByClassName("window");
 
@@ -85,6 +146,7 @@ const row2Items = apps.filter((item) => item.row === 2);
     let highestIndex = 0;
 
     for (let element in elArray) {
+      // @ts-ignore
       let zindex = parseInt(elArray[element].style.zIndex);
       if (zindex > highestIndex) {
         highestIndex = zindex;
@@ -112,22 +174,31 @@ const row2Items = apps.filter((item) => item.row === 2);
       `window.location.href = "${redirectUrl}"`
     );
   }
-</script>
 
-<Layout title="Simo">
-  <div class="flex">
-    <div class="h-80 flex flex-col items-start">
-      {row1Items.map((item) => <App {item} />)}
-    </div>
+  // const abt = document.getElementById("AboutMe");
 
-    <div class="h-80 flex flex-col items-start">
-      {row2Items.map((item) => <App {item} />)}
-    </div>
-  </div>
-</Layout>
+  // abt.addEventListener("click", () => {
+  //   console.log("test");
+  // });
 
-<Aboutme />
-<!-- <Aboutme /> -->
-<Redirect />
+  for (x in apps) {
+    let app = apps[x];
+    console.info(app);
 
-<Taskbar />
+    let itemName = app.name.replace(" ", "")
+
+    // console.info(document.getElementById(app.name));
+
+    if (app.onclick == "undefined") {
+      continue;
+    }
+
+    console.log(`Adding onclick for ${app}, ${app.onclick}`);
+
+    document.getElementById(itemName).addEventListener("click", () => {
+      const appFunc = eval(app.onclick);
+      appFunc();
+      // console.log(ap)
+    });
+  }
+</script>