BuboBubo/bruitiste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance FM synthesis + cleaning code architecture

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-06 13:48:14 +02:00
parent 324cf9d2ed
commit ff5add97e8
38 changed files with 893 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/modals/HelpModal.tsx Normal file
View File

@ -0,0 +1,107 @@
interface HelpModalProps {
onClose: () => void
showStartButton?: boolean
}
export function HelpModal({ onClose, showStartButton = false }: HelpModalProps) {
return (
<div
className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4 overflow-y-auto"
onClick={onClose}
onKeyDown={(e) => {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
onClose()
}
}}
tabIndex={0}
>
<div
className="border-2 md:border-4 border-white bg-black p-4 md:p-8 lg:p-12 max-w-4xl w-full my-auto"
onClick={(e) => e.stopPropagation()}
>
<h1 className="font-mono text-lg md:text-2xl tracking-[0.3em] text-white mb-4 md:mb-6 text-center">
BRUITISTE
</h1>
<p className="font-mono text-xs md:text-sm text-white mb-2 leading-relaxed text-center">
Harsh noise soundbox made as a love statement to all weird noises, hums, audio glitches and ominous textures. Be careful, lower your volume! Tweak some parameters!
</p>
<p className="font-mono text-[10px] md:text-xs text-white mb-4 md:mb-6 opacity-70 text-center">
Made by Raphaël Forment (BuboBubo) — <a href="https://raphaelforment.fr" target="_blank" rel="noopener noreferrer" className="underline hover:opacity-100">raphaelforment.fr</a>
</p>
<div className="font-mono text-xs md:text-sm text-white mb-6 md:mb-8">
<h2 className="text-sm md:text-lg tracking-[0.2em] mb-3 md:mb-4">KEYBOARD SHORTCUTS</h2>
<div className="overflow-x-auto">
<table className="w-full border-2 border-white">
<thead>
<tr className="border-b-2 border-white">
<th className="text-left p-2 md:p-3 bg-white text-black tracking-[0.1em] text-[10px] md:text-sm">KEY</th>
<th className="text-left p-2 md:p-3 bg-white text-black tracking-[0.1em] text-[10px] md:text-sm">ACTION</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">SPACE</td>
<td className="p-2 md:p-3">Play/Stop current tile</td>
</tr>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">ARROWS</td>
<td className="p-2 md:p-3">Navigate tiles</td>
</tr>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">SHIFT + ARROWS</td>
<td className="p-2 md:p-3">Jump 10 tiles</td>
</tr>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">ENTER</td>
<td className="p-2 md:p-3">Queue tile (play after current)</td>
</tr>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">DOUBLE ENTER</td>
<td className="p-2 md:p-3">Play immediately</td>
</tr>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">R</td>
<td className="p-2 md:p-3">Regenerate current tile</td>
</tr>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">SHIFT + R</td>
<td className="p-2 md:p-3">Randomize all tiles</td>
</tr>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">C</td>
<td className="p-2 md:p-3">Randomize current tile params</td>
</tr>
<tr className="border-b border-white">
<td className="p-2 md:p-3 border-r border-white">SHIFT + C</td>
<td className="p-2 md:p-3">Randomize all params (CHAOS)</td>
</tr>
<tr>
<td className="p-2 md:p-3 border-r border-white">ESC</td>
<td className="p-2 md:p-3">Exit mapping mode</td>
</tr>
</tbody>
</table>
</div>
</div>
{showStartButton ? (
<button
onClick={onClose}
className="w-full px-4 md:px-8 py-3 md:py-4 bg-white text-black font-mono text-xs md:text-sm tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
>
START
</button>
) : (
<button
onClick={onClose}
className="w-full px-4 md:px-8 py-3 md:py-4 bg-white text-black font-mono text-xs md:text-sm tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
>
CLOSE
</button>
)}
</div>
</div>
)
}