feat(ui): FRO-36 PWA

Added a nice offline view with a slotmachine

src/views/OfflineView.vue

@@ -1,9 +1,126 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 
+type Symbol = '🍎' | '💎' | '🔔' | '🍒' | '🍋' | '⭐' | '❓';
+const symbols: Symbol[] = ['🍎', '💎', '🔔', '🍒', '🍋', '⭐']
+
+const reelStates = ref([
+  { value: '❓' as Symbol, isSpinning: false },
+  { value: '❓' as Symbol, isSpinning: false },
+  { value: '❓' as Symbol, isSpinning: false }
+])
+
+const globalSpinning = ref(false)
+const hasSpun = ref(false)
+
+const isWinner = computed(() => {
+  const [r1, r2, r3] = reelStates.value;
+  return hasSpun.value && !globalSpinning.value &&
+    r1?.value !== '❓' && r1?.value === r2?.value && r2?.value === r3?.value
+})
+
+const getRandomSymbol = (): Symbol => symbols[Math.floor(Math.random() * symbols.length)]!
+
+const spin = (): void => {
+  if (globalSpinning.value) return;
+
+  globalSpinning.value = true;
+  hasSpun.value = false;
+
+  reelStates.value.forEach((reel, index) => {
+    reel.isSpinning = true;
+
+    // Stop each reel with a stagger
+    setTimeout(() => {
+      reel.value = getRandomSymbol();
+      reel.isSpinning = false;
+
+      if (index === 2) {
+        globalSpinning.value = false;
+        hasSpun.value = true;
+      }
+    }, 1500 + (index * 800));
+  });
+};
 </script>
-<template>
-<h1> DU BIST OFFLINE!!!</h1>
-</template>
-<style scoped>
 
+<template>
+  <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">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 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>
+
+          <q-btn
+            size="lg" color="light-green"
+            :label="globalSpinning ? 'SPINNING...' : 'SPIN'"
+            :loading="globalSpinning"
+            @click="spin" class="full-width" rounded
+          />
+        </q-card>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<style scoped>
+.slot-machine-card { width: 100%; max-width: 400px; border: 4px solid #2c3e50; border-radius: 20px; }
+
+.reel-container {
+  background: white;
+  width: 80px;
+  height: 100px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 2px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reel-strip {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  animation: move-strip 0.3s linear infinite;
+  filter: blur(2px);
+}
+
+@keyframes move-strip {
+  0% { transform: translateY(-50%); }
+  100% { transform: translateY(0); }
+}
+
+.static-symbol {
+  animation: land 0.2s ease-out;
+}
+
+@keyframes land {
+  0% { transform: translateY(-40px); opacity: 0; }
+  70% { transform: translateY(10px); }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+.animate-bounce { animation: bounce 0.5s infinite alternate; }
+@keyframes bounce { from { transform: scale(1); } to { transform: scale(1.1); } }
 </style>