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 { 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 { generateRandomFormula } from './utils/bytebeatFormulas'
import { BytebeatTile } from './components/tile/BytebeatTile'
@ -225,7 +225,7 @@ function App() {
onClick={() => setShowHelp(true)}
className="font-mono text-[10px] tracking-[0.3em] text-white cursor-pointer hover:opacity-70 transition-opacity"
>
BRUITISTE
BRUIT
</h1>
<div className="flex gap-1">
<div className="flex border-2 border-white">
@ -237,7 +237,7 @@ function App() {
: 'bg-black text-white hover:bg-white/10'
}`}
>
1-BIT
BYTE
</button>
<button
onClick={handleModeToggle}
@ -279,7 +279,7 @@ function App() {
: 'bg-black text-white hover:bg-white/10'
}`}
>
MODULATE
MOD
</button>
</div>
</div>
@ -310,7 +310,7 @@ function App() {
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"
>
<Blend size={12} strokeWidth={2} className="mx-auto" />
<ArrowLeftRight size={12} strokeWidth={2} className="mx-auto" />
</button>
<button
onClick={handleDownloadAll}
@ -387,39 +387,35 @@ function App() {
<button
onClick={stop}
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" />
STOP
</button>
<button
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} />
RANDOM
</button>
<button
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} />
CHAOS
</button>
<button
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"
>
<Blend size={12} strokeWidth={2} />
<ArrowLeftRight size={12} strokeWidth={2} />
MORPH
</button>
<button
onClick={handleDownloadAll}
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} />
{downloading ? 'DOWNLOADING...' : 'PACK'}
</button>
</div>
</div>

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

@ -70,7 +70,7 @@ export function EngineControls({ values, onChange, onMapClick, getMappedLFOs, sh
}
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">
<label className="font-mono text-[7px] lg:text-[9px] tracking-[0.1em] lg:tracking-[0.15em] text-white truncate">
{param.label.toUpperCase()}