From dfae8ebb5de3d6a4156f54cbeb5c2a7bf0af38d4 Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Wed, 17 Dec 2025 12:50:01 +0100
Subject: [PATCH] feat(ui): FRO-36 PWA

Added another animation to slotmachine
---
 src/views/OfflineView.vue | 51 ++++++++++++++++++++++-----------------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/views/OfflineView.vue b/src/views/OfflineView.vue
index a6746c6..dc91e70 100644
--- a/src/views/OfflineView.vue
+++ b/src/views/OfflineView.vue
@@ -48,34 +48,41 @@ const spin = (): void => {
   <q-layout>
     <q-page-container>
       <q-page class="flex flex-center">
-        <q-card class="slot-machine-card q-pa-lg text-center shadow-10">
-          <div class="text-h4 q-mb-md text-black text-weight-bolder " style="font-family: serif;">Offline Casino</div>
+        <transition
+          appear
+          tag="div"
+          enter-active-class="animate__animated animate__fadeInDown"
+          leave-active-class="animate__animated animate__fadeOutUp"
+        >
+          <q-card class="slot-machine-card q-pa-lg text-center shadow-10">
+            <div class="text-h4 q-mb-md text-black text-weight-bolder " style="font-family: serif;">Offline Casino</div>
 
-          <div class="row justify-center q-gutter-md q-mb-xl">
-            <div v-for="(reel, index) in reelStates" :key="index" class="reel-container shadow-2">
+            <div class="row justify-center q-gutter-md q-mb-xl">
+              <div v-for="(reel, index) in reelStates" :key="index" class="reel-container shadow-2">
+
+                <div v-if="reel.isSpinning" class="reel-strip">
+                  <div v-for="n in 10" :key="n" class="text-h2">{{ symbols[n % symbols.length] }}</div>
+                </div>
+
+                <div v-else class="text-h2 static-symbol">{{ reel.value }}</div>
 
-              <div v-if="reel.isSpinning" class="reel-strip">
-                <div v-for="n in 10" :key="n" class="text-h2">{{ symbols[n % symbols.length] }}</div>
               </div>
-
-              <div v-else class="text-h2 static-symbol">{{ reel.value }}</div>
-
             </div>
-          </div>
 
-          <div class="result-box q-mb-md" style="height: 40px;">
-            <div v-if="isWinner" class="text-h5 text-positive text-weight-bold animate-bounce">YOU WIN! (Nothing)</div>
-            <div v-else-if="hasSpun && !globalSpinning" class="text-h6 text-grey-7">Try again!</div>
-            <div v-else class="text-h6 text-grey-7">Try your luck until you are connected!</div>
-          </div>
+            <div class="result-box q-mb-md" style="height: 40px;">
+              <div v-if="isWinner" class="text-h5 text-positive text-weight-bold animate-bounce">YOU WIN! (Nothing)</div>
+              <div v-else-if="hasSpun && !globalSpinning" class="text-h6 text-grey-7">Try again!</div>
+              <div v-else class="text-h6 text-grey-7">Try your luck until you are connected!</div>
+            </div>
 
-          <q-btn
-            size="lg" color="light-green"
-            :label="globalSpinning ? 'SPINNING...' : 'SPIN'"
-            :loading="globalSpinning"
-            @click="spin" class="full-width" rounded
-          />
-        </q-card>
+            <q-btn
+              size="lg" color="light-green"
+              :label="globalSpinning ? 'SPINNING...' : 'SPIN'"
+              :loading="globalSpinning"
+              @click="spin" class="full-width" rounded
+            />
+          </q-card>
+        </transition>
       </q-page>
     </q-page-container>
   </q-layout>