Merge pull request #5 from PawiX25/main

Rename 'Upcoming' to 'Draft', Add Participant Counts, and Refactor Status Handling

data.yml

@@ -6,12 +6,14 @@ indefinite:
   slack: https://hackclub.slack.com/archives/C02UN35M7LG
   slackChannel: "#sprig"
   status: active
+  participants: 657
 - name: OnBoard
   description: Design a PCB and we'll fabricate it for you.
   website: https://hackclub.com/onboard
   slack: https://hackclub.slack.com/archives/C056AMWSFKJ
   slackChannel: "#electronics"
   status: active
+  participants: 604
 - name: OnBoard Live
   description: Design a PCB live on YouTube for $5/hour PCB credit.
   website: 
@@ -24,26 +26,30 @@ indefinite:
   slack: https://hackclub.slack.com/archives/C06UJR8QW0M
   slackChannel: "#boba"
   status: active
+  participants: 1253
 - name: Hackaccino
   description: Build a 3D website and get a free frappuccino.
   website: https://fraps.hackclub.com/
   slack: https://hackclub.slack.com/archives/C078DFVL5LZ
   slackChannel: "#fraps"
   status: active
+  participants: 362
 - name: Cider
   description: Create an iOS app and receive a $100 Apple Developer account to publish
     it.
   website: https://cider.hackclub.com/
   slack: https://hackclub.slack.com/archives/C073DTGENJ2
   slackChannel: "#cider"
   status: active
+  participants: 34
 - name: Anchor
   description: Design a VTuber-style logo for your High Seas project and receive custom
     stickers.
   website: https://anchor.hackclub.com/
   slack: https://hackclub.slack.com/archives/C07V5401VMY
   slackChannel: "#anchor"
   status: active
+  participants: 26
 limitedTime:
 - name: Dessert
   description: Make an Android app and earn a paid Google Developer account.
@@ -58,6 +64,7 @@ limitedTime:
   slackChannel: "#high-seas"
   status: active
   deadline: '2025-01-31T23:59:59'
+  participants: 1119
 - name: Asylum
   description: Fast-paced hardware YSWS challenges.
   website: 
@@ -73,6 +80,7 @@ limitedTime:
   slackChannel: "#browser-buddy"
   status: active
   deadline: '2024-12-31T23:59:59'
+  participants: 22
 - name: HackCraft
   description: Create a Minecraft mod, and Hack Club sends you Minecraft Java!
   website: https://hackcraft.hackclub.com/
@@ -93,20 +101,23 @@ limitedTime:
   details:
   - Participants will receive a Minecraft Java Edition account upon successful submission.
   - Support is available through our Slack community.
+  participants: 4
 - name: Cascade
   description: Create animations with CSS and receive art supplies.
   website: https://cascade.hackclub.com/
   slack: https://hackclub.slack.com/archives/C07QA8HD48N
   slackChannel: "#cascade-ysws"
   status: active
   deadline: '2024-12-14T23:59:59'
+  participants: 55
 - name: Riceathon
   description: Customize your Linux install, and get programmer socks or a Blåhaj.
   website: https://github.com/HackClub/riceathon
   slack: https://hackclub.slack.com/archives/C07MLF9A8H5
   slackChannel: "#riceathon"
   status: active
   deadline: '2025-01-10T23:59:59'
+  participants: 1
 - name: Hacky Holidays
   description: Design a PCB holiday decoration this winter, get one shipped.
   website: https://hacky-holidays.hackclub.com/
@@ -201,6 +212,7 @@ completed:
   slackChannel: "#blot"
   status: completed
   ended: Ended November 21st
+  participants: 192
 - name: Boba Manor
   description: Website building with rewards.
   website: https://manor.hackclub.com/
@@ -215,6 +227,7 @@ completed:
   slackChannel: "#hackpad"
   status: completed
   ended: Ended October 21st
+  participants: 16
 - name: Retrospect
   description: Create a DOS game and have it delivered on a floppy disk.
   website: https://retrospect.hackclub.com/
@@ -229,26 +242,30 @@ completed:
   slackChannel: "#llm / #zrl-land"
   status: completed
   ended: Ended October 1st
+  participants: 20
 - name: Arcade
   description: The summer is yours for the making
   website: https://hackclub.com/arcade
   slack: https://hackclub.slack.com/archives/C06SBHMQU8G
   slackChannel: "#hack-hour"
   status: completed
   ended: Ended September 31st
+  participants: 1229
 - name: The Bin
   description: Hardware-related projects.
   website: https://bin.hackclub.com/
   slack: https://hackclub.slack.com/archives/C01FXNNF6F2
   slackChannel: "#electronics"
   status: completed
   ended: Ended September 31st
+  participants: 277
 - name: HAM Radio YSWS
   description: Related to HAM radio projects.
   website: 
   slack: https://hackclub.slack.com/archives/C01G6UJT2RM
   slackChannel: "#hamradio"
   status: completed
+  participants: 14
 - name: Trick or Trace
   description: Design a PCB this October, vote on the best designs, get a second grant.
   website: https://trickortrace.hackclub.com/

index.html

@@ -26,7 +26,7 @@ <h1 class="ultratitle">YSWS Programs</h1>
             <button class="filter-btn active" data-category="all">All</button>
             <button class="filter-btn" data-category="active">Active</button>
             <button class="filter-btn" data-category="ending-soon">Ending Soon</button>
-            <button class="filter-btn" data-category="upcoming">Drafts</button>
+            <button class="filter-btn" data-category="draft">Draft</button>
             <button class="filter-btn" data-category="completed">Completed</button>
         </div>
 

script.js

@@ -1,9 +1,39 @@
 let programs = {};
 
+function isEventEnded(deadline) {
+    if (!deadline) return false;
+    const now = new Date();
+    const deadlineDate = new Date(deadline);
+    return now > deadlineDate;
+}
+
 async function loadPrograms() {
     try {
         const response = await fetch('data.yml').then(res => res.text());
-        programs = jsyaml.load(response);
+        const rawPrograms = jsyaml.load(response);
+
+        const completed = [];
+        programs = Object.fromEntries(
+            Object.entries(rawPrograms).map(([category, programsList]) => [
+                category,
+                programsList.filter(program => {
+                    if (program.status === 'completed' || isEventEnded(program.deadline)) {
+                        completed.push({ ...program, status: 'completed' });
+                        return false;
+                    }
+                    return true;
+                })
+            ])
+        );
+
+        delete programs['Completed'];
+        if (completed.length > 0) {
+            programs['Completed'] = completed;
+        }
+
+        programs = Object.fromEntries(
+            Object.entries(programs).filter(([_, programsList]) => programsList.length > 0)
+        );
 
         renderPrograms();
     } catch (error) {
@@ -61,6 +91,11 @@ function getDeadlineClass(deadlineStr) {
     return '';
 }
 
+function formatParticipants(count) {
+    if (count === undefined) return '';
+    return `${count.toLocaleString()} participant${count === 1 ? '' : 's'}`;
+}
+
 function createProgramCard(program) {
     const deadlineText = formatDeadline(program.deadline, program.opens);
     const deadlineClass = getDeadlineClass(program.deadline);
@@ -69,6 +104,9 @@ function createProgramCard(program) {
 
     const encodedProgram = encodeURIComponent(JSON.stringify(program));
 
+    const participantsText = program.participants !== undefined ? 
+        `<div class="program-participants">${formatParticipants(program.participants)}</div>` : '';
+
     return `
         <div class="card program-card ${opensClass}" data-program="${encodedProgram}">
             <div class="program-header">
@@ -77,6 +115,7 @@ function createProgramCard(program) {
             </div>
             <p>${program.description}</p>
             <div class="program-deadline ${deadlineClass}">${deadlineText}</div>
+            ${participantsText}
             <div class="program-links">
                 ${program.website ? `<a href="${program.website}" target="_blank">Website</a>` : ''}
                 ${program.slack ? `<a href="${program.slack}" target="_blank">${program.slackChannel}</a>` : ''}
@@ -148,6 +187,13 @@ function openModal(program) {
     const moreDetailsElement = modal.querySelector('.more-details');
     let detailsHTML = '';
 
+    if (program.participants !== undefined) {
+        detailsHTML += `
+            <h3>Participation</h3>
+            <p>${formatParticipants(program.participants)}</p>
+        `;
+    }
+
     if (program.requirements?.length) {
         detailsHTML += `
             <h3>Requirements</h3>
@@ -211,7 +257,7 @@ function sortPrograms(programs, sortType) {
                 return new Date(a.deadline) - new Date(b.deadline);
             });
         case 'status':
-            const statusOrder = { active: 0, upcoming: 1, completed: 2 };
+            const statusOrder = { active: 0, draft: 1, completed: 2 };
             return flattened.sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
         default:
             return flattened;
@@ -350,21 +396,29 @@ function initializeTheme() {
 
 function updateDeadlines() {
     const deadlineElements = document.querySelectorAll('.program-deadline');
+    let needsReload = false;
+
     deadlineElements.forEach(element => {
         const card = element.closest('.program-card');
-        const programName = card.querySelector('h3').textContent;
-        const program = Object.values(programs)
-            .flat()
-            .find(p => p.name === programName);
+        const programData = JSON.parse(decodeURIComponent(card.dataset.program));
+
+        if (programData?.deadline) {
+            if (isEventEnded(programData.deadline) && programData.status !== 'completed') {
+                needsReload = true;
+                return;
+            }
 
-        if (program?.deadline) {
-            const deadlineText = formatDeadline(program.deadline, program.opens);
-            const deadlineClass = getDeadlineClass(program.deadline);
+            const deadlineText = formatDeadline(programData.deadline, programData.opens);
+            const deadlineClass = getDeadlineClass(programData.deadline);
 
             element.textContent = deadlineText;
             element.className = `program-deadline ${deadlineClass}`;
         }
     });
+
+    if (needsReload) {
+        window.location.reload();
+    }
 }
 
 document.addEventListener('DOMContentLoaded', () => {

styles.css

@@ -646,6 +646,31 @@ td {
   color: var(--white);
 }
 
+.status-draft {
+    background-color: var(--yellow);
+    color: var(--black);
+    border: 1px dashed var(--text);
+    font-weight: var(--font-weight-bold);
+    background-size: 28.28px 28.28px;
+    animation: dash-animation 1s linear infinite;
+    background-image: repeating-linear-gradient(
+        45deg,
+        var(--yellow) 0,
+        var(--yellow) 10px,
+        var(--orange) 10px,
+        var(--orange) 20px
+    );
+}
+
+@keyframes dash-animation {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 28.28px 0;
+    }
+}
+
 .program-links {
   margin-top: var(--spacing-2);
   display: flex;
@@ -1056,4 +1081,11 @@ body.modal-open {
         justify-content: center;
         margin: var(--spacing-2) 0;
     }
+}
+
+.program-participants {
+    font-size: var(--font-1);
+    color: var(--muted);
+    margin-top: var(--spacing-2);
+    font-weight: var(--font-weight-bold);
 }