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

mobile fix

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-06 16:48:05 +02:00
parent 9d26ea5cd7
commit 14e1a8ec48
2 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.tsx
View File

@ -1,6 +1,6 @@
import { useState, useRef } from 'react' import { useState, useRef } from 'react'
import { useStore } from '@nanostores/react' import { useStore } from '@nanostores/react'
import { Square, Archive, Dices, Sparkles, Blend } from 'lucide-react' import { Square, Archive, Dices, Sparkles, ArrowLeftRight } from 'lucide-react'
import { DownloadService } from './services/DownloadService' import { DownloadService } from './services/DownloadService'
import { generateRandomFormula } from './utils/bytebeatFormulas' import { generateRandomFormula } from './utils/bytebeatFormulas'
import { BytebeatTile } from './components/tile/BytebeatTile' import { BytebeatTile } from './components/tile/BytebeatTile'
@ -225,7 +225,7 @@ function App() {
onClick={() => setShowHelp(true)} onClick={() => setShowHelp(true)}
className="font-mono text-[10px] tracking-[0.3em] text-white cursor-pointer hover:opacity-70 transition-opacity" className="font-mono text-[10px] tracking-[0.3em] text-white cursor-pointer hover:opacity-70 transition-opacity"
> >
BRUITISTE BRUIT
</h1> </h1>
<div className="flex gap-1"> <div className="flex gap-1">
<div className="flex border-2 border-white"> <div className="flex border-2 border-white">
@ -237,7 +237,7 @@ function App() {
: 'bg-black text-white hover:bg-white/10' : 'bg-black text-white hover:bg-white/10'
}`} }`}
> >
1-BIT BYTE
</button> </button>
<button <button
onClick={handleModeToggle} onClick={handleModeToggle}
@ -279,7 +279,7 @@ function App() {
: 'bg-black text-white hover:bg-white/10' : 'bg-black text-white hover:bg-white/10'
}`} }`}
> >
MODULATE MOD
</button> </button>
</div> </div>
</div> </div>
@ -310,7 +310,7 @@ function App() {
onClick={interpolateParams} onClick={interpolateParams}
className="flex-1 px-2 py-2 bg-white text-black font-mono text-[9px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all" className="flex-1 px-2 py-2 bg-white text-black font-mono text-[9px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
> >
<Blend size={12} strokeWidth={2} className="mx-auto" /> <ArrowLeftRight size={12} strokeWidth={2} className="mx-auto" />
</button> </button>
<button <button
onClick={handleDownloadAll} onClick={handleDownloadAll}
@ -387,39 +387,35 @@ function App() {
<button <button
onClick={stop} onClick={stop}
disabled={!playing} disabled={!playing}
className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1" className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed"
> >
<Square size={12} strokeWidth={2} fill="currentColor" /> <Square size={12} strokeWidth={2} fill="currentColor" />
STOP
</button> </button>
<button <button
onClick={handleRandom} onClick={handleRandom}
className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1" className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
> >
<Dices size={12} strokeWidth={2} /> <Dices size={12} strokeWidth={2} />
RANDOM
</button> </button>
<button <button
onClick={randomizeAllParams} onClick={randomizeAllParams}
className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1" className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
> >
<Sparkles size={12} strokeWidth={2} /> <Sparkles size={12} strokeWidth={2} />
CHAOS
</button> </button>
<button <button
onClick={interpolateParams} onClick={interpolateParams}
className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1" className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1"
> >
<Blend size={12} strokeWidth={2} /> <ArrowLeftRight size={12} strokeWidth={2} />
MORPH MORPH
</button> </button>
<button <button
onClick={handleDownloadAll} onClick={handleDownloadAll}
disabled={downloading} disabled={downloading}
className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1" className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed"
> >
<Archive size={12} strokeWidth={2} /> <Archive size={12} strokeWidth={2} />
{downloading ? 'DOWNLOADING...' : 'PACK'}
</button> </button>
</div> </div>
</div> </div>

2
src/components/controls/EngineControls.tsx
View File

@ -70,7 +70,7 @@ export function EngineControls({ values, onChange, onMapClick, getMappedLFOs, sh
} }
return ( return (
<div key={param.id} className="flex flex-col gap-1 min-w-[70px] flex-1 lg:flex-initial lg:min-w-[90px] xl:min-w-[100px]"> <div key={param.id} className="flex flex-col gap-1 min-w-[70px] flex-1 lg:flex-initial lg:w-[80px] lg:min-w-0">
<div className="flex justify-between items-baseline gap-1"> <div className="flex justify-between items-baseline gap-1">
<label className="font-mono text-[7px] lg:text-[9px] tracking-[0.1em] lg:tracking-[0.15em] text-white truncate"> <label className="font-mono text-[7px] lg:text-[9px] tracking-[0.1em] lg:tracking-[0.15em] text-white truncate">
{param.label.toUpperCase()} {param.label.toUpperCase()}