https://www.earonman.com/_next/static/chunks/20628-e1c8ca16313f8f73.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[20628],{20628:(e,r,t)=>{t.r(r),t.d(r,{HybridLabExercise:()=>N,default:()=>w});var s=t(95155),a=t(12115),d=t(25683),n=t(2178),l=t(11536),o=t(86835),i=t(85047),c=t(98867),x=t(16972),b=t(87364),m=t(43226),g=t(31523),h=t(51569),u=t(86877),k=t(21567),f=t(48780),p=t(85216),j=t(69934);let v=["b2","2","b3","3","4","b5","5","b6","6","b7","7"],y={b2:{default:"border-rose-300 dark:border-rose-700 bg-rose-50 dark:bg-rose-950/40 text-rose-700 dark:text-rose-300",hover:"hover:border-rose-400 hover:bg-rose-100 dark:hover:bg-rose-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},7:{default:"border-rose-300 dark:border-rose-700 bg-rose-50 dark:bg-rose-950/40 text-rose-700 dark:text-rose-300",hover:"hover:border-rose-400 hover:bg-rose-100 dark:hover:bg-rose-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},2:{default:"border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300",hover:"hover:border-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},b7:{default:"border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300",hover:"hover:border-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},b3:{default:"border-sky-300 dark:border-sky-700 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300",hover:"hover:border-sky-400 hover:bg-sky-100 dark:hover:bg-sky-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},6:{default:"border-sky-300 dark:border-sky-700 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300",hover:"hover:border-sky-400 hover:bg-sky-100 dark:hover:bg-sky-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},3:{default:"border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300",hover:"hover:border-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},b6:{default:"border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300",hover:"hover:border-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},4:{default:"border-violet-300 dark:border-violet-700 bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300",hover:"hover:border-violet-400 hover:bg-violet-100 dark:hover:bg-violet-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},5:{default:"border-violet-300 dark:border-violet-700 bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300",hover:"hover:border-violet-400 hover:bg-violet-100 dar

1k:hover:bg-violet-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},b5:{default:"border-fuchsia-300 dark:border-fuchsia-700 bg-fuchsia-50 dark:bg-fuchsia-950/40 text-fuchsia-700 dark:text-fuchsia-300",hover:"hover:border-fuchsia-400 hover:bg-fuchsia-100 dark:hover:bg-fuchsia-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"}},N=e=>{let{onBack:r,levelId:t,levelName:N,levelDescription:w,onComplete:C,onAnswer:M,attemptsAllowed:S=20,requiredCorrect:D=15,levelDegrees:A,levelTriadType:z,isGameOver:E,hideKeyboardHints:H=!1,initialEnabledDegrees:T}=e,{soundManager:L,isInitialized:q}=(0,g.q)(),$=a.useMemo(()=>{if(Array.isArray(A))return A;if("string"==typeof A)try{let e=JSON.parse(A);if(Array.isArray(e))return e}catch(e){}},[A]),[P,B]=(0,a.useState)(null),[F,O]=(0,a.useState)(null),[W,Q]=(0,a.useState)(!1),[_,I]=(0,a.useState)(null),[V,Y]=(0,a.useState)(!1),[G,J]=(0,a.useState)(!1),[K,R]=(0,a.useState)(!1),[U,X]=(0,a.useState)(()=>void 0===t),[Z,ee]=(0,a.useState)(()=>new Set(T&&T.length>0?T:["b3","3"])),[er,et]=(0,a.useState)(()=>new Set(["major","minor"])),es=(0,a.useCallback)(e=>{ee(r=>{let t=new Set(r);if(t.has(e)){if(t.size<=1)return r;t.delete(e)}else t.add(e);return t})},[]),ea=(0,a.useCallback)(e=>{et(r=>{let t=new Set(r);if(t.has(e)){if(t.size<=1)return r;t.delete(e)}else t.add(e);return t})},[]);(0,a.useEffect)(()=>{if(!(window.innerWidth<640))return;let e=document.body.style.overflow,r=document.documentElement.style.overflow;return document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden",()=>{document.body.style.overflow=e,document.documentElement.style.overflow=r}},[]);let[ed,en]=(0,a.useState)(0),[el,eo]=(0,a.useState)(0),[ei,ec]=(0,a.useState)(0),[ex,eb]=(0,a.useState)(0),[em,eg]=(0,a.useState)([]),eh=(0,a.useCallback)((e,r)=>{let t=j.t$.indexOf(e);return -1===t?e:j.t$[(t+r+12)%12]},[]),eu=(0,a.useCallback)(e=>{let r,s;let a=t?z?[z]:["major","minor"]:Array.from(er),d=a[Math.floor(Math.random()*a.length)],n="major"===d?j.VH:j.fg,l=j.t$[Math.floor(Math.random()*j.t$.length)],o=n;$&&$.length>0?o=n.filter(e=>$.includes(e.degree)):t||(o=n.filter(e=>Z.has(e.degree))),0===o.length&&(o=n);let i=0;do r=o[Math.floor(Math.random()*o.length)],s="".concat(l,"-").concat(r.degree,"-").concat(d),i++;while(s===e&&i<20);let{bassOctave:c,triadOctave:x}=f.qy,b=j.t$.indexOf(l),m=eh(r.triadRoot,b),g="".concat(l).concat(c),h=(0,p.NQ)(m,d,x),u="minor"===d?"m":"",k="".concat(m).concat(u,"/").concat(l);return{analysis:r,quality:d,bassNoteName:l,bassNote:g,triadRoot:m,notes:[g,...h],notation:k}},[eh,$,t,z,Z,er]);(0,a.useEffect)(()=>{q&&!P&&B(eu())},[q,P,eu]);let ek=(0,a.useCallback)(async()=>{if(P&&L&&!V){Y(!0);try{let e=(0,p.Qg)(P.notes);if(G){let r=(0,p.Vx)(e);L.playExerciseSequence(r,!1,200),setTimeout(()=>Y(!1),200*r.length+300)}else L.playExerciseSequence(e,!0),setTimeout(()=>Y(!1),500)}catch(e){console.error("Error playing chord:",e),Y(!1)}}},[P,L,V,G]);(0,a.useEffect)(()=>{if(P&&q&&!W&&!E){let e=setTimeout(()=>ek(),500);return()=>clearTimeout(e)}},[null==P?void 0:P.notation,q,E]);let ef=(0,a.useCallback)(e=>{if(W||!P||E)return;O(e);let r=e===P.analysis.degree;I(r),Q(!0);let s=ed+1,a=r?el+1:el;en(s),eg(t=>[...t.slice(-19),{id:"".concat(Date.now()),label:j.xz[e],correctLabel:j.xz[P.analysis.degree],result:r?"correct":"wrong"}]),r?(eo(a),ec(e=>{let r=e+1;return r>ex&&eb(r),r})):ec(0),null==M||M(r,s,a,String(j.xz[P.analysis.degree])),t&&(a>=D?setTimeout(()=>null==C?void 0:C({correct:a,total:s}),1500):s>=S&&setTimeout(()=>null==C?void 0:C({correct:a,total:s}),1500))},[W,P,ex,ed,el,t,M,C,D,S]),ep=(0,a.useCallback)(()=>{let e=P?"".concat(P.bassNoteName,"-").concat(P.analysis.degree,"-").concat(P.quality):void 0;O(null),Q(!1),I(null),B(eu(e))},[eu,P]);(0,h.B)({onSpacebar:W?ep:ek,disabled:V||!!E});let ej=t?"":Array.from(Z).sort().join(","),ev=t?"":Array.from(er).sort().join(",");return((0,a.useEffect)(()=>{!t&&q&&(O(null),Q(!1),I(null),B(eu()))},[ej,ev]),q)?(0,s.jsxs)("div",{className:"w-full max-w-4xl mx-auto px-3 sm:px-6 pt-2 sm:pt-0 pb-[calc(60px+env(safe-area-inset-bottom))] sm:pb-6 h-[100dvh] sm:h-auto overflow-hidden sm:overflow-visible flex flex-col",children:[!t&&(0,s.jsxs)("div",{className:"text-center mb-4 sm:mb-6",children:[(0,s.jsxs)("div",{className:"flex items-center justify-center gap-2",children:[(0,s.jsx)("h1",{className:"text-xl sm:text-2xl font-bold ear-title",children:"Hybrid Lab"}),(0,s.jsx)("button",{onClick:()=>R(!K),className:"p-1.5 rounded-full hover:bg-muted/50 transition-colors md:hidden","aria-label":"Help",children:(0,s.jsx)(o.A,{className:"w-5 h-5 text-muted-foreground"})})]}),(0,s.jsx)("p",{className:"text-xs sm:text-sm text-muted-foreground mt-1",children:"Identify the scale degree of the triad"})]}),t&&(0,s.jsx)("div",{className:"flex justify-end mb-2 md:hidden",children:(0,s.jsx)("button",{onClick:()=>R(!K),className:"p-1.5 rounded-full hover:bg-muted/50 transition-colors","aria-label":"Help",children:(0,s.jsx)(o.A,{className:"w-5 h-5 text-muted-foreground"})})}),(0,s.jsx)(d.N,{children:K&&(0,s.jsx)(n.P.div,{initial:{opacity:0,height:0}

1,animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"overflow-hidden mb-4 md:hidden max-h-[35vh] overflow-y-auto",children:(0,s.jsxs)("div",{className:"rounded-xl p-4 border border-border/60 bg-muted/30",children:[(0,s.jsx)("h4",{className:"font-semibold text-foreground mb-2",children:"What is Hybrid Lab?"}),(0,s.jsxs)("p",{className:"text-sm text-muted-foreground mb-3",children:["In this exercise, you'll hear triads placed over a bass note. Your task is to identify the",(0,s.jsx)("strong",{children:" scale degree"})," of the triad root relative to the bass."]}),(0,s.jsxs)("p",{className:"text-sm text-muted-foreground mb-4",children:["The display shows you the bass note and whether it's a ",(0,s.jsx)("strong",{children:"Major"})," or ",(0,s.jsx)("strong",{children:"Minor"})," triad. This creates rich, colorful harmonies used in jazz, film scoring, and modern pop. For example:"]}),(0,s.jsxs)("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-2 text-sm",children:[(0,s.jsxs)("div",{className:"rounded-lg p-2 bg-background/60 border border-border/40 text-center",children:[(0,s.jsx)("div",{className:"font-bold text-foreground",children:"D/C"}),(0,s.jsx)("div",{className:"text-xs text-muted-foreground",children:"= D7 (Lydian)"})]}),(0,s.jsxs)("div",{className:"rounded-lg p-2 bg-background/60 border border-border/40 text-center",children:[(0,s.jsx)("div",{className:"font-bold text-foreground",children:"G/C"}),(0,s.jsx)("div",{className:"text-xs text-muted-foreground",children:"= CM9"})]}),(0,s.jsxs)("div",{className:"rounded-lg p-2 bg-background/60 border border-border/40 text-center",children:[(0,s.jsx)("div",{className:"font-bold text-foreground",children:"Eb/C"}),(0,s.jsx)("div",{className:"text-xs text-muted-foreground",children:"= Cm7"})]}),(0,s.jsxs)("div",{className:"rounded-lg p-2 bg-background/60 border border-border/40 text-center",children:[(0,s.jsx)("div",{className:"font-bold text-foreground",children:"E/C"}),(0,s.jsx)("div",{className:"text-xs text-muted-foreground",children:"= CM7#5"})]})]})]})})}),(0,s.jsxs)("details",{className:"hidden md:block rounded-2xl border border-slate-200 dark:border-border bg-slate-50 dark:bg-card group mb-6",children:[(0,s.jsxs)("summary",{className:"p-4 cursor-pointer text-sm font-medium text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-100 transition-colors list-none flex items-center justify-between",children:[(0,s.jsxs)("span",{className:"flex items-center gap-2",children:[(0,s.jsx)("span",{className:"text-lg",children:"\uD83D\uDCD6"}),"How Hybrid Lab Works"]}),(0,s.jsx)("span",{className:"text-xs text-slate-500 group-open:hidden",children:"Click to expand"}),(0,s.jsx)("span",{className:"text-xs text-slate-500 hidden group-open:inline",children:"Click to collapse"})]}),(0,s.jsxs)("div",{className:"px-4 pb-4 space-y-4 text-sm text-slate-600 dark:text-slate-400",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83C\uDFAF What You'll Learn"}),(0,s.jsxs)("p",{children:["Train your ear to recognize ",(0,s.jsx)("strong",{children:"triads over bass notes"})," (hybrid voicings). You'll hear a triad played above a bass note and identify the scale degree of the triad root."]})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83C\uDFB9 Common Hybrid Voicings"}),(0,s.jsxs)("ul",{className:"list-disc list-inside space-y-1 ml-1",children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"D/C"})," — Major triad a 2nd above = Lydian dominant sound"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"G/C"})," — Major triad a 5th above = Major 9 chord"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Eb/C"})," — Minor 3rd above = Minor 7 chord"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"E/C"})," — Major 3rd above = Major 7#5 chord"]})]})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83D\uDD0A How to Listen"}),(0,s.jsxs)("ol",{className:"list-decimal list-inside space-y-1 ml-1",children:[(0,s.jsxs)("li",{children:["The ",(0,s.jsx)("strong",{children:"bass 

1note"})," is given — focus on it as your reference"]}),(0,s.jsxs)("li",{children:["Listen to the ",(0,s.jsx)("strong",{children:"triad quality"})," (Major or Minor) — it's shown on screen"]}),(0,s.jsxs)("li",{children:["Identify the ",(0,s.jsx)("strong",{children:"interval"})," between bass and triad root"]})]})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83D\uDCA1 Tips"}),(0,s.jsxs)("ul",{className:"list-disc list-inside space-y-1 ml-1",children:[(0,s.jsxs)("li",{children:["Color-coded buttons group intervals by ",(0,s.jsx)("strong",{children:"consonance/dissonance"})]}),(0,s.jsxs)("li",{children:["Start with ",(0,s.jsx)("strong",{children:"perfect intervals"})," (4th, 5th) — they're easiest to hear"]}),(0,s.jsxs)("li",{children:["Minor 2nd (♭2) and Major 7th (7) create the most ",(0,s.jsx)("strong",{children:"tension"})]})]})]})]})]}),!t&&(0,s.jsxs)("div",{className:"mb-3 sm:mb-6",children:[(0,s.jsxs)("button",{onClick:()=>X(e=>!e),className:"flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mx-auto mb-2",children:[(0,s.jsx)(i.A,{className:"w-4 h-4"}),(0,s.jsx)("span",{children:U?"Hide Settings":"Settings"})]}),(0,s.jsx)(d.N,{children:U&&(0,s.jsx)(n.P.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"overflow-hidden",children:(0,s.jsxs)("div",{className:"rounded-xl border border-border/60 bg-muted/30 p-4 space-y-4",children:[(0,s.jsx)("p",{className:"text-xs text-muted-foreground border-l-2 border-violet-400 pl-3",children:"Pick 2–3 degrees to compare at a time. Add more once you can reliably tell them apart."}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-foreground text-sm mb-2",children:"Triad Quality"}),(0,s.jsx)("div",{className:"flex gap-2",children:["major","minor"].map(e=>{let r=er.has(e);return(0,s.jsxs)("button",{onClick:()=>ea(e),className:(0,k.cn)("flex-1 px-3 py-2 rounded-lg border text-sm font-medium transition-all flex items-center justify-center gap-1.5",r?"major"===e?"border-amber-500 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300":"border-sky-500 bg-sky-100 dark:bg-sky-900/50 text-sky-700 dark:text-sky-300":"border-border bg-background text-muted-foreground hover:bg-muted"),children:[r&&(0,s.jsx)(c.A,{className:"w-3.5 h-3.5"}),"major"===e?"Major":"Minor"]},e)})})]}),(0,s.jsxs)("div",{children:[(0,s.jsxs)("div",{className:"flex items-center justify-between mb-2",children:[(0,s.jsxs)("h4",{className:"font-semibold text-foreground text-sm",children:["Degrees (",Z.size,"/",v.length,")"]}),(0,s.jsx)("div",{className:"flex gap-2 text-xs",children:(0,s.jsx)("button",{onClick:()=>ee(new Set(v)),className:"text-violet-500 hover:text-violet-400 transition-colors",children:"All"})})]}),(0,s.jsx)("div",{className:"flex flex-wrap gap-1.5",children:v.map(e=>{let r=Z.has(e),t=y[e];return(0,s.jsxs)("button",{onClick:()=>es(e),className:(0,k.cn)("px-2.5 py-1.5 rounded-lg border text-sm font-semibold transition-all flex items-center gap-1",r?"".concat(t.default):"border-border bg-background text-muted-foreground/50 hover:bg-muted"),children:[r&&(0,s.jsx)(c.A,{className:"w-3 h-3"}),j.xz[e]]},e)})})]})]})})})]}),(0,s.jsx)("div",{className:"flex flex-wrap items-center justify-center gap-2 sm:gap-4 mb-3 sm:mb-6",children:(0,s.jsxs)("div",{className:"flex items-center gap-2 sm:gap-4 text-xs sm:text-sm",children:[(0,s.jsxs)("div",{className:"text-center px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-xl bg-green-100 dark:bg-green-950/50 border border-green-300 dark:border-green-700",children:[(0,s.jsx)("span",{className:"font-bold text-green-700 dark:text-green-300 tabular-nums",children:el}),(0,s.jsx)("span",{className:"text-green-600/60 dark:text-green-400/60 mx-1",children:"/"}),(0,s.jsx)("span",{className:"text-green-600 dark:text-green-400 tabular-nums",children:ed})]}),(0,s.jsxs)("div",{className:"flex items-center gap-1 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-xl bg-amber-100 dark:bg-amber-950/50 border border-amber-300 dark:border-amber-700",title:"Correct answers in a row",children:[(0,s.jsx)("span",{className:"text-sm",children:"\uD83D\uDD25"}),(0,s.jsx)("span",{className:"font-bold text-amber-700 dark:text-amber-300 tabular-nums",children:ei}),(0,s.jsx)("span",{className:"text-amber-600/70 dark:text-amber-400/70 text-[10px] sm:text-xs ml-0.5",children:"streak"})]})]})}),(0,s.jsxs)("div",{className:"rounded-xl sm:rounded-2xl border border-border/60 bg-background/80 shadow-sm p-4 sm:p-6 flex flex-col flex-1 min-h-0 relative pb-16 sm:pb-6",children:[(0,s.jsxs)("div",{className:"flex flex-wrap justify-center gap-2 sm:gap-3 mb-4",children:[(0,s.jsxs)("span",{className:"inline-block px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-slate-100 dar

1k:bg-card border border-slate-300 dark:border-border",children:[(0,s.jsx)("span",{className:"text-slate-500 dark:text-slate-400",children:"Bass: "}),(0,s.jsx)("span",{className:"font-bold text-slate-800 dark:text-slate-200 text-base sm:text-lg",children:(null==P?void 0:P.bassNoteName)||"..."})]}),(0,s.jsx)("span",{className:(0,k.cn)("inline-block px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl border",(null==P?void 0:P.quality)==="major"?"bg-amber-100 dark:bg-amber-900/50 border-amber-300 dark:border-amber-700":"bg-sky-100 dark:bg-sky-900/50 border-sky-300 dark:border-sky-700"),children:(0,s.jsx)("span",{className:(0,k.cn)("font-bold text-base sm:text-lg",(null==P?void 0:P.quality)==="major"?"text-amber-700 dark:text-amber-300":"text-sky-700 dark:text-sky-300"),children:(null==P?void 0:P.quality)==="major"?"Major":"Minor"})})]}),(0,s.jsxs)("div",{className:"grid grid-cols-3 gap-2 sm:flex sm:justify-center sm:gap-3 mb-5 sm:mb-6",children:[(0,s.jsxs)(m.$,{onClick:ek,disabled:V,size:"default",className:"gap-2 w-full sm:w-[88px] sm:h-11",children:[V?(0,s.jsx)("span",{className:"animate-pulse",children:"♪"}):(0,s.jsx)(l.gSK,{size:12}),(0,s.jsx)("span",{children:"Play"})]}),(0,s.jsxs)(m.$,{onClick:()=>J(e=>!e),variant:G?"default":"outline",size:"default",className:(0,k.cn)("gap-1.5 w-full sm:w-[110px] sm:h-11",G&&"bg-violet-600 hover:bg-violet-700"),title:G?"Melodic mode (notes one by one)":"Harmonic mode (all notes at once)",children:[(0,s.jsx)(x.A,{className:"w-4 h-4"}),(0,s.jsx)("span",{className:"text-xs",children:G?"Melodic":"Harmonic"})]}),(0,s.jsxs)(m.$,{onClick:ep,disabled:!W,size:"default",variant:"default",className:"gap-2 w-full sm:w-[88px] sm:h-11 bg-violet-600 hover:bg-violet-700 disabled:opacity-40",children:["Next",(0,s.jsx)("span",{className:"text-xs opacity-70",children:"⏎"})]})]}),(0,s.jsx)("div",{className:"text-center mb-5 sm:mb-6",children:(0,s.jsxs)("p",{className:"text-neutral-500 text-xs sm:text-sm",children:["What degree is the triad root from the bass?",!H&&(0,s.jsxs)(s.Fragment,{children:[" Press ",(0,s.jsx)("kbd",{className:"px-1.5 py-0.5 bg-muted rounded text-xs",children:"Space"})," to ",W?"continue":"replay","."]})]})}),(0,s.jsx)("div",{className:"grid grid-cols-4 gap-2 sm:flex sm:flex-wrap sm:justify-center mb-2 sm:mb-4",children:v.map(e=>{let r=F===e,a=(null==P?void 0:P.analysis.degree)===e,d=y[e],l=$&&$.length>0?!$.includes(e):!t&&!Z.has(e),o=d.default;return l?o="border-muted bg-muted/30 text-muted-foreground/50":W?a?o=d.correct:r&&!a&&(o=d.incorrect):o=r?"".concat(d.default," ring-2 ring-offset-1"):"".concat(d.default," ").concat(d.hover),(0,s.jsx)(n.P.button,{whileTap:{scale:.98},onClick:()=>ef(e),disabled:W||l,className:(0,k.cn)("relative w-full sm:w-auto px-2.5 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border-2 transition-all","font-semibold text-base sm:text-lg min-w-0 sm:min-w-[60px]",o,(W||l)&&"cursor-default"),children:(0,s.jsx)("div",{className:"text-base sm:text-xl font-bold",children:j.xz[e]})},e)})}),(0,s.jsx)("div",{className:"min-h-[56px] sm:min-h-[100px] flex items-start justify-center pt-1",children:(0,s.jsx)(d.N,{mode:"wait",children:W&&P&&(0,s.jsxs)(n.P.div,{initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},className:"text-center",children:[(0,s.jsx)("div",{className:"flex items-center justify-center gap-2 sm:gap-3 mb-3",children:_?(0,s.jsxs)("div",{className:"flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-green-100 dark:bg-green-950/50 border border-green-300 dark:border-green-700",children:[(0,s.jsx)(l.CMH,{className:"text-green-600 dark:text-green-400",size:16}),(0,s.jsx)("span",{className:"font-medium text-green-700 dark:text-green-300 text-sm sm:text-base",children:"Correct!"})]}):(0,s.jsxs)("div",{className:"flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-red-100 dark:bg-red-950/50 border border-red-300 dark:border-red-700",children:[(0,s.jsx)(l.QCr,{className:"text-red-600 dark:text-red-400",size:16}),(0,s.jsxs)("span",{className:"font-medium text-red-700 dark:text-red-300 text-sm sm:text-base",children:["Answer: ",(0,s.jsx)("span",{className:"font-bold",children:j.xz[P.analysis.degree]})]})]})}),(0,s.jsxs)("div",{className:"text-xs sm:text-sm px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-slate-100 dark:bg-card border border-slate-300 dark:border-border inline-block",children:[(0,s.jsx)("span",{className:"font-bold text-slate-800 dark:text-slate-200",children:P.notation}),(0,s.jsx)("span",{className:"text-slate-500 mx-2",children:"•"}),(0,s.jsxs)("span",{className:"text-slate-600 dark:text-slate-400",children:["Degree: ",j.xz[P.analysis.degree]]})]})]})})}),(0,s.jsx)("div",{className:"absolute left-3 right-3 bottom-3 sm:static sm:mt-6 sm:translate-y-0",children:(0,s.jsx)(u.A,{items:em,placeholder:"Answer history will appear here"})})]}),r&&(0,s.jsx)("div",{className:"hidden sm:flex justify-center gap-4 mt-8",children:(0,s.jsxs)(m.$,{onClick:r,variant:"secondary",className:"flex items-center gap-2",children:[(0,s.jsx)(b.A,{className:"h-4 w-4"})," ",t?"Back to Map":"Back to Practice"]})})]}):(0,s.jsx)("div",{className:"flex items-center justify-center min-h-[400px]",children:(0,s.jsxs)("div",{className:"text-center",children:[(0,s.jsx)("div",{className:"animate-spin h-8 w-8 border-2 border-violet-400 border-t-transparent rounded-full mx-auto mb-4"}),(0,s.jsx)("p",{className:"text-muted-foreground text-sm",children:"Loading audio..."})]})})},w=N},48780:(e,r,t)=>{t.d(r,{qy:()=>s});let s={bassOctave:2,triadOctave:3,spread:!1,playBassFirst:!0}}}]);