Main menu

client/gui/pause_screen.ts

@@ -0,0 +1,46 @@
+import type { Client } from "$/client/client.ts";
+import { canvas, draw_rect, draw_text, measure_text } from "$/client/renderer/mod.ts";
+import { GuiScreen } from "./gui_screen.ts";
+import { Button, TEXT_HEIGHT } from "./widgets.ts";
+
+const BUTTON_WIDTH = 440;
+const BUTTON_HEIGHT = 48;
+const GAP = 16;
+
+// escape while playing, like minecraft's PauseScreen. the server keeps going, it's only a menu
+export class PauseScreen extends GuiScreen {
+	buttons: Button[];
+
+	constructor(client: Client) {
+		super();
+		this.buttons = [
+			new Button("Back to game", BUTTON_WIDTH, BUTTON_HEIGHT, () => client.pop_screen()),
+			new Button("Disconnect", BUTTON_WIDTH, BUTTON_HEIGHT, () => client.disconnect()),
+		];
+	}
+
+	on_tick(_delta: number): void {
+		let y = canvas.height / 2 - BUTTON_HEIGHT;
+		for (const button of this.buttons) {
+			button.x = (canvas.width - BUTTON_WIDTH) / 2;
+			button.y = y;
+			y += BUTTON_HEIGHT + GAP;
+		}
+		for (const button of this.buttons) {
+			if (button.handle_input()) {
+				break;
+			}
+		}
+	}
+
+	on_render(): void {
+		draw_rect(0, 0, canvas.width, canvas.height, [0, 0, 0, 0.5]);
+		const title = "Game menu";
+		draw_text(title, (canvas.width - measure_text(title, 4)) / 2, this.buttons[0].y - 40 - TEXT_HEIGHT * 4, 4);
+		for (const button of this.buttons) {
+			button.render();
+		}
+	}
+
+	on_close(): void {}
+}