A spinning wheel game built with React, TypeScript, and Vite — designed to integrate with the Yrgo Web Development Class of 2024's Tivoli API, but also playable as a standalone experience.
-
🎯 Spin-to-win gameplay with dynamic results
-
💸 Money and free spin management
-
🔐 JWT-based Tivoli authentication (via URL, postMessage, or localStorage)
-
🧪 Development mode for standalone use
-
📱 Responsive design with separate mobile and desktop layouts
-
🎨 Built using Tailwind CSS for clean UI
-
🔁 Keyboard accessibility (press Space to spin)
-
Frontend: React, TypeScript
-
Build Tool: Vite
-
Styling: Tailwind CSS
-
Authentication & API: Tivoli platform (JWT tokens, transactions, and payouts)
git clone https://github.com/yourusername/wheel-of-fortune.git
cd wheel-of-fortune
npm install
npm run dev
✅ Make sure you have Node.js and npm installed.
This game is built to integrate with the Tivoli API, used in Yrgo’s web dev curriculum.
-
Accepts JWT token via ?token=... in URL
-
Accepts token via postMessage (for iframe use)
-
Falls back to localStorage (token) or test mode in development
When connected to the Tivoli platform:
-
Deducts spin cost
-
Reports winnings
-
Awards free spins (stamps)
When not authenticated, the app gracefully degrades into test mode, simulating API behavior.
To simulate the game without authentication:
-
Run the app locally (
npm run dev) -
Open in a regular browser tab (not in iframe)
-
The app will enter test mode and allow unlimited spins
src/
│
├── components/
│ ├── Wheel.tsx
│ ├── MoneyDisplay.tsx
│ ├── ResultDisplay.tsx
│ ├── JwtListener.tsx
│ └── useSpin.ts / useMoney.ts / useGameLogic.ts
│
├── gameConstants.ts
├── App.tsx
└── main.tsx
🎮 Controls
-
Click the Spin button or press Spacebar to play
-
Use free spins when available
-
View results and current balance in real-time
MIT License
Made by Mahtias Jebrand, Filip Lyrheden and Jack Svensson. Special thanks to the creators of the Tivoli API.