[{"_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","68d8038c4fbc8191b32ca260d115350d","versionInt","title","Generátor Bicích Patternů Pro Zuš – React (tone","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n// Jednosouborová interaktivní aplikace – Generátor bicích doprovodů pro ZUŠ\n// Požadavky: volba žánru, metra, tempa, obtížnosti; přehrávání smyčky; zobrazení gridu; možnost měnit pattern během hry.\n// Audio: Tone.js syntéza bicích (bez nutnosti externích samplů)\n\n// *** Poznámka k prostředí ***\n// Tento komponent je připraven pro canvas náhled. V UI ChatGPT jsou NPM knihovny dostupné – import Tone přes dynamický import.\n\nconst INSTRUMENTS = [\n { id: \"kick\", name: \"Kopák\", color: \"bg-emerald-500\" },\n { id: \"snare\", name: \"Virbl\", color: \"bg-rose-500\" },\n { id: \"hihat\", name: \"Hi‑hat\", color: \"bg-amber-500\" },\n { id: \"ride\", name: \"Ride\", color: \"bg-sky-500\" },\n { id: \"tom\", name: \"Tom\", color: \"bg-violet-500\" },\n];\n\nconst GENRES = [\n \"rock\",\n \"jazz (swing/shuffle)\",\n \"funk\",\n \"R&B\",\n \"pop\",\n \"soul\",\n \"bossa nova\",\n \"valčík\",\n];\n\nconst METERS = [\"2/4\", \"3/4\", \"4/4\", \"6/8\"] as const;\n\n// Pomůcky\nconst clamp = (n: number, a: number, b: number) => Math.min(Math.max(n, a), b);\n\n// Vytvoř prázdný grid [instrument][step]\nfunction emptyGrid(steps: number) {\n const grid: Record = {};\n INSTRUMENTS.forEach((ins) => {\n grid[ins.id] = Array(steps).fill(false);\n });\n return grid;\n}\n\n// Generátory patternů pro žánry (základní šablony) – výstup: grid s true/false\nfunction genreTemplate(\n genre: string,\n meter: typeof METERS[number],\n steps: number,\n difficulty: \"easy\" | \"medium\" | \"hard\"\n) {\n const g = emptyGrid(steps);\n const beats = meter === \"6/8\" ? 6 : parseInt(meter.split(\"/\")[0], 10);\n const subdivision = meter === \"6/8\" ? 2 : 4; // 6/8 = dvanáct šestnáctin => 6 osmin * 2 (na 16tiny)\n // celkové kroky = beats * subdivision * (16th per beat / (1 or 2?))\n // Zjednodušeně držíme 16tiny: steps = beats * 4 (pro 2/4,3/4,4/4) a 12 pro 6/8\n\n const on = (id: string, step: number) => {\n if (step >= 0 && step < steps) g[id][step] = true;\n };\n\n // helper pro akcenty na doby\n const downbeats: number[] = [];\n for (let b = 0; b < beats; b++) {\n const idx = meter === \"6/8\" ? b * 2 : b * 4; // každá doba\n downbeats.push(idx);\n }\n\n // Základní ostinata podle žánru\n switch (genre) {\n case \"rock\": {\n // Kick na 1 a 3 (v 4/4), snare na 2 a 4, hihat osminy\n downbeats.forEach((d, i) => {\n if (i % 2 === 0) on(\"kick\", d);\n else on(\"snare\", d);\n });\n // hihat: osminy (každé 2 šestnáctiny)\n for (let s = 0; s < steps; s += 2) on(\"hihat\", s);\n if (difficulty !== \"easy\") {\n // přidáme kick synkopy\n for (let s = 3; s < steps; s += 4) if (Math.random() < 0.5) on(\"kick\", s);\n }\n if (difficulty === \"hard\") {\n for (let s = 1; s < steps; s += 4) if (Math.random() < 0.5) on(\"kick\", s);\n }\n break;\n }\n case \"jazz (swing/shuffle)\": {\n // Ride swing: vzorec 1‑a 2‑a 3‑a 4‑a (akcent na doby)\n for (let b = 0; b < beats; b++) {\n const base = meter === \"6/8\" ? b * 2 : b * 4;\n on(\"ride\", base);\n // swing off (triplet feel -> posun na 3. šestnáctinu v beatě)\n const swung = clamp(base + (meter === \"6/8\" ? 1 : 3), 0, steps - 1);\n on(\"ride\", swung);\n }\n // Vážená chůze kopáku (walking) – občasná 1/3/4\n downbeats.forEach((d, i) => {\n if (i === 0 || Math.random() < 0.3) on(\"kick\", d);\n });\n // Virbl na 2 a 4 (v 4/4) / u 3/4 na 2\n downbeats.forEach((d, i) => {\n const backbeat = meter === \"3/4\" ? i === 1 : i % 2 === 1;\n if (backbeat) on(\"snare\", d);\n });\n if (difficulty !== \"easy\") {\n // drobné brush ghost notes (jemné offbeat – šestnáctiny před dobou)\n downbeats.forEach((d) => {\n if (d - 1 >= 0 && Math.random() < 0.45) on(\"snare\", d - 1);\n });\n }\n break;\n }\n case \"funk\": {\n // Tight hihat na 16tiny, akcent doby\n for (let s = 0; s < steps; s++) on(\"hihat\", s);\n downbeats.forEach((d) => on(\"hihat\", d));\n // Backbeat na 2 a 4 / střední doba v 3/4\n downbeats.forEach((d, i) => {\n const back = meter === \"3/4\" ? i === 1 : i % 2 === 1;\n if (back) on(\"snare\", d);\n });\n // Syncopated kick\n for (let s = 0; s < steps; s += 2) if (Math.random() < 0.5) on(\"kick\", s);\n if (difficulty === \"hard\") {\n for (let s = 1; s < steps; s += 4) if (Math.random() < 0.5) on(\"kick\", s);\n for (let s = 2; s < steps; s += 4) if (Math.random() < 0.3) on(\"tom\", s);\n }\n break;\n }\n case \"R&B\":\n case \"soul\": {\n // Jemnější groove: hihat osminy, backbeat na 2/4, kick na 1 + občasné off\n for (let s = 0; s < steps; s += 2) on(\"hihat\", s);\n downbeats.forEach((d, i) => {\n if (i % 2 === 0) on(\"kick\", d);\n else on(\"snare\", d);\n });\n if (difficulty !== \"easy\") {\n for (let s = 3; s < steps; s += 4) if (Math.random() < 0.4) on(\"kick\", s);\n }\n break;\n }\n case \"pop\": {\n // Univerzální: four-on-the-floor u 4/4, jinak kick na 1, snare backbeat, hihat osminy\n if (meter === \"4/4\") for (let s = 0; s < steps; s += 4) on(\"kick\", s);\n else downbeats.forEach((d, i) => (i === 0 ? on(\"kick\", d) : null));\n downbeats.forEach((d, i) => {\n const back = meter === \"3/4\" ? i === 1 : i % 2 === 1;\n if (back) on(\"snare\", d);\n });\n for (let s = 0; s < steps; s += 2) on(\"hihat\", s);\n break;\n }\n case \"bossa nova\": {\n // 4/4 typický bossa pattern\n // Kick: 1 a 3 (občas off na 4e)\n on(\"kick\", 0);\n if (steps >= 8) on(\"kick\", 8);\n // Snare: cross‑stick synkopy\n on(\"snare\", 6);\n on(\"snare\", 14);\n // Hi‑hat na lehké osminy\n for (let s = 1; s < steps; s += 2) on(\"hihat\", s);\n if (difficulty !== \"easy\") on(\"snare\", 2);\n break;\n }\n case \"valčík\": {\n // 3/4: důraz na 1 (kick), 2 a 3 lehký snare/ride\n const db = downbeats;\n db.forEach((d, i) => {\n if (i % 3 === 0 || i === 0) on(\"kick\", d);\n });\n db.forEach((d, i) => {\n if (i % 3 === 1 || i % 3 === 2) on(\"ride\", d);\n });\n // jemný virbl před dobou\n if (difficulty !== \"easy\") db.forEach((d) => d - 1 >= 0 && Math.random() < 0.4 && on(\"snare\", d - 1));\n break;\n }\n }\n return g;\n}\n\n// Lidské popisky metra\nfunction meterToSteps(meter: typeof METERS[number]) {\n switch (meter) {\n case \"2/4\":\n return 8; // 8 šestnáctin\n case \"3/4\":\n return 12;\n case \"4/4\":\n return 16;\n case \"6/8\":\n return 12; // šest osmin s triolovým feel – zobrazíme 12 šestnáctin\n }\n}\n\n// Inicializace syntézátorů pro bicí (Tone.js)\nasync function createDrumKit(Tone: any) {\n const kick = new Tone.MembraneSynth({\n pitchDecay: 0.04,\n octaves: 6,\n attack: 0.001,\n decay: 0.4,\n sustain: 0.01,\n release: 0.2,\n volume: -4,\n }).toDestination();\n\n const snare = new Tone.NoiseSynth({\n noise: { type: \"white\" },\n envelope: { attack: 0.001, decay: 0.2, sustain: 0 },\n volume: -8,\n });\n const snareFilter = new Tone.Filter(1800, \"highpass\").toDestination();\n snare.connect(snareFilter);\n\n const hihat = new Tone.MetalSynth({\n frequency: 250,\n envelope: { attack: 0.001, decay: 0.18, release: 0.05 },\n harmonicity: 5.1,\n modulationIndex: 32,\n resonance: 4000,\n octaves: 1.5,\n volume: -16,\n }).toDestination();\n\n const ride = new Tone.MetalSynth({\n frequency: 220,\n envelope: { attack: 0.001, decay: 0.5, release: 0.05 },\n harmonicity: 10,\n modulationIndex: 10,\n resonance: 3000,\n octaves: 3,\n volume: -18,\n }).toDestination();\n\n const tom = new Tone.MembraneSynth({\n pitchDecay: 0.02,\n octaves: 2,\n volume: -8,\n }).toDestination();\n\n return { kick, snare, hihat, ride, tom };\n}\n\n// Přehrání jednoho úderu podle id nástroje\nfunction trigger(drumkit: any, id: string, Tone: any) {\n switch (id) {\n case \"kick\":\n drumkit.kick.triggerAttackRelease(\"C1\", \"8n\");\n break;\n case \"snare\":\n drumkit.snare.triggerAttackRelease(\"16n\");\n break;\n case \"hihat\":\n drumkit.hihat.triggerAttackRelease(\"16n\", \"+0\");\n break;\n case \"ride\":\n drumkit.ride.triggerAttackRelease(\"8n\", \"+0\");\n break;\n case \"tom\":\n drumkit.tom.triggerAttackRelease(\"G2\", \"8n\");\n break;\n }\n}\n\nexport default function ZUSDrumPatternGenerator() {\n const [ToneObj, setToneObj] = useState(null);\n const [drumkit, setDrumkit] = useState(null);\n\n const [genre, setGenre] = useState(\"rock\");\n const [meter, setMeter] = useState(\"4/4\");\n const [tempo, setTempo] = useState(100);\n const [difficulty, setDifficulty] = useState<\"easy\" | \"medium\" | \"hard\">(\"medium\");\n const [isPlaying, setIsPlaying] = useState(false);\n const [loop, setLoop] = useState(true);\n const [currentStep, setCurrentStep] = useState(0);\n\n const steps = useMemo(() => meterToSteps(meter), [meter]);\n const [grid, setGrid] = useState>(() => genreTemplate(genre, meter, steps, difficulty));\n\n // Re‑generuj grid při změně žánru/metra/obtížnosti\n useEffect(() => {\n setGrid(genreTemplate(genre, meter, steps, difficulty));\n }, [genre, meter, steps, difficulty]);\n\n // Načtení Tone.js lazy až při prvním renderu\n useEffect(() => {\n let mounted = true;\n (async () => {\n // @ts-ignore\n const Tone = await import(\"tone\");\n if (!mounted) return;\n setToneObj(Tone);\n const kit = await createDrumKit(Tone);\n if (!mounted) return;\n setDrumkit(kit);\n Tone.Transport.bpm.value = tempo;\n Tone.Transport.swing = 0; // default\n })();\n return () => {\n mounted = false;\n };\n }, []);\n\n // Aktualizace tempa\n useEffect(() => {\n if (ToneObj) ToneObj.Transport.bpm.rampTo(tempo, 0.05);\n }, [tempo, ToneObj]);\n\n // Přepínání swing feel pro jazz/shuffle a 6/8\n useEffect(() => {\n if (!ToneObj) return;\n if (genre.startsWith(\"jazz\") || meter === \"6/8\") {\n ToneObj.Transport.swing = 0.28; // příjemný shuffle\n ToneObj.Transport.swingSubdivision = \"8n\";\n } else {\n ToneObj.Transport.swing = 0;\n }\n }, [genre, meter, ToneObj]);\n\n // Sekvencer – přehrávání po krocích\n const seqRef = useRef(null);\n useEffect(() => {\n if (!ToneObj || !drumkit) return;\n\n // Zastav a zruš starý sekvencer\n if (seqRef.current) {\n seqRef.current.dispose?.();\n seqRef.current = null;\n }\n\n const stepsCount = steps;\n\n const seq = new ToneObj.Sequence(\n (time: any, stepIdx: number) => {\n // vizuální kurzor\n setCurrentStep(stepIdx);\n // přehrát údery v tomto kroku\n INSTRUMENTS.forEach((ins) => {\n if (grid[ins.id]?.[stepIdx]) trigger(drumkit, ins.id, ToneObj);\n });\n },\n Array.from({ length: stepsCount }, (_, i) => i),\n \"16n\"\n );\n\n seq.loop = loop;\n seqRef.current = seq;\n\n if (isPlaying) {\n seq.start(0);\n ToneObj.Transport.start();\n }\n\n return () => {\n seq.dispose();\n };\n }, [ToneObj, drumkit, grid, steps, loop, isPlaying]);\n\n const toggleCell = (insId: string, idx: number) => {\n setGrid((g) => ({ ...g, [insId]: g[insId].map((v, i) => (i === idx ? !v : v)) }));\n };\n\n const play = async () => {\n if (!ToneObj) return;\n await ToneObj.start(); // odemknutí audia pro iOS/Chrome\n if (!isPlaying) {\n setIsPlaying(true);\n }\n };\n\n const stop = () => {\n if (!ToneObj) return;\n setIsPlaying(false);\n ToneObj.Transport.stop();\n if (seqRef.current) seqRef.current.stop(0);\n setCurrentStep(0);\n };\n\n const regenerate = () => {\n setGrid(genreTemplate(genre, meter, steps, difficulty));\n };\n\n const clearGrid = () => setGrid(emptyGrid(steps));\n\n // Vizuální rozvržení gridu – takty barevně\n const beats = meter === \"6/8\" ? 6 : parseInt(meter.split(\"/\")[0], 10);\n const stepsPerBeat = meter === \"6/8\" ? 2 : 4; // 16tiny\n\n return (\n

Generátor bicích patternů (ZUŠ)

Vytvářejte a přehrávejte doprovody pro souborovou hru – žánry, metrum, tempo, obtížnost. Kliknutím do mřížky zapínáte/vypínáte údery.

\n \n \n

\n\n {/* Ovládání */}\n

\n Žánr\n \n

\n Metrum\n \n

\n Tempo: {tempo} BPM\n setTempo(parseInt(e.target.value))} className=\"w-full\" />\n

\n Obtížnost\n

\n {([\"easy\", \"medium\", \"hard\"] as const).map((d) => (\n setDifficulty(d)}\n className={`px-3 py-2 rounded-xl border ${difficulty === d ? \"bg-emerald-600 border-emerald-400\" : \"bg-neutral-900 border-neutral-700\"}`}\n >\n {d === \"easy\" ? \"Začátečník\" : d === \"medium\" ? \"Střední\" : \"Pokročilý\"}\n \n ))}\n

\n \n setLoop(e.target.checked)} /> Smyčka\n \n

\n \n \n

\n\n {/* Grid */}\n

\n \n \n \n \n {Array.from({ length: steps }).map((_, i) => {\n const beatIdx = Math.floor(i / stepsPerBeat);\n const isDown = i % stepsPerBeat === 0;\n // Barevné pásy taktů\n return (\n \n );\n })}\n \n \n \n {INSTRUMENTS.map((ins) => (\n \n \n {grid[ins.id]?.map((onCell, idx) => {\n const beatStart = idx % stepsPerBeat === 0;\n const isActiveStep = idx === currentStep && isPlaying;\n return (\n \n );\n })}\n \n ))}\n \n

Nástroj	\n {beatIdx + 1}{isDown ? \" •\" : \"\"}\n
{ins.name}	\n toggleCell(ins.id, idx)}\n className={`w-8 h-8 rounded-md border transition-all duration-75 relative ${\n onCell ? `${ins.color} border-white/50` : \"bg-neutral-900 border-neutral-700\"\n } ${isActiveStep ? \"ring-2 ring-emerald-400\" : \"\"}`}\n title={`${ins.name} – krok ${idx + 1}`}\n >\n {/* indikátor */}\n \n

\n Tip: Kliknutím do mřížky zapínáte/vypínáte údery. Tlačítkem „Generovat pattern“ vytvoříte nový groove v rámci zvoleného žánru.\n

\n\n {/* Info panel */}\n

Nastavení

Žánr: {genre}
Metrum: {meter}
Tempo: {tempo} BPM
Obtížnost: {difficulty === \"easy\" ? \"Začátečník\" : difficulty === \"medium\" ? \"Střední\" : \"Pokročilý\"}

Didaktické tipy

Souborovka: Spusťte smyčku a nechte žáky vrstvit doprovody (bas, klavír, kytara) nad zvolený pattern.
Intonace rytmu: Měňte metrum a žákům dejte úkol zdůraznit přízvučné doby.
Analýza: Zastavte na konkrétním kroku a ptejte se, které údery zní (sluch + vizuál).

\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","17380323408110081220","traceTime",1776430043457]