add: Custom MOTDs

This works almost exactly like FF's custom MOTDs with the only difference being that they get defined in the config file for performance reasons.

Closes #86

packages/backend/src/server/web/ClientServerService.ts

@@ -178,6 +178,7 @@ export class ClientServerService {
 			infoImageUrl: meta.infoImageUrl ?? 'https://launcher.moe/nothinghere.png',
 			notFoundImageUrl: meta.notFoundImageUrl ?? 'https://launcher.moe/missingpage.webp',
 			instanceUrl: this.config.url,
+			randomMOTD: this.config.customMOTD ? this.config.customMOTD[Math.floor(Math.random() * this.config.customMOTD.length)] : undefined,
 		};
 	}
 

packages/backend/src/server/web/style.css

@@ -44,7 +44,7 @@ html {
 	display: inline-block;
 	width: 28px;
 	height: 28px;
-	transform: translateY(70px);
+	transform: translateY(80px);
 	color: var(--accent);
 }
 #splashSpinner > .spinner {
@@ -74,3 +74,17 @@ html {
 		transform: rotate(360deg);
 	}
 }
+
+#splashText {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	display: inline-block;
+	width: 70%;
+	height: 0;
+	text-align: center;
+	transform: translateY(40px);
+}

packages/backend/src/server/web/views/base.pug

@@ -85,6 +85,9 @@ html
 			| Please turn on your JavaScript
 		div#splash
 			img#splashIcon(src= icon || '/static-assets/splash.png')
+			span#splashText
+				block randomMOTD
+					= randomMOTD
 			div#splashSpinner
 				<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
 					<g transform="matrix(1,0,0,1,12,12)">