feat: add bare slots frontend, remove bun start warnings

frontend/src/app/feature/game/slots/slots.component.html

@@ -0,0 +1,52 @@
+<app-navbar></app-navbar>
+
+<div>
+  <h2>Payouts</h2>
+  @if (slotInfo(); as info) {
+    <table>
+      <tbody>
+        @for (item of info | keyvalue; track item.key) {
+          <tr>
+            <td>{{ item.key }}</td>
+            <td>{{ item.value }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  }
+
+  <div>
+    <div class="grid grid-cols-3 gap-1">
+      <div class="text-center">{{ slotResult().resultMatrix[0][0] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[0][1] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[0][2] }}</div>
+
+      <div class="text-center">{{ slotResult().resultMatrix[1][0] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[1][1] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[1][2] }}</div>
+
+      <div class="text-center">{{ slotResult().resultMatrix[2][0] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[2][1] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[2][2] }}</div>
+    </div>
+
+    <div [ngClass]="slotResult().status === 'win' ? 'text-green-500' : 'text-red-500'">
+      <p>Game result: <strong>{{ slotResult().status | uppercase }}</strong></p>
+      <p>Amount: <strong>{{ slotResult().amount }}</strong></p>
+    </div>
+
+    <div>
+      <label for="betAmount">Bet Amount: </label>
+      <input
+        id="betAmount"
+        type="number"
+        [ngModel]="betAmount()"
+        (ngModelChange)="betAmount.set($event)"
+        step="0.01"
+        min="0.01"
+      />
+    </div>
+
+    <button (click)="spin()">SPIN</button>
+  </div>
+</div>

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

@@ -0,0 +1,55 @@
+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';
+  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: 'lose',
+    amount: 12,
+    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);
+    });
+  }
+}