From d58f24ccbf16a7ea7e347f80cf03361d7a36d537 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 21 May 2025 10:36:32 +0200
Subject: [PATCH] feat: style dice game page

---
 .../app/feature/game/dice/dice.component.html | 97 ++++++++++++-------
 1 file changed, 60 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/feature/game/dice/dice.component.html b/frontend/src/app/feature/game/dice/dice.component.html
index 4278fb1..6506f8d 100644
--- a/frontend/src/app/feature/game/dice/dice.component.html
+++ b/frontend/src/app/feature/game/dice/dice.component.html
@@ -1,51 +1,74 @@
-<div class="dice-container">
-  <h2>Dice Game</h2>
+<div class="container mx-auto px-4 py-8 space-y-8">
+  <h1 class="text-3xl font-bold text-white mb-6">Dice Game</h1>
 
-  <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="grid grid-cols-1 lg:grid-cols-4 gap-8">
+    <div class="lg:col-span-1 card p-8 space-y-6">
+      <form [formGroup]="diceForm" (ngSubmit)="roll()" class="space-y-6">
+        <div class="controls space-y-4">
+          <div>
+            <label for="betAmount" class="block text-text-secondary mb-2">Bet Amount:</label>
+            <input id="betAmount" type="number" formControlName="betAmount" min="0.01" step="0.01"
+                   class="w-full bg-deep-blue-light text-white rounded-lg p-2 focus:outline-none focus:ring-1 focus:ring-emerald">
+            @if (hasError('betAmount', 'required')) {
+              <span class="text-accent-red text-sm mt-1 block">Bet Amount is required</span>
+            }
+            @if (hasError('betAmount', 'min')) {
+              <span class="text-accent-red text-sm mt-1 block">Bet Amount must be at least 0.01</span>
+            }
+          </div>
 
-      <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>
+          <div>
+            <label class="block text-text-secondary mb-2">Roll Mode:</label>
+            <div class="roll-mode flex rounded-lg overflow-hidden">
+              <button type="button" (click)="toggleRollMode()" [ngClass]="{'bg-emerald text-white': diceForm.get('rollOver')?.value, 'bg-deep-blue-light text-text-secondary': !diceForm.get('rollOver')?.value}"
+                      class="flex-1 py-2 text-center font-semibold transition-colors duration-200">Roll Over</button>
+              <button type="button" (click)="toggleRollMode()" [ngClass]="{'bg-emerald text-white': !diceForm.get('rollOver')?.value, 'bg-deep-blue-light text-text-secondary': diceForm.get('rollOver')?.value}"
+                      class="flex-1 py-2 text-center font-semibold transition-colors duration-200">Roll Under</button>
+            </div>
+          </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>
+            <label for="targetValue" class="block text-text-secondary mb-2">Target Value: {{ diceForm.get('targetValue')?.value | number:'1.0-2' }}</label>
+            <input id="targetValue" type="range" formControlName="targetValue" min="1" max="100" step="0.01"
+                   class="w-full h-2 bg-deep-blue-light rounded-lg appearance-none cursor-pointer range-lg accent-emerald">
+             @if (hasError('targetValue', 'required')) {
+              <span class="text-accent-red text-sm mt-1 block">Target Value is required</span>
+            }
+            @if (hasError('targetValue', 'min')) {
+              <span class="text-accent-red text-sm mt-1 block">Target Value must be at least 1</span>
+            }
+             @if (hasError('targetValue', 'max')) {
+              <span class="text-accent-red text-sm mt-1 block">Target Value must be at most 100</span>
+            }
+          </div>
+        </div>
+
+        <div class="info space-y-2 text-text-secondary">
+          <p>Win Chance: <span class="text-white">{{ winChance() | number:'1.0-2' }}%</span></p>
+          <p>Potential Win: <span class="text-white">{{ potentialWin() | currency:'EUR':'symbol':'1.2-2' }}</span></p>
+        </div>
+
+        <button type="submit" class="button-primary w-full py-2 font-bold">Roll Dice</button>
+      </form>
     </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 class="lg:col-span-3 card p-8 flex items-center justify-center">
+      <!-- Placeholder for spinning dice animation -->
+      @if (rolledValue() !== null) {
+        <div class="text-white text-center text-8xl font-bold">
+          {{ rolledValue() }}
+        </div>
+      }
     </div>
+  </div>
 
-    <button type="submit">Roll Dice</button>
-  </form>
 
   @if (rolledValue() !== null) {
-    <div class="result">
-      <h3>Result</h3>
-      <p>Rolled Value: {{ rolledValue() }}</p>
+    <div class="result max-w-sm mx-auto card p-6 mt-8 text-center">
       @if (win()) {
-        <p>You Won! Payout: {{ payout() | currency:'EUR':'symbol':'1.2-2' }}</p>
+        <p class="text-emerald text-base font-semibold">You Won! Payout: {{ payout() | currency:'EUR':'symbol':'1.2-2' }}</p>
       } @else {
-        <p>You Lost.</p>
+        <p class="text-accent-red text-base font-semibold">You Lost.</p>
       }
     </div>
   }