Credits page

client/gui/title_screen.ts

@@ -4,6 +4,7 @@ import { canvas, draw_rect, draw_text, measure_text } from "$/client/renderer/mo
 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 { CreditsScreen } from "./credits_screen.ts";
 import { Button, EditBox, TEXT_HEIGHT, TEXT_SCALE, TextInput } from "./widgets.ts";
 
 const LAST_SERVER_KEY = "bworld:last_server";
@@ -32,6 +33,9 @@ export class TitleScreen extends GuiScreen {
 	);
 	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());
+	credits_button = new Button("Credits", WIDTH, ROW_HEIGHT, () => this.#open_credits());
+	// open over the title screen, it gets the input while it's there
+	#credits: CreditsScreen | undefined;
 
 	status = "";
 	status_is_error = false;
@@ -47,8 +51,16 @@ export class TitleScreen extends GuiScreen {
 		}
 	}
 
-	on_tick(_delta: number): void {
+	on_tick(delta: number): void {
 		this.#layout();
+		if (this.#credits) {
+			if (InputManager.is_key_pressed("Escape")) {
+				this.#close_credits();
+			} else {
+				this.#credits.on_tick(delta);
+			}
+			return;
+		}
 
 		const fields = [this.name, this.server];
 		for (const field of fields) {
@@ -64,6 +76,7 @@ export class TitleScreen extends GuiScreen {
 			this.#join();
 		}
 		this.join_button.handle_input();
+		this.credits_button.handle_input();
 	}
 
 	on_render(): void {
@@ -81,21 +94,34 @@ export class TitleScreen extends GuiScreen {
 		this.name.render();
 		this.server.render();
 		this.join_button.render();
+		this.credits_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;
+			const y = this.credits_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]);
 		}
+		this.#credits?.on_render();
 	}
 
-	on_close(): void {}
+	on_close(): void {
+		this.#close_credits();
+	}
+
+	#open_credits() {
+		this.#credits ??= new CreditsScreen(() => this.#close_credits());
+	}
+
+	#close_credits() {
+		this.#credits?.on_close();
+		this.#credits = undefined;
+	}
 
 	#layout() {
 		const x = (canvas.width - WIDTH) / 2;
-		const total = 2 * (LABEL_GAP + ROW_HEIGHT + GAP) + ROW_HEIGHT;
+		const total = 2 * (LABEL_GAP + ROW_HEIGHT + GAP) + 2 * ROW_HEIGHT + GAP;
 		let y = (canvas.height - total) / 2 + 40;
 		for (const field of [this.name, this.server]) {
 			field.x = x;
@@ -104,6 +130,8 @@ export class TitleScreen extends GuiScreen {
 		}
 		this.join_button.x = x;
 		this.join_button.y = y;
+		this.credits_button.x = x;
+		this.credits_button.y = y + ROW_HEIGHT + GAP;
 	}
 
 	#label(text: string, field: EditBox) {