183 lines
5.4 KiB
Markdown
183 lines
5.4 KiB
Markdown
# How to Use the New Draw Animation System
|
|
|
|
## 🚀 **Quick Start Guide**
|
|
|
|
### 1. **Access the New Animation System**
|
|
|
|
**Method 1: Through Manager Dashboard**
|
|
1. Open the LuckyChit app
|
|
2. Go to Manager Dashboard
|
|
3. Click the purple casino chip floating action button
|
|
4. This opens the test page with all animation options
|
|
|
|
**Method 2: Through Conduct Draw Dialog**
|
|
1. Go to any chit group
|
|
2. Click "Conduct Draw"
|
|
3. Click "Animated Draw" button
|
|
4. Choose your preferred animation type
|
|
|
|
### 2. **Choose Your Animation**
|
|
|
|
The system automatically recommends the best animation based on your group size:
|
|
|
|
- **🎰 Spinning Wheel** (≤8 members) - Classic casino wheel
|
|
- **🃏 Card Flip** (9-20 members) - Cards flipping rapidly
|
|
- **🎰 Slot Machine** (21-50 members) - Casino slot machine style
|
|
- **🎯 Number Roulette** (21-100 members) - Numbers around circle
|
|
- **✨ Particle System** (50+ members) - Colorful particle effects
|
|
|
|
### 3. **Start the Draw**
|
|
|
|
1. Select your preferred animation type
|
|
2. Click "Start [Animation Type]" button
|
|
3. Watch the beautiful animation
|
|
4. See the winner announcement
|
|
5. Verify the draw fairness
|
|
|
|
## 🎯 **Animation Features**
|
|
|
|
### **All Animations Include:**
|
|
- ✅ **Provably Fair Algorithm** - Same cryptographic system
|
|
- ✅ **Real-time Verification** - Automatic fairness verification
|
|
- ✅ **Beautiful Animations** - Smooth 60fps animations
|
|
- ✅ **Winner Highlighting** - Clear winner announcement
|
|
- ✅ **Transparent Process** - All steps verifiable
|
|
|
|
### **Smart Recommendations:**
|
|
- System automatically suggests best animation for your group size
|
|
- You can override and choose any animation type
|
|
- Visual indicators show recommended options
|
|
|
|
## 🧪 **Testing the System**
|
|
|
|
### **Test Page Features:**
|
|
- 25 sample members for testing
|
|
- All 5 animation types available
|
|
- Real-time verification widget
|
|
- Full simulation testing
|
|
- Reset functionality
|
|
|
|
### **How to Test:**
|
|
1. **Access Test Page**: Click purple casino chip in manager dashboard
|
|
2. **Choose Animation**: Select from 5 different types
|
|
3. **Start Draw**: Click "Start [Animation Type]"
|
|
4. **Watch Animation**: Enjoy the beautiful animation
|
|
5. **Verify Results**: Check the verification widget
|
|
6. **Test Full Simulation**: Use "Full Simulation" button
|
|
|
|
## 🔧 **Integration in Your Code**
|
|
|
|
### **Basic Usage:**
|
|
```dart
|
|
// Use the animation selector
|
|
DrawAnimationSelector(
|
|
members: yourMemberList,
|
|
onDrawComplete: (winnerId) {
|
|
// Handle winner selection
|
|
print('Winner: $winnerId');
|
|
},
|
|
serverSeed: 'your_server_seed',
|
|
clientSeed: 'your_client_seed',
|
|
nonce: DateTime.now().millisecondsSinceEpoch,
|
|
)
|
|
```
|
|
|
|
### **Individual Animation:**
|
|
```dart
|
|
// Use specific animation type
|
|
CardFlipDrawAnimation(
|
|
members: yourMemberList,
|
|
onDrawComplete: (winnerId) => handleWinner(winnerId),
|
|
serverSeed: 'seed',
|
|
clientSeed: 'client_seed',
|
|
nonce: 12345,
|
|
)
|
|
```
|
|
|
|
## 🎨 **Customization Options**
|
|
|
|
### **Animation Duration:**
|
|
```dart
|
|
DrawAnimationSelector(
|
|
animationDuration: Duration(seconds: 6), // Custom duration
|
|
// ... other parameters
|
|
)
|
|
```
|
|
|
|
### **Available Animations:**
|
|
- `DrawAnimationType.spinningWheel`
|
|
- `DrawAnimationType.cardFlip`
|
|
- `DrawAnimationType.slotMachine`
|
|
- `DrawAnimationType.numberRoulette`
|
|
- `DrawAnimationType.particleSystem`
|
|
|
|
## 📊 **Performance & Scalability**
|
|
|
|
### **Member Count Recommendations:**
|
|
- **1-8 members**: Spinning Wheel (best visual representation)
|
|
- **9-20 members**: Card Flip (exciting and clear)
|
|
- **21-50 members**: Slot Machine (efficient and fun)
|
|
- **51-100 members**: Number Roulette (compact and clear)
|
|
- **100+ members**: Particle System (handles unlimited members)
|
|
|
|
### **Performance:**
|
|
- All animations run at 60fps
|
|
- Memory usage scales appropriately
|
|
- Smooth animations on all devices
|
|
- Responsive design for mobile and desktop
|
|
|
|
## 🔒 **Security & Fairness**
|
|
|
|
### **Provably Fair Algorithm:**
|
|
1. **Server Seed**: Randomly generated and hashed
|
|
2. **Client Seed**: Optional user input for verification
|
|
3. **Nonce**: Unique timestamp for each draw
|
|
4. **Hash Calculation**: SHA-256 of combined seeds
|
|
5. **Winner Selection**: Deterministic based on hash
|
|
|
|
### **Verification:**
|
|
- Real-time verification of draw fairness
|
|
- Step-by-step verification process
|
|
- Complete audit trail
|
|
- All participants can verify results
|
|
|
|
## 🎉 **Benefits of New System**
|
|
|
|
### **For Small Groups (≤8):**
|
|
- Classic spinning wheel experience
|
|
- Clear visual representation
|
|
- Familiar and engaging
|
|
|
|
### **For Medium Groups (9-20):**
|
|
- Exciting card flip animation
|
|
- Handles more members elegantly
|
|
- Professional appearance
|
|
|
|
### **For Large Groups (21-50):**
|
|
- Fun slot machine experience
|
|
- Efficient display of many members
|
|
- Maintains excitement
|
|
|
|
### **For Very Large Groups (50+):**
|
|
- Stunning particle effects
|
|
- Handles unlimited members
|
|
- Modern and impressive
|
|
|
|
## 🚀 **Next Steps**
|
|
|
|
1. **Test the System**: Use the test page to try all animations
|
|
2. **Choose Your Favorite**: Find the animation that works best for your groups
|
|
3. **Integrate**: Use the animation selector in your draw process
|
|
4. **Customize**: Adjust animation duration and settings as needed
|
|
5. **Enjoy**: Watch your members enjoy the exciting draw experience!
|
|
|
|
## 📞 **Support**
|
|
|
|
If you need help with the new animation system:
|
|
1. Check the test page for examples
|
|
2. Review the documentation files
|
|
3. Test with different group sizes
|
|
4. Use the verification system to ensure fairness
|
|
|
|
The new animation system makes draws exciting, transparent, and scalable for any group size! 🎰✨
|