From e4f81275036b40f1a335c0d00ed6ec5e8e5e35fc Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Thu, 8 May 2025 14:17:14 +0200
Subject: [PATCH] perf: increase slots performance by 1500% !!!!

---
 .../feature/game/slots/slots.component.html   | 29 ++++++++++++-------
 .../app/feature/game/slots/slots.component.ts |  2 +-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/feature/game/slots/slots.component.html b/frontend/src/app/feature/game/slots/slots.component.html
index c5929df..3ac9bf4 100644
--- a/frontend/src/app/feature/game/slots/slots.component.html
+++ b/frontend/src/app/feature/game/slots/slots.component.html
@@ -9,15 +9,27 @@
       <div class="card">
         <!-- Slot Machine Top -->
         <div class="p-6">
-          <div class="flex items-center justify-between">
-            <h2 class="text-xl font-bold text-white">Slot Machine</h2>
+          <div class="flex items-center justify-between gap-4">
+            <!-- Wrapper for title and win amount -->
+            <div class="flex items-baseline space-x-2">
+              <h2 class="text-xl font-bold text-white">Slot Machine</h2>
+              <span
+                *ngIf="slotResult().status === 'win' && slotResult().amount > 0"
+                class="text-emerald text-lg font-semibold"
+                aria-live="polite"
+              >
+                +{{ slotResult().amount | currency: 'EUR' }}
+              </span>
+            </div>
+
+            <!-- Status Badge -->
             <div
               [ngClass]="{
                 'bg-emerald': slotResult().status === 'win',
                 'bg-accent-red': slotResult().status === 'lose',
                 'bg-deep-blue-light': slotResult().status === 'start',
               }"
-              class="px-3 py-1 rounded-full text-sm font-semibold"
+              class="px-3 py-1 rounded-full text-sm font-semibold whitespace-nowrap"
             >
               <span class="text-white">
                 {{
@@ -42,20 +54,15 @@
                     class="bg-deep-blue-contrast rounded-lg shadow-md p-2 flex items-center justify-center"
                   >
                     <span class="text-2xl font-bold" [ngClass]="getSymbolClass(cell)">{{
-                      cell
-                    }}</span>
+                        cell
+                      }}</span>
                   </div>
                 }
               }
             </div>
           </div>
 
-          <!-- Game Result -->
-          <div class="text-center mb-6" *ngIf="slotResult().status === 'win'">
-            <div class="text-emerald text-xl font-bold">
-              +{{ slotResult().amount | currency: 'EUR' }}
-            </div>
-          </div>
+          <!-- Game Result (This section was removed as it's now at the top) -->
 
           <!-- Controls -->
           <div class="flex flex-col sm:flex-row gap-4 items-center justify-center">
diff --git a/frontend/src/app/feature/game/slots/slots.component.ts b/frontend/src/app/feature/game/slots/slots.component.ts
index 71fa482..6672d06 100644
--- a/frontend/src/app/feature/game/slots/slots.component.ts
+++ b/frontend/src/app/feature/game/slots/slots.component.ts
@@ -119,7 +119,7 @@ export default class SlotsComponent implements OnInit, OnDestroy {
           this.userService.refreshCurrentUser();
 
           this.isSpinning = false;
-        }, 1500);
+        }, 100);
       },
       error: (err) => {
         console.error('Error spinning slot machine:', err);