feat: basic main menu overlay

src/app/game/game.component.html

@@ -1,2 +1 @@
-<p>game works!</p>
-<div #rendererContainer class="game-container w-full h-screen absolute top-0 left-0"></div>
+<div #rendererContainer class="game-container w-full h-screen absolute top-0 left-0 z-10"></div>

src/app/game/game.component.ts

@@ -1,5 +1,4 @@
-// game.component.ts
-import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
 import { Game } from '../../client/core/Game.ts';
 
 @Component({
@@ -10,14 +9,17 @@ import { Game } from '../../client/core/Game.ts';
 export class GameComponent implements AfterViewInit {
 	@ViewChild('rendererContainer')
 	rendererContainer!: ElementRef;
+	@Output()
+	pointerLockChange = new EventEmitter<boolean>();
 	private game?: Game;
 
 	ngAfterViewInit() {
 		this.game = new Game(this.rendererContainer.nativeElement);
 		this.game.start();
-	}
 
-	ngOnDestroy() {
-		// Add cleanup if needed
+		// Listen to pointer lock changes
+		document.addEventListener('pointerlockchange', () => {
+			this.pointerLockChange.emit(document.pointerLockElement === document.body);
+		});
 	}
 }

src/app/pages/index.page.ts

@@ -1,13 +1,21 @@
 import { Component } from '@angular/core';
 import { GameComponent } from '../game/game.component.ts';
+import { MenuComponent } from '../ui/menu.component.ts';
 
 @Component({
 	selector: 'app-home',
 	standalone: true,
-	template: `<app-game></app-game>`,
+	template: `
+		<app-game (pointerLockChange)="onPointerLockChange($event)"></app-game>
+		<app-menu [visible]="showMenu" (close)="showMenu = false"></app-menu>
+	`,
 	styles: ``,
-	imports: [
-		GameComponent,
-	],
+	imports: [GameComponent, MenuComponent],
 })
-export default class HomeComponent {}
+export default class HomeComponent {
+	showMenu = false;
+
+	onPointerLockChange(isLocked: boolean) {
+		this.showMenu = !isLocked;
+	}
+}

src/app/ui/browse.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+	selector: 'app-browse',
+	standalone: true,
+	imports: [CommonModule],
+	template: `
+    <div>
+      <h2 class="text-xl text-gray-100 mb-4">Browse Servers</h2>
+      <div class="space-y-4">
+        <div class="server-item">
+          Server 1
+        </div>
+        <button class="btn-menu" (click)="back.emit()">Back</button>
+      </div>
+    </div>
+  `,
+	styles: [`
+    .server-item {
+      @apply p-2 bg-gray-700/50 rounded-md text-gray-200 mb-2;
+    }
+  `],
+})
+export class BrowseComponent {
+	@Output()
+	back = new EventEmitter<void>();
+}

src/app/ui/menu.component.ts

@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SettingsComponent } from './settings.component.ts';
+import { BrowseComponent } from './browse.component.ts';
+
+@Component({
+	selector: 'app-menu',
+	standalone: true,
+	imports: [CommonModule, SettingsComponent, BrowseComponent],
+	template: `
+        <div *ngIf="visible" class="fixed inset-0 bg-gray-900/80 backdrop-blur-sm z-50"
+             (click)="onBackdropClick($event)">
+            <div class="absolute top-4 left-4 bg-gray-800/90 p-4 rounded-lg shadow-xl w-64"
+                 style="z-index: 60;"
+                 (click)="$event.stopPropagation()">
+        <div *ngIf="activePage === 'main'">
+          <button class="btn-menu" (click)="navigate('play')">Play</button>
+          <button class="btn-menu" (click)="navigate('settings')">Settings</button>
+          <button class="btn-menu" (click)="navigate('browse')">Browse</button>
+        </div>
+
+        <app-settings *ngIf="activePage === 'settings'" (back)="activePage = 'main'"></app-settings>
+        <app-browse *ngIf="activePage === 'browse'" (back)="activePage = 'main'"></app-browse>
+      </div>
+    </div>
+  `,
+	styles: [`
+    .btn-menu {
+      @apply w-full text-left px-4 py-2 text-gray-100 hover:bg-gray-700/50 rounded-md transition-colors mb-2;
+    }
+  `],
+})
+export class MenuComponent {
+	@Input()
+	visible = false;
+	@Output()
+	close = new EventEmitter<void>();
+	activePage: 'main' | 'settings' | 'browse' = 'main';
+
+	onBackdropClick(event: MouseEvent) {
+		if ((event.target as HTMLElement).classList.contains('fixed')) {
+			this.close.emit();
+			this.activePage = 'main';
+		}
+	}
+
+	navigate(page: 'settings' | 'browse' | 'play') {
+		if (page === 'play') {
+			this.close.emit();
+			return;
+		}
+		this.activePage = page;
+	}
+}

src/app/ui/settings.component.ts

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SettingsManager } from '../../client/core/SettingsManager.ts';
+
+@Component({
+	selector: 'app-settings',
+	standalone: true,
+	imports: [CommonModule, FormsModule],
+	template: `
+    <div>
+      <h2 class="text-xl text-gray-100 mb-4">Settings</h2>
+      <div class="space-y-4">
+        <div class="setting-item">
+          <label>Sensitivity</label>
+          <input type="range" min="0.1" max="2" step="0.1" 
+                 [(ngModel)]="settings.sense" (change)="saveSettings()">
+        </div>
+        <button class="btn-menu" (click)="back.emit()">Back</button>
+      </div>
+    </div>
+  `,
+	styles: [`
+    .setting-item {
+      @apply flex justify-between items-center mb-4 text-gray-200;
+    }
+  `],
+})
+export class SettingsComponent {
+	@Output()
+	back = new EventEmitter<void>();
+	settings = { ...SettingsManager.settings };
+
+	saveSettings() {
+		SettingsManager.settings = this.settings;
+		SettingsManager.write();
+	}
+}

src/client/ui/ChatOverlay.ts

@@ -120,7 +120,7 @@ export class ChatOverlay {
 
 		this.chatCanvas.style.position = 'absolute';
 		this.chatCanvas.style.display = 'block';
-		this.chatCanvas.style.zIndex = '100';
+		this.chatCanvas.style.zIndex = '40';
 		this.chatCanvas.style.top = '0';
 		this.chatCanvas.style.left = '0';