update featured

Pen-Group · Jul 14, 2024 · 4a80551 · 4a80551
1 parent 1bd80d7
commit 4a80551
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 16 deletions.
diff --git a/FeaturedProjects.json b/FeaturedProjects.json
@@ -7,14 +7,16 @@
         "In-Site":true,
         "External-Links":{
             "Scratch":"https://scratch.mit.edu/projects/861541218/"
-        }
+        },
+        "Type":"Project"
     },
     {
         "Name":"Voxel Test",
         "Author":"ObviousAlexC",
         "Description":"A voxel world generation demo in pen+",
         "Author-Link":"https://www.youtube.com/channel/UC0xUJS2XrZ8c6J7noLerDCw",
         "In-Site":true,
-        "Project-File":"VOXELTEST.sb3"
+        "Project-File":"VOXELTEST.sb3",
+        "Type":"Project"
     }
 ]
diff --git a/index.html b/index.html
@@ -3,18 +3,26 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Featured</title>
     <link rel="stylesheet" href="https://pen-group.github.io/shared/css/defaultCSS.css">
     <link rel="stylesheet" href="https://pen-group.github.io/shared/css/themes.css">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="programStyles.css">
 </head>
 <body class="theme-light" style="transition: all 100ms;">
     <div class="penPlus-topBar">
       <img class="penPlus-themes" id="theme-button" src="https://pen-group.github.io/shared/images/moon.svg" alt="">
     </div>
-    <h1 style="position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);">Featured Projects!</h1>
-    <h3 style="position: absolute; top: 20%; left: 50%; transform: translate(-50%, -100%);">For all of those scratch projects that are made with Pen+ ❤️</h3>
-    <div class="pageContent" id="pageElements">
+    <h1 class="centered" style="margin-top: 48px;">Featured Projects!</h1>
+    <h3 class="centered">For all of those scratch projects that are made with Pen+ ❤️</h3>
+    <div class="pageContentSearch" id="searchHelpers">
+        <input type="text" name="Search" id="searchPageElements" placeholder="Type to Search">
+         Show:
+        <button typeSetter="">All</button>
+        <button typeSetter="Project">Projects</button>
+        <button typeSetter="Shader">Shaders</button>
+    </div>
+    <div class="pageContent" style="margin-top: 0px;" id="pageElements">
         No Featured Projects Yet!
     </div>
 
@@ -36,5 +44,9 @@ <h3 style="position: absolute; top: 20%; left: 50%; transform: translate(-50%, -
     </script>
 
     <script src="script.js"></script>
+
+    <footer class="centered">
+        <p><a href="https://forms.gle/dKa3TJ93sUDtw4kV6">Submit project</a></p>
+    </footer>
 </body>
 </html>
diff --git a/programStyles.css b/programStyles.css
@@ -0,0 +1,11 @@
+.hoverBOX-Scratch {
+    background-color: #ffa04c;
+}
+
+.hoverBOX-Turbowarp {
+    background-color: #ff6666;
+}
+
+.hoverBOX-ShaderEditor {
+    background-color: #0fbd8c;
+}
diff --git a/script.js b/script.js
@@ -1,4 +1,12 @@
 const projectsDiv = document.getElementById("pageElements");
+const searchDiv = document.getElementById("searchHelpers");
+
+const searchParams = {
+    Type:"",
+    Name:""
+}
+
+const projectListing = [];
 
 const addProject = (projectData) => {
     let projectDiv = document.createElement("div");
@@ -53,24 +61,94 @@ const addProject = (projectData) => {
 
     if (projectData["Project-File"]) {
         const linkButton = document.createElement("a");
-        linkButton.href = `https://turbowarp.org/?project_url=${window.location.href}/Projects/${encodeURIComponent(projectData.Author)}/${encodeURIComponent(projectData.Name)}/${projectData["Project-File"]}`;
+        if (projectData.Type && projectData.Type == "Shader") {
+            linkButton.href = `https://pen-group.github.io/penPlus-shader-editor/Source/?project_url=${window.location.href}/Projects/${encodeURIComponent(projectData.Author)}/${encodeURIComponent(projectData.Name)}/${projectData["Project-File"]}`;
+        }
+        else {
+            linkButton.href = `https://turbowarp.org/?project_url=${window.location.href}/Projects/${encodeURIComponent(projectData.Author)}/${encodeURIComponent(projectData.Name)}/${projectData["Project-File"]}`;
+        }
         linkButton.innerText = "Open in TurboWarp";
         linkButton.style.color = "#ffffff";
-        linkButton.style.backgroundColor = "#ff6666";
+        linkButton.className = `hoverBOX-Turbowarp`;
 
         hoverBox.appendChild(linkButton);
     }
+
+    projectListing.push({
+        data:projectData,
+        element:projectDiv
+    });
 }
 
 fetch("FeaturedProjects.json")
   .then((response) => response.text())
   .then((text) => {
     projectsDiv.innerHTML = ``;
     let Projects = JSON.parse(text);
-    console.log(Projects);
 
     for (let projectID = 0; projectID < Projects.length; projectID++) {
-      console.log(Projects[projectID]);
       addProject(Projects[projectID]);
     }
   });
+
+const refreshProjectListing = () => {
+
+    projectsDiv.style.gridTemplateColumns =  "1fr 1fr";
+
+    projectsDiv.innerHTML = ``;
+
+    const keys = Object.keys(searchParams);
+
+    projectListing.forEach(project => {
+        let projectValid = true;
+        //Search through keys
+        keys.forEach(key => {
+            if (project.data[key]) {
+                if (!project.data[key].toLowerCase().includes(searchParams[key].toLowerCase())) {
+                    projectValid = false;
+                }
+            }
+        })
+
+        if (projectValid) {
+            projectsDiv.appendChild(project.element);
+        }
+    });
+
+    if (projectsDiv.children.length == 0) {
+        projectsDiv.innerHTML = `<h3 class="centered" style="margin-top: 48px; margin-bottom: 48px;">No projects match your search. 😕</h3>`;
+        projectsDiv.style.gridTemplateColumns =  "1fr";
+    }
+}
+
+const handleInputTypes = (element) => {
+    switch (element.type) {
+        case "text":
+            element.addEventListener("change", () => {
+                searchParams.Name = element.value;
+                refreshProjectListing();
+            })
+            break;
+
+        default:
+            break;
+    }
+}
+
+Array.from(searchDiv.children).forEach(child => {
+    switch (child.localName) {
+        case "button":
+            child.onclick = () => {
+                searchParams.Type = child.getAttribute("typeSetter");
+                refreshProjectListing();
+            }
+            break;
+
+        case "input":
+            handleInputTypes(child);
+            break;
+
+        default:
+            break;
+    }
+})
diff --git a/styles.css b/styles.css
@@ -1,14 +1,31 @@
 .pageContent {
     width: 50%;
     height: auto;
-    position: absolute;
     top: 30%;
-    left: 25%; 
     padding: 8px;
     background-color: var(--background-2);
     display: grid;
     grid-template-columns: 1fr 1fr;
     margin: 16px -4px;
+    margin-left: 25%;
+    margin-right: 25%; 
+}
+
+.pageContentSearch {
+    width: 50%;
+    height: auto;
+    top: 30%;
+    padding: 10px;
+
+    background-color: var(--background-2);
+
+    margin: 16px -4px;
+    margin-left: 25%;
+    margin-right: 25%; 
+
+    margin-bottom: 0px; 
+    border-bottom: 8px 
+    solid var(--background-3);
 }
 
 .hoverBOX {
@@ -44,8 +61,4 @@
 
 .hoverBOX:hover {
     opacity: 100%;
-}
-
-.hoverBOX-Scratch {
-    background-color: #ffa04c;
 }