@fortune-kit/components

Vue 3 UI components for iGaming applications - wheel of fortune, quiz, leaderboard, rewards, and more.

Installation

npm install @fortune-kit/components vue

Quick Start

<script setup>
import { FkWheel, FkResultModal } from '@fortune-kit/components'
import '@fortune-kit/components/style.css'
import { ref } from 'vue'

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

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

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

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

  <FkResultModal
    v-model:open="showResult"
    type="win"
    title="You Won!"
    :amount="result?.value"
    currency="$"
  />
</template>

Components

Gaming

• FkWheel - Spin-to-win wheel of fortune
• FkQuiz - Timed quiz with scoring
• FkRewardReveal - Animated reward reveal (chest/card/box)

Results

• FkResultModal - Full-screen result with confetti
• FkResultPanel - Inline result display
• FkResultToast - Toast notification
• FkResultWin/Lose/Info - Semantic result components

Progress

• FkProgress - Progress bar with milestones
• FkStreak - Daily streak tracker

Leaderboard

• FkLeaderboard - Ranked player list

Primitives

• FkButton - Button with variants
• FkModal - Accessible modal dialog
• FkTabs - Tabbed interface
• FkTooltip - Hover tooltip

Theme

• FkThemeProvider - Theme context provider
• FkThemeToggle - Dark/light toggle

Theming

<script setup>
import { FkThemeProvider, FkThemeToggle } from '@fortune-kit/components'
</script>

<template>
  <FkThemeProvider default-theme="system">
    <FkThemeToggle />
    <YourApp />
  </FkThemeProvider>
</template>

Using Theme Composable

<script setup>
import { useTheme } from '@fortune-kit/components'

const { isDark, toggle, setTheme } = useTheme()
</script>

Examples

Wheel of Fortune

<template>
  <FkWheel
    :segments="segments"
    :size="320"
    :spin-duration="4000"
    show-probability
    @spin-start="onStart"
    @spin-end="onEnd"
  />
</template>

Quiz Game

<template>
  <FkQuiz
    :questions="questions"
    :time-per-question="30"
    shuffle-options
    @answer="onAnswer"
    @complete="onComplete"
    @timeout="onTimeout"
  />
</template>

Leaderboard

<template>
  <FkLeaderboard
    :entries="players"
    :current-user-id="myId"
    show-rank-change
    @entry-click="onPlayerClick"
  />
</template>

Daily Streak

<template>
  <FkStreak
    :days="streakDays"
    :current-day="3"
    @claim="onClaim"
  />
</template>

CSS Variables

All components use CSS custom properties with --fk- prefix:

:root {
  --fk-color-primary-DEFAULT: #f59e0b;
  --fk-color-win-DEFAULT: #22c55e;
  --fk-color-lose-DEFAULT: #ef4444;
  --fk-color-background-DEFAULT: #09090b;
  --fk-color-foreground-DEFAULT: #fafafa;
}

Documentation

Full documentation: https://fortune-kit.vercel.app

License

MIT