// app.html
<div class="Card">
  <div class="Logo">
    <img src="Logo.png" alt="Logo" />
  </div>
  <h1>猜 the Number</h1>
  <p>I'm thinking of a number between 1 and 100. Can you guess it?</p>
  <div class="Input">
    <input
      #inputRef
      [ngModel]="guess()"
      (ngModelChange)="guess.set($event)"
      type="number"
      placeholder="Enter your guess..."
      [disabled]="disabled()"
      (keydown.enter)="handleGuess($event)"
    />
  </div>
  <div class="Button">
    <button (click)="handle猜($event)" [disabled]="disabled()">Guess</button>
  </div>
  <div class="Msg">{{ msg() }}</div>
  @if (count() > 0) {
    <div class="Counter">Attempts: {{ count() }}</div>
  }
  <div class="FrameworkBadge">Angular</div>
</div>

// app.ts
import { Component, signal, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App implements AfterViewInit {
  @ViewChild('inputRef') inputRef!: ElementRef<HTMLInputElement>;

  readonly guess = signal('');
  readonly msg = signal('');
  readonly count = signal(0);
  readonly disabled = signal(false);

  private readonly magicNo: number;

  constructor() {
    const params = new URLSearchParams(window.location.search);
    const fromQuery = params.get('MagicNo');
    this.magicNo = fromQuery
      ? parseInt(fromQuery, 10)
      : Math.floor(Math.random() * 100) + 1;
  }

  ngAfterViewInit(): void {
    this.inputRef.nativeElement.focus();
  }

  handleGuess(event?: Event): void {
    if ((event as KeyboardEvent | MouseEvent | undefined)?.shiftKey) {
      alert('The magic number is: ' + this.magicNo);
      return;
    }

    const raw = this.guess();
    const num = parseInt(raw, 10);

    if (isNaN(num)) {
      this.msg.set(raw + ' is not a valid number.');
    } else if (num < 1 || num > 100) {
      this.msg.set(num + ' is not in the range of 1 to 100.');
    } else {
      this.count.update(c => c + 1);

      if (num < this.magicNo) {
        this.msg.set(num + ' is too low.');
      } else if (num > this.magicNo) {
        this.msg.set(num + ' is too high.');
      } else {
        alert('Congratulations! You guessed the magic number.');
        this.msg.set('');
        this.disabled.set(true);
      }
    }

    this.guess.set('');
    this.inputRef.nativeElement.focus();
  }
}