Spin to Win

A complete wheel of fortune experience with results modal and celebration effects.

Total Winnings$0

Spins0

10030.0%

20025.0%

50020.0%

100015.0%

JACKPOT5.0%

505.0%

Odds displayed before each spin. Results are randomly determined.

Features Demonstrated

• Wheel spinning - Physics-based animation
• Segment customization - Colors, labels, weights
• Result display - Modal with confetti
• Sound ready - Events for audio integration
• Reduced motion - Respects user preferences

Code

<script setup lang="ts">
import { ref } from 'vue'
import { FkWheel, FkResultModal } from '@fortune-kit/components'

const segments = [
  { id: '1', label: '100', value: 100, color: '#22c55e', weight: 30 },
  { id: '2', label: '200', value: 200, color: '#3b82f6', weight: 25 },
  { id: '3', label: '500', value: 500, color: '#a855f7', weight: 15 },
  { id: '4', label: '1000', value: 1000, color: '#f59e0b', weight: 10 },
  { id: '5', label: 'JACKPOT', value: 5000, color: '#ec4899', weight: 5 }
]

const showResult = ref(false)
const result = ref(null)

function handleSpinEnd(segment) {
  result.value = segment
  showResult.value = true
}
</script>

<template>
  <FkWheel
    :segments="segments"
    @spin-end="handleSpinEnd"
  />

  <FkResultModal
    v-model:open="showResult"
    type="win"
    title="Congratulations!"
    :amount="result?.value"
    currency="$"
    primary-action="Collect"
    @primary="showResult = false"
  />
</template>