From ed347bcfca25555b321e21fc82b59ac126cc8225 Mon Sep 17 00:00:00 2001
From: tenkuma <adrianvictor@disroot.org>
Date: Fri, 28 Mar 2025 17:56:04 -0300
Subject: [PATCH] Responsive UI, reworked project loading script and WIP
 automatic featured section.

---
 featured.json |  1 +
 index.html    |  8 ++++---
 index.js      | 11 +++++++++
 project.html  | 15 ++++++++++---
 project.js    | 62 +++++++++++++++++++++------------------------------
 styles.css    | 38 +++++++++++++++++++++++++++++--
 6 files changed, 91 insertions(+), 44 deletions(-)
 create mode 100644 featured.json
 create mode 100644 index.js
diff --git a/featured.json b/featured.json
new file mode 100644
index 0000000..1f8ceaa
--- /dev/null
+++ b/featured.json
@@ -0,0 +1 @@
+["aboukkit"]
\ No newline at end of file
diff --git a/index.html b/index.html
index 5a7bfb0..3d8d054 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,10 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="styles.css" media="screen">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="project.js"></script>
+    <script src="featured.js" defer></script>
     <title>NBeta</title>
 </head>
 <body>
@@ -23,7 +25,7 @@
             <p>This is a project that aims to preserve Minecraft Beta mods and plugins through archives of documentation and JARs and showcase new plugins for beta.</p>
             <div id="featured"><h2>featured projects</h2>
                 <div id="featuredHelper">
-                    <div class="featuredProject">
+                    <!-- <div class="featuredProject">
                         <a href="project.html?id=aboukkit">
                             <img src="images/projects/aboukkit.png">
                             <p>Aboukkit</p>
@@ -41,7 +43,7 @@
                         <img src="images/projects/hats.png">
                         <p>Hats</p>
                         <p>by AleksandarHaralanov</p>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </main>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..d23a06a
--- /dev/null
+++ b/index.js
@@ -0,0 +1,11 @@
+const featuredHelper = document.querySelector("#featuredHelper")
+
+async function loadFeatured() {
+    const response = await fetch(`bananas.json`);
+    if (!response.ok) {
+        featuredHelper.innerHTML = `
+        <p>Oops! Failed to fetch featured projects...</p>
+        `
+        throw new Error("Failed to fetch featured projects JSON");
+    }
+}
\ No newline at end of file
diff --git a/project.html b/project.html
index 902c9a9..ca89c82 100644
--- a/project.html
+++ b/project.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="styles.css" media="screen">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NBeta</title>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <script src="MinecraftColorCodes.3.7.js"></script>
-    <script src="project.js" defer></script>
+    <!-- <script src="MinecraftColorCodes.3.7.js"></script> -->
+    <script src="project.js"></script>
 </head>
 <body>
     <div id="everythingHelper">
@@ -32,5 +32,14 @@
         <main id="projectDescription">
         </main>
     </div>
+    <script>
+        const downloadButton = document.querySelector("#projectHeader button");
+        const header = document.querySelector("#projectHeader");
+        const headerTitle = document.querySelector("#projectHeader h1");
+        const subtitle = document.querySelector("#projectHeader p");
+        const main = document.querySelector("main");
+        const logo = document.querySelector("#projectHeader img");
+        loadProject(projectID, headerTitle, subtitle, main, logo);
+    </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/project.js b/project.js
index 2e624a3..10c264d 100644
--- a/project.js
+++ b/project.js
@@ -1,42 +1,32 @@
-const downloadButton = document.querySelector("#projectHeader button");
-const header = document.querySelector("#projectHeader");
-const headerTitle = document.querySelector("#projectHeader h1");
-const subtitle = document.querySelector("#projectHeader p");
-const main = document.querySelector("main");
-const logo = document.querySelector("#projectHeader img");
-
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const projectID = urlParams.get('id');
 
-function loadProject() {
-var jsonXhr = new XMLHttpRequest();
-jsonXhr.open("GET", "projects/" + projectID + "/project.json", true);
-
-jsonXhr.onreadystatechange = function () {
-  if (jsonXhr.readyState === 4 && jsonXhr.status === 200) {
-    var jsonData = JSON.parse(jsonXhr.responseText);
-    headerTitle.innerText = jsonData.project.title;
-    subtitle.innerText = jsonData.project.subtitle;
-    console.log(jsonData);
-  }
-};
-
-var mdXhr = new XMLHttpRequest();
-mdXhr.open("GET", "projects/" + projectID + "/description.md", true);
-
-mdXhr.onreadystatechange = function () {
-  if (mdXhr.readyState === 4 && mdXhr.status === 200) {
-    const html = marked.parse(
-      mdXhr.responseText.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,"")
-      )    
-      main.appendChild(html.replaceColorCodes());
-      console.log(html.replaceColorCodes());
-    }
-  };
-  jsonXhr.send();
-  mdXhr.send();
-  logo.src = "projects/" + projectID + "/logo.png";
+async function getProjectJSON(id = projectID) {
+  const response = await fetch(`projects/${id}/project.json`);
+  if (!response.ok) throw new Error("Failed to fetch project JSON");
+  return response.json();
 }
 
-loadProject();
\ No newline at end of file
+async function getProjectDescription(obj, id = projectID) {
+  const response = await fetch(`projects/${id}/description.md`);
+  if (response.ok) {
+    const text = await response.text();
+    obj.innerHTML = marked.parse(text.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""));
+  }
+}
+
+async function loadProject(id = projectID, objTitle, objSubtitle, objDescription, objLogo) {
+  try {
+    const jsonData = await getProjectJSON(id);
+
+    if (objTitle) objTitle.innerText = jsonData.project.title;
+    if (objSubtitle) objSubtitle.innerText = jsonData.project.subtitle;
+    
+    if (objDescription) await getProjectDescription(objDescription, id);
+    if (objLogo) objLogo.src = `projects/${id}/logo.png`;
+
+  } catch (error) {
+    console.error("Error loading project:", error);
+  }
+}
diff --git a/styles.css b/styles.css
index 4247de8..aa2576f 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,6 @@
 * {
     margin: 0;
     padding: 0;
-
 }
 
 @font-face {
@@ -13,6 +12,7 @@ body {
     font-family: Minecraft, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
     background-color: black;
     color:white;
+    font-size : clamp(1.2rem, .2vw, 2rem);
 }
 
 header {
@@ -79,6 +79,7 @@ button:hover {
 #everythingHelper {
     max-width: 60%;
     margin: auto;
+    transform: .2s;
 }
 
 #headerLinks {
@@ -140,7 +141,8 @@ button:hover {
 }
 
 #projectTitleSubtitle {
-    
+    margin-top: auto;
+    margin-bottom: auto;
 }
 
 #projectHeader {
@@ -161,6 +163,12 @@ button:hover {
     cursor: pointer;
 }
 
+#projectHeader img {
+    outline: 2px solid gray;
+    width: 5vw;
+    height: 5vw;
+}
+
 #projectDescription li {
     margin-left: 20px;
     list-style-type: "> ";
@@ -168,4 +176,30 @@ button:hover {
 
 #projectDescription h1, h2 {
     margin-bottom: 8px;
+}
+
+@media only screen and (max-width: 1280px) {
+
+    #everythingHelper {
+        max-width: 80%;
+    }
+
+    #linksBox {
+        flex-direction: column;
+    }
+
+    #linksBox * {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+}
+
+@media only screen and (max-width: 300px) {
+
+    #everythingHelper {
+        max-width: 90%;
+    }
+
+    
 }
\ No newline at end of file
