function DrumPad({ onPadClick = ()=>{} }) { const [activeIndex, setActiveIndex] = useState(null); const [audioContext] = useState(new AudioContext()); const [sounds, setSounds] = useState({}); const [padSettings, setPadSettings] = useState(Array.from({ length: 16 }).fill({ volume: 0.5, reverb: 0, delay: 0 })); const drumSounds = { 0: "https://create-sounds.s3.amazonaws.com/kick.wav", 1: "https://create-sounds.s3.amazonaws.com/snare.wav", 2: "https://create-sounds.s3.amazonaws.com/hihat.wav", 3: "https://create-sounds.s3.amazonaws.com/openhat.wav", 4: "https://create-sounds.s3.amazonaws.com/crash.wav", 5: "https://create-sounds.s3.amazonaws.com/clap.wav", 6: "https://create-sounds.s3.amazonaws.com/tom1.wav", 7: "https://create-sounds.s3.amazonaws.com/tom2.wav", 8: "https://create-sounds.s3.amazonaws.com/rim.wav", 9: "https://create-sounds.s3.amazonaws.com/shaker.wav", 10: "https://create-sounds.s3.amazonaws.com/perc1.wav", 11: "https://create-sounds.s3.amazonaws.com/perc2.wav", 12: "https://create-sounds.s3.amazonaws.com/cymbal.wav", 13: "https://create-sounds.s3.amazonaws.com/snap.wav", 14: "https://create-sounds.s3.amazonaws.com/ride.wav", 15: "https://create-sounds.s3.amazonaws.com/woodblock.wav" }; useEffect(()=>{ const loadSounds = async ()=>{ const soundPromises = Object.entries(drumSounds).map(async ([key, url])=>{ const response = await fetch(url); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); return [ key, audioBuffer ]; }); const loadedSounds = Object.fromEntries(await Promise.all(soundPromises)); setSounds(loadedSounds); }; loadSounds(); }, []); const createEffectChain = (index)=>{ const gainNode = audioContext.createGain(); gainNode.gain.value = padSettings[index].volume; const reverbNode = audioContext.createConvolver(); const delayNode = audioContext.createDelay(); delayNode.delayTime.value = padSettings[index].delay; const wetGainNode = audioContext.createGain(); wetGainNode.gain.value = padSettings[index].reverb; return { gainNode, reverbNode, delayNode, wetGainNode }; }; const playSound = (index)=>{ if (sounds[index]) { const source = audioContext.createBufferSource(); source.buffer = sounds[index]; const effects = createEffectChain(index); source.connect(effects.gainNode); effects.gainNode.connect(effects.delayNode); effects.delayNode.connect(effects.reverbNode); effects.reverbNode.connect(effects.wetGainNode); effects.wetGainNode.connect(audioContext.destination); effects.gainNode.connect(audioContext.destination); source.start(); } }; const handleClick = (index)=>{ setActiveIndex(index); playSound(index); onPadClick(index); setTimeout(()=>setActiveIndex(null), 100); }; const updatePadSetting = (index, setting, value)=>{ setPadSettings((prev)=>{ const newSettings = [ ...prev ]; newSettings[index] = { ...newSettings[index], [setting]: parseFloat(value) }; return newSettings; }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-8 p-8 bg-[#121212] rounded-xl", __source: { fileName: "", lineNumber: 99, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, Array.from({ length: 16 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick(index), className: `w-[80px] h-[80px] rounded-lg transition-colors duration-100 ${activeIndex === index ? "bg-[#ff5252] shadow-lg" : "bg-[#2a2a2a] hover:bg-[#3a3a3a]"}`, __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: padSettings[index].volume, onChange: (e)=>updatePadSetting(index, "volume", e.target.value), className: "w-full", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: padSettings[index].reverb, onChange: (e)=>updatePadSetting(index, "reverb", e.target.value), className: "w-full", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: padSettings[index].delay, onChange: (e)=>updatePadSetting(index, "delay", e.target.value), className: "w-full", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this })))))); } function DrumPadStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-[#000000]", __source: { fileName: "", lineNumber: 155, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DrumPad, { onPadClick: (index)=>{}, __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this })); } function Controls1() { const [isPlaying, setIsPlaying] = useState(false); const [tempo, setTempo] = useState(120); const [sequence, setSequence] = useState(Array.from({ length: 16 }).fill(false)); const [patterns, setPatterns] = useState([]); const [volume, setVolume] = useState(1); const [reverb, setReverb] = useState(0); const [delay, setDelay] = useState(0); const intervalRef = useRef(); const [currentStep, setCurrentStep] = useState(0); const audioContext = useRef(new AudioContext()); useEffect(()=>{ if (isPlaying) { const stepTime = 60 * 1000 / tempo / 4; intervalRef.current = setInterval(()=>{ setCurrentStep((prev)=>(prev + 1) % 16); }, stepTime); } else { clearInterval(intervalRef.current); setCurrentStep(0); } return ()=>clearInterval(intervalRef.current); }, [ isPlaying, tempo ]); const savePattern = ()=>{ setPatterns([ ...patterns, sequence ]); }; const loadPattern = (index)=>{ if (patterns[index]) { setSequence(patterns[index]); } }; const Controls = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 p-6 rounded-lg bg-[#2a2a2a] w-full max-w-2xl", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsPlaying(true), className: "px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 inline-block", disabled: isPlaying, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsPlaying(false), className: "px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 inline-block", disabled: !isPlaying, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 flex-1", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Tempo:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "60", max: "200", value: tempo, onChange: (e)=>setTempo(Number(e.target.value)), className: "w-32", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, tempo, " BPM"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: savePattern, className: "px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 inline-block", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), " Save Pattern"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, patterns.map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>loadPattern(index), className: "px-3 py-1 bg-[#3a3a3a] text-white rounded-md hover:bg-[#4a4a4a] inline-block", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, index + 1)))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Master:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: (e)=>setVolume(Number(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Reverb:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: reverb, onChange: (e)=>setReverb(Number(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Delay:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: delay, onChange: (e)=>setDelay(Number(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this })))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white p-8", __source: { fileName: "", lineNumber: 137, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto flex flex-col items-center", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold mb-12 text-center font-roboto", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, "Kobalt Beat Maker 4"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-8 w-full", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(DrumPad, { onPadClick: (index)=>{ const newSequence = [ ...sequence ]; newSequence[index] = !newSequence[index]; setSequence(newSequence); }, __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(Controls, { __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this })))); } function Controls1Story() { return /*#__PURE__*/ React.createElement(Controls1, { __source: { fileName: "", lineNumber: 158, columnNumber: 10 }, __self: this }); } function MainComponent() { const [message, setMessage] = useState(""); return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-64 bg-[#2f3136] flex flex-col", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#202225] shadow", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-bold", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Discord Server")), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8e9297] text-xs font-semibold mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "TEXT CHANNELS"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-[#8e9297] hover:bg-[#393c43] p-1 rounded cursor-pointer", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag mr-2 text-sm", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, "general")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-[#8e9297] hover:bg-[#393c43] p-1 rounded cursor-pointer", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag mr-2 text-sm", __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, "announcements")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center bg-[#393c43] text-white p-1 rounded cursor-pointer", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag mr-2 text-sm", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, "off-topic")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8e9297] text-xs font-semibold mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "VOICE CHANNELS"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-[#8e9297] hover:bg-[#393c43] p-1 rounded cursor-pointer", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up mr-2 text-sm", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "General Voice")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-[#8e9297] hover:bg-[#393c43] p-1 rounded cursor-pointer", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up mr-2 text-sm", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "Gaming")))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col bg-[#36393f]", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 shadow bg-[#36393f] flex items-center border-b border-[#202225]", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag mr-2 text-[#8e9297]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-white", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "off-topic")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/avatar.jpg", alt: "User avatar", className: "w-10 h-10 rounded-full mr-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-white mr-2", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#8e9297]", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, "Today at 12:00 PM")), /*#__PURE__*/ React.createElement("p", { className: "text-[#dcddde]", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "Hello everyone! 👋")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#36393f]", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#40444b] rounded-lg p-2", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Message #off-topic", value: message, onChange: (e)=>setMessage(e.target.value), className: "w-full bg-transparent text-[#dcddde] outline-none placeholder-[#72767d]", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }))))); }