๐ A beautiful, interactive spinning wheel app that makes recipe selection fun and exciting! Built with modern Blazor WebAssembly technology.
๐ Live Demo: https://donpotts.github.io/MyWheel/
๐จ Beautiful Animations - Realistic weighted wheel physics with 5-second deceleration
๐ Dynamic Sound Effects - Progressive ticking that slows down naturally with the wheel
๐ฑ Responsive Design - Perfect experience on desktop, tablet, and mobile
๐ฏ Smart Selection - Intelligent wheel physics with momentum and realistic stopping
๐ Interactive Stop Button - Click the center circle to stop the wheel exactly where you want
๐ Modern UI - Stunning gradients, emojis, and hover effects
๐ฝ๏ธ 8 Delicious Recipes - Curated selection of amazing dishes to try
๐ค AI Recipe Generation - Get detailed recipes with daily access codes
- Red Center Circle: Appears when wheel is spinning
- Precise Control: Stop exactly where the indicator points
- Visual Feedback: Glowing red effect with hover animations
- Real-time Tracking: JavaScript monitors exact wheel position
- Cancellation System: Properly stops timers and audio
- 5-Second Duration: Extended timing for better user experience
- Weighted Deceleration: Starts fast, naturally slows down like a real wheel
- Dynamic Audio: Ticking starts rapid (80ms) and slows to (300ms intervals)
- More Rotations: 6-11 full spins for dramatic effect
- Cubic Bezier Easing:
cubic-bezier(0.17, 0.67, 0.12, 0.99)for authentic feel
- ๐ฏ Emoji Integration: Beautiful emojis replace placeholder text throughout
- ๐ Proactive Access: Recipe unlock prompt shows immediately when needed
- ๐ Stop Message: Special "Stopped!" message when manually stopped
- โก Improved Feedback: Better visual and audio cues for all interactions
The wheel features a secure daily access control system for AI recipe generation only:
- ๐ Free Wheel Access: Anyone can spin the wheel and select items freely
- ๐๏ธ Daily Recipe Codes: Unique codes required only for AI-generated recipes
- โฐ Time-Limited: 24-hour access for recipe generation from midnight to midnight
- ๐ก๏ธ Secure: Cryptographically generated codes prevent unauthorized recipe access
- ๐ฑ Device-Specific: One recipe code per device per day
- ๐ก Spin the wheel freely - No code needed for basic wheel functionality
- ๐ Stop anytime - Click the red center circle to stop the wheel exactly where you want
- ๐ Unlock recipes upfront - See the recipe access prompt immediately if codes are needed
- ๐ฝ๏ธ Generate detailed recipes - Enter today's access code to unlock AI-powered recipe generation
- โฑ๏ธ Enjoy realistic physics - 5-second weighted wheel with natural deceleration
- ๐ง .NET 9.0 SDK
- ๐ป Any modern web browser
# Clone the repository
git clone https://github.com/donpotts/MyWheel.git
cd MyWheel
# Run the application
dotnet run --project MyWheelApp.csproj๐ Open your browser and navigate to http://localhost:5234
- ๐ฑ๏ธ Click the "Spin Wheel" button to start the magic
- โณ Watch the wheel spin with realistic weighted physics (5-second deceleration)
- ๐ Optional: Click the red center circle to stop exactly where you want
- ๐ Wait for it to land on your destiny recipe (auto-selected!)
- ๐ If needed: Unlock recipe access with daily code (prompt shown immediately)
- ๐ฝ๏ธ Optional: Click "Get Recipe" for a detailed AI-generated recipe
- ๐ฉโ๐ณ Start cooking your randomly selected masterpiece!
๐ MyWheel/
โโโ ๐ Pages/Home.razor # ๐ก Main wheel component
โโโ ๐ Pages/Configuration.razor # โ๏ธ Wheel customization
โโโ ๐ Pages/AccessCode.razor # ๐ Daily code entry (for recipes only)
โโโ ๐ Pages/AdminCodes.razor # ๐จโ๐ผ Admin code management
โโโ ๐ Services/
โ โโโ ๐ ๏ธ WheelConfigurationService.cs
โ โโโ ๐ DailyCodeService.cs # Recipe access control logic
โ โโโ ๐ค RecipeService.cs # AI recipe generation
โ โโโ ๐ IRecipeService.cs # Recipe service interface
โโโ ๐ Models/
โ โโโ ๐ฏ WheelConfiguration.cs
โ โโโ ๐ DailyCode.cs # Access control models
โ โโโ ๐ฝ๏ธ Recipe.cs # Recipe data model
โโโ ๐ wwwroot/
โ โโโ ๐จ css/app.css # Stunning animations & styles
โ โโโ โก js/wheel.js # Wheel physics & sound magic
โ โโโ ๐ index.html # Entry point
โ โโโ ๐ฑ manifest.json # PWA configuration
โโโ ๐ฑ Layout/ # App shell & navigation
| ๐ฏ Slot | ๐ฅ Recipe | ๐ Difficulty |
|---|---|---|
| 1 | ๐ Pizza Margherita | โญโญ |
| 2 | ๐ Chicken Curry | โญโญโญ |
| 3 | ๐ฎ Beef Tacos | โญโญ |
| 4 | ๐ Pasta Carbonara | โญโญ |
| 5 | ๐ Salmon Teriyaki | โญโญโญ |
| 6 | ๐ฅฌ Vegetable Stir Fry | โญ |
| 7 | ๐ฅ Greek Salad | โญ |
| 8 | ๐ฐ Chocolate Cake | โญโญโญโญ |
| Technology | Purpose | Version |
|---|---|---|
 |
Frontend Framework | .NET 9 |
 |
Backend Logic | C# 13.0 |
 |
Physics Animations | CSS3 + Cubic Bezier |
 |
Real-time Tracking | Web Audio API + RequestAnimationFrame |
 |
Runtime | Latest |
 |
AI Integration | Latest |
- RequestAnimationFrame: Precise rotation tracking during animation
- Cancellation Tokens: Proper async operation management
- CSS-JS Sync: Perfect synchronization between visual and logic layers
- Memory Management: IDisposable implementation for cleanup
- Web Audio API: Programmatic sound generation
- Dynamic Timing: Progressive tick rates based on wheel speed
- Audio Context: Proper initialization and state management
- Cross-browser: Fallback support for older browsers
The app is automatically deployed to GitHub Pages. The daily code system works seamlessly in production for recipe access.
- Clone the repository
- Run
dotnet runfrom the solution directory - Wheel works immediately
Don Potts
๐ฎ Email: Don.Potts@DonPotts.com
Made with โค๏ธ using Blazor WebAssembly
Spin freely, cook with access! ๐ก๐ฝ๏ธ