feat: implement basic dice frontend funcionality

frontend/src/app/app.routes.ts

@@ -61,4 +61,9 @@ export const routes: Routes = [
     loadComponent: () => import('./feature/lootboxes/lootbox-opening/lootbox-opening.component'),
     canActivate: [authGuard],
   },
+  {
+    path: 'game/dice',
+    loadComponent: () => import('./feature/game/dice/dice.component').then(m => m.DiceComponent),
+    canActivate: [authGuard],
+  },
 ];

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

@@ -0,0 +1,52 @@
+<div class="dice-container">
+  <h2>Dice Game</h2>
+
+  <form [formGroup]="diceForm" (ngSubmit)="roll()">
+    <div class="controls">
+      <label for="betAmount">Bet Amount:</label>
+      <input id="betAmount" type="number" formControlName="betAmount" min="0.01" step="0.01">
+      @if (hasError('betAmount', 'required')) {
+        <span class="error">Bet Amount is required</span>
+      }
+      @if (hasError('betAmount', 'min')) {
+        <span class="error">Bet Amount must be at least 0.01</span>
+      }
+
+      <div class="roll-mode">
+        <button type="button" (click)="toggleRollMode()" [class.active]="diceForm.get('rollOver')?.value">Roll Over</button>
+        <button type="button" (click)="toggleRollMode()" [class.active]="!diceForm.get('rollOver')?.value">Roll Under</button>
+      </div>
+
+      <label for="targetValue">Target Value:</label>
+      <input id="targetValue" type="number" formControlName="targetValue" min="1" max="100" step="0.01">
+       @if (hasError('targetValue', 'required')) {
+        <span class="error">Target Value is required</span>
+      }
+      @if (hasError('targetValue', 'min')) {
+        <span class="error">Target Value must be at least 1</span>
+      }
+       @if (hasError('targetValue', 'max')) {
+        <span class="error">Target Value must be at most 100</span>
+      }
+    </div>
+
+    <div class="info">
+      <p>Win Chance: {{ winChance() | number:'1.0-2' }}%</p>
+      <p>Potential Win: {{ potentialWin() | currency:'EUR':'symbol':'1.2-2' }}</p>
+    </div>
+
+    <button type="submit">Roll Dice</button>
+  </form>
+
+  @if (rolledValue() !== null) {
+    <div class="result">
+      <h3>Result</h3>
+      <p>Rolled Value: {{ rolledValue() }}</p>
+      @if (win()) {
+        <p>You Won! Payout: {{ payout() | currency:'EUR':'symbol':'1.2-2' }}</p>
+      } @else {
+        <p>You Lost.</p>
+      }
+    </div>
+  }
+</div>

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

@@ -0,0 +1,118 @@
+import { Component, signal, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { DiceService } from './dice.service';
+import { DiceDto, DiceResult } from './dice.model';
+import { debounceTime, tap } from 'rxjs/operators';
+import {UserService} from "@service/user.service";
+
+type DiceFormGroup = FormGroup<{
+  betAmount: FormControl<number | null>;
+  rollOver: FormControl<boolean>;
+  targetValue: FormControl<number | null>;
+}>;
+
+@Component({
+  selector: 'app-dice',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './dice.component.html',
+})
+export class DiceComponent implements OnInit {
+  private readonly formBuilder = inject(FormBuilder);
+  private readonly diceService = inject(DiceService);
+  private readonly userService = inject(UserService);
+
+
+  rolledValue = signal<number | null>(null);
+  win = signal<boolean | null>(null);
+  payout = signal<number | null>(null);
+  winChance = signal(0);
+  potentialWin = signal(0);
+
+  readonly diceForm: DiceFormGroup = this.createDiceForm();
+
+  private readonly MAX_DICE_VALUE = 100;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.diceForm.valueChanges.pipe(
+      debounceTime(100),
+      tap(() => this.calculateWinChanceAndPotentialWin())
+    ).subscribe();
+
+    this.calculateWinChanceAndPotentialWin();
+  }
+
+  createDiceForm(): DiceFormGroup {
+    return this.formBuilder.group({
+      betAmount: new FormControl<number | null>(1.00, {
+        validators: [Validators.required, Validators.min(0.01)],
+        nonNullable: true,
+      }),
+      rollOver: new FormControl<boolean>(true, {
+        validators: [Validators.required],
+        nonNullable: true,
+      }),
+      targetValue: new FormControl<number | null>(50.50, {
+        validators: [Validators.required, Validators.min(1), Validators.max(100)],
+        nonNullable: true,
+      }),
+    });
+  }
+
+  toggleRollMode(): void {
+    const currentMode = this.diceForm.get('rollOver')?.value;
+    this.diceForm.get('rollOver')?.setValue(!currentMode);
+  }
+
+  calculateWinChanceAndPotentialWin(): void {
+    const formValues = this.diceForm.value;
+    const target = formValues.targetValue ?? 0;
+    const bet = formValues.betAmount ?? 0;
+    const isOver = formValues.rollOver ?? true;
+
+    const calculatedWinChance = isOver ? this.MAX_DICE_VALUE - target : target - 1;
+
+    this.winChance.set(Math.max(0, calculatedWinChance));
+
+    let multiplier = 0;
+    if (calculatedWinChance > 0) {
+      multiplier = (this.MAX_DICE_VALUE - 1) / calculatedWinChance;
+    }
+
+    this.potentialWin.set(bet * multiplier);
+  }
+
+  roll(): void {
+    if (this.diceForm.invalid) {
+      this.diceForm.markAllAsTouched();
+      return;
+    }
+
+    const diceDto: DiceDto = this.diceForm.getRawValue() as DiceDto;
+
+    this.rolledValue.set(null);
+    this.win.set(null);
+    this.payout.set(null);
+
+    this.diceService.rollDice(diceDto).subscribe({
+      next: (result: DiceResult) => {
+        this.rolledValue.set(result.rolledValue);
+        this.win.set(result.win);
+        this.payout.set(result.payout);
+        this.userService.refreshCurrentUser();
+      },
+      error: (error) => {
+        console.error('Dice roll failed:', error);
+      }
+    });
+  }
+
+  hasError(controlName: string, errorName: string): boolean {
+    const control = this.diceForm.get(controlName);
+    return control !== null && control.touched && control.hasError(errorName);
+  }
+}

frontend/src/app/feature/game/dice/dice.model.ts

@@ -0,0 +1,11 @@
+export interface DiceDto {
+  betAmount: number;
+  rollOver: boolean;
+  targetValue: number;
+}
+
+export interface DiceResult {
+  win: boolean;
+  payout: number;
+  rolledValue: number;
+}

frontend/src/app/feature/game/dice/dice.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { DiceDto, DiceResult } from './dice.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DiceService {
+  private apiUrl = '/backend/dice';
+
+  constructor(private http: HttpClient) { }
+
+  rollDice(diceDto: DiceDto): Observable<DiceResult> {
+    return this.http.post<DiceResult>(this.apiUrl, diceDto);
+  }
+}