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

Everything is a bit better

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-04 00:27:14 +02:00
parent a960f4e18b
commit 012c3534be
6 changed files with 194 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/EffectsBar.tsx
View File

@ -1,3 +1,4 @@
import { Dices } from 'lucide-react'
import { Slider } from './Slider'
import { Switch } from './Switch'
import { Dropdown } from './Dropdown'
@ -10,6 +11,23 @@ interface EffectsBarProps {
}
export function EffectsBar({ values, onChange }: EffectsBarProps) {
const randomizeEffect = (effect: typeof EFFECTS[number]) => {
effect.parameters.forEach(param => {
if (param.id.endsWith('Enable')) return
if (param.options) {
const randomOption = param.options[Math.floor(Math.random() * param.options.length)]
onChange(param.id, randomOption.value)
} else {
const range = param.max - param.min
const steps = Math.floor(range / param.step)
const randomStep = Math.floor(Math.random() * (steps + 1))
const randomValue = param.min + (randomStep * param.step)
onChange(param.id, randomValue)
}
})
}
const renderFilterEffect = (effect: typeof EFFECTS[number]) => {
const filterGroups = [
{ prefix: 'hp', label: 'HP' },
@ -19,9 +37,17 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
return (
<div key={effect.id} className="border-2 border-white p-3">
<h3 className="font-mono text-[10px] tracking-[0.2em] text-white mb-3">
{effect.name.toUpperCase()}
</h3>
<div className="flex items-center justify-between mb-3">
<h3 className="font-mono text-[10px] tracking-[0.2em] text-white">
{effect.name.toUpperCase()}
</h3>
<button
onClick={() => randomizeEffect(effect)}
className="p-1 text-white hover:bg-white hover:text-black transition-colors"
>
<Dices size={12} strokeWidth={2} />
</button>
</div>
<div className="flex flex-col gap-3">
{filterGroups.map(group => {
const enableParam = effect.parameters.find(p => p.id === `${group.prefix}Enable`)
@ -32,11 +58,14 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
return (
<div key={group.prefix} className="flex gap-2 items-center">
<Switch
checked={Boolean(values[enableParam.id])}
onChange={(checked) => onChange(enableParam.id, checked ? 1 : 0)}
vertical
/>
<button
onClick={() => onChange(enableParam.id, values[enableParam.id] ? 0 : 1)}
className="w-4 h-4 border-2 border-white bg-black flex items-center justify-center cursor-pointer hover:bg-white transition-colors group"
>
{Boolean(values[enableParam.id]) && (
<div className="w-2 h-2 bg-white group-hover:bg-black" />
)}
</button>
<div className="flex-1 flex flex-col gap-2">
<Slider
label={freqParam.label}
@ -78,9 +107,17 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
return (
<div key={effect.id} className="border-2 border-white p-3">
<div className="flex items-center justify-between mb-3">
<h3 className="font-mono text-[10px] tracking-[0.2em] text-white">
{effect.name.toUpperCase()}
</h3>
<div className="flex items-center gap-2">
<h3 className="font-mono text-[10px] tracking-[0.2em] text-white">
{effect.name.toUpperCase()}
</h3>
<button
onClick={() => randomizeEffect(effect)}
className="p-1 text-white hover:bg-white hover:text-black transition-colors"
>
<Dices size={12} strokeWidth={2} />
</button>
</div>
{effect.bypassable && (
<Switch
checked={!Boolean(values[`${effect.id}Bypass`])}