127 lines
3.5 KiB
Vue
127 lines
3.5 KiB
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 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>
|
|
<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>
|