Main menu

client/gui/title_screen.ts

@@ -0,0 +1,181 @@
+import { MAX_NAME_LENGTH } from "$/common/protocol.ts";
+import { InputManager } from "$/client/input_manager.ts";
+import { canvas, draw_rect, draw_text, measure_text } from "$/client/renderer/mod.ts";
+import { default_server, HandshakeError, server_address, ServerAddress } from "$/client/handshake.ts";
+import { default_player_name } from "$/client/network.ts";
+import { GuiScreen } from "./gui_screen.ts";
+import { Button, EditBox, TEXT_HEIGHT, TEXT_SCALE, TextInput } from "./widgets.ts";
+
+const LAST_SERVER_KEY = "bworld:last_server";
+const LAST_NAME_KEY = "bworld:last_name";
+
+const WIDTH = 440;
+const ROW_HEIGHT = 48;
+const LABEL_GAP = 28;
+const GAP = 20;
+const TITLE_SCALE = 8;
+
+// connects to a server and joins it. it reports progress through status, and throws with a message
+// for the player when it fails
+export type JoinServer = (address: ServerAddress, name: string, status: (text: string) => void) => Promise<void>;
+
+// the first thing players see, like minecraft's title and multiplayer screens rolled into one:
+// a name, a server, and a button to join it
+export class TitleScreen extends GuiScreen {
+	#join_server: JoinServer;
+
+	name = new EditBox(
+		WIDTH,
+		ROW_HEIGHT,
+		new TextInput(initial_name(), MAX_NAME_LENGTH, (char) => /^[A-Za-z0-9_]$/.test(char)),
+		"Random name",
+	);
+	server = new EditBox(WIDTH, ROW_HEIGHT, new TextInput(initial_server(), 256, (char) => char !== " "), "host:port");
+	join_button = new Button("Join server", WIDTH, ROW_HEIGHT, () => this.#join());
+
+	status = "";
+	status_is_error = false;
+	#joining = false;
+
+	constructor(join_server: JoinServer, message?: string) {
+		super();
+		this.#join_server = join_server;
+		this.name.focused = this.name.value === "";
+		this.server.focused = !this.name.focused;
+		if (message) {
+			this.#show_error(message);
+		}
+	}
+
+	on_tick(_delta: number): void {
+		this.#layout();
+
+		const fields = [this.name, this.server];
+		for (const field of fields) {
+			if (field.handle_input()) {
+				for (const other of fields) other.focused = other === field;
+			}
+		}
+		if (InputManager.is_key_pressed("Tab")) {
+			const next = this.name.focused ? this.server : this.name;
+			for (const field of fields) field.focused = field === next;
+		}
+		if (InputManager.is_key_pressed("Enter")) {
+			this.#join();
+		}
+		this.join_button.handle_input();
+	}
+
+	on_render(): void {
+		const title = "bworld";
+		const title_width = measure_text(title, TITLE_SCALE);
+		draw_text(
+			title,
+			(canvas.width - title_width) / 2,
+			this.name.y - LABEL_GAP - 40 - TEXT_HEIGHT * TITLE_SCALE,
+			TITLE_SCALE,
+		);
+
+		this.#label("Name", this.name);
+		this.#label("Server", this.server);
+		this.name.render();
+		this.server.render();
+		this.join_button.render();
+
+		if (this.status) {
+			const width = measure_text(this.status, TEXT_SCALE);
+			const x = (canvas.width - width) / 2;
+			const y = this.join_button.y + ROW_HEIGHT + GAP;
+			draw_rect(x - 8, y - 4, width + 16, TEXT_HEIGHT * TEXT_SCALE + 8, [0, 0, 0, 0.5]);
+			draw_text(this.status, x, y, TEXT_SCALE, this.status_is_error ? [1, 0.45, 0.45, 1] : [1, 1, 1, 1]);
+		}
+	}
+
+	on_close(): void {}
+
+	#layout() {
+		const x = (canvas.width - WIDTH) / 2;
+		const total = 2 * (LABEL_GAP + ROW_HEIGHT + GAP) + ROW_HEIGHT;
+		let y = (canvas.height - total) / 2 + 40;
+		for (const field of [this.name, this.server]) {
+			field.x = x;
+			field.y = y + LABEL_GAP;
+			y += LABEL_GAP + ROW_HEIGHT + GAP;
+		}
+		this.join_button.x = x;
+		this.join_button.y = y;
+	}
+
+	#label(text: string, field: EditBox) {
+		draw_text(text, field.x, field.y - LABEL_GAP, TEXT_SCALE, [0.15, 0.15, 0.2, 1]);
+	}
+
+	async #join() {
+		if (this.#joining) {
+			return;
+		}
+
+		let address: ServerAddress;
+		try {
+			address = server_address(this.server.value);
+		} catch (e) {
+			this.#show_error((e as HandshakeError).message);
+			return;
+		}
+		remember(LAST_SERVER_KEY, this.server.value.trim());
+		remember(LAST_NAME_KEY, this.name.value);
+
+		this.#set_joining(true);
+		this.status = `Connecting to ${address.base.host}...`;
+		this.status_is_error = false;
+		try {
+			await this.#join_server(address, this.name.value, (text) => this.status = text);
+		} catch (e) {
+			this.#show_error(e instanceof Error ? e.message : String(e));
+			this.#set_joining(false);
+		}
+	}
+
+	#set_joining(joining: boolean) {
+		this.#joining = joining;
+		this.name.active = this.server.active = this.join_button.active = !joining;
+	}
+
+	#show_error(message: string) {
+		this.status = message;
+		this.status_is_error = true;
+	}
+}
+
+// what was typed last time, unless the page was opened with ?server= or ?name=
+function initial_server() {
+	const page = new URL(location.href);
+	return page.searchParams.has("server") ? default_server(page) : recall(LAST_SERVER_KEY) ?? default_server(page);
+}
+
+function initial_name() {
+	const page = new URL(location.href);
+	return page.searchParams.has("name") ? default_player_name() : recall(LAST_NAME_KEY) ?? "";
+}
+
+function recall(key: string): string | undefined {
+	try {
+		return localStorage.getItem(key) ?? undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+function remember(key: string, value: string) {
+	try {
+		localStorage.setItem(key, value);
+	} catch {
+		// private windows and blocked storage just start empty next time
+	}
+}
+
+// a server's mods can't be unloaded, so going back to the title screen starts the page over. without ?server=
+// or ?name=, so the fields show what was used last
+export function back_to_title() {
+	location.href = location.pathname;
+}