feat: added web view 1v1

2026-04-17 23:20:16 +02:00
commit 1828fa3275
80 changed files with 11876 additions and 0 deletions
@@ -0,0 +1,69 @@
+.welcome-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+}
+
+.welcome-card {
+  width: min(900px, 100%);
+  border-radius: 12px;
+  border: 2px solid #5A2C28;
+  background: #F3C8A0;
+  padding: 2rem;
+  box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
+}
+
+h1 {
+  margin: 0 0 0.25rem;
+  color: #5A2C28;
+}
+
+p {
+  margin: 0 0 1.25rem;
+}
+
+.mode-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+}
+
+.mode {
+  border: 2px solid #5A2C28;
+  border-radius: 10px;
+  padding: 1rem;
+  text-align: left;
+  display: grid;
+  gap: 0.25rem;
+}
+
+.mode span {
+  font-size: 1.15rem;
+  color: #5A2C28;
+}
+
+.mode small {
+  color: #5A2C28;
+  opacity: 0.9;
+}
+
+.mode-active {
+  background: #B9DAD1;
+  cursor: pointer;
+}
+
+.mode-active:hover:enabled {
+  background: #B9C2DA;
+}
+
+.mode-disabled {
+  background: #E1EAA9;
+  opacity: 0.75;
+}
+
+.error {
+  color: #5A2C28;
+  font-weight: 700;
+  margin-top: 1rem;
+}
@@ -0,0 +1,27 @@
+<main class="welcome-shell">
+  <section class="welcome-card">
+    <h1>Welcome to NowChess</h1>
+    <p>Pick a mode to begin.</p>
+
+    <div class="mode-grid">
+      <button type="button" class="mode mode-disabled" disabled>
+        <span>Bot</span>
+        <small>Coming soon</small>
+      </button>
+
+      <button type="button" class="mode mode-active" (click)="startOneVsOne()" [disabled]="creating">
+        <span>1 vs 1</span>
+        <small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
+      </button>
+
+      <button type="button" class="mode mode-disabled" disabled>
+        <span>Future Technique</span>
+        <small>Placeholder</small>
+      </button>
+    </div>
+
+    @if (errorMessage) {
+      <p class="error">{{ errorMessage }}</p>
+    }
+  </section>
+</main>
@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { finalize } from 'rxjs';
+import { GameApiService } from '../../services/game-api.service';
+
+@Component({
+  selector: 'app-welcome',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './welcome.component.html',
+  styleUrl: './welcome.component.css'
+})
+export class WelcomeComponent {
+  creating = false;
+  errorMessage = '';
+
+  constructor(
+    private readonly router: Router,
+    private readonly gameApi: GameApiService
+  ) {}
+
+  startOneVsOne(): void {
+    if (this.creating) {
+      return;
+    }
+
+    this.errorMessage = '';
+    this.creating = true;
+
+    this.gameApi
+      .createGame()
+      .pipe(finalize(() => (this.creating = false)))
+      .subscribe({
+        next: (game) => {
+          void this.router.navigate(['/game', game.gameId]);
+        },
+        error: (error: { error?: { message?: string } }) => {
+          this.errorMessage = error.error?.message ?? 'Unable to create a game.';
+        }
+      });
+  }
+}