https://www.earonman.com/_next/static/chunks/30719-424369c1d6eecaab.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[30719],{30719:(e,t,r)=>{r.r(t),r.d(t,{default:()=>S});var l=r(95155),n=r(12115),a=r(43226),s=r(11536),c=r(35462),i=r(89227),o=r(73616),u=r(56114);let d=e=>{let{notes:t,showScale:r=!0,explicitNoteNames:a}=e,s=(0,n.useRef)(null),c=(0,n.useRef)(null),[i,o]=(0,n.useState)(400),d=(0,n.useCallback)(e=>{let t=Math.floor(e/12)-1;return"".concat(["c","c#","d","d#","e","f","f#","g","g#","a","a#","b"][e%12],"/").concat(t)},[]),m=(0,n.useCallback)((e,t,r)=>{t.includes("##")?e.addModifier(new u.Accidental("##"),r):t.length>2&&t.endsWith("bb")?e.addModifier(new u.Accidental("bb"),r):t.includes("#")?e.addModifier(new u.Accidental("#"),r):t.length>1&&t.endsWith("b")&&e.addModifier(new u.Accidental("b"),r)},[]);return(0,n.useEffect)(()=>{let e=()=>{c.current&&o(Math.max(280,Math.min(c.current.clientWidth,500)))};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),(0,n.useEffect)(()=>{if(!s.current)return;let e=s.current;e.innerHTML="";let l=new u.Renderer(e,u.Renderer.Backends.SVG);l.resize(i,150);let n=l.getContext();n.setFillStyle("black"),n.setStrokeStyle("black");let c=t.filter(e=>void 0!==e);if(0===c.length){new u.Stave(10,40,i-20).addClef("treble").setContext(n).draw();return}let o=c.map(e=>({...e,midi:e.midi})),x=60>Math.min(...o.map(e=>e.midi))?"bass":"treble",h=new u.Stave(20,40,i-40);h.addClef(x).setContext(n).draw();let f=[],p=[];if(!r&&o.length>0){let e=o[0],t=(null==a?void 0:a[0])||d(e.midi),r=new u.StaveNote({clef:x,keys:[t],duration:"q"});m(r,t.split("/")[0],0),f=[r]}else r&&o.length>0&&(f=o.slice(0,8).map((e,t)=>{let r=(null==a?void 0:a[t])||d(e.midi),l=new u.StaveNote({clef:x,keys:[r],duration:"8"});return m(l,r.split("/")[0],0),l})).length>1&&(p=u.Beam.generateBeams(f,{groups:[new u.Fraction(4,8)]}));f.length>0&&(u.Formatter.FormatAndDraw(n,h,f),r&&p.length>0&&p.forEach(e=>{e.setContext(n).draw()}))},[t,r,a,d,m,i]),(0,l.jsx)("div",{ref:c,className:"flex justify-center items-center h-[180px] w-full",children:(0,l.jsx)("div",{ref:s,className:"bg-white rounded-lg overflow-hidden",style:{width:"".concat(i,"px"),height:"150px",maxWidth:"100%"}})})};var m=r(9756),x=r(86877),h=r(89555),f=r(51569),p=r(75556),g=r(81798),v=r(92068),w=r(8367),b=r(19966),y=r(68174),j=r(13374),N=r(21567);let S=e=>{let{settings:t,onBackToSettings:r,hideBackButton:u=!1,hideKeyboardHints:S=!1,onAnswerResult:k,shouldAutoAdvance:C}

1=e,[M,A]=(0,n.useState)([]),[R,E]=(0,n.useState)([]),[L,D]=(0,n.useState)(!1),[T,J]=(0,n.useState)(null),[z,B]=(0,n.useState)(null),[F,I]=(0,n.useState)(!1),[P,$]=(0,n.useState)(!1),[_,q]=(0,n.useState)(null),[H,W]=(0,n.useState)(null),[G,V]=(0,n.useState)(null),[O,Q]=(0,n.useState)(!1),[K,U]=(0,n.useState)(!1),[X,Y]=(0,n.useState)(!1),[Z,ee]=(0,n.useState)([]),et=(0,n.useRef)(null),er=(0,n.useRef)(null),el=(0,n.useRef)(null),en=(0,n.useRef)(!1),ea=(0,n.useRef)(null),es=(0,n.useMemo)(()=>(0,h.qH)(t.selectedScales),[t.selectedScales]),ec=(0,n.useMemo)(()=>es.map(e=>{var t,r;return{name:e,displayName:null!==(r=null!==(t=v.dJ[e])&&void 0!==t?t:h.gl[e])&&void 0!==r?r:e}}),[es]),ei=(0,n.useCallback)((e,t)=>{var r,l;if(!t)return"";let n=null!==(l=null!==(r=v.dJ[t])&&void 0!==r?r:h.gl[t])&&void 0!==l?l:t;return e?"".concat(e," ").concat(n):n},[]);(0,n.useEffect)(()=>()=>{el.current&&clearTimeout(el.current),i.JD.stopAllSounds(),ea.current&&clearTimeout(ea.current)},[]),(0,n.useEffect)(()=>((async()=>{try{await i.JD.waitForLoad(),et.current=new p.Howl({src:["/sounds/correct.mp3"],volume:.2,html5:!1}),er.current=new p.Howl({src:["/sounds/wrong.mp3"],volume:.2,html5:!1}),I(!0)}catch(e){}})(),()=>{i.JD.stopAllSounds(),et.current&&et.current.unload(),er.current&&er.current.unload()}),[]);let eo=(0,n.useCallback)((e,t,r)=>{let l,n;if("boolean"==typeof t?(l=void 0,n=t):(l=t,n=null!=r&&r),F&&0!==e.length&&(n||!en.current))try{en.current=!0,$(!0);let t=e.map(e=>g.L7.midi(e)).filter(e=>null!==e);t.length!==e.length&&console.error("Some notes could not be converted to MIDI:",e),i.JD.playExerciseSequence(e,!1,250),A(t),E(null!=l?l:e),D(!1),Q(!1),el.current&&clearTimeout(el.current),el.current=setTimeout(()=>{$(!1),en.current=!1},250*e.length+500)}catch(e){$(!1),en.current=!1}},[F]),eu=(0,n.useCallback)(async()=>{var e;let t;if(en.current){try{i.JD.stopAllSounds()}catch(e){}en.current=!1,$(!1)}if(ea.current&&(clearTimeout(ea.current),ea.current=null),D(!1),q(null),W(null),V(null),U(!1),Y(!1),!es||0===es.length)return;let r=es[Math.floor(Math.random()*es.length)],l=g.L7.midi("C3"),n=Math.floor(Math.random()*(g.L7.midi("C4")-l+1))+l,a=g.L7.fromMidi(n),s=parseInt((null==a?void 0:null===(e=a.match(/\d+$/))||void 0===e?void 0:e[0])||"4",10),c=(0,v.DJ)(a,r);if(0===c.length){console.error("Could not generate notes for scale type: ".concat(r," with root: ").concat(a)),q("Error generating scale. Please try again.");return}let o=r.replace(/_/g,"");try{t=(0,w.x)(a||"C4",o,s)}catch(e){console.warn("Notation generation failed for ".concat(r,", using playback notes"),e),t=c}J(r);let u=a?g.L7.pitchClass(a):null;B(null!=u?u:a),q(null),eo(c,t,!0)},[es,eo]),ed=(0,n.useCallback)(()=>{F&&!en.current&&0!==M.length&&eo(M.map(e=>g.L7.fromMidi(e)).filter(e=>!!e),!0)},[M,eo,F]);(0,f.B)({onSpacebar:ed,disabled:!F||P});let em=(0,n.useCallback)(()=>{U(!1),Y(!1),ea.current&&(clearTimeout(ea.current),ea.current=null),i.JD.stopAllSounds(),en.current=!1,$(!1),eu()},[eu]),ex=(0,n.useRef)(C);ex.current=C;let eh=(0,n.useCallback)(e=>{ea.current&&clearTimeout(ea.current),ea.current=setTimeout(()=>{(!ex.current||ex.current())&&em()},e)},[em]),ef=(0,n.useCallback)(e=>{var t,r;if(!T||O)return;Q(!0);let l=e===T;null==k||k({isCorrect:l,item:T,answer:e});let n=ei(z,T);q(l?"Correct!":"Not quite."),W(l?"correct":"wrong"),V(n),D(!0),U(!0),Y(!l),ee(t=>{var r,a;let s=[...t,{id:"".concat(Date.now(),"-").concat(Math.random().toString(36).slice(2,8)),label:null!==(a=null!==(r=v.dJ[e])&&void 0!==r?r:h.gl[e])&&void 0!==a?a:e,correctLabel:l?void 0:n,result:l?"correct":"wrong"}];return s.length>10?s.slice(-10):s}),l?((0,b.Ac)(),null===(t=et.current)||void 0===t||t.play(),(0,o.ly)()?eh(1200):Y(!0)):((0,b.Rm)(),null===(r=er.current)||void 0===r||r.play())},[T,z,ei,O,eh]),ep=(0,n.useCallback)(()=>{var e;if(!T||O)return;Q(!0),(0,b.Rm)(),null===(e=er.current)||void 0===e||e.play();let t=ei(z,T);q("Revealed"),W("wrong"),V(t),D(!0),U(!0),Y(!0),ee(e=>{let r=[...e,{id:"".concat(Date.now(),"-").concat(Math.random().toString(36).slice(2,8)),label:"Revealed",correctLabel:t,result:"wrong"}];return r.length>10?r.slice(-10):r})},[T,z,ei,O,k]);(0,n.useEffect)(()=>

1{if(!K)return;let e=e=>{"Enter"===e.key&&(e.preventDefault(),em())};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[K,em]),(0,n.useEffect)(()=>{F&&es.length>0&&!T&&eu()},[F,es,eu,T]);let eg=M.map(e=>({midi:e,duration:"8"})),ev=R.map(e=>{let t=e.match(/^([A-Ga-g][#b]*)(\d+)$/);if(!t)return"c/4";let[,r,l]=t;return"".concat(r.toLowerCase(),"/").concat(l)});return F?(0,l.jsxs)("div",{className:"relative w-full px-2 sm:px-6",children:[(0,l.jsxs)("div",{className:"mx-auto flex w-full max-w-xl flex-col gap-4 sm:gap-6",children:[(0,l.jsx)("div",{className:"h-[180px]",children:F&&M.length>0?(0,l.jsx)(d,{notes:eg,showScale:L,explicitNoteNames:ev}):(0,l.jsx)("div",{className:"flex h-full items-center justify-center text-sm text-muted-foreground",children:F?"Preparing the next scale…":"Initializing audio…"})}),(0,l.jsx)(x.A,{items:Z,placeholder:"Answer history will appear here once you start guessing"}),(0,l.jsx)("div",{className:"flex min-h-[44px] sm:min-h-[60px] flex-col items-center justify-center text-center","aria-live":"polite",children:_?(0,l.jsxs)("div",{className:(0,N.cn)("flex flex-col items-center gap-0.5 sm:gap-1","correct"===H?"text-primary":"text-destructive"),children:[(0,l.jsx)("div",{className:"text-base sm:text-lg font-semibold",children:_}),G&&(0,l.jsxs)("div",{className:"text-sm text-muted-foreground",children:["wrong"===H?"Correct answer:":"Answer:"," ",G]})]}):(0,l.jsx)("div",{className:"text-center text-xs uppercase tracking-[0.3em] text-muted-foreground/70",children:"Lock in the scale flavor to reveal feedback"})}),(0,l.jsx)(m.A,{scaleOptions:ec,handleAnswer:ef,disabled:!F||O||0===ec.length}),(0,l.jsxs)("div",{children:[(0,l.jsxs)("div",{className:"flex flex-wrap justify-center gap-2 sm:gap-4",children:[(0,l.jsxs)(a.$,{onClick:ed,variant:"secondary",className:"flex items-center gap-1.5 sm:gap-2 h-9 sm:h-10 px-3 sm:px-4",disabled:!F||!T||P,"aria-label":(0,c.M6)().listenAgain,children:[(0,l.jsx)(s.Swo,{className:"text-xs sm:text-sm"})," Repeat"]}),(0,l.jsxs)(a.$,{onClick:ep,variant:"secondary",className:"flex items-center gap-1.5 sm:gap-2 h-9 sm:h-10 px-3 sm:px-4",disabled:!F||!T||O,"aria-label":(0,c.M6)().reveal,children:[(0,l.jsx)(s.Ny1,{className:"text-xs sm:text-sm"})," Reveal Answer"]}),!u&&(0,l.jsxs)(a.$,{onClick:r,variant:"secondary",className:"hidden sm:flex items-center gap-2","aria-label":(0,c.M6)().back,children:[(0,l.jsx)(s.QVr,{className:"text-sm"})," Back to Settings"]})]}),(0,l.jsx)("div",{className:"mt-3 flex justify-center",children:(0,l.jsx)(j.A,{})}),!S&&(0,l.jsxs)("div",{className:"hidden sm:block mt-4 text-center text-xs text-muted-foreground",children:["Press ",(0,l.jsx)("kbd",{className:"rounded bg-muted px-2 py-1",children:"Space"})," to repeat •",(0,l.jsx)("span",{className:"mx-1"}),"Press ",(0,l.jsx)("kbd",{className:"rounded bg-muted px-2 py-1",children:"Enter"})," for the next prompt"]})]})]}),(0,l.jsx)(y.A,{open:K&&X,title:"correct"===H?"Correct!":"Revealed"===_?"Answer: ".concat(null!=G?G:""):G?"Correct answer: ".concat(G):void 0,message:"correct"===H?"Take a moment to absorb. Tap Next when you're ready.":"Revealed"===_?"Listen again or move to the next scale.":"Listen again, or continue when you are ready.",variant:"correct"===H?"correct":"wrong"===H?"wrong":"neutral",onRepeat:ed,onNext:em,withinParent:!0})]}):(0,l.jsx)("div",{className:"flex items-center justify-center min-h-[400px]",children:(0,l.jsxs)("div",{className:"flex flex-col items-center space-y-4",children:[(0,l.jsx)("div",{className:"w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"}),(0,l.jsx)("div",{className:"text-lg font-medium text-muted-foreground",children:"Initializing audio..."})]})})}}}]);