[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68ebba238c508191a2a21366b3df4118","versionInt","title","Ear-training Akordy (zuš) – Interaktivní Aplikace","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// =============================\n// Ear-Training: Chord Recognizer\n// ZUŠ-friendly single-file React app\n// - WebAudio synthesis (no deps)\n// - CZ UI labels, stats, difficulty, tonic select\n// - Colored feedback and retry flow\n// =============================\n\n// --- Utility: note <-> midi ---\nconst NOTE_NAMES = [\n \"C\",\"C#\",\"D\",\"D#\",\"E\",\"F\",\"F#\",\"G\",\"G#\",\"A\",\"A#\",\"H\",\"B\"\n];\n// Provide a map so both H and B exist; H maps to 11 (B natural), B maps to 12 (Bb)\nconst NAME_TO_SEMITONE = {\n C:0, \"C#\":1, Db:1,\n D:2, \"D#\":3, Eb:3,\n E:4,\n F:5, \"F#\":6, Gb:6,\n G:7, \"G#\":8, Ab:8,\n A:9, \"A#\":10, Bb:10,\n H:11, B:10 // CZ: H = B (natural), B = B♭\n};\n\nconst TONIC_OPTIONS = [\n \"Náhodně\",\"C\",\"C#\",\"D\",\"D#\",\"E\",\"F\",\"F#\",\"G\",\"G#\",\"A\",\"A#\",\"H\",\"B\"\n];\n\n// --- Chord definitions ---\nconst CHORD_TYPES_BEGINNER = [\n { id:\"maj\", label:\"Dur\", intervals:[0,4,7] },\n { id:\"min\", label:\"Moll\", intervals:[0,3,7] }\n];\n\nconst CHORD_TYPES_ADVANCED = [\n ...CHORD_TYPES_BEGINNER,\n { id:\"dim\", label:\"Zmenšený (dim)\", intervals:[0,3,6] },\n { id:\"aug\", label:\"Zvětšený (aug)\", intervals:[0,4,8] },\n { id:\"dom7\", label:\"Dominantní 7 (7)\", intervals:[0,4,7,10] },\n { id:\"min7\", label:\"Mollový 7 (m7)\", intervals:[0,3,7,10] },\n { id:\"maj7\", label:\"Durový 7 (maj7)\", intervals:[0,4,7,11] },\n];\n\n// --- WebAudio Synth ---\nclass PolySynth {\n constructor() {\n this.ctx = null;\n this.gain = null;\n this.active = [];\n }\n ensure() {\n if (!this.ctx) {\n const AudioContext = window.AudioContext || window.webkitAudioContext;\n this.ctx = new AudioContext();\n this.gain = this.ctx.createGain();\n this.gain.gain.value = 0.15; // master volume\n this.gain.connect(this.ctx.destination);\n }\n }\n setVolume(v) {\n this.ensure();\n this.gain.gain.setTargetAtTime(v, this.ctx.currentTime, 0.01);\n }\n // simple ADSR per voice\n playFrequencies(freqs, { duration = 1.6 } = {}) {\n this.ensure();\n const now = this.ctx.currentTime;\n const stopAt = now + duration + 0.05;\n const voices = freqs.map(f => {\n const osc = this.ctx.createOscillator();\n const gain = this.ctx.createGain();\n // Slight detune per voice for warmth\n osc.type = \"triangle\";\n osc.frequency.value = f;\n gain.gain.setValueAtTime(0, now);\n // attack\n gain.gain.linearRampToValueAtTime(0.9, now + 0.07);\n // decay to sustain\n gain.gain.linearRampToValueAtTime(0.55, now + 0.18);\n // release\n gain.gain.setTargetAtTime(0, now + duration, 0.12);\n osc.connect(gain);\n gain.connect(this.gain);\n osc.start(now);\n osc.stop(stopAt);\n return { osc, gain };\n });\n // keep a reference to stop early\n this.active.push(...voices);\n // cleanup later\n setTimeout(() => {\n this.active = this.active.filter(v => !voices.includes(v));\n }, (duration + 0.2) * 1000);\n }\n playArpeggio(freqs, { step = 0.22, hold = 0.5 } = {}) {\n this.ensure();\n const now = this.ctx.currentTime;\n let t = now;\n const voices = [];\n freqs.forEach((f) => {\n const osc = this.ctx.createOscillator();\n const gain = this.ctx.createGain();\n osc.type = \"triangle\";\n osc.frequency.value = f;\n gain.gain.setValueAtTime(0, t);\n gain.gain.linearRampToValueAtTime(0.9, t + 0.06);\n gain.gain.linearRampToValueAtTime(0.55, t + 0.15);\n gain.gain.setTargetAtTime(0, t + hold, 0.10);\n osc.connect(gain);\n gain.connect(this.gain);\n osc.start(t);\n osc.stop(t + hold + 0.12);\n voices.push({ osc, gain });\n t += step;\n });\n this.active.push(...voices);\n setTimeout(() => {\n this.active = this.active.filter(v => !voices.includes(v));\n }, (freqs.length * step + hold + 0.3) * 1000);\n }\n\n stopAll() {\n if (!this.ctx) return;\n this.active.forEach(v => {\n try { v.gain.gain.setTargetAtTime(0, this.ctx.currentTime, 0.02); v.osc.stop(this.ctx.currentTime + 0.05);} catch {}\n });\n this.active = [];\n }\n}\n\nconst synth = new PolySynth();\n\nfunction midiToFreq(m) { return 440 * Math.pow(2, (m - 69) / 12); }\n\nfunction chordToMidis(rootMidi, intervals) {\n return intervals.map(i => rootMidi + i);\n}\n\nfunction nameToRootMidi(name) {\n // Use octave 4 as base (middle range); allow both H and B\n const up = name.trim();\n let semitone = NAME_TO_SEMITONE[up];\n if (semitone === undefined) semitone = 0; // fallback C\n // place around C4 = 60\n return 60 + semitone; // C4 + semitone\n}\n\nfunction pickRandom(arr) { return arr[Math.floor(Math.random() * arr.length)]; }\n\n// --- Local storage helpers ---\nconst LS_KEY = \"ear_chords_stats_v1\";\nfunction loadStats() {\n try { const raw = localStorage.getItem(LS_KEY); return raw ? JSON.parse(raw) : null; } catch { return null; }\n}\nfunction saveStats(stats) {\n try { localStorage.setItem(LS_KEY, JSON.stringify(stats)); } catch {}\n}\n\nexport default function EarTrainingChordsZUS() {\n const [difficulty, setDifficulty] = useState(\"zac\"); // zac | pokr\n const [tonicSel, setTonicSel] = useState(\"Náhodně\");\n const [current, setCurrent] = useState(null); // { tonic, chordType }\n const [playing, setPlaying] = useState(false);\n const [locked, setLocked] = useState(false);\n const [feedback, setFeedback] = useState(null); // { ok:boolean, correctLabel:string }\n const [volume, setVolume] = useState(0.2);\n const [playMode, setPlayMode] = useState(\"together\");\n const [stats, setStats] = useState(() => loadStats() || { attempts:0, correct:0, streak:0, bestStreak:0 });\n\n useEffect(() => { synth.setVolume(volume); }, [volume]);\n\n const chordPool = useMemo(() => difficulty === \"zac\" ? CHORD_TYPES_BEGINNER : CHORD_TYPES_ADVANCED, [difficulty]);\n\n function newChallenge({ replay = false } = {}) {\n const chordType = pickRandom(chordPool);\n const tonic = tonicSel === \"Náhodně\" ? pickRandom(TONIC_OPTIONS.slice(1)) : tonicSel;\n const nxt = { tonic, chordType };\n setCurrent(nxt);\n setFeedback(null);\n setLocked(false);\n if (!replay) playChord(nxt);\n }\n\n function playChord(state = current) {\n if (!state) return;\n setPlaying(true);\n const rootMidi = nameToRootMidi(state.tonic);\n const midis = chordToMidis(rootMidi, state.chordType.intervals);\n const freqs = midis.map(midiToFreq);\n synth.stopAll();\n if (playMode === 'arpeggio') {\n synth.playArpeggio(freqs, { step: 0.25, hold: 0.5 });\n } else {\n synth.playFrequencies(freqs, { duration: 1.8 });\n }\n setTimeout(() => setPlaying(false), 1000);\n }\n\n function reveal() {\n if (!current) return;\n const correctLabel = `${current.tonic} – ${current.chordType.label}`;\n setFeedback({ ok: false, correctLabel, revealed:true });\n setLocked(true);\n }\n\n function onAnswer(id) {\n if (!current || locked) return;\n const ok = id === current.chordType.id;\n const correctLabel = `${current.tonic} – ${current.chordType.label}`;\n setFeedback({ ok, correctLabel });\n setLocked(true);\n // stats\n setStats(prev => {\n const attempts = prev.attempts + 1;\n const correct = prev.correct + (ok ? 1 : 0);\n const streak = ok ? prev.streak + 1 : 0;\n const bestStreak = Math.max(prev.bestStreak, streak);\n const next = { attempts, correct, streak, bestStreak };\n saveStats(next);\n return next;\n });\n }\n\n function resetStats() {\n const base = { attempts:0, correct:0, streak:0, bestStreak:0 };\n setStats(base); saveStats(base);\n }\n\n // initial challenge\n useEffect(() => { newChallenge(); /* eslint-disable-next-line */ }, []);\n\n const answerButtons = chordPool.map(ct => (\n onAnswer(ct.id)}\n className={\n \"px-3 py-2 rounded-2xl shadow \"+\n \"text-sm font-semibold transition-all border \"+\n (locked\n ? \"bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed\"\n : \"bg-white hover:bg-slate-50 border-slate-200\")\n }\n disabled={locked}\n >{ct.label}\n ));\n\n const accuracy = stats.attempts ? Math.round((stats.correct / stats.attempts) * 100) : 0;\n\n return (\n

Ear‑training: Rozpoznávání akordů

Cíl: po poslechu určit typ akordu. Vhodné pro žáky 10–15 let. Jasné barvy, jednoduché ovládání.

\n\n {/* Controls row */}\n

Režim obtížnosti

\n setDifficulty(\"zac\")}\n className={(difficulty===\"zac\"?\"bg-sky-600 text-white\":\"bg-sky-50 text-sky-700\")+\" px-3 py-1.5 rounded-xl font-medium border border-sky-200\"}\n >Začátečník (Dur/Moll)\n setDifficulty(\"pokr\")}\n className={(difficulty===\"pokr\"?\"bg-violet-600 text-white\":\"bg-violet-50 text-violet-700\")+\" px-3 py-1.5 rounded-xl font-medium border border-violet-200\"}\n >Pokročilý (vše)\n

\n\n

Tónina (kořen)

\n setTonicSel(e.target.value)}\n className=\"w-full px-3 py-2 rounded-xl border border-slate-300 bg-white\"\n >\n {TONIC_OPTIONS.map(o => )}\n \n

Pozn.: „H“ = B (natural), „B“ = B♭.

\n\n

Hlasitost

\n setVolume(parseFloat(e.target.value))} className=\"w-full\"/>\n

TichoNahlas

Sluchová nápověda

\n \n setPlayMode('together')} />\n Souzvuk (vše najednou)\n \n \n setPlayMode('arpeggio')} />\n Arpeggio (po tónech)\n \n

Zvolte, zda se akord přehraje najednou, nebo postupně po tónech.

\n\n {/* Play panel */}\n

Aktuální výzva

{current ? `${current.tonic} – (skrytý typ akordu)` : \"–\"}

\n \n \n \n \n

\n\n {/* Answers */}\n

\n {answerButtons}\n

\n\n {/* Feedback banner */}\n {feedback && (\n

\n {feedback.ok ? \"Správně!\" : \"To nebylo ono.\"} {\" \"}\n Správná odpověď: {feedback.correctLabel}\n

\n \n \n

\n )}\n

\n\n {/* Stats */}\n

Pokusy

{stats.attempts}

Správně

{stats.correct}

Úspěšnost

{accuracy}%

Nej delší série

{stats.bestStreak}

\n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","6008795592600583390","traceTime",1776481477514]