KnockOutWhist-Frontend/src/views/OfflineView.vue

<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 glowThird = ref(false)
const winBlink = ref(false)
const winFire = ref(false)
let winEffectsTimer: number | undefined

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;
  // Reset possible win effects
  winBlink.value = false;
  winFire.value = false;
  if (winEffectsTimer) {
    clearTimeout(winEffectsTimer);
    winEffectsTimer = undefined;
  }
  reelStates.value.forEach((reel) => {
    reel.isSpinning = true;
    reel.value = getRandomSymbol();
  });

  const base0 = 1500;
  const gap = 800;
  const base1 = base0 + gap;
  const base2 = base1 + gap;
  setTimeout(() => {
    reelStates.value[0]!!.isSpinning = false;
  }, base0);
  setTimeout(() => {
    reelStates.value[1]!!.isSpinning = false;
  }, base1);
  setTimeout(() => {
    const firstTwoMatch = reelStates.value[0]!!.value === reelStates!!.value[1]!!.value &&
      reelStates.value[0]!!.value !== '❓';
    const extraDelay = firstTwoMatch ? 1000 : 0;

    glowThird.value = firstTwoMatch;

    setTimeout(() => {
      reelStates.value[2]!!.isSpinning = false;
      glowThird.value = false;
      globalSpinning.value = false;
      hasSpun.value = true;

      const allThreeMatch =
        reelStates.value[0]!!.value !== '❓' &&
        reelStates.value[0]!!.value === reelStates.value[1]!!.value &&
        reelStates.value[1]!!.value === reelStates.value[2]!!.value;
      if (allThreeMatch) {
        winFire.value = true;
        winBlink.value = true;
        winEffectsTimer = window.setTimeout(() => {
          winFire.value = false;
          winBlink.value = false;
          winEffectsTimer = undefined;
        }, 3000);
      }
    }, base2 - base1 + extraDelay);
  }, base1);
};
</script>

<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex flex-center">
        <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 Drehmaschine</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', (winFire || (glowThird && index === 2)) ? 'glow-fire' : '']"
              >

                <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', winBlink ? 'blink-win' : '']">{{ 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>
        </transition>
      </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); } }

.glow-fire {
  border-color: #ff9800;
  box-shadow:
    0 0 10px 2px rgba(255, 152, 0, 0.8),
    0 0 18px 6px rgba(255, 87, 34, 0.5),
    inset 0 0 8px 2px rgba(255, 193, 7, 0.4);
  animation: fireGlow 900ms ease-in-out infinite alternate;
}

@keyframes fireGlow {
  0% {
    box-shadow:
      0 0 6px 1px rgba(255, 152, 0, 0.6),
      0 0 12px 3px rgba(255, 87, 34, 0.35),
      inset 0 0 5px 1px rgba(255, 193, 7, 0.3);
    transform: translateY(0) scale(1);
  }
  100% {
    box-shadow:
      0 0 14px 3px rgba(255, 152, 0, 1),
      0 0 24px 8px rgba(255, 87, 34, 0.6),
      inset 0 0 10px 3px rgba(255, 193, 7, 0.5);
    transform: translateY(-1px) scale(1.02);
  }
}

.blink-win {
  animation: blinkWin 300ms steps(1, end) infinite;
}

@keyframes blinkWin {
  0% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50% { opacity: 0.2; filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)); }
  100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
</style>