📝 Add game tutorial/guide #2
Description
📝 Add game tutorial/guide
Overview
Create an efficient, unintrusive tutorial system that teaches new players game mechanics while maintaining our ultra-minimal code approach.
Current State
- Players must discover mechanics through experimentation
- No explanation of:
- Gem collection mechanics
- Upgrade progression
- Rarity system
- Particle effects
- New players might miss key features
Proposed Solution
Following our optimization principles:
// Minimal tutorial state integration
const T={
s:[
{t:'Click anywhere to mine gems!',p:{x:0.5,y:0.7}},
{t:'Buy upgrades to boost production',p:{x:0.2,y:0.3}},
{t:'Collect rare gems for bonuses',p:{x:0.8,y:0.5}}
],
a:0 // active step
}Implementation Details
- Add minimalist tutorial overlay
- Progressive instruction reveal
- Context-sensitive hints
- Skip option for experienced players
- Remember completion state
Acceptance Criteria
- New players understand basic mechanics within 30 seconds
- Tutorial can be disabled/skipped
- Tips appear at appropriate game stages
- Tutorial state persists across sessions
- Implementation maintains code minimalism
- No impact on game performance
Technical Notes
- Integrate with existing state system
- Use minimal DOM elements
- Consider using CSS transitions for smooth hints
- Keep text concise and clear
Optimization Goals
- Tutorial system under 40 lines total
- No external tutorial libraries
- Reuse existing UI components
- Maintain current performance metrics
- No additional assets required
User Experience Considerations
- When should hints appear?
- How to handle mobile vs desktop tutorials?
- Balance between guidance and discovery
- Keep tutorial text ultra-concise
Questions to Consider
- Should tutorial be progressive or available on-demand?
- How to handle new features added later?
- Should tutorial progress affect game mechanics?