[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69146939536c81918de18b2213a81e2c","versionInt","title","Aplikace – Vizualizace Akordů (klaviatura)","type","code/react","content","import React, { useMemo, useState, useCallback } from \"react\";\n\n/**\n * Aplikace pro vizualizaci akordů na klaviatuře\n * Funkce: výběr tónového základu a typu akordu (dur, moll, sus, 7, maj7, dim, atd.)\n * Pozn.: Záměrně neřeším enharmonickou správnost tercie/septimy dle tóniny,\n * ale nabízím volbu preferovat křížky/béčka podle kořene (C#->křížky, Db->béčka).\n */\n\nconst CHORD_TYPES: Record = {\n maj: { label: \"dur\", formula: [0, 4, 7] },\n min: { label: \"moll\", formula: [0, 3, 7] },\n sus2: { label: \"sus2\", formula: [0, 2, 7] },\n sus4: { label: \"sus4\", formula: [0, 5, 7] },\n aug: { label: \"zvětšený (aug)\", formula: [0, 4, 8] },\n dim: { label: \"zmenšený (dim)\", formula: [0, 3, 6] },\n \"7\": { label: \"dominantní 7\", formula: [0, 4, 7, 10] },\n maj7: { label: \"velká 7 (maj7)\", formula: [0, 4, 7, 11] },\n m7: { label: \"mollová 7 (m7)\", formula: [0, 3, 7, 10] },\n dim7: { label: \"zmenšená 7 (dim7)\", formula: [0, 3, 6, 9] },\n m7b5: { label: \"polozmenšený (m7♭5)\", formula: [0, 3, 6, 10] },\n add9: { label: \"add9\", formula: [0, 4, 7, 14] },\n \"6\": { label: \"6\", formula: [0, 4, 7, 9] },\n m6: { label: \"m6\", formula: [0, 3, 7, 9] },\n \"9\": { label: \"9\", formula: [0, 4, 7, 10, 14] },\n maj9: { label: \"maj9\", formula: [0, 4, 7, 11, 14] },\n};\n\nconst NOTE_NAMES_SHARPS = [\n \"C\",\n \"C#\",\n \"D\",\n \"D#\",\n \"E\",\n \"F\",\n \"F#\",\n \"G\",\n \"G#\",\n \"A\",\n \"A#\",\n \"H\",\n];\n\nconst NOTE_NAMES_FLATS = [\n \"C\",\n \"Db\",\n \"D\",\n \"Eb\",\n \"E\",\n \"F\",\n \"Gb\",\n \"G\",\n \"Ab\",\n \"A\",\n \"Bb\",\n \"H\",\n];\n\nconst ROOT_OPTIONS = [\n \"C\",\n \"C#\",\n \"Db\",\n \"D\",\n \"D#\",\n \"Eb\",\n \"E\",\n \"F\",\n \"F#\",\n \"Gb\",\n \"G\",\n \"G#\",\n \"Ab\",\n \"A\",\n \"A#\",\n \"Bb\",\n \"H\",\n];\n\nfunction noteIndexFromName(name: string): number {\n const idxSharps = NOTE_NAMES_SHARPS.indexOf(name);\n const idxFlats = NOTE_NAMES_FLATS.indexOf(name);\n if (idxSharps !== -1) return idxSharps;\n if (idxFlats !== -1) return idxFlats;\n return 0;\n}\n\nfunction nameFromIndex(i: number, preferFlats = false): string {\n const a = ((i % 12) + 12) % 12;\n return preferFlats ? NOTE_NAMES_FLATS[a] : NOTE_NAMES_SHARPS[a];\n}\n\n// Popis klaviatury (2 oktávy C4–B5)\nconst KEYS = (() => {\n const order = [0, 2, 4, 5, 7, 9, 11]; // bílá\n const patternBlack = [1, 3, -1, 6, 8, 10, -1]; // -1 = žádná černá nad E/H\n const keys: { midi: number; note: number; isBlack: boolean; id: string }[] = [];\n let midi = 60; // C4\n for (let oct = 0; oct < 2; oct++) {\n for (let i = 0; i < 7; i++) {\n const n = (oct * 12) + order[i];\n keys.push({ midi: midi + n, note: (order[i]) % 12, isBlack: false, id: `w-${oct}-${i}` });\n }\n }\n // přidej černé klávesy s absolutním pozicováním\n // Pozice budou dopočítány v komponentě\n return keys;\n})();\n\n// Pomocná sada pro vykreslení – definice rozložení bílé/černé klávesy v rámci oktávy\nconst OCT_WHITE = [0, 2, 4, 5, 7, 9, 11];\nconst OCT_BLACK = [1, 3, null, 6, 8, 10, null];\n\nexport default function HarmonyKeyboardApp() {\n const [root, setRoot] = useState(\"C\");\n const [type, setType] = useState(\"maj\");\n const [playMode, setPlayMode] = useState<\"chord\" | \"arpUp\" | \"arpDown\">(\"chord\");\n const [octaves, setOctaves] = useState<1 | 2>(1);\n\n const preferFlats = useMemo(() => root.includes(\"b\"), [root]);\n const rootIndex = useMemo(() => noteIndexFromName(root), [root]);\n\n const chordMidiSet = useMemo(() => {\n const f = CHORD_TYPES[type]?.formula ?? [0, 4, 7];\n const set = new Set();\n for (const add of f) {\n set.add((rootIndex + add) % 12);\n }\n return set;\n }, [rootIndex, type]);\n\n const chordNotesPretty = useMemo(() => {\n const f = CHORD_TYPES[type]?.formula ?? [0, 4, 7];\n return f.map((a) => nameFromIndex(rootIndex + a, preferFlats));\n }, [preferFlats, rootIndex, type]);\n\n const playChord = useCallback(() => {\n const AudioCtx = (window as any).AudioContext || (window as any).webkitAudioContext;\n if (!AudioCtx) return;\n const ctx = new AudioCtx();\n const now = ctx.currentTime;\n const dur = 1.2;\n\n const master = ctx.createGain();\n master.gain.value = 0.22;\n master.connect(ctx.destination);\n\n const f = CHORD_TYPES[type]?.formula ?? [0, 4, 7];\n const intervals = [...f].sort((a, b) => a - b);\n const seq = playMode === \"arpDown\" ? [...intervals].reverse() : intervals;\n const startAllAt = playMode === \"chord\";\n\n seq.forEach((add, i) => {\n const pc = (rootIndex + add) % 12;\n const baseMidi = add >= 12 ? 72 : 60;\n const midi = baseMidi + pc;\n const freq = 440 * Math.pow(2, (midi - 69) / 12);\n\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.type = \"sine\";\n\n const startTime = startAllAt ? now : now + i * 0.12;\n osc.frequency.setValueAtTime(freq, startTime);\n\n gain.gain.setValueAtTime(0.0001, startTime);\n gain.gain.exponentialRampToValueAtTime(0.7, startTime + 0.04);\n gain.gain.exponentialRampToValueAtTime(0.0001, startTime + dur);\n\n osc.connect(gain);\n gain.connect(master);\n\n osc.start(startTime);\n osc.stop(startTime + dur + 0.05);\n });\n }, [rootIndex, type, playMode]);\n\n return (\n

Vizualizace akordů na klaviatuře

\n Vyberte tónový základ a typ akordu. Klávesy akordu jsou zvýrazněny. (Bez zvuku – čistě vizuální pomůcka.)\n

\n\n

\n Tónový základ\n setRoot(e.target.value)}\n >\n {ROOT_OPTIONS.map((r) => (\n \n ))}\n \n

\n Typ akordu\n

\n {Object.entries(CHORD_TYPES).map(([key, v]) => (\n setType(key)}\n className={`px-3 py-2 rounded-xl border text-sm transition shadow-sm ${\n type === key ? \"bg-black text-white\" : \"bg-white hover:bg-gray-100\"\n }`}\n aria-pressed={type === key}\n >\n {v.label}\n \n ))}\n

\n\n

\n {([\n [\"chord\", \"Souzvuk\"],\n [\"arpUp\", \"Arpeggio ↑\"],\n [\"arpDown\", \"Arpeggio ↓\"],\n ] as const).map(([key, label]) => (\n setPlayMode(key as any)}\n className={`px-3 py-2 text-sm ${\n playMode === key ? \"bg-black text-white\" : \"bg-white hover:bg-gray-100\"\n } border-r last:border-r-0`}\n aria-pressed={playMode === key}\n >\n {label}\n \n ))}\n

\n \n Přehrát akord\n \n

\n {([1, 2] as const).map((o) => (\n setOctaves(o)}\n className={`px-3 py-2 text-sm ${\n octaves === o ? \"bg-black text-white\" : \"bg-white hover:bg-gray-100\"\n } border-l first:border-l-0`}\n aria-pressed={octaves === o}\n >\n {o === 1 ? \"1 oktáva\" : \"2 oktávy\"}\n \n ))}\n

\n\n

\n \n

\n\n \n

\n );\n}\n\nfunction Keyboard({\n chordMidiSet,\n preferFlats,\n octaves,\n}: {\n chordMidiSet: Set;\n preferFlats: boolean;\n octaves: 1 | 2;\n}) {\n // Vykreslíme 2 oktávy bílých a přes ně černé klávesy.\n const whiteKeyWidth = 36;\n const whiteKeyHeight = 180;\n const blackKeyWidth = 22;\n const blackKeyHeight = 110;\n\n // Připrav pozice v rámci jedné oktávy (7 bílých kláves)\n const octWhiteX = OCT_WHITE.map((_, i) => i * whiteKeyWidth);\n const octBlackX = [\n whiteKeyWidth - blackKeyWidth / 2, // C# nad C-D\n 2 * whiteKeyWidth - blackKeyWidth / 2, // D# nad D-E\n null as any,\n 4 * whiteKeyWidth - blackKeyWidth / 2, // F# nad F-G\n 5 * whiteKeyWidth - blackKeyWidth / 2, // G# nad G-A\n 6 * whiteKeyWidth - blackKeyWidth / 2, // A# nad A-H\n null as any,\n ];\n\n const octStarts = octaves === 2 ? [0, 12] : [0];\n\n const totalWhite = octaves === 2 ? 14 : 7; // 1 nebo 2 oktávy\n const svgWidth = totalWhite * whiteKeyWidth;\n const svgHeight = whiteKeyHeight;\n\n const getNoteName = (note: number) => nameFromIndex(note, preferFlats);\n\n // Pomoc: je klávesa v akordu?\n const isInChord = (note: number) => chordMidiSet.has(((note % 12) + 12) % 12);\n\n return (\n

\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","17095236731721858055","traceTime",1791206432643]