Katas ((link)) Here
return ( <div className="dojo"> <h2>kata.name</h2> <p>kata.instructions</p> <textarea value=userCode onChange=(e) => setUserCode(e.target.value) /> <button onClick=runTests>Execute Kata</button> result && <div className="result">result</div> </div> ); ; Tracks repetitions and proficiency.
return ( <div> <h4>Mastery path</h4> <div className="progress-bar" style= width: $masteryLevel% /> <p>history.length / 10 repetitions to black belt</p> </div> ); ; | Feature | Description | |--------|-------------| | Kata of the Day | Random recommended kata based on user level. | | Timed mode | Complete within X minutes to earn "speed belt". | | Compare replay | For movement katas: overlay user webcam vs sensei. | | Community variants | Users can fork a kata and change constraints. | | Streak counter | Daily kata completion streak. | 🗄️ Data Model (Simplified) interface Kata "blue" interface UserKataProgress userId: string; kataId: string; attempts: number; lastCompleted: Date; bestTimeMs?: number; masteryLevel: number; // 0-100 return ( <div className="dojo"> <h2>kata
const KataCard = ( kata, onSelect ) => ( <div className="kata-card" onClick=() => onSelect(kata.id)> <h3>kata.name</h3> <span className=`difficulty $kata.difficulty`>kata.difficulty</span> <p>kata.description.slice(0, 80)...</p> <div className="stats"> <span>✅ kata.completions</span> <span>⭐ kata.averageRating</span> </div> </div> ); Where the user actually performs the kata. | | Compare replay | For movement katas: