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

UI improvements

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-04 00:10:23 +02:00
parent 2d0bfe2297
commit a960f4e18b
3 changed files with 181 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/App.tsx
View File

@ -1,6 +1,6 @@
import { useState, useRef, useEffect } from 'react'
import { useStore } from '@nanostores/react'
import { Square } from 'lucide-react'
import { Square, Archive, Dices } from 'lucide-react'
import { PlaybackManager } from './services/PlaybackManager'
import { DownloadService } from './services/DownloadService'
import { generateFormulaGrid, generateRandomFormula } from './utils/bytebeatFormulas'
@ -9,6 +9,7 @@ import { EffectsBar } from './components/EffectsBar'
import { EngineControls } from './components/EngineControls'
import { getSampleRateFromIndex } from './config/effects'
import { engineSettings, effectSettings } from './stores/settings'
import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
function App() {
const engineValues = useStore(engineSettings)
@ -22,6 +23,7 @@ function App() {
const [regenerating, setRegenerating] = useState<string | null>(null)
const [playbackPosition, setPlaybackPosition] = useState<number>(0)
const [downloading, setDownloading] = useState(false)
const [focusedTile, setFocusedTile] = useState<{ row: number; col: number }>({ row: 0, col: 0 })
const playbackManagerRef = useRef<PlaybackManager | null>(null)
const downloadServiceRef = useRef<DownloadService>(new DownloadService())
const animationFrameRef = useRef<number | null>(null)
@ -82,6 +84,7 @@ function App() {
const handleTileClick = (formula: string, row: number, col: number, isDoubleClick: boolean = false) => {
const id = `${row}-${col}`
setFocusedTile({ row, col })
if (playing === id) {
playbackManagerRef.current?.stop()
@ -179,12 +182,89 @@ function App() {
}
}
const moveFocus = (direction: 'up' | 'down' | 'left' | 'right', step: number = 1) => {
setFocusedTile(prev => {
let { row, col } = prev
const maxRow = formulas.length - 1
const maxCol = (formulas[row]?.length || 1) - 1
switch (direction) {
case 'up':
row = Math.max(0, row - step)
break
case 'down':
row = Math.min(maxRow, row + step)
break
case 'left':
col = Math.max(0, col - step)
break
case 'right':
col = Math.min(maxCol, col + step)
break
}
return { row, col }
})
}
const handleKeyboardSpace = () => {
if (playing) {
handleStop()
} else {
const formula = formulas[focusedTile.row]?.[focusedTile.col]
if (formula) {
handleTileClick(formula, focusedTile.row, focusedTile.col, true)
}
}
}
const handleKeyboardEnter = () => {
const formula = formulas[focusedTile.row]?.[focusedTile.col]
if (formula) {
handleTileClick(formula, focusedTile.row, focusedTile.col, false)
}
}
const handleKeyboardDoubleEnter = () => {
const formula = formulas[focusedTile.row]?.[focusedTile.col]
if (formula) {
handleTileClick(formula, focusedTile.row, focusedTile.col, true)
}
}
const handleKeyboardR = () => {
handleRegenerate(focusedTile.row, focusedTile.col)
}
const handleKeyboardShiftR = () => {
handleRandom()
}
useKeyboardShortcuts({
onSpace: handleKeyboardSpace,
onArrowUp: (shift) => moveFocus('up', shift ? 10 : 1),
onArrowDown: (shift) => moveFocus('down', shift ? 10 : 1),
onArrowLeft: (shift) => moveFocus('left', shift ? 10 : 1),
onArrowRight: (shift) => moveFocus('right', shift ? 10 : 1),
onEnter: handleKeyboardEnter,
onDoubleEnter: handleKeyboardDoubleEnter,
onR: handleKeyboardR,
onShiftR: handleKeyboardShiftR
})
useEffect(() => {
const element = document.querySelector(`[data-tile-id="${focusedTile.row}-${focusedTile.col}"]`)
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
}
}, [focusedTile])
return (
<div className="w-screen h-screen flex flex-col bg-black overflow-hidden">
<header className="bg-black border-b-2 border-white px-6 py-3">
<div className="flex items-center justify-between mb-3">
<h1 className="font-mono text-sm tracking-[0.3em] text-white">BRUITISTE</h1>
<div className="flex gap-4">
<div className="flex items-center justify-between gap-6">
<h1 className="font-mono text-sm tracking-[0.3em] text-white flex-shrink-0">BRUITISTE</h1>
<EngineControls values={engineValues} onChange={handleEngineChange} />
<div className="flex gap-4 flex-shrink-0">
<button
onClick={handleStop}
disabled={!playing}
@ -195,20 +275,21 @@ function App() {
</button>
<button
onClick={handleRandom}
className="px-6 py-2 bg-white text-black font-mono text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
className="px-6 py-2 bg-white text-black font-mono text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-2"
>
<Dices size={14} strokeWidth={2} />
RANDOM
</button>
<button
onClick={handleDownloadAll}
disabled={downloading}
className="px-6 py-2 bg-black text-white border-2 border-white font-mono text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed"
className="px-6 py-2 bg-black text-white border-2 border-white font-mono text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-2"
>
<Archive size={14} strokeWidth={2} />
{downloading ? 'DOWNLOADING...' : 'DOWNLOAD ALL'}
</button>
</div>
</div>
<EngineControls values={engineValues} onChange={handleEngineChange} />
</header>
<div className="flex-1 grid grid-cols-2 auto-rows-min gap-[1px] bg-white p-[1px] overflow-auto">
@ -224,6 +305,7 @@ function App() {
isPlaying={playing === id}
isQueued={queued === id}
isRegenerating={regenerating === id}
isFocused={focusedTile.row === i && focusedTile.col === j}
playbackPosition={playing === id ? playbackPosition : 0}
onPlay={handleTileClick}
onDoubleClick={handleTileDoubleClick}

10
src/components/BytebeatTile.tsx
View File

@ -1,5 +1,5 @@
import { useRef, useEffect } from 'react'
import { Download, RefreshCw } from 'lucide-react'
import { Download, Dices } from 'lucide-react'
import { generateWaveformData, drawWaveform } from '../utils/waveformGenerator'
interface BytebeatTileProps {
@ -9,6 +9,7 @@ interface BytebeatTileProps {
isPlaying: boolean
isQueued: boolean
isRegenerating: boolean
isFocused: boolean
playbackPosition: number
onPlay: (formula: string, row: number, col: number) => void
onDoubleClick: (formula: string, row: number, col: number) => void
@ -16,7 +17,7 @@ interface BytebeatTileProps {
onRegenerate: (row: number, col: number) => void
}
export function BytebeatTile({ formula, row, col, isPlaying, isQueued, isRegenerating, playbackPosition, onPlay, onDoubleClick, onDownload, onRegenerate }: BytebeatTileProps) {
export function BytebeatTile({ formula, row, col, isPlaying, isQueued, isRegenerating, isFocused, playbackPosition, onPlay, onDoubleClick, onDownload, onRegenerate }: BytebeatTileProps) {
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
@ -44,11 +45,12 @@ export function BytebeatTile({ formula, row, col, isPlaying, isQueued, isRegener
return (
<div
data-tile-id={`${row}-${col}`}
onClick={() => onPlay(formula, row, col)}
onDoubleClick={() => onDoubleClick(formula, row, col)}
className={`relative hover:scale-[0.98] transition-all duration-150 font-mono p-3 flex items-center justify-between gap-3 cursor-pointer overflow-hidden ${
isPlaying ? 'bg-white text-black' : isQueued ? 'bg-black text-white animate-pulse' : isRegenerating ? 'bg-black text-white border-2 border-white' : 'bg-black text-white'
}`}
} ${isFocused ? 'outline outline-2 outline-white outline-offset-[-4px]' : ''}`}
>
<canvas
ref={canvasRef}
@ -72,7 +74,7 @@ export function BytebeatTile({ formula, row, col, isPlaying, isQueued, isRegener
: 'bg-white text-black border-white'
}`}
>
<RefreshCw size={14} strokeWidth={2} className={isRegenerating ? 'animate-spin' : ''} />
<Dices size={14} strokeWidth={2} className={isRegenerating ? 'animate-spin' : ''} />
</div>
<div
onClick={handleDownload}

86
src/hooks/useKeyboardShortcuts.ts Normal file
View File

@ -0,0 +1,86 @@
import { useEffect, useRef } from 'react'
export interface KeyboardShortcutHandlers {
onSpace?: () => void
onArrowUp?: (shift: boolean) => void
onArrowDown?: (shift: boolean) => void
onArrowLeft?: (shift: boolean) => void
onArrowRight?: (shift: boolean) => void
onEnter?: () => void
onDoubleEnter?: () => void
onR?: () => void
onShiftR?: () => void
}
const DOUBLE_ENTER_THRESHOLD = 300
export function useKeyboardShortcuts(handlers: KeyboardShortcutHandlers) {
const handlersRef = useRef(handlers)
useEffect(() => {
handlersRef.current = handlers
}, [handlers])
useEffect(() => {
let lastEnterTime = 0
const handleKeyDown = (e: KeyboardEvent) => {
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
return
}
const h = handlersRef.current
switch (e.key) {
case ' ':
e.preventDefault()
h.onSpace?.()
break
case 'ArrowUp':
e.preventDefault()
h.onArrowUp?.(e.shiftKey)
break
case 'ArrowDown':
e.preventDefault()
h.onArrowDown?.(e.shiftKey)
break
case 'ArrowLeft':
e.preventDefault()
h.onArrowLeft?.(e.shiftKey)
break
case 'ArrowRight':
e.preventDefault()
h.onArrowRight?.(e.shiftKey)
break
case 'Enter':
e.preventDefault()
const now = Date.now()
if (now - lastEnterTime < DOUBLE_ENTER_THRESHOLD) {
h.onDoubleEnter?.()
} else {
h.onEnter?.()
}
lastEnterTime = now
break
case 'r':
case 'R':
e.preventDefault()
if (e.shiftKey) {
h.onShiftR?.()
} else {
h.onR?.()
}
break
}
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [])
}