Website modernization

The website hasn't received anything in the last *year*. I've heard from many people that they thought the game was dead because the last PR was a year ago. Not anymore!

Lilten's weekly vlogs are now displayed on the front page, as well as on a new "updates" tab. This uses Hugo's taxonomy system.

There is now a LIVE list of online servers, fetched dynamically using JS. This made me pull in petite-vue and figure out how the hell to set that up. Anyways, the site is being exported to JS modules from typescript now. No complex JS build systems here.

I backfilled 3 of lilten's videos just so the front page doesn't seem too empty. More in the future!

.github/workflows/pages.yml

@@ -23,6 +23,9 @@ jobs:
       - name: Npm install
         run: npm install
 
+      - name: Npm build
+        run: npm run build
+
       - name: Build
         run: hugo --minify
 

assets/scss/colors.scss

@@ -0,0 +1,5 @@
+body {
+	--color-section-bg: #212126;
+	--color-panel-bg: #16161a;
+	--color-server-entry-bg: #1f1f29;
+}

assets/scss/home.scss

@@ -45,6 +45,8 @@
 #gallery-desc {
 	padding-left: 5px;
 	padding-top: 5px;
+	display: flex;
+	flex-direction: column;
 }
 
 #gallery-img-wrap {
@@ -57,6 +59,13 @@
 	grid-template-rows: [a] 1fr;
 }
 
+.home-button-list {
+	display: flex;
+	align-items: center;
+	flex-grow: 1;
+	justify-content: space-between;
+}
+
 #center-logo-container {
 	position: relative;
 }
@@ -77,6 +86,7 @@
 #center-logo-logo {
 	padding: 10px;
 	align-self: center;
+	filter: drop-shadow(3px 3px 3px rgba(20, 0, 0, 0.5));
 }
 
 #center-logo-desc {

assets/scss/layout.scss

@@ -47,7 +47,7 @@ body {
 }
 
 .section-bg {
-	background-color: #212126;
+	background-color: var(--color-section-bg);
 }
 
 .section-bg h1 {

assets/scss/main.scss

@@ -1,5 +1,7 @@
 $fa-font-path: "/fonts/fontawesome";
 
+@import "colors.scss";
+
 // Bootstrap and FontAwesome are available here due to Hugo's VFS mounts in config.yml.
 
 @import "fontawesome/fontawesome.scss";
@@ -62,6 +64,7 @@ $fa-font-path: "/fonts/fontawesome";
 @import "layout.scss";
 @import "toc.scss";
 @import "media.scss";
+@import "serverBrowser.scss";
 
 @import "fonts/fira_code.scss";
 @import "fonts/montserrat.scss";

assets/scss/serverBrowser.scss

@@ -0,0 +1,76 @@
+.server-list-short {
+	--angle-rect-clip-size: 8px;
+	@include angle-rect(var(--angle-rect-clip-size));
+	background-color: var(--color-panel-bg);
+	margin-bottom: $spacer / 3;
+}
+
+.server-list-contents {
+	display: flex;
+	flex-direction: column;
+	padding: $spacer / 3;
+}
+
+.server-entry {
+	--angle-rect-clip-size: 8px;
+
+	background-color: var(--color-server-entry-bg);
+	padding: $spacer / 3;
+	margin-bottom: $spacer / 3;
+}
+
+.server-entry:first-child {
+	@include angle-rect-open-bl(var(--angle-rect-clip-size));
+}
+
+.server-entry:last-child {
+	@include angle-rect-open-tr(var(--angle-rect-clip-size));
+	margin-bottom: 0;
+}
+
+.server-entry-info-labels {
+	margin: $spacer / 4 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.server-entry-info-label {
+	margin-right: $spacer / 2;
+}
+
+.server-entry-info-label-value {
+	font-weight: 600;
+}
+
+.server-entry-title {
+	height: 30px;
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 4px;
+}
+
+.server-entry-icon {
+	margin-right: 5px;
+}
+
+.server-list-loading {
+	min-height: 400px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: 2rem;
+}
+
+.server-entry-name {
+	font-size: 1.5rem;
+}
+
+.server-entry-address {
+	color: #aaaaaa;
+}
+
+.home-servers-explainer {
+	font-size: 0.9rem;
+	font-style: italic;
+}

assets/ts/home.ts

@@ -0,0 +1,131 @@
+// @ts-ignore
+import { createApp, reactive } from "./vue/petite-vue.es.js"
+import { whenReady } from "./util.js";
+import { getServerList, ServerStatusData, ServerStatusEntry } from "./hub_api.js";
+
+// Code for the home page.
+
+let SELECTED_GALLERY_IMG: HTMLImageElement;
+let SELECTED_THUMB: HTMLImageElement;
+let GALLERY_IMGS: { [id: string] : HTMLImageElement } = {};
+let GALLERY_THUMBS: { [id: string] : HTMLImageElement } = {};
+
+function setupGallery() {
+	let imgs = document.querySelectorAll(".gallery-img");
+	for (var i = 0; i < imgs.length; i++) {
+		let img = <HTMLImageElement> imgs[i];
+		let imgId = img.dataset.galleryId;
+		// console.log(`img: ${i}: ${imgId}`);
+		GALLERY_IMGS[imgId] = img;
+
+		if (img.classList.contains("active"))
+		{
+			SELECTED_GALLERY_IMG = img;
+		}
+	}
+
+	let thumbs = document.querySelectorAll(".gallery-thumb");
+	for (var i = 0; i < thumbs.length; i++) {
+		let thumb = <HTMLImageElement> thumbs[i];
+		let imgId = thumb.dataset.galleryId;
+		// console.log(`thumb ${i}: ${imgId}`);
+		GALLERY_THUMBS[imgId] = thumb;
+
+		if (GALLERY_IMGS[imgId] == SELECTED_GALLERY_IMG)
+		{
+			thumb.classList.add("active");
+			SELECTED_THUMB = thumb;
+		}
+
+		thumb.addEventListener("click", event => {
+			switchToImage(imgId);
+		});
+	}
+}
+
+function switchToImage(imgId: string) {
+	let selected = SELECTED_GALLERY_IMG;
+	let selectedThumb = SELECTED_THUMB;
+	let newSelected = GALLERY_IMGS[imgId];
+	let newSelectedThumb = GALLERY_THUMBS[imgId];
+
+	selected.classList.remove("active");
+	newSelected.classList.add("active");
+
+	selectedThumb.classList.remove("active");
+	newSelectedThumb.classList.add("active");
+
+	SELECTED_GALLERY_IMG = newSelected;
+	SELECTED_THUMB = newSelectedThumb;
+}
+
+function serverEntry(entry: ServerStatusEntry) {
+	return {
+		$template: "#server-entry-template",
+		entry: entry,
+		get statusData(): ServerStatusData {
+			return entry.statusData;
+		},
+		get address(): string {
+			return entry.address;
+		},
+		get roundStartedAgo(): string | null {
+			if (entry.statusData.round_start_time == null) {
+				return null;
+			}
+
+			let roundStart = Date.parse(entry.statusData.round_start_time);
+			let now = Date.now();
+			let diffMinutes = (now - roundStart) / 60_000;
+			let diffFormatted = diffMinutes.toLocaleString("en-US", {maximumFractionDigits: 0});
+			return `${diffFormatted} minute${diffFormatted == "1" ? "" : "s"}`;
+		}
+	}
+}
+
+const HomePageServerListSize = 5;
+const HomePageLanguageTag = "lang:en"
+
+function isServerListValid(server: ServerStatusEntry): boolean {
+	let tags = server.inferredTags.concat(server.statusData.tags ?? [])
+
+	for (let tag of tags) {
+		if (tag.startsWith(HomePageLanguageTag))
+			return true;
+	}
+
+	return false;
+}
+
+function shortServerList() {
+	return {
+		servers: [],
+		loading: true,
+		async mounted() {
+			let servers = await getServerList();
+			// Filter English servers, because the site itself is English.
+			// Make this configurable in the future if we get a Russian translation.
+			servers = servers.filter(isServerListValid);
+			// Sort player count descending.
+			servers.sort((a, b) => b.statusData.players - a.statusData.players);
+			servers = servers.slice(0, HomePageServerListSize);
+
+			this.servers = servers;
+			this.loading = false;
+		}
+	}
+}
+
+function setupServerList() {
+	createApp({
+		serverEntry,
+		shortServerList
+	}).mount("#home-servers")
+}
+
+whenReady(() => {
+	setupGallery();
+	setupServerList();
+});
+
+export {}

assets/ts/hub_api.ts

@@ -0,0 +1,25 @@
+import { ensureOk } from "./util.js";
+const HubApiUrl = "https://central.spacestation14.io/hub/";
+// const HubApiUrl = "http://localhost:21953/";
+
+export type ServerStatusData = {
+	name: string,
+	players: number,
+	tags?: string[],
+	round_start_time?: string
+}
+
+export type ServerStatusEntry = {
+	address: string,
+	statusData: ServerStatusData,
+	inferredTags: string[]
+}
+
+export async function getServerList(): Promise<ServerStatusEntry[]> {
+	let response = await fetch(`${HubApiUrl}api/servers`);
+	ensureOk(response);
+
+	let data = await response.json();
+
+	return data;
+}