{"version":3,"sources":["TabGenerator/Tab.type.ts","Config/Config.provider.tsx","Button.tsx","TabGenerator/randomArrayItem.ts","Config/Config.page.tsx","TabGenerator/majorScales.ts","TabGenerator/notations.ts","TabGenerator/TabGenerator.page.tsx","index.tsx"],"names":["Note","notes","Object","keys","ConfigContext","createContext","ConfigProvider","children","useState","gradesFromStorage","localStorage","getItem","JSON","parse","grades","setGrades","A","key","setKey","random","setRandom","useEffect","setItem","stringify","Provider","value","updateGrade","id","grade","currentGrades","map","_grade","removeGrade","filter","createGrade","concat","uuid","updateKey","Button","kurasu","button","blueButtonClass","BlueButton","pinkButtonClass","randomArrayItem","array","Math","floor","length","KeySelect","config","useContext","className","onChange","event","newNote","target","note","onClick","RandomEnabled","type","checked","RandomAmount","e","Number","GradesForm","min","step","max","defaultValue","xmlns","fill","viewBox","stroke","stroke-linecap","stroke-linejoin","stroke-width","d","GradesPage","href","width","height","to","majorScales","Aflat","Bflat","C","Dflat","Eflat","F","G","B","D","E","Gflat","notations","fret","string","TabGeneratorPage","randomId","setRandomId","songLines","useMemo","randomAmount","finalGrades","range","chunk","index","randomNote","songKey","mapGradeToNote","beat","createTab","songLine","join","ReactDOM","render","StrictMode","path","exact","document","getElementById"],"mappings":"qKASYA,E,kEAAAA,K,cAAAA,E,MAAAA,E,cAAAA,E,MAAAA,E,MAAAA,E,cAAAA,E,MAAAA,E,cAAAA,E,MAAAA,E,MAAAA,E,cAAAA,E,OAAAA,M,KAeL,IAAMC,EAAQC,OAAOC,KAAKH,G,OCHpBI,EAAgBC,wBAAsB,IAItCC,EAAiB,SAAC,GAEsB,IADnDC,EACkD,EADlDA,SACkD,EACtBC,oBAAkB,WAC5C,IAAMC,EAAoBC,aAAaC,QAAQ,UAC/C,OAAOF,EAAoBG,KAAKC,MAAMJ,GAAqB,MAHX,mBAC3CK,EAD2C,KACnCC,EADmC,OAM5BP,mBAAeR,EAAKgB,GANQ,mBAM3CC,EAN2C,KAMtCC,EANsC,OAOtBV,mBAAyB,IAPH,mBAO3CW,EAP2C,KAOnCC,EAPmC,KASlDC,qBAAU,WACRX,aAAaY,QAAQ,SAAUV,KAAKW,UAAUT,EAAQ,KAAM,MAC3D,CAACA,IA8BJ,OACE,cAACV,EAAcoB,SAAf,CACEC,MAAO,CACLX,SACAY,YAhCc,SAACC,EAAYC,GAC/Bb,GAAU,SAACc,GACT,OAAOA,EAAcC,KAAI,SAACC,GACxB,OAAIA,EAAOJ,KAAOA,EACT,CACLC,QACAD,MAGGI,SAwBPC,YAXc,SAACL,GACnBZ,GAAU,SAACc,GACT,OAAOA,EAAcI,QAAO,SAACL,GAAD,OAAWA,EAAMD,KAAOA,SAUlDO,YApBc,WAClBnB,GAAU,SAACc,GACT,OAAOA,EAAcM,OAAO,CAC1BR,GAAIS,oBAkBJnB,MACAoB,UAAWnB,EACXC,SACAC,aATJ,SAYGb,K,sBC5EM+B,EAASC,IAAOC,OAF3B,+FAIWC,EACX,yFACWC,EAAaH,IAAOC,OAAOC,GAE3BE,EACX,yFCZWC,GDaaL,IAAOC,OAAOG,GCbT,SAAIE,GAG/B,OAAOA,EAFaC,KAAKC,MAAMD,KAAK3B,SAAW0B,EAAMG,WCUnDC,EAAY,WAChB,IAAMC,EAASC,qBAAW/C,GAE1B,OACE,sBAAKgD,UAAU,YAAf,UACE,wBACEA,UAAU,WACV3B,MAAOyB,EAAOjC,IACdoC,SAAU,SAACC,GACT,IAAMC,EAAUD,EAAME,OAAO/B,MAC7ByB,EAAOb,UAAUkB,IALrB,SAQGtD,EAAM6B,KAAI,SAAC2B,GAAD,OACT,wBAAQhC,MAAOgC,EAAf,SACGA,GADuBA,QAK9B,cAACnB,EAAD,CACEoB,QAAS,WACPR,EAAOb,UAAUO,EAAgB3C,KAFrC,+BAWA0D,EAAgB,WACpB,IAAMT,EAASC,qBAAW/C,GAC1B,OACE,wBAAOgD,UAAU,iGAAjB,UACE,uBACEQ,KAAK,WACLC,SAA2B,IAAlBX,EAAO/B,OAChBkC,SAAU,YACc,IAAlBH,EAAO/B,OACT+B,EAAO9B,UAAU,IAEjB8B,EAAO9B,WAAU,MAIvB,mDAKA0C,EAAe,WACnB,IAAMZ,EAASC,qBAAW/C,GAC1B,OACE,uBACEgD,UAAU,uEACVQ,KAAK,SACLnC,MAAOyB,EAAO/B,OACdkC,SAAU,SAACU,GACTb,EAAO9B,UAAU4C,OAAOD,EAAEP,OAAO/B,YAKnCwC,EAAa,WACjB,IAAMf,EAASC,qBAAW/C,GAE1B,OACE,sBAAKgD,UAAU,YAAf,UACE,qBAAKA,UAAU,0BAAf,SACGF,EAAOpC,OAAOgB,KAAI,YAAoB,IAAjBF,EAAgB,EAAhBA,MAAOD,EAAS,EAATA,GAC3B,OACE,sBAEEyB,UAAU,uEAFZ,UAIE,uBACEc,IAAK,EACLC,KAAM,EACNC,IAAK,GACLhB,UAAU,+CAEVQ,KAAK,SACLS,aAAczC,EACdyB,SAAU,SAACU,GAAD,OAAOb,EAAOxB,YAAYC,EAAIqC,OAAOD,EAAEP,OAAO/B,UAHnDE,GAKP,wBACEyB,UAAU,kBACVM,QAAS,WACPR,EAAOlB,YAAYL,IAHvB,SAME,qBACE2C,MAAM,6BACNlB,UAAU,uBACVmB,KAAK,OACLC,QAAQ,YACRC,OAAO,eALT,SAOE,sBACEC,iBAAe,QACfC,kBAAgB,QAChBC,eAAa,IACbC,EAAE,+BA9BHlD,QAsCb,cAACW,EAAD,CACEoB,QAAS,WACPR,EAAOhB,eAFX,SAKE,qBACEoC,MAAM,6BACNlB,UAAU,UACVmB,KAAK,OACLC,QAAQ,YACRC,OAAO,eALT,SAOE,sBACEC,iBAAe,QACfC,kBAAgB,QAChBC,eAAa,IACbC,EAAE,uCAQDC,EAAa,WACxB,IAAM5B,EAASC,qBAAW/C,GAC1B,OACE,qCACE,sBAAKgD,UAAU,cAAf,UACE,0DACA,gIAKF,8BACE,oBACEI,OAAO,SACPuB,KAAK,4CACL3B,UAAWT,EAAkB,QAH/B,UAKE,qBACE2B,MAAM,6BACNU,MAAM,KACNC,OAAO,KACPT,QAAQ,YAJV,SAME,sBAAMK,EAAE,qjCAEV,sBAAMzB,UAAU,OAAhB,+BAGJ,qBAAKA,UAAU,cAAf,SACE,uHAKF,cAAC,EAAD,IACA,sBAAKA,UAAU,QAAf,UACE,mBAAGA,UAAU,QAAb,mIAIA,6KAKF,cAAC,EAAD,KACmB,IAAlBF,EAAO/B,OACN,sBAAKiC,UAAU,QAAf,UACE,mBAAGA,UAAU,QAAb,kKAKA,cAAC,EAAD,OAGF,sBAAKA,UAAU,QAAf,UACE,mBAAGA,UAAU,QAAb,6EAGA,cAAC,EAAD,OAGJ,qBAAKA,UAAU,QAAf,SACE,cAAC,IAAD,CAAM8B,GAAG,iBAAiB9B,UAAWX,EAAkB,QAAvD,gC,iBC9MK0C,EAET,CACAC,MAAO,CAACpF,EAAKoF,MAAOpF,EAAKqF,MAAOrF,EAAKsF,EAAGtF,EAAKuF,MAAOvF,EAAKwF,MAAOxF,EAAKyF,EAAGzF,EAAK0F,GAC7E1E,EAAG,CAAChB,EAAKgB,EAAGhB,EAAK2F,EAAG3F,EAAKuF,MAAOvF,EAAK4F,EAAG5F,EAAK6F,EAAG7F,EAAK8F,MAAO9F,EAAKoF,OACjEC,MAAO,CAACrF,EAAKqF,MAAOrF,EAAKsF,EAAGtF,EAAK4F,EAAG5F,EAAKwF,MAAOxF,EAAKyF,EAAGzF,EAAK0F,EAAG1F,EAAKgB,GACrE2E,EAAG,CAAC3F,EAAK2F,EAAG3F,EAAKuF,MAAOvF,EAAKwF,MAAOxF,EAAK6F,EAAG7F,EAAK8F,MAAO9F,EAAKoF,MAAOpF,EAAK2F,GACzEL,EAAG,CAACtF,EAAKsF,EAAGtF,EAAK4F,EAAG5F,EAAK6F,EAAG7F,EAAKyF,EAAGzF,EAAK0F,EAAG1F,EAAKgB,EAAGhB,EAAK2F,GACzDJ,MAAO,CAACvF,EAAKuF,MAAOvF,EAAKwF,MAAOxF,EAAKyF,EAAGzF,EAAK8F,MAAO9F,EAAKoF,MAAOpF,EAAKqF,MAAOrF,EAAKsF,GACjFM,EAAG,CAAC5F,EAAK4F,EAAG5F,EAAK6F,EAAG7F,EAAK8F,MAAO9F,EAAK0F,EAAG1F,EAAKgB,EAAGhB,EAAK2F,EAAG3F,EAAKuF,OAC7DC,MAAO,CAACxF,EAAKwF,MAAOxF,EAAKyF,EAAGzF,EAAK0F,EAAG1F,EAAKoF,MAAOpF,EAAKqF,MAAOrF,EAAKsF,EAAGtF,EAAK4F,GACzEC,EAAG,CAAC7F,EAAK6F,EAAG7F,EAAK8F,MAAO9F,EAAKoF,MAAOpF,EAAKgB,EAAGhB,EAAK2F,EAAG3F,EAAKuF,MAAOvF,EAAKwF,OACrEC,EAAG,CAACzF,EAAKyF,EAAGzF,EAAK0F,EAAG1F,EAAKgB,EAAGhB,EAAKqF,MAAOrF,EAAKsF,EAAGtF,EAAK4F,EAAG5F,EAAK6F,GAC7DC,MAAO,CAAC9F,EAAK8F,MAAO9F,EAAKoF,MAAOpF,EAAKqF,MAAOrF,EAAK2F,EAAG3F,EAAKuF,MAAOvF,EAAKwF,MAAOxF,EAAKyF,GACjFC,EAAG,CAAC1F,EAAK0F,EAAG1F,EAAKgB,EAAGhB,EAAK2F,EAAG3F,EAAKsF,EAAGtF,EAAK4F,EAAG5F,EAAK6F,EAAG7F,EAAK8F,QCfhDC,EAET,CACA/E,EAAG,CAAC,CAACgF,KAAM,EAAGC,OAAQ,GAAS,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,GAAIC,OAAQ,GAAI,CAACD,KAAM,EAAGC,OAAQ,IAC9IZ,MAAO,CAAC,CAACW,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,GAAIC,OAAQ,GAAI,CAACD,KAAM,EAAGC,OAAQ,IAC9IN,EAAG,CAAC,CAACK,KAAM,EAAGC,OAAQ,GAAS,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,IAC9IX,EAAG,CAAC,CAACU,KAAM,EAAGC,OAAQ,GAAS,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,GAAIC,OAAQ,GAAI,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,IAC9IV,MAAO,CAAC,CAACS,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,GAAIC,OAAQ,GAAI,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,IAC9IL,EAAG,CAAC,CAACI,KAAM,GAAIC,OAAQ,GAAQ,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,GAAIC,OAAQ,IAC/IT,MAAO,CAAC,CAACQ,KAAM,GAAIC,OAAQ,GAAI,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,GAAIC,OAAQ,IAC/IJ,EAAG,CAAC,CAACG,KAAM,EAAGC,OAAQ,GAAS,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,IAC9IR,EAAG,CAAC,CAACO,KAAM,EAAGC,OAAQ,GAAS,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,GAAIC,OAAQ,GAAI,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,IAC9IH,MAAO,CAAC,CAACE,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAM,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,GAAIC,OAAQ,GAAI,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,IAC9IP,EAAG,CAAC,CAACM,KAAM,EAAGC,OAAQ,GAAS,CAACD,KAAM,GAAIC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,IAC9Ib,MAAO,CAAC,CAACY,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,GAAIC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,GAAK,CAACD,KAAM,EAAGC,OAAQ,K,QCKrIC,EAAmB,WAC9B,IAAMhD,EAASC,qBAAW/C,GADU,EAGJI,mBAAS,GAHL,mBAG7B2F,EAH6B,KAGnBC,EAHmB,KAK9BC,EAAYC,mBAAQ,WACxB,IAT0BC,EASpBC,GACc,IAAlBtD,EAAO/B,OACH+B,EAAOpC,OAAOgB,KAAI,qBAAGF,UAXD2E,EAYCrD,EAAO/B,OAXpCsF,gBAAMF,GAAczE,KAAI,kBAAMgB,KAAKC,MAAsB,GAAhBD,KAAK3B,cA8B5C,OAlBoBuF,gBAClBF,EAAYvE,QAAO,SAACL,GAAD,MAA6C,kBAAVA,KACtD,IAGwBE,KAAI,SAAChB,GAC7B,OAAOA,EAAOgB,KAAI,SAACF,EAAO+E,GAAW,IAtBZC,EAsBW,GAtBXA,EAHR,SAACC,EAAejF,GAAhB,OACrBuD,EAAY0B,GAAS/D,KAAKC,MAAW,GAALnB,IA0BxBkF,CAAe5D,EAAOjC,IAAKW,GAvBnCgB,EAAgBmD,EAAUa,KAyBpB,MAAO,CACLG,KAAc,EAARJ,EAAY,EAClBX,KANgC,EAC1BA,KAMNC,OAPgC,EACpBA,cAWLnE,KAAI,SAAC7B,GAAD,OAAsC+G,IAAU/G,QAChE,CAACiD,EAAOjC,IAAKkF,IAEhB,OACE,sBAAK/C,UAAU,YAAf,UACE,sBAAKA,UAAU,iBAAf,UACE,eAAC,IAAD,CACE8B,GAAG,IACH9B,UACE,yFAHJ,UAME,qBACEkB,MAAM,6BACNlB,UAAU,UACVmB,KAAK,OACLC,QAAQ,YACRC,OAAO,eALT,SAOE,sBACEC,iBAAe,QACfC,kBAAgB,QAChBC,eAAa,IACbC,EAAE,sBAGN,sDAEF,eAACnC,EAAD,CACEU,UAAU,YACVM,QAAS,WACP0C,GAAY,SAACzE,GAAD,OAAQA,EAAK,MAH7B,UAME,qBACE2C,MAAM,6BACNlB,UAAU,UACVmB,KAAK,OACLC,QAAQ,YACRC,OAAO,eALT,SAOE,sBACEC,iBAAe,QACfC,kBAAgB,QAChBC,eAAa,IACbC,EAAE,kHAGN,qDAEF,sBAAKzB,UAAU,mCAAf,UACE,qBAAKA,UAAU,2DAAf,iBAGA,qBAAKA,UAAU,gBAAf,SAAgCF,EAAOjC,SAEzC,8BACE,oBACE8D,KAAK,4CACLvB,OAAO,SACPJ,UAAWT,EAAkB,QAH/B,UAKE,qBACE2B,MAAM,6BACNU,MAAM,KACNC,OAAO,KACPT,QAAQ,YAJV,SAME,sBAAMK,EAAE,qjCAEV,sBAAMzB,UAAU,OAAhB,6BAILiD,EAAUvE,KAAI,SAACmF,GAAD,OACb,8BAAMA,EAASC,KAAK,eCpH5BC,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,IAAD,UACE,cAAC,EAAD,UACE,qBAAKjE,UAAU,mCAAf,SACE,eAAC,IAAD,WACE,cAAC,IAAD,CAAOkE,KAAK,iBAAZ,SACE,cAAC,EAAD,MAEF,cAAC,IAAD,CAAOC,OAAK,EAACD,KAAK,IAAlB,SACE,cAAC,EAAD,iBAOZE,SAASC,eAAe,W","file":"static/js/main.ffe6f57e.chunk.js","sourcesContent":["export interface Notation {\n  string: number;\n  fret: number;\n}\n\nexport interface TabWriterNote extends Notation {\n  beat: number;\n}\n\nexport enum Note {\n  Aflat = \"Aflat\",\n  A = \"A\",\n  Bflat = \"Bflat\",\n  B = \"B\",\n  C = \"C\",\n  Dflat = \"Dflat\",\n  D = \"D\",\n  Eflat = \"Eflat\",\n  E = \"E\",\n  F = \"F\",\n  Gflat = \"Gflat\",\n  G = \"G\",\n}\n\nexport const notes = Object.keys(Note) as Note[];\n\nexport type PitchedNote = {\n  pitch: number;\n  note: Note;\n};\n","import React, { createContext, useEffect, useState } from \"react\";\nimport { v4 as uuid } from \"uuid\";\nimport { Note } from \"../TabGenerator/Tab.type\";\n\ninterface Grade {\n  grade?: number;\n  id: string;\n}\n\ninterface Config {\n  grades: Grade[];\n  key: Note;\n  updateGrade: (id: string, grade: number) => void;\n  createGrade: () => void;\n  removeGrade: (id: string) => void;\n  updateKey: (key: Note) => void;\n  random: false | number;\n  setRandom: (random: false | number) => void;\n}\n\n// @ts-ignore\nexport const ConfigContext = createContext<Config>({});\n\ninterface ConfigProviderProps {}\n\nexport const ConfigProvider = ({\n  children,\n}: React.PropsWithChildren<ConfigProviderProps>) => {\n  const [grades, setGrades] = useState<Grade[]>(() => {\n    const gradesFromStorage = localStorage.getItem(\"grades\");\n    return gradesFromStorage ? JSON.parse(gradesFromStorage) : [];\n  });\n\n  const [key, setKey] = useState<Note>(Note.A);\n  const [random, setRandom] = useState<false | number>(96);\n\n  useEffect(() => {\n    localStorage.setItem(\"grades\", JSON.stringify(grades, null, 2));\n  }, [grades]);\n\n  const updateGrade = (id: string, grade: number) => {\n    setGrades((currentGrades) => {\n      return currentGrades.map((_grade) => {\n        if (_grade.id === id) {\n          return {\n            grade,\n            id,\n          };\n        }\n        return _grade;\n      });\n    });\n  };\n\n  const createGrade = () => {\n    setGrades((currentGrades) => {\n      return currentGrades.concat({\n        id: uuid(),\n      });\n    });\n  };\n\n  const removeGrade = (id: string) => {\n    setGrades((currentGrades) => {\n      return currentGrades.filter((grade) => grade.id !== id);\n    });\n  };\n\n  return (\n    <ConfigContext.Provider\n      value={{\n        grades,\n        updateGrade,\n        removeGrade,\n        createGrade,\n        key,\n        updateKey: setKey,\n        random,\n        setRandom,\n      }}\n    >\n      {children}\n    </ConfigContext.Provider>\n  );\n};\n","import kurasu from \"kurasu\";\n\nexport const buttonClass =\n  \"w-36 bg-gray-200 inline-flex items-center p-2 justify-center rounded border-gray-400 border\";\n\nexport const Button = kurasu.button(buttonClass);\n\nexport const blueButtonClass =\n  \"bg-blue-300 inline-flex items-center p-2 justify-center rounded border-blue-400 border\";\nexport const BlueButton = kurasu.button(blueButtonClass);\n\nexport const pinkButtonClass =\n  \"bg-pink-200 inline-flex items-center p-2 justify-center rounded border-pink-300 border\";\nexport const PinkButton = kurasu.button(pinkButtonClass);\n","export const randomArrayItem = <T>(array: T[]): T => {\n    const randomIndex = Math.floor(Math.random() * array.length);\n  \n    return array[randomIndex];\n}\n","import { useContext } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { blueButtonClass, pinkButtonClass, Button } from \"../Button\";\nimport { randomArrayItem } from \"../TabGenerator/randomArrayItem\";\nimport { Note, notes } from \"../TabGenerator/Tab.type\";\nimport { ConfigContext } from \"./Config.provider\";\n\n<head>\n  <title>Tab generator</title>\n</head>;\n\nconst KeySelect = () => {\n  const config = useContext(ConfigContext);\n\n  return (\n    <div className=\"space-x-2\">\n      <select\n        className=\"rounded \"\n        value={config.key}\n        onChange={(event) => {\n          const newNote = event.target.value as Note;\n          config.updateKey(newNote);\n        }}\n      >\n        {notes.map((note) => (\n          <option value={note} key={note}>\n            {note}\n          </option>\n        ))}\n      </select>\n      <Button\n        onClick={() => {\n          config.updateKey(randomArrayItem(notes));\n        }}\n      >\n        Randomise Key\n      </Button>\n    </div>\n  );\n};\n\nconst RandomEnabled = () => {\n  const config = useContext(ConfigContext);\n  return (\n    <label className=\"w-36 flex space-x-2 items-center p-2 border-blue-300 border rounded bg-gray-100 cursor-pointer\">\n      <input\n        type=\"checkbox\"\n        checked={config.random === false}\n        onChange={() => {\n          if (config.random === false) {\n            config.setRandom(96);\n          } else {\n            config.setRandom(false);\n          }\n        }}\n      />\n      <span>Personalise</span>\n    </label>\n  );\n};\n\nconst RandomAmount = () => {\n  const config = useContext(ConfigContext);\n  return (\n    <input\n      className=\"flex border-blue-300 border rounded overflow-hidden bg-gray-100 w-36\"\n      type=\"number\"\n      value={config.random as number}\n      onChange={(e) => {\n        config.setRandom(Number(e.target.value));\n      }}\n    />\n  );\n};\nconst GradesForm = () => {\n  const config = useContext(ConfigContext);\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"space-y-2 flex flex-col\">\n        {config.grades.map(({ grade, id }) => {\n          return (\n            <div\n              key={id}\n              className=\"flex border-blue-300 border rounded overflow-hidden bg-gray-100 w-36\"\n            >\n              <input\n                min={0}\n                step={1}\n                max={10}\n                className=\"border-none bg-transparent min-w-0 flex-grow\"\n                key={id}\n                type=\"number\"\n                defaultValue={grade}\n                onChange={(e) => config.updateGrade(id, Number(e.target.value))}\n              ></input>\n              <button\n                className=\"p-2 bg-gray-200\"\n                onClick={() => {\n                  config.removeGrade(id);\n                }}\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"h-6 w-6 text-red-600\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\"\n                  />\n                </svg>\n              </button>\n            </div>\n          );\n        })}\n      </div>\n      <Button\n        onClick={() => {\n          config.createGrade();\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"h-6 w-6\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M12 6v6m0 0v6m0-6h6m-6 0H6\"\n          />\n        </svg>\n      </Button>\n    </div>\n  );\n};\n\nexport const GradesPage = () => {\n  const config = useContext(ConfigContext);\n  return (\n    <>\n      <div className=\"prose mt-10\">\n        <h1>Elempiar's Tab Generator</h1>\n        <p>\n          This tool helps you generate guitar tabs in case you're stuck writing\n          your next masterpiece.\n        </p>\n      </div>\n      <div>\n        <a\n          target=\"_blank\"\n          href=\"https://www.instagram.com/generative.tabs\"\n          className={pinkButtonClass + \" w-36\"}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\" />\n          </svg>\n          <span className=\"ml-2\">Get Inspired</span>\n        </a>\n      </div>\n      <div className=\"prose pt-10\">\n        <p>\n          Start by selecting the key your song is in. Don't have a key yet? Just\n          generate one!\n        </p>\n      </div>\n      <KeySelect />\n      <div className=\"prose\">\n        <p className=\"pt-10\">\n          Now choose whether you want to completely randomise the tab, or to use\n          your own personal input as a base for the tab.\n        </p>\n        <p>\n          For example: Keep track of your mood for a week. Rate it on a scale of\n          1-10 every few hours, and use these scores as a base for your tab.\n        </p>\n      </div>\n      <RandomEnabled />\n      {config.random === false ? (\n        <div className=\"prose\">\n          <p className=\"pt-10\">\n            Time to add your own input! The generator converts every specific\n            input into a note on the tab. Keep in mind; you can only use numbers\n            between 0-10.\n          </p>\n          <GradesForm />\n        </div>\n      ) : (\n        <div className=\"prose\">\n          <p className=\"pt-10\">\n            Last but not least: choose how many notes you want in your tab.\n          </p>\n          <RandomAmount />\n        </div>\n      )}\n      <div className=\"pt-10\">\n        <Link to=\"/generated-tab\" className={blueButtonClass + \" w-36\"}>\n          Generate Tab\n        </Link>\n      </div>\n    </>\n  );\n};\n","import { Note } from \"./Tab.type\";\n\n// @ts-ignore\nexport const majorScales: {\n    [groundNote in Note]: Note[];\n} = {\n    Aflat: [Note.Aflat, Note.Bflat, Note.C, Note.Dflat, Note.Eflat, Note.F, Note.G],\n    A: [Note.A, Note.B, Note.Dflat, Note.D, Note.E, Note.Gflat, Note.Aflat],\n    Bflat: [Note.Bflat, Note.C, Note.D, Note.Eflat, Note.F, Note.G, Note.A],\n    B: [Note.B, Note.Dflat, Note.Eflat, Note.E, Note.Gflat, Note.Aflat, Note.B],\n    C: [Note.C, Note.D, Note.E, Note.F, Note.G, Note.A, Note.B],\n    Dflat: [Note.Dflat, Note.Eflat, Note.F, Note.Gflat, Note.Aflat, Note.Bflat, Note.C],\n    D: [Note.D, Note.E, Note.Gflat, Note.G, Note.A, Note.B, Note.Dflat],\n    Eflat: [Note.Eflat, Note.F, Note.G, Note.Aflat, Note.Bflat, Note.C, Note.D],\n    E: [Note.E, Note.Gflat, Note.Aflat, Note.A, Note.B, Note.Dflat, Note.Eflat],\n    F: [Note.F, Note.G, Note.A, Note.Bflat, Note.C, Note.D, Note.E],\n    Gflat: [Note.Gflat, Note.Aflat, Note.Bflat, Note.B, Note.Dflat, Note.Eflat, Note.F],\n    G: [Note.G, Note.A, Note.B, Note.C, Note.D, Note.E, Note.Gflat],\n    \n}","import { Notation, Note } from \"./Tab.type\";\n\nexport const notations: {\n    [note in Note]: Notation[]\n} = {\n    A: [{fret: 5, string: 0},      {fret: 0, string: 1},   {fret: 7, string: 2},  {fret: 2, string: 3},  {fret: 10, string: 4}, {fret: 5, string: 5}],\n    Bflat: [{fret: 6, string: 0},  {fret: 1, string: 1},   {fret: 8, string: 2},  {fret: 3, string: 3},  {fret: 11, string: 4}, {fret: 6, string: 5}],\n    B: [{fret: 7, string: 0},      {fret: 2, string: 1},   {fret: 9, string: 2},  {fret: 4, string: 3},  {fret: 0, string: 4},  {fret: 7, string: 5}],\n    C: [{fret: 8, string: 0},      {fret: 3, string: 1},   {fret: 10, string: 2}, {fret: 5, string: 3},  {fret: 1, string: 4},  {fret: 8, string: 5}],\n    Dflat: [{fret: 9, string: 0},  {fret: 4, string: 1},   {fret: 11, string: 2}, {fret: 6, string: 3},  {fret: 2, string: 4},  {fret: 9, string: 5}],\n    D: [{fret: 10, string: 0},     {fret: 5, string: 1},   {fret: 0, string: 2},  {fret: 7, string: 3},  {fret: 3, string: 4},  {fret: 10, string: 5}],\n    Eflat: [{fret: 11, string: 0}, {fret: 6, string: 1},   {fret: 1, string: 2},  {fret: 8, string: 3},  {fret: 4, string: 4},  {fret: 11, string: 5}],\n    E: [{fret: 0, string: 0},      {fret: 7, string: 1},   {fret: 2, string: 2},  {fret: 9, string: 3},  {fret: 5, string: 4},  {fret: 0, string: 5}],\n    F: [{fret: 1, string: 0},      {fret: 8, string: 1},   {fret: 3, string: 2},  {fret: 10, string: 3}, {fret: 6, string: 4},  {fret: 1, string: 5}],\n    Gflat: [{fret: 2, string: 0},  {fret: 9, string: 1},   {fret: 4, string: 2},  {fret: 11, string: 3}, {fret: 7, string: 4},  {fret: 2, string: 5}],\n    G: [{fret: 3, string: 0},      {fret: 10, string: 1},  {fret: 5, string: 2},  {fret: 0, string: 3},  {fret: 8, string: 4},  {fret: 3, string: 5}],\n    Aflat: [{fret: 4, string: 0},  {fret: 11, string: 1},  {fret: 6, string: 2},  {fret: 1, string: 3},  {fret: 9, string: 4},  {fret: 4, string: 5}]\n}","import { useContext, useMemo, useState } from \"react\";\nimport { ConfigContext } from \"../Config/Config.provider\";\nimport { TabWriterNote, Note, Notation } from \"./Tab.type\";\nimport createTab from \"tabwriter\";\nimport { Link } from \"react-router-dom\";\nimport { randomArrayItem } from \"./randomArrayItem\";\nimport { majorScales } from \"./majorScales\";\nimport { notations } from \"./notations\";\nimport { range, chunk } from \"lodash\";\nimport { BlueButton } from \"../Button\";\nimport { pinkButtonClass, Button } from \"../Button\";\n\nconst mapGradeToNote = (songKey: Note, grade: number) =>\n  majorScales[songKey][Math.floor(grade * (6 / 10))];\n\nconst generateFretAndString = (randomNote: Note): Notation =>\n  randomArrayItem(notations[randomNote]);\n\nconst generateRandomGrades = (randomAmount: number) =>\n  range(randomAmount).map(() => Math.floor(Math.random() * 10));\n\nexport const TabGeneratorPage = () => {\n  const config = useContext(ConfigContext);\n\n  const [randomId, setRandomId] = useState(0);\n\n  const songLines = useMemo(() => {\n    const finalGrades =\n      config.random === false\n        ? config.grades.map(({ grade }) => grade)\n        : generateRandomGrades(config.random);\n    const gradeChunks = chunk(\n      finalGrades.filter((grade): grade is number => typeof grade === \"number\"),\n      16\n    );\n\n    const notes = gradeChunks.map((grades) => {\n      return grades.map((grade, index) => {\n        const { fret, string } = generateFretAndString(\n          mapGradeToNote(config.key, grade)\n        );\n        return {\n          beat: index * 2 + 1,\n          fret,\n          string,\n        };\n      });\n    });\n\n    return notes.map((notes: TabWriterNote[]): string[] => createTab(notes));\n  }, [config.key, randomId]);\n\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"flex space-x-4\">\n        <Link\n          to=\"/\"\n          className={\n            \"bg-gray-200 inline-flex items-center p-2 justify-center rounded border-gray-400 border\"\n          }\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className=\"h-6 w-6\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M15 19l-7-7 7-7\"\n            />\n          </svg>\n          <span>Change Settings</span>\n        </Link>\n        <BlueButton\n          className=\"space-x-2\"\n          onClick={() => {\n            setRandomId((id) => id + 1);\n          }}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className=\"h-6 w-6\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n            />\n          </svg>\n          <span>Regenerate Tab</span>\n        </BlueButton>\n        <div className=\"flex items-center content-center\">\n          <div className=\"p-3 uppercase font-bold text-xs border-r border-blue-300\">\n            key\n          </div>\n          <div className=\"p-2 font-bold\">{config.key}</div>\n        </div>\n        <div>\n          <a\n            href=\"https://www.instagram.com/generative.tabs\"\n            target=\"_blank\"\n            className={pinkButtonClass + \" w-36\"}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\" />\n            </svg>\n            <span className=\"ml-2\">Inspire</span>\n          </a>\n        </div>\n      </div>\n      {songLines.map((songLine) => (\n        <pre>{songLine.join(\"\\n\")}</pre>\n      ))}\n    </div>\n  );\n};\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport { ConfigProvider } from \"./Config/Config.provider\";\nimport { BrowserRouter, Route, Switch } from \"react-router-dom\";\nimport { GradesPage } from \"./Config/Config.page\";\nimport { TabGeneratorPage } from \"./TabGenerator/TabGenerator.page\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <BrowserRouter>\n      <ConfigProvider>\n        <div className=\"mx-auto container space-y-4 my-8\">\n          <Switch>\n            <Route path=\"/generated-tab\">\n              <TabGeneratorPage />\n            </Route>\n            <Route exact path=\"/\">\n              <GradesPage></GradesPage>\n            </Route>\n          </Switch>\n        </div>\n      </ConfigProvider>\n    </BrowserRouter>\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n"],"sourceRoot":""}