casino/frontend/src/app/feature/game/slots/slots.component.ts

import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
import { NavbarComponent } from '@shared/components/navbar/navbar.component';
import { HttpClient } from '@angular/common/http';
import { KeyValuePipe, NgClass, UpperCasePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';

interface SlotResult {
  status: 'win' | 'lose' | 'blank' | 'start';
  amount: number;
  resultMatrix: string[][];
}

@Component({
  selector: 'app-slots',
  standalone: true,
  imports: [NavbarComponent, KeyValuePipe, UpperCasePipe, NgClass, FormsModule],
  templateUrl: './slots.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class SlotsComponent implements OnInit {
  private httpClient: HttpClient = inject(HttpClient);
  slotInfo = signal<Record<string, number> | null>(null);
  slotResult = signal<SlotResult>({
    status: 'start',
    amount: 0,
    resultMatrix: [
      ['BAR', 'BAR', 'BAR'],
      ['SEVEN', 'SEVEN', 'SEVEN'],
      ['BELL', 'BELL', 'BELL'],
    ],
  });
  betAmount = signal<number>(1);

  ngOnInit(): void {
    this.httpClient.get<Record<string, number>>('/backend/slots/info').subscribe((data) => {
      this.slotInfo.set(data);
    });
  }

  spin(): void {
    const payload = {
      betAmount: this.betAmount(),
    };

    this.httpClient.post<SlotResult>('/backend/slots/spin', payload).subscribe((result) => {
      this.slotResult.set(result);
    });
  }
}