PretendoNetwork · ashquarky · Apr 17, 2024
diff --git a/locales/en_GB.json b/locales/en_GB.json
@@ -139,6 +139,10 @@
 		"title": "Our progress",
 		"description": "Check the project's progress and goals! (Updated every hour or so, does not reflect ALL project goals or progress)"
 	},
+	"gamesPage": {
+		"title": "Game support",
+		"description": "Check which games are supported and online."
+	},
 	"blogPage": {
 		"title": "Blog",
 		"description": "The latest updates in condensed chunks. If you want to see more frequent updates, consider <a href=\"/account/upgrade\" target=\"_blank\">supporting us</a>.",

diff --git a/locales/en_US.json b/locales/en_US.json
@@ -252,6 +252,10 @@
 		"title": "Our progress",
 		"description": "Check the project progress and goals! (Updated every hour or so, does not reflect ALL project goals or progress)"
 	},
+	"gamesPage": {
+		"title": "Game support",
+		"description": "Check which games are supported and online."
+	},
 	"blogPage": {
 		"title": "Blog",
 		"description": "The latest updates in condensed chunks. If you want to see more frequent updates, consider <a href=\"/account/upgrade\" target=\"_blank\">supporting us</a>.",

diff --git a/src/routes/games.js b/src/routes/games.js
@@ -0,0 +1,21 @@
+const { Router } = require('express');
+const router = new Router();
+
+router.get('/', async (request, response) => {
+	const renderData = {
+		announcement: "<b>April 17</b>: Due to extremely high load, most servers are unstable. You may not be able to connect, even to services shown as Online. Please be patient while we make upgrades!",
+		games: {
+			"Friends": "online",
+			"Juxtaposition (Miiverse)": "tester",
+			"Mario Kart 8": "online",
+			"Splatoon": "online",
+			"Minecraft: Wii U Edition": "tester",
+			"Animal Crossing: New Leaf": "offline",
+			"Super Smash Bros: Wii U": "offline",
+		}
+	}
+
+	response.render('games', renderData);
+});
+
+module.exports = router;
diff --git a/src/server.js b/src/server.js
@@ -98,7 +98,8 @@ const routes = {
 	account: require('./routes/account'),
 	blog: require('./routes/blog'),
 	localization: require('./routes/localization'),
-	aprilfools: require('./routes/aprilfools')
+	aprilfools: require('./routes/aprilfools'),
+	games: require('./routes/games')
 };
 
 app.use('/', routes.home);
@@ -109,6 +110,7 @@ app.use('/account', routes.account);
 app.use('/localization', routes.localization);
 app.use('/blog', routes.blog);
 app.use('/nso-legacy-pack', routes.aprilfools);
+app.use('/games', routes.games)
 
 logger.info('Creating 404 status handler');
 // This works because it is the last router created

diff --git a/views/games.handlebars b/views/games.handlebars
@@ -0,0 +1,99 @@
+{{#section 'head'}}
+<link rel="stylesheet" href="/assets/css/progress.css">
+{{/section}}
+
+{{> header}}
+
+<div class="wrapper">
+
+	<div class="progress-hero">
+		<div class="hero-meta reduced-margin">
+			<svg xmlns="http://www.w3.org/2000/svg" width="48.87" height="71.093" viewBox="0 0 48.87 71.093">
+				<g id="XMLID_6_" transform="translate(0)">
+					<path id="XMLID_15_"
+						d="M69.581,29.593c-2.029,1.068-.249,4.129,1.78,3.061,5.162-2.67,11.463-2.6,16.981-1.1,4.735,1.282,9.5,3.845,12.246,8.045,1.246,1.922,4.307.142,3.061-1.78C96.921,27.386,80.3,24.04,69.581,29.593Z"
+						transform="translate(-60.112 -20.086)" fill="#9d6ff3" />
+					<path id="XMLID_14_"
+						d="M103.359,21.045c-3.951-6.159-10.751-10-17.657-11.89C77.763,6.948,68.721,7.019,61.281,10.9c-2.029,1.068-.249,4.129,1.78,3.061,6.586-3.453,14.667-3.311,21.644-1.388,5.981,1.638,12.1,4.913,15.521,10.252C101.507,24.783,104.569,23,103.359,21.045Z"
+						transform="translate(-54.766 -7.693)" fill="#9d6ff3" />
+					<path id="XMLID_9_"
+						d="M65.995,47.8a20.7,20.7,0,0,0-12.958,4.45H47.27a2.579,2.579,0,0,0-2.67,2.456v47.239a2.763,2.763,0,0,0,2.67,2.67h5.838a2.639,2.639,0,0,0,2.528-2.67V87.564A21.228,21.228,0,1,0,65.995,47.8Zm0,33.178a12,12,0,1,1,12-12A12,12,0,0,1,65.995,80.978Z"
+						transform="translate(-44.6 -33.522)" fill="#9d6ff3" />
+				</g>
+			</svg>
+			<h1 class="title dot">{{ locale.gamesPage.title }}</h1>
+			<p class="text">{{ locale.gamesPage.description }}</p>
+		</div>
+	</div>
+
+	{{#if announcement}}
+	<div class="purple-card">
+		{{{announcement}}}
+	</div>
+	{{/if}}
+
+	<br/>
+
+	<div class="feature-list">
+		<div class="feature">
+			<div class="custom-checkbox done">
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+					stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+					class="feather feather-check">
+					<polyline points="20 6 9 17 4 12"></polyline>
+				</svg>
+			</div>
+			<span>Online</span>
+		</div>
+
+		<div class="feature">
+			<div class="custom-checkbox ongoing">
+				<div class="small-dot"></div>
+			</div>
+			<span>Testers only</span>
+		</div>
+
+		<div class="feature">
+			<div class="custom-checkbox incomplete"></div>
+			<span>Unavailable</span>
+		</div>
+	</div>
+
+	<br/>
+
+	<div class="purple-card">
+		<div class="feature-list-wrapper {{#if purple}}purple{{/if}}">
+			<div class="core">
+				<div class="feature-list">
+					{{#each games}}
+					<div class="feature">
+						{{#if (eq this "online")}}
+						<div class="custom-checkbox done">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+								stroke-linejoin="round" class="feather feather-check">
+								<polyline points="20 6 9 17 4 12"></polyline>
+							</svg>
+						</div>
+						{{/if}}
+						{{#if (eq this "tester")}}
+						<div class="custom-checkbox ongoing">
+							<div class="small-dot"></div>
+						</div>
+						{{/if}}
+						{{#if (eq this "offline")}}
+						<div class="custom-checkbox incomplete"></div>
+						{{/if}}
+						<span>{{ @key }}</span>
+					</div>
+					{{/each}}
+				</div>
+			</div>
+		</div>
+	</div>
+
+</div>
+
+{{#section 'foot'}}
+
+{{/section}}