Added Filter Progress

locales/en_US.json

@@ -391,5 +391,13 @@
 		"cancel": "Cancel",
 		"confirm": "Confirm",
 		"close": "Close"
+	},
+	"filter": {
+		"none": "All",
+		"wiiu": "Wii U",
+		"3ds": "3DS",
+		"web": "Web",
+		"game": "Game",
+		"service": "Service"
 	}
 }

public/assets/css/main.css

@@ -766,6 +766,7 @@ section.update-signup div.circle {
 }
 
 .feature-progress-chart {
+	width: 100px;
 	position: relative;
 }
 .feature-progress-chart p {

public/assets/css/progress.css

@@ -10,4 +10,67 @@ MOVE PROGRESS CSS HERE
 #quick-nav a:hover {
 	color: var(--text-shade-3);
 	text-decoration: underline;
+}
+
+.progress-filter {
+	padding: 8px;
+    border-radius: 10px;
+    background: var(--bg-shade-0);
+    grid-column: span 2;
+}
+
+.progress-filter .container {
+	display: flex;
+	justify-content: flex-start;
+}
+
+.progress-filter .container .sub-container {
+	display: flex;
+	margin-inline: 5px;
+	position: relative;
+}
+
+.progress-filter .container .sub-container:not(:last-child):after {
+	content: '';
+	position: absolute;
+	top: 10%;
+	bottom: 10%;
+	right: -10px;
+	width: 3px;
+	background-color: var(--bg-shade-3);
+}
+
+
+
+.progress-filter .container .sub-container button {
+	padding: 0px 8px;
+	margin-inline-start: 5px;
+}
+
+.off {
+	display: none;
+}
+
+@media screen and (max-width: 900px) {
+
+	.progress-filter {
+		grid-column: span 1;
+		padding: 10px;
+	}
+}
+@media screen and (max-width: 576px) {
+
+	.progress-filter .container {
+		justify-content: center;
+	}
+
+	.progress-filter .container .sub-container {
+		margin: 0px;
+	}
+
+	.progress-filter .container .sub-container:not(:last-child):after {
+		content: '';
+		display: none;
+	}
+
 }

public/assets/js/filter-progress.js

@@ -0,0 +1,24 @@
+const progressCards = document.getElementsByClassName('purple-card');
+
+function showWithFilter(filter){
+    for (const card of progressCards){
+        const types = card.getAttribute('type');
+        if (filter === "none" || types.toLowerCase().includes(filter)){
+            card.classList.remove('off');
+        }
+        else {
+            card.classList.add('off');
+        }
+    }
+}
+
+const buttons = document.getElementById('filter-container').querySelectorAll('button');
+let selectedButton = buttons[0];
+for (const button of buttons){
+    button.addEventListener('click',(event) => {
+        selectedButton.classList.remove('primary');
+        selectedButton = event.target;
+        selectedButton.classList.add('primary');
+        showWithFilter(event.target.id);
+    })
+}

src/cache.js

@@ -69,6 +69,20 @@ query getProjectsV2Fields($id: ID!, $cursor: String!) {
 	}
 }
 `;
+const getRepositoryDescription = gql`
+query getRepositoryDescription($orgName: String!, $repoName: String!){
+    repository(owner: $orgName, name: $repoName) {
+		description
+		readme: object(expression: "HEAD:README.md") {
+            ... on Blob {
+                text
+            }
+        } 
+    }
+}
+`;
+
+const serviceApps = ["account", "nex", "friends", "wii u chat", "juxt", "website"];
 
 let githubProjectsCache = {
 	update_time: 0,
@@ -133,6 +147,52 @@ async function getGitHubProjectsV2Fields(id, after='') {
 	return fields;
 }
 
+async function getRepoType(name, title) {
+	const data = await github.request(getRepositoryDescription, {
+		orgName: 'PretendoNetwork',
+		repoName: name
+	});
+	const readme = data.repository.readme.text.split('\n')[0].toLowerCase();
+	const description = data.repository.description?.toLowerCase() || '';
+	return setRepoType(title.toLowerCase(), description, readme);
+}
+function setRepoType(title, description, readMe) {
+	const types = [];
+	let isGame = true;
+	for (const app of serviceApps) {
+		if (title.includes(app)) {
+			types.push('Service');
+			isGame = false;
+			break;
+		}
+	}
+	if (isGame) {
+		types.push('Game');
+	}
+	if (title.includes('(') && isGame) {
+		if (title.includes('3ds')) {
+			types.push('3DS');
+		} else {
+			types.push('Wii U');
+		}
+		return types;
+	}
+	if (title === 'nex' || title.includes('juxt') || title.includes('account')) {
+		types.push('3DS');
+		types.push('Wii U');
+		if (title.includes('juxt')) {
+			types.push('Website');
+		}
+	} else if (title.includes('web')) {
+		types.push('Website');
+	} else if (description.includes('3ds') || readMe.includes('3ds') || title.includes('3ds')) {
+		types.push('3DS');
+	} else {
+		types.push('Wii U');
+	}
+	return types;
+}
+
 async function getGithubProjectsCache() {
 	if (githubCacheBeingFetched) {
 		return githubProjectsCache;
@@ -172,7 +232,8 @@ async function updateGithubProjectsCache() {
 				done: [],
 				in_progress: [],
 				todo: []
-			}
+			},
+			types: []
 		};
 
 		const fields = await getGitHubProjectsV2Fields(project.id);
@@ -181,6 +242,8 @@ async function updateGithubProjectsCache() {
 			extractedData.cards[field.column.toLowerCase().replace(' ', '_')]?.push(field.title);
 		}
 
+		extractedData.types  = await getRepoType(project.url.split("/")[4], project.title)
+
 		projectsCacheData.sections.push(extractedData);
 	}
 

views/progress.handlebars

@@ -24,24 +24,30 @@
 			<p class="localeReplace">{{{ locale.donation.progress }}} {{{ locale.donation.upgradePush }}}</p>
 		</div>
 
-		<div id="quick-nav">
-			<h1 class="title dot">Quick Nav</h1>
-			<ul>
-				{{#each progressLists.sections}}
-				<li>
-					<a href="#{{slug this.title}}">{{this.title}}</a>
-				</li>
-				{{/each}}
-			</ul>
+		<div class="progress-filter">
+			<div class="container" id="filter-container">
+				<div class="sub-container" id="no-filter">
+					<button class="filter primary breaker" id="none"> {{locale.filter.none}} </button>
+				</div>
+				<div class="sub-container" id="device">
+					<button class="filter" id="wii u"> {{locale.filter.wiiu}} </button>
+					<button class="filter" id="3ds"> {{locale.filter.3ds}} </button>
+					<button class="filter" id="web"> {{locale.filter.web}} </button>
+				</div>
+				<div class="sub-container" id="type">
+					<button class="filter" id="game"> {{locale.filter.game}} </button>
+					<button class="filter" id="service"> {{locale.filter.service}} </button>
+				</div>
+			</div>
 		</div>
-		<br>
+
 		{{#each progressLists.sections}}
-		<div class="purple-card" id="{{slug this.title}}">
+		<div class="purple-card" id="{{slug this.title}}" type="{{this.types}}">
 			{{> progress-list data=this }}
 		</div>
 		{{/each}}
 	</div>
-
+	<script src="/assets/js/filter-progress.js"></script>
 	{{> footer }}
 
 </div>