@fortune-kit/headless

Headless composables for iGaming applications - wheel of fortune and quiz logic with Vue 3.

Installation

npm install @fortune-kit/headless vue

Wheel of Fortune

import { useWheel } from '@fortune-kit/headless'

const segments = [
  { id: '1', label: '100', value: 100, weight: 10, color: '#22c55e' },
  { id: '2', label: '500', value: 500, weight: 5, color: '#3b82f6' },
  { id: '3', label: 'JACKPOT', value: 5000, weight: 1, color: '#ef4444' },
]

const {
  state,
  spin,
  reset,
  isSpinning,
  result,
  segmentAngle,
} = useWheel({
  segments,
  spinDuration: 4000,
  onSpinEnd: (winner) => {
    console.log('Won:', winner.label)
  }
})

// Spin the wheel
await spin()

// Access result
console.log(result.value) // { id: '1', label: '100', value: 100, ... }

Server Mode

For server-determined results:

const { spin, setResult, isWaitingForResult } = useWheel({
  segments,
  mode: 'server',
  onSpinStart: async () => {
    // Fetch result from server
    const result = await api.getSpinResult()
    setResult(result.segmentId)
  }
})

Quiz Engine

import { useQuiz } from '@fortune-kit/headless'

const questions = [
  {
    id: '1',
    text: 'What is 2 + 2?',
    options: [
      { id: 'a', text: '3' },
      { id: 'b', text: '4', isCorrect: true },
      { id: 'c', text: '5' },
    ]
  },
  // ... more questions
]

const {
  state,
  currentQuestion,
  progress,
  score,
  isComplete,
  answer,
  next,
  reset,
} = useQuiz({
  questions,
  shuffleQuestions: true,
  shuffleOptions: true,
  onAnswer: (result) => {
    console.log('Answered:', result.isCorrect)
  },
  onComplete: (answers, finalScore) => {
    console.log('Final score:', finalScore)
  }
})

// Answer current question
const result = answer('b')
console.log(result.isCorrect) // true

// Move to next question
next()

// Check progress
console.log(progress.value) // { current: 2, total: 5, percentage: 40 }

API Reference

useWheel Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | segments | WheelSegment[] | required | Array of wheel segments | | spinDuration | number | 4000 | Spin animation duration (ms) | | minRotations | number | 3 | Minimum full rotations | | maxRotations | number | 5 | Maximum full rotations | | mode | 'local' \| 'server' | 'local' | Result determination mode | | onSpinStart | () => void | - | Called when spin starts | | onSpinEnd | (segment) => void | - | Called when spin ends |

useQuiz Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | questions | QuizQuestion[] | required | Array of questions | | shuffleQuestions | boolean | false | Randomize question order | | shuffleOptions | boolean | false | Randomize option order | | onAnswer | (result) => void | - | Called after each answer | | onComplete | (answers, score) => void | - | Called when quiz ends |

License

MIT