[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":112},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","test_account_001","name","guitar-lab","path","frontend/components/Lessons.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":38,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/test_account_001/guitar-lab/code/frontend/components/Lessons.tsx","extension","id","5170b0ca-6224-4115-b75c-8c187f52879b","Lessons.tsx","fileId","2fa400e6-9e54-11f1-acaa-1607ee4eb77e","parentId","01a02aa4-dbb8-719f-bc42-fe474015a10a","branchId","fe3da5af-30a0-482c-9cfe-bded055894d0","branchVersion",18,"latest",true,"createdAt",["D",1787421983885],"version",0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Fretboard } from \"./Fretboard.tsx\";\n\ninterface Lesson {\n id: string;\n title: string;\n tag: string;\n body: () => JSX.Element;\n}\n\nfunction Section({ h, children }: { h: string; children: React.ReactNode }) {\n return (\n

{h}

{children}

\n );\n}\n\nfunction P({ children }: { children: React.ReactNode }) {\n return

{children}

;\n}\n\nfunction Example({ title, root, pattern, labels = [\"note\", \"interval\"] }: {\n title: string; root: number; pattern: number[]; labels?: string[];\n}) {\n return (\n

{title}

\n \n

{labels.join(\" / \")}

\n \n );\n}\n\nconst LESSONS: Lesson[] = [\n {\n id: \"neck\",\n title: \"The Fretboard, laid out as one repeating pattern\",\n tag: \"Foundation\",\n body: () => (\n <>\n

\n There are only 12 notes. The whole fretboard is those 12 notes repeated up\n the neck and across the strings. From open strings E A D G B E (low to high), each\n fret moves up one semitone (half step). The 12th fret is exactly an octave up\n from the open string — same note names, higher pitch.\n

\n On the guitar, moving up one fret = one semitone. Any pattern you learn above any\n note's fret reproduces everywhere you find that note. Learn a scale shape in one\n position and it's the same shape in every other position — you just shift\n it with the root.\n

\n \n

\n Above, only the frets that are a C light up. Notice how the same relationships between\n strings hold (like the 4th-fret/2nd-string trick near octaves). Warm up by \"drinking\"\n through every natural note this way in the Scale Lab.\n

\n \n ),\n },\n {\n id: \"intervals\",\n title: \"Intervals: the names for distances\",\n tag: \"Fundamental\",\n body: () => (\n <>\n

\n Music theory is mostly relative — we care how far apart notes are, called an{\" \"}\n interval. The two primitive distances on a guitar: a whole step (W,\n two frets) and a half step (H, one fret). Every scale is just a recipe of\n whole and half steps.\n

\n From any root: the 2nd, 3rd, 4th, 5th, 6th and\n 7th. Flat (♭) a note and it drops one semitone — so we get ♭3 (minor 3rd),\n ♭7, etc. Scales differ almost entirely by which 3rd, 6th and 7th they use.\n

\n The interval between root and ♭3 is \"the sad distance\" — it's what makes minor feel\n minor. The 3rd vs ♭3rd is the single most important ear-training distinction. Drill\n all of these in the Interval Trainer.\n

\n \n \n ),\n },\n {\n id: \"construction\",\n title: \"How the Major Scale is built\",\n tag: \"The master key\",\n body: () => (\n <>\n

\n The major scale is the reference everything else is named against. Its recipe\n in steps is: W W H W W W H. Starting on C that gives\n C D E F G A B C — all white keys on a piano.\n

\n 1 root · 2 · 3 · 4 · 5 · 6 · 7 (leading tone) · 1. Each degree has a \"job\": the 5th\n is the most stable after the root, the 3rd decides major-vs-minor, the 7th \"wants\" to\n resolve up to the root.\n

\n \n

\n Move the root to any note in the Scale Lab and the same W–W–H–W–W–W–H shapes\n reappear. The pattern is the scale; the root just sets its starting letter.\n

\n \n ),\n },\n {\n id: \"pentatonic\",\n title: \"Pentatonic: the unbeatable 5\",\n tag: \"Practical\",\n body: () => (\n <>\n

\n Drop the two half-step pairs from the major scale and you get the{\" \"}\n major pentatonic (1 2 3 5 6). Its darker twin, built 1 ♭3 4 5 ♭7, is the{\" \"}\n minor pentatonic — the scale behind most rock, blues and lead guitar. Because it\n has no semitones, every note sounds \"safe\", making it perfect for soloing.\n

\n In open position, A minor pentatonic uses frets 0–3 in a famously comfortable box.\n Learn this shape and you can play the blues anywhere by shifting its root.\n

\n \n \n

\n Notice: A minor pentatonic and C major pentatonic share identical notes — the\n same fretboard, different starting letter. This relative relationship runs all through\n theory.\n

\n \n ),\n },\n {\n id: \"modes\",\n title: \"The 7 Modes: the major scale, restarted\",\n tag: \"Color\",\n body: () => (\n <>\n

\n Play C major starting on D (D E F G A B C) and you're playing Dorian — same seven\n notes, new center and flavor. Each mode is the major scale begun on a different degree:\n

Ionian (1) — major
Dorian (2) — minor with a big 6th, funky
Phrygian (3) — minor with ♭2, Spanish
Lydian (4) — major with raised 4th, dreamy
Mixolydian (5) — major with ♭7, bluesy
Aeolian (6) — natural minor
Locrian (7) — the unstable one

\n In practice you usually think of modes as existing scales you can grab rather\n than \"C major restarted\". The Scale Lab lists them all as their own scales.\n

\n \n \n \n ),\n },\n {\n id: \"harmony\",\n title: \"Turning a scale into chords\",\n tag: \"Putting it together\",\n body: () => (\n <>\n

\n Stack every other scale degree and you get chords. Building thirds up the C major scale\n yields: C maj, D min, E min, F maj, G maj, A min, B dim. The chord qualities repeat{\" \"}\n in every major key: I ii iii IV V vi vii°.\n

\n This \"#1–7 formula\" is why the Roman numerals are the language of progressions: a{\" \"}\n I–IV–V–vi is \"happy-capital, happy, happy, sad-lowercase\" and transfers to any key.\n

\n Over a chord that fits the scene's key, every note of that key works. But half of\n soloing taste is landing on the chord's defining guide tones — the 3rd and\n 7th — which the Scale Lab shows you colored by interval in real time.\n

\n \n \n ),\n },\n];\n\nexport function Lessons() {\n const [idx, setIdx] = useState(0);\n const lesson = LESSONS[idx];\n const Body = lesson.body;\n\n return (\n

\n \n\n

\n \n {lesson.tag}\n \n

{lesson.title}

\n \n

\n setIdx(Math.max(0, idx - 1))}\n disabled={idx === 0}\n className=\"px-4 py-2 rounded-lg border border-gray-300 text-sm font-semibold text-gray-600 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer\"\n >\n ← Prev\n \n {idx + 1} / {LESSONS.length}\n setIdx(Math.min(LESSONS.length - 1, idx + 1))}\n disabled={idx === LESSONS.length - 1}\n className=\"px-4 py-2 rounded-lg bg-gray-900 text-white text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer\"\n >\n Next →\n \n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","6fbe4a5a-23d4-4486-a8d2-b5b17783e6b8",["D",1787421842194],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Guitar music theory & scales site with a fretboard visualizer","imageUrl","userId","e6d51557-2988-4ce3-bf61-63d827903a6c","pinnedFileId","01a02aa4-dbb8-719f-bc43-19e2bc8208fe","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","3ebf4d50-fe40-465b-915c-bd543c8a8608","tursoName","6fbe4a5a23d44486a8d2b5b17783e6b8","tursoHostname","6fbe4a5a23d44486a8d2b5b17783e6b8-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789521640046],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_108":104},"org",{"_9":10,"_102":-5,"_103":104,"_59":60,"_105":106,"_107":44},"branch",{"_37":92,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned",22,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJabHpKOGNWSmhqcWduM3VVV0xTUGlicVprayJ9","tier","free","canRestrictVals","profileImageUrl","ctx",{"_85":-5,"_142":143,"_144":145,"_146":147,"_148":44,"_149":44,"_150":44,"_151":34,"_152":-5,"_153":-7,"_154":-7,"_155":38,"_156":44,"_157":44,"_158":-5,"_159":44,"_160":44,"_161":44,"_162":-5},"ENV",{"_113":114,"_115":116,"_117":93,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]