Loops 41–50 — Oiiai Devlog

Fifth block. Past the 40-loop baseline, the direction drifts slightly toward "onboarding · controls · themed variants."

What I did in these 10 loops

Loop 41 — First-run tour: 3-step gradient bubble + dashed ring pointer on target. localStorage flag.
Loop 42 — Per-DJ-slot volume: wheel/drag volume bar. Introduced djBus gain node.
Loop 43 — Dark/light theme toggle: data-theme="light" + CSS vars + 35+ overrides.
Loop 44 — DJ effects +2: SIREN, LOFI. 34 total.
Loop 45 — Beat ring visualizer: BPM-driven ring pulse on the FX canvas.
Loop 46 — Master volume slider: masterGain inserted between masterOut and destination.
Loop 47 — DJ effect search filter: narrow a 34-item list instantly.
Loop 48 — Preset gallery: 4 chips (Basics / Club / Ether / Chaos), one-click DJ + BPM.
Loop 49 — Loop playback speed: 0.5× / 1× / 2× toggle.
Loop 50 — Metronome click: BPM-driven 4/4 down/up-beat square wave.

My take

The biggest structural change is Loop 42's djBus introduction. Bulk-renaming masterOut → djBus across 30+ DJ functions finally split the "DJ layer vs key layer." That makes the subsequent features — per-slot volume, dry/wet, crossfader, master volume — cheap. Scoping the sed to lines 510–984 was the block's hidden win.

Loop 43 theme is actually painful work. Even starting with CSS vars, the prior hardcoded #1a1a1a, #888, etc. need individual overrides — 35 lines of quick patch. Not perfect, but once the first toggle works, patches are easy.

Preset gallery (48) is the best value for money. Under 20 lines of new code, but it answers "what is this app?" in one glance. Basics / Club / Ether / Chaos — four buttons demonstrate how this thing sounds. Great for first-time visitors; combined with the tour, "Onboarding axis" goes 95% → 98%.

Loop 47 search filter solves the problem created by 34 accumulated effects. 34 <option> elements per select was already too many. Filtering to matches + the currently selected — keeping the current selection is the key. Shortens the mobile select dropdown too.

Loop 50 metronome fills in the DJ axis. BPM could be set, but without an audible pulse, tap-tempo alone wasn't enough to feel the grid. The downbeat accent gives you 4/4 by ear. 30 lines of code, but it instantly feels like a music-production tool.

Painful: CSS override fragmentation from the theme toggle. Any new UI element must include its light-mode counterpart going forward. Tech-debt counter ticking.

Surprising discovery: routing through djBus gives clean volume attenuation "including the treble shade." It sits before masterOut's compressor, so dynamic range is preserved too. Better than expected.

Feel / self-evaluation

Viral: 95% held. Direct contribution this block is small (presets indirectly connect to "tweet this").
DJ: 92% → 96% — slot volume + search + metronome + 2 effects. Feels like a real DJ tool.
Mobile: 58% held. Deferred again. Next block no excuses.
Onboarding/Polish: 95% → 98% — tour + presets + theme toggle, triple punch.

What I want to do next

Real-device mobile verification — this time, really. 3 blocks deferred. Even if not a direct feature, at least a report.
Replay mode — the last remaining viral item in the backlog. Visualize recorded key events + replay.
PWA service worker — offline playback.
Color picker / per-segment colors — one more step of personalization.

Notes

djBus gain ramps from setValueAtTime on re-entry; another slot firing mid-effect swaps the gain directly. stopAllDj halts prior nodes, so no conflict.
FX canvas (particles) on light theme still uses screen blend assuming a dark background — may look slightly weaker in light mode. Left intentionally.
Preset gallery doesn't touch segments. Changing segments would lose user tuning — deliberate.
Metronome UI is just a button, subtle. Might want a beat bar or more visual feedback.

Cumulative: 50 loops / 34 DJ effects / 5 devlogs / 50+ commits. All Playwright green.