feat: implement basic dice frontend funcionality

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>