mirror of
https://github.com/got-feedBack/feedBack.git
synced 2026-09-11 06:04:30 +00:00
refactor(h3d-carve-4): extract Butterchurn panel to src/bc-panel.js
Move all _bc* constants, mutable state, and functions (~670 lines) from
screen.js B-section (lines 27-695) to src/bc-panel.js.
Public API: _bcCreateController, _bcIsDesktop (2 named exports).
window.h3dBcApplySettings assigned at bc-panel.js module scope (1
beyond-subst; body verbatim — scope moves from IIFE to ES module top-level).
THREE_URL / THREE_CDN dead-code tombstoned (unused since three-loader.js).
Vendor files untouched (R2); asset URL constants verbatim (R3).
Delta note: original survey estimated ~1,333 lines for B-section. Actual is
~670 because (a) prior cuts 1b/2/3 moved material that was interleaved in the
B-section range, and (b) the original survey section boundaries were wrong —
the B-section ends where the H-section factory begins, not at line 695 of the
pre-cut file.
Completeness grep (post-cut):
grep -nP '^\s*(function|const|let|var)\s+_bc' screen.js
→ 2 hits: _bcActive and _bcSyncMode at line 8081-8082 (factory-scope
H/P-section helpers that orchestrate the imported controller; not B-section
symbols — confirmed F-section in the survey table).
B-section _bc* definitions in IIFE: 0.
Suite: node --test tests/js/highway_3d*.test.js plugins/highway_3d/tests/*.test.js
tests 221 pass 221 fail 0
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014uZ169yfoFYArXz962g7KW
This commit is contained in:
byrongamatos
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
6050b6262b
commit
4e060cbf7b
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "highway_3d",
|
"id": "highway_3d",
|
||||||
"name": "3D Highway",
|
"name": "3D Highway",
|
||||||
"version": "3.39.0",
|
"version": "3.40.0",
|
||||||
"type": "visualization",
|
"type": "visualization",
|
||||||
"scriptType": "module",
|
"scriptType": "module",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
|
|||||||
+22
-668
@@ -9,6 +9,7 @@
|
|||||||
import { geoFretX, dZ, slideTrailEnd, camBaseDistU, camLowFretPullbackU, computeBPM, _makeGaussTex, RENDER_ORDER_LAYER_STACK, RENDER_ORDER_LAYER_INDEX, RENDER_ORDER_AT_Z_ZERO, RENDER_ORDER_FAR_CLAMP, renderOrderForLayerAtZ, _noteKey, lowerBoundT, hwyFirstRelevantFrettedTime, geoFretMid } from './src/geometry.js'; // h3d-carve-1b
|
import { geoFretX, dZ, slideTrailEnd, camBaseDistU, camLowFretPullbackU, computeBPM, _makeGaussTex, RENDER_ORDER_LAYER_STACK, RENDER_ORDER_LAYER_INDEX, RENDER_ORDER_AT_Z_ZERO, RENDER_ORDER_FAR_CLAMP, renderOrderForLayerAtZ, _noteKey, lowerBoundT, hwyFirstRelevantFrettedTime, geoFretMid } from './src/geometry.js'; // h3d-carve-1b
|
||||||
import { loadThree, T } from './src/three-loader.js'; // h3d-carve-2
|
import { loadThree, T } from './src/three-loader.js'; // h3d-carve-2
|
||||||
import { _h3dHexToInt, _clampByteI, _darkenInt, _lightenInt, resolveStringCount as _resolveStringCountBase, _NOTE_NAMES_SHARP, _BASE_OPEN_MIDI_BASS4, _BASE_OPEN_MIDI_BASS5, _BASE_OPEN_MIDI_GUITAR6, _BASE_OPEN_MIDI_GUITAR7, _BASE_OPEN_MIDI_GUITAR8, _baseOpenStringMidis, _midiToPitchLabel, _openStringPitchLabelsForTuning as _openStringPitchLabelsForTuningBase, _ssActive, _ssIsCanvasFocused } from './src/utils.js'; // h3d-carve-3
|
import { _h3dHexToInt, _clampByteI, _darkenInt, _lightenInt, resolveStringCount as _resolveStringCountBase, _NOTE_NAMES_SHARP, _BASE_OPEN_MIDI_BASS4, _BASE_OPEN_MIDI_BASS5, _BASE_OPEN_MIDI_GUITAR6, _BASE_OPEN_MIDI_GUITAR7, _BASE_OPEN_MIDI_GUITAR8, _baseOpenStringMidis, _midiToPitchLabel, _openStringPitchLabelsForTuning as _openStringPitchLabelsForTuningBase, _ssActive, _ssIsCanvasFocused } from './src/utils.js'; // h3d-carve-3
|
||||||
|
import { _bcIsDesktop, _bcCreateController } from './src/bc-panel.js'; // h3d-carve-4
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
@@ -21,678 +22,31 @@ import { _h3dHexToInt, _clampByteI, _darkenInt, _lightenInt, resolveStringCount
|
|||||||
// see static/vendor/three/VERSION). The bundled plugin loads from the
|
// see static/vendor/three/VERSION). The bundled plugin loads from the
|
||||||
// same origin to avoid the first-launch CDN round-trip and to pin the
|
// same origin to avoid the first-launch CDN round-trip and to pin the
|
||||||
// version against breakages from upstream Three.js drift.
|
// version against breakages from upstream Three.js drift.
|
||||||
const THREE_URL = '/static/vendor/three/three.module.min.js';
|
// THREE_URL / THREE_CDN — h3d-carve-4: dead code (three-loader.js owns its own URLs). Tombstoned.
|
||||||
const THREE_CDN = 'https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.min.js';
|
|
||||||
|
|
||||||
/* ── Butterchurn audio-reactive background ──────────────────────────
|
// ── B-section: Butterchurn control panel — h3d-carve-4 ──────────────
|
||||||
* Mounts a Butterchurn (WebGL MilkDrop) canvas BEHIND the transparent
|
// Moved to src/bc-panel.js. Imports: _bcIsDesktop, _bcCreateController.
|
||||||
* 3D highway. On desktop it's driven by the guitar/mic input (the song
|
// window.h3dBcApplySettings assigned at bc-panel.js module scope (R5).
|
||||||
* audio lives in JUCE, not the webview <audio>); in a browser it taps
|
// ────────────────────────────────────────────────────────────────────
|
||||||
* the song <audio> directly.
|
// TOMBSTONE: BC_VENDOR, BC_FRAME, BC_WORKLET, _bcMeters, BC_BTN — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
* ──────────────────────────────────────────────────────────────────── */
|
// TOMBSTONE: _bcLoading — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
const BC_VENDOR = '/api/plugins/highway_3d/assets/vendor/';
|
// TOMBSTONE: _bcLoadLib() — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
const BC_FRAME = 1024;
|
// TOMBSTONE: _bcResolve, _bcPresets, _bcIsDesktop, _bcFfIdx, _bcReleaseCanvasGL — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
const BC_WORKLET = '/api/plugins/highway_3d/assets/viz-worklet.js';
|
|
||||||
const _bcMeters = { gtr: 0, song: 0 }; // live levels shown in the panel readout
|
|
||||||
const BC_BTN = 'background:rgba(255,255,255,.09);color:#cfe3ff;border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:3px 8px;cursor:pointer;font:12px system-ui';
|
|
||||||
let _bcLoading = null;
|
|
||||||
function _bcLoadLib() {
|
|
||||||
if (_bcLoading) return _bcLoading;
|
|
||||||
_bcLoading = new Promise((resolve, reject) => {
|
|
||||||
const add = (url, next) => {
|
|
||||||
const s = document.createElement('script');
|
|
||||||
s.src = url; s.async = true;
|
|
||||||
s.onload = next; s.onerror = () => reject(new Error('load ' + url));
|
|
||||||
document.head.appendChild(s);
|
|
||||||
};
|
|
||||||
add(BC_VENDOR + 'butterchurn.min.js', () =>
|
|
||||||
add(BC_VENDOR + 'butterchurnPresets.min.js', resolve));
|
|
||||||
});
|
|
||||||
// Don't cache a rejected promise: a transient load failure (network
|
|
||||||
// hiccup, blocked request) must not permanently disable the feature for
|
|
||||||
// the session. Clearing _bcLoading lets the next mount retry the load.
|
|
||||||
_bcLoading.catch(() => { _bcLoading = null; });
|
|
||||||
return _bcLoading;
|
|
||||||
}
|
|
||||||
function _bcResolve() { let b = window.butterchurn; if (b && b.default) b = b.default; return b; }
|
|
||||||
function _bcPresets() { let p = window.butterchurnPresets; if (p && p.default) p = p.default; return p; }
|
|
||||||
function _bcIsDesktop() {
|
|
||||||
const d = window.feedBackDesktop || window.slopsmithDesktop;
|
|
||||||
return !!(d && d.isDesktop && d.audio && typeof d.audio.getRawAudioFrame === 'function');
|
|
||||||
}
|
|
||||||
// Fast-forward an index to the first entry after time `ct` (used on seek/loop).
|
|
||||||
// Position at the first entry whose time is >= ct (strict <), so an event
|
|
||||||
// landing exactly on the seek/loop target time is still fired by the update
|
|
||||||
// walkers (which consume `<= ct`) instead of being skipped past here.
|
|
||||||
function _bcFfIdx(arr, ct, key) { if (!arr) return 0; let i = 0; while (i < arr.length && (arr[i][key] || 0) < ct) i++; return i; }
|
|
||||||
// Force-free a canvas's WebGL context so the GPU resources are released
|
|
||||||
// immediately instead of lingering until GC — repeated Butterchurn
|
|
||||||
// mount/unmount cycles otherwise pile up live contexts toward the browser cap.
|
|
||||||
function _bcReleaseCanvasGL(canvas) {
|
|
||||||
if (!canvas || typeof canvas.getContext !== 'function') return;
|
|
||||||
let gl = null;
|
|
||||||
try { gl = canvas.getContext('webgl2') || canvas.getContext('webgl'); } catch (e) { gl = null; }
|
|
||||||
if (!gl || typeof gl.getExtension !== 'function') return;
|
|
||||||
try { const lose = gl.getExtension('WEBGL_lose_context'); if (lose) lose.loseContext(); } catch (e) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Desktop: bridge GUITAR input PCM + SONG output level into a Web Audio node
|
// TOMBSTONE: _bcGuitarFeed — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
// Butterchurn can tap. Guitar gives spectral texture from your playing; the
|
// TOMBSTONE: BC_LS, BC_DEFAULTS, _bcSettings, _bcLoadSettings, _bcSaveSettings — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
// song's output meter (getLevels) injects an energy pulse so the visuals also
|
// TOMBSTONE: _bcControllers, _bcApplyAll — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
// react to the backing track (JUCE plays it — there's no song PCM to FFT).
|
// TOMBSTONE: window.h3dBcApplySettings — h3d-carve-4: assigned at src/bc-panel.js module scope (R5; 1 beyond-subst).
|
||||||
function _bcGuitarFeed(actx, onReady) {
|
|
||||||
const latest = new Float32Array(BC_FRAME);
|
|
||||||
let polling = true, songLevel = 0, chartLevel = 0;
|
|
||||||
let node = null, sp = null, silent = null;
|
|
||||||
const api = (window.feedBackDesktop || window.slopsmithDesktop).audio;
|
|
||||||
const gainNow = () => (_bcLoadSettings().guitarGain) || 6;
|
|
||||||
|
|
||||||
// Keep the source node processing (silently — JUCE already monitors the
|
// TOMBSTONE: BC_DEFAULT_FAVORITES, BC_DEFAULT_BANS, _bcFavorites, _bcBanned, _bcListsLoaded — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
// guitar), and hand it to Butterchurn via the onReady callback.
|
// TOMBSTONE: _bcLoadLists, _bcSaveLists, _bcRestoreDefaults — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
function attach(srcNode) {
|
// TOMBSTONE: _bcPrimary — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
silent = actx.createGain(); silent.gain.value = 0;
|
// TOMBSTONE: _bcPane, _bcListEl, _bcFilterEl, _bcPaneOpen, _bcCollapsed — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
srcNode.connect(silent); silent.connect(actx.destination);
|
// TOMBSTONE: _bcStatusMark, _bcSetHold, _bcLayout, _bcSetPane — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
try { if (onReady) onReady(srcNode); } catch (e) {}
|
// TOMBSTONE: _bcRenderList, _bcUpdatePanelPreset — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
}
|
|
||||||
// Fallback for contexts without AudioWorklet support.
|
|
||||||
function useScriptProcessor() {
|
|
||||||
let phase = 0, phase2 = 0;
|
|
||||||
const TWO_PI = Math.PI * 2;
|
|
||||||
const oscStep = TWO_PI * (90 / actx.sampleRate);
|
|
||||||
const oscStep2 = TWO_PI * (520 / actx.sampleRate);
|
|
||||||
sp = actx.createScriptProcessor(BC_FRAME, 1, 1);
|
|
||||||
sp.onaudioprocess = (e) => {
|
|
||||||
const out = e.outputBuffer.getChannelData(0);
|
|
||||||
const n = Math.min(out.length, latest.length);
|
|
||||||
const lvl = songLevel, clvl = chartLevel, gg = gainNow();
|
|
||||||
for (let i = 0; i < out.length; i++) {
|
|
||||||
const g = (i < n ? latest[i] : 0) * gg;
|
|
||||||
const song = lvl * (0.7 * Math.sin(phase) + 0.3 * (Math.random() * 2 - 1)) * 1.4;
|
|
||||||
const chart = clvl * (0.5 * Math.sin(phase2) + 0.5 * (Math.random() * 2 - 1)) * 1.5;
|
|
||||||
phase += oscStep; if (phase > TWO_PI) phase -= TWO_PI;
|
|
||||||
phase2 += oscStep2; if (phase2 > TWO_PI) phase2 -= TWO_PI;
|
|
||||||
const v = g + song + chart;
|
|
||||||
out[i] = v > 1 ? 1 : (v < -1 ? -1 : v);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
attach(sp);
|
|
||||||
console.log('[viz3d] audio feed: ScriptProcessor (fallback)');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Preferred path: AudioWorklet (runs off the main thread).
|
// TOMBSTONE: _bcPanel, _bcPanelKeyBound — h3d-carve-4: moved to src/bc-panel.js.
|
||||||
if (actx.audioWorklet && typeof actx.audioWorklet.addModule === 'function' && typeof AudioWorkletNode === 'function') {
|
// TOMBSTONE: _bcEnsurePanel, _bcCreateController — h3d-carve-4: moved to src/bc-panel.js (exported as _bcIsDesktop, _bcCreateController).
|
||||||
actx.audioWorklet.addModule(BC_WORKLET).then(() => {
|
|
||||||
if (!polling || sp) return;
|
|
||||||
node = new AudioWorkletNode(actx, 'viz-feed', { numberOfInputs: 0, numberOfOutputs: 1, outputChannelCount: [1] });
|
|
||||||
attach(node);
|
|
||||||
console.log('[viz3d] audio feed: AudioWorklet');
|
|
||||||
}).catch((e) => {
|
|
||||||
console.warn('[viz3d] AudioWorklet unavailable, using ScriptProcessor:', e && e.message);
|
|
||||||
if (polling && !sp && !node) useScriptProcessor();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
useScriptProcessor();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Guitar PCM poll → waveform + level meter (+ pushed to the worklet).
|
|
||||||
(function pcmLoop() {
|
|
||||||
if (!polling) return;
|
|
||||||
Promise.resolve(api.getRawAudioFrame(BC_FRAME)).then((f) => {
|
|
||||||
if (f && f.length) {
|
|
||||||
if (f.length >= BC_FRAME) latest.set(f.subarray(0, BC_FRAME));
|
|
||||||
else { latest.fill(0); latest.set(f); }
|
|
||||||
let s = 0; for (let i = 0; i < BC_FRAME; i++) s += latest[i] * latest[i];
|
|
||||||
_bcMeters.gtr = Math.sqrt(s / BC_FRAME) * gainNow();
|
|
||||||
if (node) node.port.postMessage({ frame: latest.slice(0), song: songLevel, chart: chartLevel, gain: gainNow() });
|
|
||||||
}
|
|
||||||
}).catch(() => {}).then(() => { if (polling) setTimeout(pcmLoop, 16); });
|
|
||||||
})();
|
|
||||||
// Song output meter poll → music energy pulse.
|
|
||||||
(function levelLoop() {
|
|
||||||
if (!polling) return;
|
|
||||||
Promise.resolve(api.getLevels && api.getLevels()).then((L) => {
|
|
||||||
if (L && typeof L.outputLevel === 'number') {
|
|
||||||
songLevel = Math.min(1, L.outputLevel * ((_bcLoadSettings().songGain) || 1.8));
|
|
||||||
_bcMeters.song = songLevel;
|
|
||||||
if (node) node.port.postMessage({ song: songLevel, chart: chartLevel, gain: gainNow() });
|
|
||||||
}
|
|
||||||
}).catch(() => {}).then(() => { if (polling) setTimeout(levelLoop, 40); });
|
|
||||||
})();
|
|
||||||
|
|
||||||
return {
|
|
||||||
setChart(v) { chartLevel = v; },
|
|
||||||
stop() {
|
|
||||||
polling = false;
|
|
||||||
try { if (sp) { sp.disconnect(); sp.onaudioprocess = null; } } catch (e) {}
|
|
||||||
try { if (node) node.disconnect(); } catch (e) {}
|
|
||||||
try { if (silent) silent.disconnect(); } catch (e) {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// Browser audio is sourced by REUSING the highway's own shared analyser
|
|
||||||
// (the same #audio / stems side-chain tap the fog scenery uses), passed in
|
|
||||||
// as `audioProvider` to _bcCreateController. We deliberately do NOT open a
|
|
||||||
// second createMediaElementSource on #audio here: it can only be called
|
|
||||||
// once per element (a second tap throws InvalidStateError and permanently
|
|
||||||
// disables the other consumer), it would route the song through a fresh,
|
|
||||||
// possibly-suspended context and mute playback, and it would miss the stems
|
|
||||||
// side-chain that sloppaks expose at window.feedBack.stems.getAnalyser().
|
|
||||||
/* ── Controls + readability (localStorage-backed, global config) ───── */
|
|
||||||
const BC_LS = 'viz3d_settings';
|
|
||||||
const BC_DEFAULTS = { enabled: true, opacity: 1.0, laneDim: true, laneDimStrength: 0.45, chartAccents: true, colorTint: true, chartStrength: 1.0, tintStrength: 0.65, guitarGain: 6, songGain: 1.8, cyclePool: 'all', hold: false };
|
|
||||||
let _bcSettings = null;
|
|
||||||
function _bcLoadSettings() {
|
|
||||||
if (_bcSettings) return _bcSettings;
|
|
||||||
let saved = {};
|
|
||||||
try { saved = JSON.parse(localStorage.getItem(BC_LS) || '{}'); } catch (e) {}
|
|
||||||
_bcSettings = Object.assign({}, BC_DEFAULTS, saved);
|
|
||||||
return _bcSettings;
|
|
||||||
}
|
|
||||||
function _bcSaveSettings() { try { localStorage.setItem(BC_LS, JSON.stringify(_bcSettings)); } catch (e) {} }
|
|
||||||
const _bcControllers = new Set();
|
|
||||||
function _bcApplyAll() { _bcControllers.forEach((c) => { try { c.applySettings(); } catch (e) {} }); }
|
|
||||||
// Live-apply hook for the plugin's settings.html. The visualizer's on/off +
|
|
||||||
// slider controls now live in the standard settings panel (settings.html),
|
|
||||||
// which persists them into the BC_LS blob and then calls this so a mounted
|
|
||||||
// highway re-reads and applies them immediately. Defined on window at module
|
|
||||||
// scope so it's available regardless of whether a highway is mounted yet;
|
|
||||||
// settings.html guards the call with `?.` for the not-yet-loaded case.
|
|
||||||
window.h3dBcApplySettings = function () {
|
|
||||||
_bcSettings = null; // drop the cache so the next read reloads from localStorage
|
|
||||||
_bcLoadSettings();
|
|
||||||
_bcApplyAll();
|
|
||||||
try { _bcUpdatePanelPreset(); } catch (e) {}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Preset curation: favorites / bans (persisted globally) + the "primary"
|
|
||||||
// controller the panel's preset buttons drive.
|
|
||||||
// Seeded once on first run (reputation-based starter set; user can edit freely).
|
|
||||||
const BC_DEFAULT_FAVORITES = [
|
|
||||||
'Flexi, martin + geiss - dedicated to the sherwin maxawow',
|
|
||||||
'Geiss - Reaction Diffusion 2',
|
|
||||||
'Geiss - Spiral Artifact',
|
|
||||||
'Flexi + Martin - cascading decay swing',
|
|
||||||
'Flexi - mindblob [shiny mix]',
|
|
||||||
'Geiss - Cauldron - painterly 2 (saturation remix)',
|
|
||||||
'Zylot - Paint Spill (Music Reactive Paint Mix)',
|
|
||||||
'Flexi - predator-prey-spirals',
|
|
||||||
'Rovastar + Loadus + Geiss - FractalDrop (Triple Mix)',
|
|
||||||
'Flexi, fishbrain, Geiss + Martin - tokamak witchery',
|
|
||||||
];
|
|
||||||
const BC_DEFAULT_BANS = [
|
|
||||||
'martin - mucus cervix',
|
|
||||||
'Goody - The Wild Vort',
|
|
||||||
'martin - extreme heat',
|
|
||||||
'Unchained - Rewop',
|
|
||||||
'high-altitude basket unraveling - singh grooves nitrogen argon nz+',
|
|
||||||
'$$$ Royal - Mashup (197)',
|
|
||||||
'$$$ Royal - Mashup (431)',
|
|
||||||
'suksma - uninitialized variabowl (hydroponic chronic)',
|
|
||||||
'shifter - dark tides bdrv mix 2',
|
|
||||||
'_Mig_049',
|
|
||||||
];
|
|
||||||
const _bcFavorites = new Set();
|
|
||||||
const _bcBanned = new Set();
|
|
||||||
let _bcListsLoaded = false;
|
|
||||||
function _bcLoadLists() {
|
|
||||||
if (_bcListsLoaded) return; _bcListsLoaded = true;
|
|
||||||
try { (JSON.parse(localStorage.getItem('viz3d_favorites') || '[]') || []).forEach((n) => _bcFavorites.add(n)); } catch (e) {}
|
|
||||||
try { (JSON.parse(localStorage.getItem('viz3d_banned') || '[]') || []).forEach((n) => _bcBanned.add(n)); } catch (e) {}
|
|
||||||
let seeded = false;
|
|
||||||
try { seeded = !!localStorage.getItem('viz3d_seeded'); } catch (e) {}
|
|
||||||
if (!seeded) {
|
|
||||||
BC_DEFAULT_FAVORITES.forEach((n) => _bcFavorites.add(n));
|
|
||||||
BC_DEFAULT_BANS.forEach((n) => _bcBanned.add(n));
|
|
||||||
try { localStorage.setItem('viz3d_seeded', '1'); } catch (e) {}
|
|
||||||
_bcSaveLists();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function _bcSaveLists() {
|
|
||||||
try { localStorage.setItem('viz3d_favorites', JSON.stringify([..._bcFavorites])); } catch (e) {}
|
|
||||||
try { localStorage.setItem('viz3d_banned', JSON.stringify([..._bcBanned])); } catch (e) {}
|
|
||||||
}
|
|
||||||
// Re-add the bundled defaults anytime (merges; a default-fav un-bans, a default-ban un-favs).
|
|
||||||
function _bcRestoreDefaults() {
|
|
||||||
BC_DEFAULT_FAVORITES.forEach((n) => { _bcBanned.delete(n); _bcFavorites.add(n); });
|
|
||||||
BC_DEFAULT_BANS.forEach((n) => { _bcFavorites.delete(n); _bcBanned.add(n); });
|
|
||||||
try { localStorage.setItem('viz3d_seeded', '1'); } catch (e) {}
|
|
||||||
_bcSaveLists(); _bcUpdatePanelPreset(); _bcRenderList();
|
|
||||||
}
|
|
||||||
let _bcPrimary = null;
|
|
||||||
let _bcPane = null, _bcListEl = null, _bcFilterEl = null, _bcPaneOpen = false, _bcCollapsed = false;
|
|
||||||
|
|
||||||
function _bcStatusMark(name) {
|
|
||||||
return _bcFavorites.has(name) ? '★ ' : (_bcBanned.has(name) ? '🚫 ' : '');
|
|
||||||
}
|
|
||||||
function _bcSetHold(v) {
|
|
||||||
const s = _bcLoadSettings();
|
|
||||||
s.hold = !!v; _bcSaveSettings();
|
|
||||||
const b = _bcPanel && _bcPanel.querySelector('#vz-hold');
|
|
||||||
if (b) b.textContent = s.hold ? '▶ Resume' : '⏸ Hold';
|
|
||||||
}
|
|
||||||
// Drives both panels off the right edge. Order when both open (L→R):
|
|
||||||
// visualizer panel → preset pane → window edge. Pane lives off-screen by
|
|
||||||
// default; opening it shoves the panel LEFT to make room.
|
|
||||||
function _bcLayout() {
|
|
||||||
if (_bcPanel) {
|
|
||||||
let tx = 0;
|
|
||||||
if (_bcCollapsed) tx = 210; // tuck the whole panel off the right edge
|
|
||||||
else if (_bcPaneOpen) tx = -248; // slide panel LEFT to make room for the pane
|
|
||||||
_bcPanel.style.transform = 'translateX(' + tx + 'px) translateY(-50%)';
|
|
||||||
}
|
|
||||||
if (_bcPane) {
|
|
||||||
_bcPane.style.transform = (_bcPaneOpen && !_bcCollapsed) ? 'translateX(0) translateY(-50%)' : 'translateX(calc(100% + 16px)) translateY(-50%)';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function _bcSetPane(open) {
|
|
||||||
_bcPaneOpen = !!open && !_bcCollapsed;
|
|
||||||
const b = _bcPanel && _bcPanel.querySelector('#vz-listbtn');
|
|
||||||
if (b) b.textContent = _bcPaneOpen ? '>>' : '<<';
|
|
||||||
if (_bcPaneOpen) _bcRenderList();
|
|
||||||
_bcLayout();
|
|
||||||
}
|
|
||||||
function _bcRenderList() {
|
|
||||||
if (!_bcListEl) return;
|
|
||||||
const ctrl = _bcPrimary;
|
|
||||||
const keys = (ctrl && ctrl.keys) ? ctrl.keys : [];
|
|
||||||
const filt = ((_bcFilterEl && _bcFilterEl.value) || '').toLowerCase();
|
|
||||||
const cur = ctrl && ctrl.curName;
|
|
||||||
const frag = document.createDocumentFragment();
|
|
||||||
for (let i = 0; i < keys.length; i++) {
|
|
||||||
const name = keys[i];
|
|
||||||
if (filt && name.toLowerCase().indexOf(filt) === -1) continue;
|
|
||||||
const row = document.createElement('div');
|
|
||||||
row.textContent = _bcStatusMark(name) + name;
|
|
||||||
row.title = name;
|
|
||||||
row.style.cssText = 'padding:3px 7px;border-radius:4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;' +
|
|
||||||
(name === cur ? 'background:rgba(110,160,255,.28);' : '') + (_bcBanned.has(name) ? 'opacity:.55;' : '');
|
|
||||||
row.addEventListener('click', () => {
|
|
||||||
if (!_bcPrimary) return;
|
|
||||||
_bcPrimary.loadByName(name, 1.0);
|
|
||||||
_bcSetHold(true); // picked from the list → sit on it
|
|
||||||
});
|
|
||||||
frag.appendChild(row);
|
|
||||||
}
|
|
||||||
_bcListEl.innerHTML = '';
|
|
||||||
_bcListEl.appendChild(frag);
|
|
||||||
}
|
|
||||||
function _bcUpdatePanelPreset() {
|
|
||||||
if (!_bcPanel) return;
|
|
||||||
const name = _bcPrimary ? (_bcPrimary.curName || null) : null;
|
|
||||||
const nameEl = _bcPanel.querySelector('#vz-pname');
|
|
||||||
const favBtn = _bcPanel.querySelector('#vz-fav');
|
|
||||||
const banBtn = _bcPanel.querySelector('#vz-ban');
|
|
||||||
const cntEl = _bcPanel.querySelector('#vz-pcount');
|
|
||||||
if (nameEl) { nameEl.textContent = (name ? _bcStatusMark(name) : '') + (name || '—'); nameEl.title = name ? (name + ' — click for full list') : ''; }
|
|
||||||
if (favBtn) favBtn.textContent = (name && _bcFavorites.has(name)) ? '★ Favorited' : '☆ Favorite';
|
|
||||||
if (banBtn) banBtn.textContent = (name && _bcBanned.has(name)) ? '🚫 Banned' : '🚫 Ban';
|
|
||||||
if (cntEl) cntEl.textContent = '★ ' + _bcFavorites.size + ' 🚫 ' + _bcBanned.size;
|
|
||||||
if (_bcPaneOpen) _bcRenderList();
|
|
||||||
}
|
|
||||||
|
|
||||||
let _bcPanel = null, _bcPanelKeyBound = false;
|
|
||||||
function _bcEnsurePanel(host) {
|
|
||||||
if (_bcPanel && _bcPanel.isConnected) {
|
|
||||||
// Singleton panel: follow the active highway. If it's still parented
|
|
||||||
// to a different wrap (e.g. another mounted highway instance such as
|
|
||||||
// Virtuoso's embedded one), move it — and the pane — to this wrap so
|
|
||||||
// it appears on whichever highway is currently on-screen.
|
|
||||||
if (host && _bcPanel.parentNode !== host) {
|
|
||||||
host.appendChild(_bcPanel);
|
|
||||||
if (_bcPane) host.appendChild(_bcPane);
|
|
||||||
}
|
|
||||||
return _bcPanel;
|
|
||||||
}
|
|
||||||
const s = _bcLoadSettings();
|
|
||||||
const p = document.createElement('div');
|
|
||||||
p.id = 'viz3d-panel';
|
|
||||||
p.style.cssText = 'position:absolute;top:50%;right:10px;z-index:100000;pointer-events:auto;font:12px/1.45 system-ui,sans-serif;' +
|
|
||||||
'color:#cfe3ff;background:rgba(8,10,20,0.82);padding:9px 11px;border-radius:8px;width:186px;' +
|
|
||||||
'box-shadow:0 2px 12px rgba(0,0,0,0.5);user-select:none;transition:transform 0.28s ease;';
|
|
||||||
p.innerHTML =
|
|
||||||
'<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:7px"><span style="font-weight:600">🌀 Visualizer</span><button id="vz-listbtn" title="Show / hide full preset list" style="' + BC_BTN + ';padding:1px 7px"><<</button></div>' +
|
|
||||||
// On/off + opacity/dim/chart/tint/gain controls now live in the
|
|
||||||
// plugin's Settings panel (settings.html). This in-canvas panel is
|
|
||||||
// only the LIVE preset browser (pick / favorite / ban / cycle).
|
|
||||||
'<div style="opacity:.55;font-size:11px;margin:2px 0 6px">Background & reactivity options are in Settings ▸ 3D Highway.</div>' +
|
|
||||||
'<div style="display:flex;align-items:center;gap:6px;margin:4px 0">' +
|
|
||||||
'<button id="vz-prev" style="' + BC_BTN + '">◀</button>' +
|
|
||||||
'<div id="vz-pname" style="flex:1;text-align:center;font-size:11px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer" title="">—</div>' +
|
|
||||||
'<button id="vz-next" style="' + BC_BTN + '">▶</button>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div style="display:flex;gap:6px;margin:4px 0">' +
|
|
||||||
'<button id="vz-fav" style="' + BC_BTN + ';flex:1">♡ Favorite</button>' +
|
|
||||||
'<button id="vz-ban" style="' + BC_BTN + ';flex:1">🚫 Ban</button>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div style="display:flex;gap:6px;align-items:flex-end;margin:6px 0">' +
|
|
||||||
'<label style="flex:1">Cycle <select id="vz-cyc" style="width:100%;background:#11141f;color:#cfe3ff;border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:3px"><option value="all">All</option><option value="favorites">Favorites</option><option value="bans">Bans</option></select></label>' +
|
|
||||||
'<button id="vz-hold" style="' + BC_BTN + '">⏸ Hold</button>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div style="margin:5px 0 4px;font-size:11px;opacity:.75"><span id="vz-pcount">★ 0 🚫 0</span></div>' +
|
|
||||||
'<div id="vz-meter" style="opacity:.65;margin-top:6px;font:11px/1.3 monospace">gtr — · song —</div>' +
|
|
||||||
'<div style="opacity:.45;margin-top:4px;font-size:11px">` or ‹‹ to hide</div>';
|
|
||||||
(host || document.body).appendChild(p);
|
|
||||||
|
|
||||||
// Slide handle (<< / >>) so the panel can tuck off the right edge and stop
|
|
||||||
// covering the Now / Up-Next labels.
|
|
||||||
const tab = document.createElement('button');
|
|
||||||
tab.textContent = '>>';
|
|
||||||
tab.title = 'Hide / show controls';
|
|
||||||
tab.style.cssText = 'position:absolute;top:6px;left:-23px;width:23px;height:28px;border:none;cursor:pointer;' +
|
|
||||||
'background:rgba(8,10,20,0.82);color:#cfe3ff;border-radius:7px 0 0 7px;font:12px/1 monospace;padding:0;';
|
|
||||||
p.appendChild(tab);
|
|
||||||
tab.addEventListener('click', () => {
|
|
||||||
_bcCollapsed = !_bcCollapsed;
|
|
||||||
if (_bcCollapsed) _bcPaneOpen = false; // collapsing the panel hides the pane too
|
|
||||||
tab.textContent = _bcCollapsed ? '<<' : '>>';
|
|
||||||
const lb = p.querySelector('#vz-listbtn'); if (lb) lb.textContent = _bcPaneOpen ? '>>' : '<<';
|
|
||||||
_bcLayout();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sliding preset-list pane (sits to the LEFT of the control panel)
|
|
||||||
const pane = document.createElement('div');
|
|
||||||
pane.id = 'viz3d-listpane';
|
|
||||||
pane.style.cssText = 'position:absolute;top:50%;right:10px;z-index:99999;pointer-events:auto;width:236px;max-height:74vh;display:flex;flex-direction:column;' +
|
|
||||||
'background:rgba(8,10,20,0.93);border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,0.55);color:#cfe3ff;' +
|
|
||||||
'font:12px system-ui,sans-serif;overflow:hidden;transform:translateX(calc(100% + 16px)) translateY(-50%);transition:transform 0.28s ease;';
|
|
||||||
pane.innerHTML =
|
|
||||||
'<div style="display:flex;align-items:center;justify-content:space-between;padding:7px 9px 7px 10px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)"><span>Presets</span><button id="vz-defaults" title="Restore the bundled default favorites + bans" style="' + BC_BTN + ';font-weight:400">↺ defaults</button></div>' +
|
|
||||||
'<input id="vz-filter" placeholder="filter…" spellcheck="false" style="margin:8px 9px 6px;padding:4px 7px;background:#11141f;color:#cfe3ff;border:1px solid rgba(255,255,255,.15);border-radius:5px;outline:none">' +
|
|
||||||
'<div id="vz-list" style="overflow-y:auto;padding:0 4px 8px"></div>';
|
|
||||||
(host || document.body).appendChild(pane);
|
|
||||||
_bcPane = pane;
|
|
||||||
_bcListEl = pane.querySelector('#vz-list');
|
|
||||||
_bcFilterEl = pane.querySelector('#vz-filter');
|
|
||||||
_bcFilterEl.addEventListener('input', _bcRenderList);
|
|
||||||
pane.querySelector('#vz-defaults').addEventListener('click', _bcRestoreDefaults);
|
|
||||||
|
|
||||||
const q = (id) => p.querySelector(id);
|
|
||||||
_bcPanel = p;
|
|
||||||
|
|
||||||
// Preset curation wiring (favorites / bans / cycle / reset)
|
|
||||||
_bcLoadLists();
|
|
||||||
const cyc = q('#vz-cyc');
|
|
||||||
cyc.value = s.cyclePool || 'all';
|
|
||||||
// Read fresh: settings.html writes can replace _bcSettings, so the `s`
|
|
||||||
// captured at panel creation may be stale by the time this fires.
|
|
||||||
cyc.addEventListener('change', () => { _bcLoadSettings().cyclePool = cyc.value; _bcSaveSettings(); });
|
|
||||||
_bcSetHold(!!s.hold); // sync the Hold button label to the saved state
|
|
||||||
q('#vz-hold').addEventListener('click', () => _bcSetHold(!_bcLoadSettings().hold));
|
|
||||||
q('#vz-listbtn').addEventListener('click', () => _bcSetPane(!_bcPaneOpen));
|
|
||||||
q('#vz-pname').addEventListener('click', () => _bcSetPane(!_bcPaneOpen));
|
|
||||||
q('#vz-prev').addEventListener('click', () => { if (_bcPrimary) _bcPrimary.step(-1); });
|
|
||||||
q('#vz-next').addEventListener('click', () => { if (_bcPrimary) _bcPrimary.step(1); });
|
|
||||||
q('#vz-fav').addEventListener('click', () => { if (_bcPrimary) _bcPrimary.toggleFav(); });
|
|
||||||
q('#vz-ban').addEventListener('click', () => { if (_bcPrimary) _bcPrimary.banCur(); });
|
|
||||||
_bcSetPane(false); // start collapsed; sets the list-button label
|
|
||||||
_bcUpdatePanelPreset();
|
|
||||||
|
|
||||||
// Live level readout — proves the song (not just guitar) is driving things.
|
|
||||||
// Self-stops when the panel is removed (_bcPanel !== p).
|
|
||||||
(function meterLoop() {
|
|
||||||
if (_bcPanel !== p) return;
|
|
||||||
const m = p.querySelector('#vz-meter');
|
|
||||||
if (m) m.textContent = 'gtr ' + _bcMeters.gtr.toFixed(2) + ' · song ' + _bcMeters.song.toFixed(2);
|
|
||||||
setTimeout(meterLoop, 150);
|
|
||||||
})();
|
|
||||||
|
|
||||||
if (!_bcPanelKeyBound) {
|
|
||||||
_bcPanelKeyBound = true;
|
|
||||||
window.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key !== '`' || e.metaKey || e.ctrlKey || !_bcPanel) return;
|
|
||||||
const tag = (e.target && e.target.tagName) || '';
|
|
||||||
if (tag === 'INPUT' || tag === 'TEXTAREA') return;
|
|
||||||
const reveal = _bcPanel.style.display === 'none';
|
|
||||||
_bcPanel.style.display = reveal ? '' : 'none';
|
|
||||||
if (_bcPane) _bcPane.style.display = reveal ? '' : 'none';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return _bcPanel;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a Butterchurn background controller bound to a wrap element.
|
|
||||||
function _bcCreateController(wrap, sizeProvider, audioProvider) {
|
|
||||||
const ctrl = { viz: null, actx: null, guitar: null, map: null, keys: [], cycle: 0, dead: false, lastW: -1, lastH: -1, canvas: null, backdrop: null, scrim: null, tint: null, wrap: wrap };
|
|
||||||
// Layered DOM in the wrap, all BEHIND the transparent 3D highway:
|
|
||||||
// backdrop(z-4 dark) → bc canvas(z-3) → tint(z-2 instrument color) → scrim(z-1 lane dim)
|
|
||||||
const mkLayer = (cls, css) => { const d = document.createElement('div'); d.className = cls; d.style.cssText = css; wrap.appendChild(d); return d; };
|
|
||||||
const backdrop = mkLayer('viz3d-backdrop', 'position:absolute;top:0;left:0;right:0;bottom:0;z-index:-4;background:#070710;pointer-events:none;');
|
|
||||||
const canvas = document.createElement('canvas');
|
|
||||||
canvas.className = 'viz3d-bc';
|
|
||||||
canvas.style.cssText = 'position:absolute;top:0;left:0;z-index:-3;pointer-events:none;';
|
|
||||||
wrap.appendChild(canvas);
|
|
||||||
const tint = mkLayer('viz3d-tint', 'position:absolute;top:0;left:0;right:0;bottom:0;z-index:-2;pointer-events:none;mix-blend-mode:overlay;background:transparent;');
|
|
||||||
const scrim = mkLayer('viz3d-scrim', 'position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;');
|
|
||||||
ctrl.canvas = canvas; ctrl.backdrop = backdrop; ctrl.scrim = scrim; ctrl.tint = tint;
|
|
||||||
|
|
||||||
ctrl.applySettings = function () {
|
|
||||||
const s = _bcLoadSettings();
|
|
||||||
canvas.style.display = s.enabled ? '' : 'none';
|
|
||||||
canvas.style.opacity = String(s.enabled ? s.opacity : 0);
|
|
||||||
if (s.laneDim) {
|
|
||||||
const a = Math.max(0, Math.min(1, s.laneDimStrength)).toFixed(3);
|
|
||||||
scrim.style.display = '';
|
|
||||||
scrim.style.background = 'linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,' + a +
|
|
||||||
') 30%, rgba(0,0,0,' + a + ') 70%, rgba(0,0,0,0) 100%)';
|
|
||||||
} else {
|
|
||||||
scrim.style.display = 'none';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ── Preset curation (favorites / bans / cycle mode) ──
|
|
||||||
ctrl.curName = null; ctrl.lastManual = 0;
|
|
||||||
ctrl.allList = () => (ctrl.keys || []).filter((k) => !_bcBanned.has(k));
|
|
||||||
ctrl.pool = () => {
|
|
||||||
const mode = _bcLoadSettings().cyclePool || 'all';
|
|
||||||
if (mode === 'bans') return (ctrl.keys || []).filter((k) => _bcBanned.has(k));
|
|
||||||
if (mode === 'favorites') {
|
|
||||||
const f = (ctrl.keys || []).filter((k) => _bcFavorites.has(k) && !_bcBanned.has(k));
|
|
||||||
if (f.length) return f;
|
|
||||||
}
|
|
||||||
return ctrl.allList();
|
|
||||||
};
|
|
||||||
ctrl.browseArr = () => ctrl.keys || []; // ◀▶ and the list pane walk the full preset list
|
|
||||||
ctrl.loadByName = (name, blend) => {
|
|
||||||
if (!ctrl.viz || !name || !ctrl.map || !ctrl.map[name]) return;
|
|
||||||
try { ctrl.viz.loadPreset(ctrl.map[name], blend || 0); ctrl.curName = name; } catch (e) {}
|
|
||||||
_bcUpdatePanelPreset();
|
|
||||||
};
|
|
||||||
ctrl.autoTick = () => {
|
|
||||||
if (ctrl.dead || _bcLoadSettings().hold) return;
|
|
||||||
if (performance.now() - ctrl.lastManual < 8000) return;
|
|
||||||
const pool = ctrl.pool();
|
|
||||||
if (!pool.length) return;
|
|
||||||
let name = pool[(Math.random() * pool.length) | 0];
|
|
||||||
if (pool.length > 1 && name === ctrl.curName) name = pool[(pool.indexOf(name) + 1) % pool.length];
|
|
||||||
ctrl.loadByName(name, 2.7);
|
|
||||||
};
|
|
||||||
ctrl.step = (dir) => {
|
|
||||||
const list = ctrl.browseArr();
|
|
||||||
if (!list.length) return;
|
|
||||||
let i = list.indexOf(ctrl.curName); if (i < 0) i = (dir > 0 ? -1 : 0);
|
|
||||||
i = (i + dir + list.length) % list.length;
|
|
||||||
ctrl.lastManual = performance.now();
|
|
||||||
ctrl.loadByName(list[i], 1.5);
|
|
||||||
};
|
|
||||||
ctrl.toggleFav = () => {
|
|
||||||
if (!ctrl.curName) return;
|
|
||||||
if (_bcFavorites.has(ctrl.curName)) _bcFavorites.delete(ctrl.curName);
|
|
||||||
else { _bcFavorites.add(ctrl.curName); _bcBanned.delete(ctrl.curName); }
|
|
||||||
_bcSaveLists(); _bcUpdatePanelPreset();
|
|
||||||
};
|
|
||||||
ctrl.banCur = () => {
|
|
||||||
if (!ctrl.curName) return;
|
|
||||||
if (_bcBanned.has(ctrl.curName)) { // un-ban (two-way) — stay on it
|
|
||||||
_bcBanned.delete(ctrl.curName);
|
|
||||||
_bcSaveLists(); _bcUpdatePanelPreset();
|
|
||||||
} else { // ban + advance off it
|
|
||||||
_bcBanned.add(ctrl.curName); _bcFavorites.delete(ctrl.curName);
|
|
||||||
_bcSaveLists(); ctrl.step(1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
_bcPrimary = ctrl;
|
|
||||||
|
|
||||||
_bcControllers.add(ctrl);
|
|
||||||
_bcEnsurePanel(wrap);
|
|
||||||
ctrl.applySettings();
|
|
||||||
|
|
||||||
_bcLoadLib().then(() => {
|
|
||||||
if (ctrl.dead) return;
|
|
||||||
const bc = _bcResolve();
|
|
||||||
if (!bc || typeof bc.createVisualizer !== 'function') { console.warn('[viz3d] Butterchurn global missing'); return; }
|
|
||||||
const Ctx = window.AudioContext || window.webkitAudioContext;
|
|
||||||
const sz = (sizeProvider && sizeProvider()) || { w: 1280, h: 720 };
|
|
||||||
// Browser (Docker/web app): REUSE the highway's existing shared
|
|
||||||
// analyser (the fog scenery's #audio / stems tap) via audioProvider,
|
|
||||||
// and build Butterchurn on that SAME AudioContext so connectAudio()
|
|
||||||
// doesn't fail cross-context. Desktop uses its own context fed by the
|
|
||||||
// guitar/mic input. `ownsActx` tracks whether WE created the context
|
|
||||||
// (so destroy() closes only contexts we own, never the shared one).
|
|
||||||
const fogAudio = _bcIsDesktop() ? null : (audioProvider ? audioProvider() : null);
|
|
||||||
ctrl.ownsActx = !(fogAudio && fogAudio.ctx);
|
|
||||||
ctrl.actx = (fogAudio && fogAudio.ctx) || new Ctx();
|
|
||||||
if (ctrl.actx.state === 'suspended' && ctrl.actx.resume) ctrl.actx.resume().catch(() => {});
|
|
||||||
// Seed the DRAWING BUFFER (canvas.width/height) to the device-pixel
|
|
||||||
// render size and report that SAME size to Butterchurn. Its on-screen
|
|
||||||
// pass viewports to the reported size but never sizes the output canvas
|
|
||||||
// itself — leaving the buffer at the 300x150 default blits the whole
|
|
||||||
// visualizer into a corner that CSS then stretches across the highway.
|
|
||||||
// pixelRatio:1 because DPR is now folded into the reported size, so
|
|
||||||
// buffer == viewport == internal texsize (no double-counting).
|
|
||||||
const _bcRatio0 = Math.min(window.devicePixelRatio || 1, 1.5);
|
|
||||||
const _bcW0 = Math.max(1, Math.round((sz.w || 1280) * _bcRatio0));
|
|
||||||
const _bcH0 = Math.max(1, Math.round((sz.h || 720) * _bcRatio0));
|
|
||||||
canvas.width = _bcW0; canvas.height = _bcH0;
|
|
||||||
ctrl.viz = bc.createVisualizer(ctrl.actx, canvas, {
|
|
||||||
width: _bcW0, height: _bcH0,
|
|
||||||
pixelRatio: 1, textureRatio: 1,
|
|
||||||
});
|
|
||||||
if (_bcIsDesktop()) {
|
|
||||||
try {
|
|
||||||
ctrl.guitar = _bcGuitarFeed(ctrl.actx, (srcNode) => { try { if (ctrl.viz) ctrl.viz.connectAudio(srcNode); } catch (e) {} });
|
|
||||||
console.log('[viz3d] bg: feeding GUITAR input into Butterchurn');
|
|
||||||
} catch (e) { console.warn('[viz3d] guitar feed failed', e); }
|
|
||||||
} else if (fogAudio && fogAudio.analyser) {
|
|
||||||
// The shared AnalyserNode is a passthrough — connecting it onward
|
|
||||||
// to Butterchurn's internal analyser doesn't disturb the fog's reads.
|
|
||||||
try { ctrl.viz.connectAudio(fogAudio.analyser); console.log('[viz3d] browser: Butterchurn tapping shared analyser (' + (fogAudio.source || 'core') + ')'); }
|
|
||||||
catch (e) { console.warn('[viz3d] shared-analyser connect failed', e); }
|
|
||||||
}
|
|
||||||
_bcLoadLists();
|
|
||||||
const presets = _bcPresets();
|
|
||||||
if (presets && typeof presets.getPresets === 'function') { ctrl.map = presets.getPresets(); ctrl.keys = Object.keys(ctrl.map); }
|
|
||||||
const pool0 = ctrl.pool();
|
|
||||||
ctrl.loadByName(pool0.length ? pool0[(Math.random() * pool0.length) | 0] : (ctrl.keys[0] || null), 0.0);
|
|
||||||
ctrl.cycle = setInterval(() => ctrl.autoTick(), 30000);
|
|
||||||
ctrl.connectedAnalyser = (fogAudio && fogAudio.analyser) || null;
|
|
||||||
console.log('[viz3d] Butterchurn ready, presets:', ctrl.keys.length);
|
|
||||||
}).catch((e) => {
|
|
||||||
// Async init failed (lib load, WebGL/context creation, etc.). Clean up
|
|
||||||
// the half-mounted controller so we don't leak an owned AudioContext /
|
|
||||||
// DOM layers, and mark it dead so _bcSyncMode can retry on a later
|
|
||||||
// mount instead of seeing a live-looking but non-functional bcCtrl.
|
|
||||||
console.error('[viz3d] Butterchurn load/init failed', e);
|
|
||||||
try { _bcReleaseCanvasGL(ctrl.canvas); } catch (_) {}
|
|
||||||
try { if (ctrl.guitar) { ctrl.guitar.stop(); ctrl.guitar = null; } } catch (_) {}
|
|
||||||
try { [ctrl.canvas, ctrl.backdrop, ctrl.scrim, ctrl.tint].forEach((el) => { if (el && el.parentNode) el.parentNode.removeChild(el); }); } catch (_) {}
|
|
||||||
if (ctrl.ownsActx && ctrl.actx && typeof ctrl.actx.close === 'function') { try { ctrl.actx.close(); } catch (_) {} }
|
|
||||||
ctrl.actx = null; ctrl.viz = null; ctrl.dead = true;
|
|
||||||
_bcControllers.delete(ctrl);
|
|
||||||
});
|
|
||||||
// Size the Butterchurn output: set the canvas DRAWING BUFFER to the
|
|
||||||
// device-pixel render size AND report that same size, so buffer ==
|
|
||||||
// on-screen viewport == full fill. Butterchurn never sizes the output
|
|
||||||
// canvas itself; the previous code set only CSS size, leaving the buffer
|
|
||||||
// at the 300x150 default -> the viz showed a stretched lower-left corner
|
|
||||||
// (worse the larger the panel). Ratio reuses the highway's DPR budget.
|
|
||||||
function _bcApplySize(cssW, cssH) {
|
|
||||||
if (!(cssW > 0 && cssH > 0)) return;
|
|
||||||
ctrl.lastW = cssW; ctrl.lastH = cssH;
|
|
||||||
const ratio = Math.min(window.devicePixelRatio || 1, 1.5);
|
|
||||||
const bw = Math.max(1, Math.round(cssW * ratio)), bh = Math.max(1, Math.round(cssH * ratio));
|
|
||||||
if (canvas.width !== bw) canvas.width = bw;
|
|
||||||
if (canvas.height !== bh) canvas.height = bh;
|
|
||||||
const wpx = cssW + 'px', hpx = cssH + 'px';
|
|
||||||
// Confine ALL layers to exactly the highway-canvas rect so the opaque
|
|
||||||
// backdrop can't bleed over the transport bar above the highway.
|
|
||||||
[ctrl.canvas, ctrl.backdrop, ctrl.scrim, ctrl.tint].forEach((el) => {
|
|
||||||
if (el) { el.style.width = wpx; el.style.height = hpx; el.style.right = 'auto'; el.style.bottom = 'auto'; }
|
|
||||||
});
|
|
||||||
if (ctrl.viz && ctrl.viz.setRendererSize) { try { ctrl.viz.setRendererSize(bw, bh); } catch (e) {} }
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
applySettings() { ctrl.applySettings(); },
|
|
||||||
dead() { return ctrl.dead; },
|
|
||||||
ready() { return !!ctrl.viz; },
|
|
||||||
boundAnalyser() { return ctrl.connectedAnalyser || null; },
|
|
||||||
audioCtx() { return ctrl.actx; },
|
|
||||||
// Re-bind audio when the shared analyser changes (e.g. a stems song
|
|
||||||
// swap replaces the analyser). Same context → cheap reconnect; the
|
|
||||||
// caller handles a context change with a full rebuild (cross-context
|
|
||||||
// connectAudio is impossible — the visualizer is bound to one ctx).
|
|
||||||
reconnectAudio(a) {
|
|
||||||
if (!a || !a.analyser || !ctrl.viz) return false;
|
|
||||||
if (a.analyser === ctrl.connectedAnalyser) return true;
|
|
||||||
if (a.ctx && a.ctx !== ctrl.actx) return false; // needs rebuild
|
|
||||||
try { ctrl.viz.connectAudio(a.analyser); ctrl.connectedAnalyser = a.analyser; return true; } catch (e) { return false; }
|
|
||||||
},
|
|
||||||
chart(v) { if (ctrl.guitar && ctrl.guitar.setChart) ctrl.guitar.setChart(v); },
|
|
||||||
tint(hex, alpha) {
|
|
||||||
if (!ctrl.tint) return;
|
|
||||||
if (hex == null) { ctrl.tint.style.background = 'transparent'; return; }
|
|
||||||
const r = (hex >> 16) & 255, g = (hex >> 8) & 255, b = hex & 255;
|
|
||||||
ctrl.tint.style.background = 'rgba(' + r + ',' + g + ',' + b + ',' + (alpha || 0).toFixed(3) + ')';
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const s = _bcLoadSettings();
|
|
||||||
if (!ctrl.viz || !s.enabled) return; // skip GPU work when the bg is off
|
|
||||||
const sz = sizeProvider && sizeProvider();
|
|
||||||
if (sz && sz.w > 0 && sz.h > 0 && (sz.w !== ctrl.lastW || sz.h !== ctrl.lastH)) {
|
|
||||||
_bcApplySize(sz.w, sz.h);
|
|
||||||
}
|
|
||||||
try { ctrl.viz.render(); } catch (e) {}
|
|
||||||
},
|
|
||||||
resize(w, h) { _bcApplySize(w, h); },
|
|
||||||
destroy() {
|
|
||||||
ctrl.dead = true;
|
|
||||||
_bcControllers.delete(ctrl);
|
|
||||||
if (_bcPrimary === ctrl) { _bcPrimary = _bcControllers.values().next().value || null; _bcUpdatePanelPreset(); }
|
|
||||||
if (ctrl.cycle) { clearInterval(ctrl.cycle); ctrl.cycle = 0; }
|
|
||||||
if (ctrl.guitar) { ctrl.guitar.stop(); ctrl.guitar = null; }
|
|
||||||
// Release the Butterchurn WebGL context deterministically (don't
|
|
||||||
// wait for GC) so repeated mounts/toggles can't exhaust the
|
|
||||||
// browser's WebGL context cap (~16). Do it before removing the
|
|
||||||
// canvas from the DOM.
|
|
||||||
_bcReleaseCanvasGL(ctrl.canvas);
|
|
||||||
[ctrl.canvas, ctrl.backdrop, ctrl.scrim, ctrl.tint].forEach((el) => { if (el && el.parentNode) el.parentNode.removeChild(el); });
|
|
||||||
ctrl.viz = null; ctrl.connectedAnalyser = null;
|
|
||||||
// Close the AudioContext only if we own it (desktop, or the
|
|
||||||
// browser fallback). The browser path normally reuses the
|
|
||||||
// highway's shared context, which the fog system owns — never
|
|
||||||
// close that. Without this, desktop leaks a new AudioContext per
|
|
||||||
// mount and hits the browser's ~6-context cap after a few toggles.
|
|
||||||
if (ctrl.ownsActx && ctrl.actx && typeof ctrl.actx.close === 'function') {
|
|
||||||
try { ctrl.actx.close(); } catch (e) {}
|
|
||||||
}
|
|
||||||
ctrl.actx = null;
|
|
||||||
if (_bcControllers.size === 0) {
|
|
||||||
if (_bcPanel && _bcPanel.parentNode) _bcPanel.parentNode.removeChild(_bcPanel);
|
|
||||||
if (_bcPane && _bcPane.parentNode) _bcPane.parentNode.removeChild(_bcPane);
|
|
||||||
_bcPanel = null; _bcPane = null; _bcListEl = null; _bcFilterEl = null; _bcPaneOpen = false;
|
|
||||||
} else if (_bcPrimary && _bcPrimary.wrap) {
|
|
||||||
// Splitscreen: a controller other than this one is still
|
|
||||||
// alive. The singleton panel was parented to THIS (now
|
|
||||||
// destroyed) wrap, so re-home it onto the surviving primary's
|
|
||||||
// wrap — otherwise the panel is orphaned on the dead wrap and
|
|
||||||
// the surviving highway is left with no visualizer controls
|
|
||||||
// (_bcEnsurePanel only runs at controller creation). It moves
|
|
||||||
// the existing panel+pane when connected, or rebuilds them on
|
|
||||||
// the survivor if this wrap was already detached.
|
|
||||||
try { _bcEnsurePanel(_bcPrimary.wrap); _bcUpdatePanelPreset(); } catch (e) {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Selectable per-string color palettes (issue #10). Each palette has
|
// Selectable per-string color palettes (issue #10). Each palette has
|
||||||
// 8 entries to match MAX_RENDER_STRINGS so 6/7/8-string arrangements
|
// 8 entries to match MAX_RENDER_STRINGS so 6/7/8-string arrangements
|
||||||
|
|||||||
@@ -0,0 +1,678 @@
|
|||||||
|
/**
|
||||||
|
* Butterchurn audio-reactive background control panel — h3d-carve-4.
|
||||||
|
*
|
||||||
|
* Exports _bcIsDesktop() and _bcCreateController().
|
||||||
|
* window.h3dBcApplySettings is assigned at module scope so it is available
|
||||||
|
* before the IIFE runs (R5); settings.html guards the call with ?.(). All
|
||||||
|
* vendor scripts are loaded via DOM <script> injection — never ES import (R2).
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ── Butterchurn audio-reactive background ──────────────────────────
|
||||||
|
* Mounts a Butterchurn (WebGL MilkDrop) canvas BEHIND the transparent
|
||||||
|
* 3D highway. On desktop it's driven by the guitar/mic input (the song
|
||||||
|
* audio lives in JUCE, not the webview <audio>); in a browser it taps
|
||||||
|
* the song <audio> directly.
|
||||||
|
* ──────────────────────────────────────────────────────────────────── */
|
||||||
|
const BC_VENDOR = '/api/plugins/highway_3d/assets/vendor/';
|
||||||
|
const BC_FRAME = 1024;
|
||||||
|
const BC_WORKLET = '/api/plugins/highway_3d/assets/viz-worklet.js';
|
||||||
|
const _bcMeters = { gtr: 0, song: 0 }; // live levels shown in the panel readout
|
||||||
|
const BC_BTN = 'background:rgba(255,255,255,.09);color:#cfe3ff;border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:3px 8px;cursor:pointer;font:12px system-ui';
|
||||||
|
let _bcLoading = null;
|
||||||
|
function _bcLoadLib() {
|
||||||
|
if (_bcLoading) return _bcLoading;
|
||||||
|
_bcLoading = new Promise((resolve, reject) => {
|
||||||
|
const add = (url, next) => {
|
||||||
|
const s = document.createElement('script');
|
||||||
|
s.src = url; s.async = true;
|
||||||
|
s.onload = next; s.onerror = () => reject(new Error('load ' + url));
|
||||||
|
document.head.appendChild(s);
|
||||||
|
};
|
||||||
|
add(BC_VENDOR + 'butterchurn.min.js', () =>
|
||||||
|
add(BC_VENDOR + 'butterchurnPresets.min.js', resolve));
|
||||||
|
});
|
||||||
|
// Don't cache a rejected promise: a transient load failure (network
|
||||||
|
// hiccup, blocked request) must not permanently disable the feature for
|
||||||
|
// the session. Clearing _bcLoading lets the next mount retry the load.
|
||||||
|
_bcLoading.catch(() => { _bcLoading = null; });
|
||||||
|
return _bcLoading;
|
||||||
|
}
|
||||||
|
function _bcResolve() { let b = window.butterchurn; if (b && b.default) b = b.default; return b; }
|
||||||
|
function _bcPresets() { let p = window.butterchurnPresets; if (p && p.default) p = p.default; return p; }
|
||||||
|
export function _bcIsDesktop() {
|
||||||
|
const d = window.feedBackDesktop || window.slopsmithDesktop;
|
||||||
|
return !!(d && d.isDesktop && d.audio && typeof d.audio.getRawAudioFrame === 'function');
|
||||||
|
}
|
||||||
|
// Fast-forward an index to the first entry after time `ct` (used on seek/loop).
|
||||||
|
// Position at the first entry whose time is >= ct (strict <), so an event
|
||||||
|
// landing exactly on the seek/loop target time is still fired by the update
|
||||||
|
// walkers (which consume `<= ct`) instead of being skipped past here.
|
||||||
|
function _bcFfIdx(arr, ct, key) { if (!arr) return 0; let i = 0; while (i < arr.length && (arr[i][key] || 0) < ct) i++; return i; }
|
||||||
|
// Force-free a canvas's WebGL context so the GPU resources are released
|
||||||
|
// immediately instead of lingering until GC — repeated Butterchurn
|
||||||
|
// mount/unmount cycles otherwise pile up live contexts toward the browser cap.
|
||||||
|
function _bcReleaseCanvasGL(canvas) {
|
||||||
|
if (!canvas || typeof canvas.getContext !== 'function') return;
|
||||||
|
let gl = null;
|
||||||
|
try { gl = canvas.getContext('webgl2') || canvas.getContext('webgl'); } catch (e) { gl = null; }
|
||||||
|
if (!gl || typeof gl.getExtension !== 'function') return;
|
||||||
|
try { const lose = gl.getExtension('WEBGL_lose_context'); if (lose) lose.loseContext(); } catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Desktop: bridge GUITAR input PCM + SONG output level into a Web Audio node
|
||||||
|
// Butterchurn can tap. Guitar gives spectral texture from your playing; the
|
||||||
|
// song's output meter (getLevels) injects an energy pulse so the visuals also
|
||||||
|
// react to the backing track (JUCE plays it — there's no song PCM to FFT).
|
||||||
|
function _bcGuitarFeed(actx, onReady) {
|
||||||
|
const latest = new Float32Array(BC_FRAME);
|
||||||
|
let polling = true, songLevel = 0, chartLevel = 0;
|
||||||
|
let node = null, sp = null, silent = null;
|
||||||
|
const api = (window.feedBackDesktop || window.slopsmithDesktop).audio;
|
||||||
|
const gainNow = () => (_bcLoadSettings().guitarGain) || 6;
|
||||||
|
|
||||||
|
// Keep the source node processing (silently — JUCE already monitors the
|
||||||
|
// guitar), and hand it to Butterchurn via the onReady callback.
|
||||||
|
function attach(srcNode) {
|
||||||
|
silent = actx.createGain(); silent.gain.value = 0;
|
||||||
|
srcNode.connect(silent); silent.connect(actx.destination);
|
||||||
|
try { if (onReady) onReady(srcNode); } catch (e) {}
|
||||||
|
}
|
||||||
|
// Fallback for contexts without AudioWorklet support.
|
||||||
|
function useScriptProcessor() {
|
||||||
|
let phase = 0, phase2 = 0;
|
||||||
|
const TWO_PI = Math.PI * 2;
|
||||||
|
const oscStep = TWO_PI * (90 / actx.sampleRate);
|
||||||
|
const oscStep2 = TWO_PI * (520 / actx.sampleRate);
|
||||||
|
sp = actx.createScriptProcessor(BC_FRAME, 1, 1);
|
||||||
|
sp.onaudioprocess = (e) => {
|
||||||
|
const out = e.outputBuffer.getChannelData(0);
|
||||||
|
const n = Math.min(out.length, latest.length);
|
||||||
|
const lvl = songLevel, clvl = chartLevel, gg = gainNow();
|
||||||
|
for (let i = 0; i < out.length; i++) {
|
||||||
|
const g = (i < n ? latest[i] : 0) * gg;
|
||||||
|
const song = lvl * (0.7 * Math.sin(phase) + 0.3 * (Math.random() * 2 - 1)) * 1.4;
|
||||||
|
const chart = clvl * (0.5 * Math.sin(phase2) + 0.5 * (Math.random() * 2 - 1)) * 1.5;
|
||||||
|
phase += oscStep; if (phase > TWO_PI) phase -= TWO_PI;
|
||||||
|
phase2 += oscStep2; if (phase2 > TWO_PI) phase2 -= TWO_PI;
|
||||||
|
const v = g + song + chart;
|
||||||
|
out[i] = v > 1 ? 1 : (v < -1 ? -1 : v);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
attach(sp);
|
||||||
|
console.log('[viz3d] audio feed: ScriptProcessor (fallback)');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Preferred path: AudioWorklet (runs off the main thread).
|
||||||
|
if (actx.audioWorklet && typeof actx.audioWorklet.addModule === 'function' && typeof AudioWorkletNode === 'function') {
|
||||||
|
actx.audioWorklet.addModule(BC_WORKLET).then(() => {
|
||||||
|
if (!polling || sp) return;
|
||||||
|
node = new AudioWorkletNode(actx, 'viz-feed', { numberOfInputs: 0, numberOfOutputs: 1, outputChannelCount: [1] });
|
||||||
|
attach(node);
|
||||||
|
console.log('[viz3d] audio feed: AudioWorklet');
|
||||||
|
}).catch((e) => {
|
||||||
|
console.warn('[viz3d] AudioWorklet unavailable, using ScriptProcessor:', e && e.message);
|
||||||
|
if (polling && !sp && !node) useScriptProcessor();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
useScriptProcessor();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Guitar PCM poll → waveform + level meter (+ pushed to the worklet).
|
||||||
|
(function pcmLoop() {
|
||||||
|
if (!polling) return;
|
||||||
|
Promise.resolve(api.getRawAudioFrame(BC_FRAME)).then((f) => {
|
||||||
|
if (f && f.length) {
|
||||||
|
if (f.length >= BC_FRAME) latest.set(f.subarray(0, BC_FRAME));
|
||||||
|
else { latest.fill(0); latest.set(f); }
|
||||||
|
let s = 0; for (let i = 0; i < BC_FRAME; i++) s += latest[i] * latest[i];
|
||||||
|
_bcMeters.gtr = Math.sqrt(s / BC_FRAME) * gainNow();
|
||||||
|
if (node) node.port.postMessage({ frame: latest.slice(0), song: songLevel, chart: chartLevel, gain: gainNow() });
|
||||||
|
}
|
||||||
|
}).catch(() => {}).then(() => { if (polling) setTimeout(pcmLoop, 16); });
|
||||||
|
})();
|
||||||
|
// Song output meter poll → music energy pulse.
|
||||||
|
(function levelLoop() {
|
||||||
|
if (!polling) return;
|
||||||
|
Promise.resolve(api.getLevels && api.getLevels()).then((L) => {
|
||||||
|
if (L && typeof L.outputLevel === 'number') {
|
||||||
|
songLevel = Math.min(1, L.outputLevel * ((_bcLoadSettings().songGain) || 1.8));
|
||||||
|
_bcMeters.song = songLevel;
|
||||||
|
if (node) node.port.postMessage({ song: songLevel, chart: chartLevel, gain: gainNow() });
|
||||||
|
}
|
||||||
|
}).catch(() => {}).then(() => { if (polling) setTimeout(levelLoop, 40); });
|
||||||
|
})();
|
||||||
|
|
||||||
|
return {
|
||||||
|
setChart(v) { chartLevel = v; },
|
||||||
|
stop() {
|
||||||
|
polling = false;
|
||||||
|
try { if (sp) { sp.disconnect(); sp.onaudioprocess = null; } } catch (e) {}
|
||||||
|
try { if (node) node.disconnect(); } catch (e) {}
|
||||||
|
try { if (silent) silent.disconnect(); } catch (e) {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Browser audio is sourced by REUSING the highway's own shared analyser
|
||||||
|
// (the same #audio / stems side-chain tap the fog scenery uses), passed in
|
||||||
|
// as `audioProvider` to _bcCreateController. We deliberately do NOT open a
|
||||||
|
// second createMediaElementSource on #audio here: it can only be called
|
||||||
|
// once per element (a second tap throws InvalidStateError and permanently
|
||||||
|
// disables the other consumer), it would route the song through a fresh,
|
||||||
|
// possibly-suspended context and mute playback, and it would miss the stems
|
||||||
|
// side-chain that sloppaks expose at window.feedBack.stems.getAnalyser().
|
||||||
|
/* ── Controls + readability (localStorage-backed, global config) ───── */
|
||||||
|
const BC_LS = 'viz3d_settings';
|
||||||
|
const BC_DEFAULTS = { enabled: true, opacity: 1.0, laneDim: true, laneDimStrength: 0.45, chartAccents: true, colorTint: true, chartStrength: 1.0, tintStrength: 0.65, guitarGain: 6, songGain: 1.8, cyclePool: 'all', hold: false };
|
||||||
|
let _bcSettings = null;
|
||||||
|
function _bcLoadSettings() {
|
||||||
|
if (_bcSettings) return _bcSettings;
|
||||||
|
let saved = {};
|
||||||
|
try { saved = JSON.parse(localStorage.getItem(BC_LS) || '{}'); } catch (e) {}
|
||||||
|
_bcSettings = Object.assign({}, BC_DEFAULTS, saved);
|
||||||
|
return _bcSettings;
|
||||||
|
}
|
||||||
|
function _bcSaveSettings() { try { localStorage.setItem(BC_LS, JSON.stringify(_bcSettings)); } catch (e) {} }
|
||||||
|
const _bcControllers = new Set();
|
||||||
|
function _bcApplyAll() { _bcControllers.forEach((c) => { try { c.applySettings(); } catch (e) {} }); }
|
||||||
|
// Live-apply hook for the plugin's settings.html. The visualizer's on/off +
|
||||||
|
// slider controls now live in the standard settings panel (settings.html),
|
||||||
|
// which persists them into the BC_LS blob and then calls this so a mounted
|
||||||
|
// highway re-reads and applies them immediately. Assigned at module scope
|
||||||
|
// (R5: h3d-carve-4 — 1 beyond-subst vs the IIFE placement; body verbatim)
|
||||||
|
// so it is available before the IIFE runs. settings.html guards with `?.`.
|
||||||
|
window.h3dBcApplySettings = function () {
|
||||||
|
_bcSettings = null; // drop the cache so the next read reloads from localStorage
|
||||||
|
_bcLoadSettings();
|
||||||
|
_bcApplyAll();
|
||||||
|
try { _bcUpdatePanelPreset(); } catch (e) {}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Preset curation: favorites / bans (persisted globally) + the "primary"
|
||||||
|
// controller the panel's preset buttons drive.
|
||||||
|
// Seeded once on first run (reputation-based starter set; user can edit freely).
|
||||||
|
const BC_DEFAULT_FAVORITES = [
|
||||||
|
'Flexi, martin + geiss - dedicated to the sherwin maxawow',
|
||||||
|
'Geiss - Reaction Diffusion 2',
|
||||||
|
'Geiss - Spiral Artifact',
|
||||||
|
'Flexi + Martin - cascading decay swing',
|
||||||
|
'Flexi - mindblob [shiny mix]',
|
||||||
|
'Geiss - Cauldron - painterly 2 (saturation remix)',
|
||||||
|
'Zylot - Paint Spill (Music Reactive Paint Mix)',
|
||||||
|
'Flexi - predator-prey-spirals',
|
||||||
|
'Rovastar + Loadus + Geiss - FractalDrop (Triple Mix)',
|
||||||
|
'Flexi, fishbrain, Geiss + Martin - tokamak witchery',
|
||||||
|
];
|
||||||
|
const BC_DEFAULT_BANS = [
|
||||||
|
'martin - mucus cervix',
|
||||||
|
'Goody - The Wild Vort',
|
||||||
|
'martin - extreme heat',
|
||||||
|
'Unchained - Rewop',
|
||||||
|
'high-altitude basket unraveling - singh grooves nitrogen argon nz+',
|
||||||
|
'$$$ Royal - Mashup (197)',
|
||||||
|
'$$$ Royal - Mashup (431)',
|
||||||
|
'suksma - uninitialized variabowl (hydroponic chronic)',
|
||||||
|
'shifter - dark tides bdrv mix 2',
|
||||||
|
'_Mig_049',
|
||||||
|
];
|
||||||
|
const _bcFavorites = new Set();
|
||||||
|
const _bcBanned = new Set();
|
||||||
|
let _bcListsLoaded = false;
|
||||||
|
function _bcLoadLists() {
|
||||||
|
if (_bcListsLoaded) return; _bcListsLoaded = true;
|
||||||
|
try { (JSON.parse(localStorage.getItem('viz3d_favorites') || '[]') || []).forEach((n) => _bcFavorites.add(n)); } catch (e) {}
|
||||||
|
try { (JSON.parse(localStorage.getItem('viz3d_banned') || '[]') || []).forEach((n) => _bcBanned.add(n)); } catch (e) {}
|
||||||
|
let seeded = false;
|
||||||
|
try { seeded = !!localStorage.getItem('viz3d_seeded'); } catch (e) {}
|
||||||
|
if (!seeded) {
|
||||||
|
BC_DEFAULT_FAVORITES.forEach((n) => _bcFavorites.add(n));
|
||||||
|
BC_DEFAULT_BANS.forEach((n) => _bcBanned.add(n));
|
||||||
|
try { localStorage.setItem('viz3d_seeded', '1'); } catch (e) {}
|
||||||
|
_bcSaveLists();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _bcSaveLists() {
|
||||||
|
try { localStorage.setItem('viz3d_favorites', JSON.stringify([..._bcFavorites])); } catch (e) {}
|
||||||
|
try { localStorage.setItem('viz3d_banned', JSON.stringify([..._bcBanned])); } catch (e) {}
|
||||||
|
}
|
||||||
|
// Re-add the bundled defaults anytime (merges; a default-fav un-bans, a default-ban un-favs).
|
||||||
|
function _bcRestoreDefaults() {
|
||||||
|
BC_DEFAULT_FAVORITES.forEach((n) => { _bcBanned.delete(n); _bcFavorites.add(n); });
|
||||||
|
BC_DEFAULT_BANS.forEach((n) => { _bcFavorites.delete(n); _bcBanned.add(n); });
|
||||||
|
try { localStorage.setItem('viz3d_seeded', '1'); } catch (e) {}
|
||||||
|
_bcSaveLists(); _bcUpdatePanelPreset(); _bcRenderList();
|
||||||
|
}
|
||||||
|
let _bcPrimary = null;
|
||||||
|
let _bcPane = null, _bcListEl = null, _bcFilterEl = null, _bcPaneOpen = false, _bcCollapsed = false;
|
||||||
|
|
||||||
|
function _bcStatusMark(name) {
|
||||||
|
return _bcFavorites.has(name) ? '★ ' : (_bcBanned.has(name) ? '🚫 ' : '');
|
||||||
|
}
|
||||||
|
function _bcSetHold(v) {
|
||||||
|
const s = _bcLoadSettings();
|
||||||
|
s.hold = !!v; _bcSaveSettings();
|
||||||
|
const b = _bcPanel && _bcPanel.querySelector('#vz-hold');
|
||||||
|
if (b) b.textContent = s.hold ? '▶ Resume' : '⏸ Hold';
|
||||||
|
}
|
||||||
|
// Drives both panels off the right edge. Order when both open (L→R):
|
||||||
|
// visualizer panel → preset pane → window edge. Pane lives off-screen by
|
||||||
|
// default; opening it shoves the panel LEFT to make room.
|
||||||
|
function _bcLayout() {
|
||||||
|
if (_bcPanel) {
|
||||||
|
let tx = 0;
|
||||||
|
if (_bcCollapsed) tx = 210; // tuck the whole panel off the right edge
|
||||||
|
else if (_bcPaneOpen) tx = -248; // slide panel LEFT to make room for the pane
|
||||||
|
_bcPanel.style.transform = 'translateX(' + tx + 'px) translateY(-50%)';
|
||||||
|
}
|
||||||
|
if (_bcPane) {
|
||||||
|
_bcPane.style.transform = (_bcPaneOpen && !_bcCollapsed) ? 'translateX(0) translateY(-50%)' : 'translateX(calc(100% + 16px)) translateY(-50%)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _bcSetPane(open) {
|
||||||
|
_bcPaneOpen = !!open && !_bcCollapsed;
|
||||||
|
const b = _bcPanel && _bcPanel.querySelector('#vz-listbtn');
|
||||||
|
if (b) b.textContent = _bcPaneOpen ? '>>' : '<<';
|
||||||
|
if (_bcPaneOpen) _bcRenderList();
|
||||||
|
_bcLayout();
|
||||||
|
}
|
||||||
|
function _bcRenderList() {
|
||||||
|
if (!_bcListEl) return;
|
||||||
|
const ctrl = _bcPrimary;
|
||||||
|
const keys = (ctrl && ctrl.keys) ? ctrl.keys : [];
|
||||||
|
const filt = ((_bcFilterEl && _bcFilterEl.value) || '').toLowerCase();
|
||||||
|
const cur = ctrl && ctrl.curName;
|
||||||
|
const frag = document.createDocumentFragment();
|
||||||
|
for (let i = 0; i < keys.length; i++) {
|
||||||
|
const name = keys[i];
|
||||||
|
if (filt && name.toLowerCase().indexOf(filt) === -1) continue;
|
||||||
|
const row = document.createElement('div');
|
||||||
|
row.textContent = _bcStatusMark(name) + name;
|
||||||
|
row.title = name;
|
||||||
|
row.style.cssText = 'padding:3px 7px;border-radius:4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;' +
|
||||||
|
(name === cur ? 'background:rgba(110,160,255,.28);' : '') + (_bcBanned.has(name) ? 'opacity:.55;' : '');
|
||||||
|
row.addEventListener('click', () => {
|
||||||
|
if (!_bcPrimary) return;
|
||||||
|
_bcPrimary.loadByName(name, 1.0);
|
||||||
|
_bcSetHold(true); // picked from the list → sit on it
|
||||||
|
});
|
||||||
|
frag.appendChild(row);
|
||||||
|
}
|
||||||
|
_bcListEl.innerHTML = '';
|
||||||
|
_bcListEl.appendChild(frag);
|
||||||
|
}
|
||||||
|
function _bcUpdatePanelPreset() {
|
||||||
|
if (!_bcPanel) return;
|
||||||
|
const name = _bcPrimary ? (_bcPrimary.curName || null) : null;
|
||||||
|
const nameEl = _bcPanel.querySelector('#vz-pname');
|
||||||
|
const favBtn = _bcPanel.querySelector('#vz-fav');
|
||||||
|
const banBtn = _bcPanel.querySelector('#vz-ban');
|
||||||
|
const cntEl = _bcPanel.querySelector('#vz-pcount');
|
||||||
|
if (nameEl) { nameEl.textContent = (name ? _bcStatusMark(name) : '') + (name || '—'); nameEl.title = name ? (name + ' — click for full list') : ''; }
|
||||||
|
if (favBtn) favBtn.textContent = (name && _bcFavorites.has(name)) ? '★ Favorited' : '☆ Favorite';
|
||||||
|
if (banBtn) banBtn.textContent = (name && _bcBanned.has(name)) ? '🚫 Banned' : '🚫 Ban';
|
||||||
|
if (cntEl) cntEl.textContent = '★ ' + _bcFavorites.size + ' 🚫 ' + _bcBanned.size;
|
||||||
|
if (_bcPaneOpen) _bcRenderList();
|
||||||
|
}
|
||||||
|
|
||||||
|
let _bcPanel = null, _bcPanelKeyBound = false;
|
||||||
|
function _bcEnsurePanel(host) {
|
||||||
|
if (_bcPanel && _bcPanel.isConnected) {
|
||||||
|
// Singleton panel: follow the active highway. If it's still parented
|
||||||
|
// to a different wrap (e.g. another mounted highway instance such as
|
||||||
|
// Virtuoso's embedded one), move it — and the pane — to this wrap so
|
||||||
|
// it appears on whichever highway is currently on-screen.
|
||||||
|
if (host && _bcPanel.parentNode !== host) {
|
||||||
|
host.appendChild(_bcPanel);
|
||||||
|
if (_bcPane) host.appendChild(_bcPane);
|
||||||
|
}
|
||||||
|
return _bcPanel;
|
||||||
|
}
|
||||||
|
const s = _bcLoadSettings();
|
||||||
|
const p = document.createElement('div');
|
||||||
|
p.id = 'viz3d-panel';
|
||||||
|
p.style.cssText = 'position:absolute;top:50%;right:10px;z-index:100000;pointer-events:auto;font:12px/1.45 system-ui,sans-serif;' +
|
||||||
|
'color:#cfe3ff;background:rgba(8,10,20,0.82);padding:9px 11px;border-radius:8px;width:186px;' +
|
||||||
|
'box-shadow:0 2px 12px rgba(0,0,0,0.5);user-select:none;transition:transform 0.28s ease;';
|
||||||
|
p.innerHTML =
|
||||||
|
'<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:7px"><span style="font-weight:600">🌀 Visualizer</span><button id="vz-listbtn" title="Show / hide full preset list" style="' + BC_BTN + ';padding:1px 7px"><<</button></div>' +
|
||||||
|
// On/off + opacity/dim/chart/tint/gain controls now live in the
|
||||||
|
// plugin's Settings panel (settings.html). This in-canvas panel is
|
||||||
|
// only the LIVE preset browser (pick / favorite / ban / cycle).
|
||||||
|
'<div style="opacity:.55;font-size:11px;margin:2px 0 6px">Background & reactivity options are in Settings ▸ 3D Highway.</div>' +
|
||||||
|
'<div style="display:flex;align-items:center;gap:6px;margin:4px 0">' +
|
||||||
|
'<button id="vz-prev" style="' + BC_BTN + '">◀</button>' +
|
||||||
|
'<div id="vz-pname" style="flex:1;text-align:center;font-size:11px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer" title="">—</div>' +
|
||||||
|
'<button id="vz-next" style="' + BC_BTN + '">▶</button>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div style="display:flex;gap:6px;margin:4px 0">' +
|
||||||
|
'<button id="vz-fav" style="' + BC_BTN + ';flex:1">♡ Favorite</button>' +
|
||||||
|
'<button id="vz-ban" style="' + BC_BTN + ';flex:1">🚫 Ban</button>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div style="display:flex;gap:6px;align-items:flex-end;margin:6px 0">' +
|
||||||
|
'<label style="flex:1">Cycle <select id="vz-cyc" style="width:100%;background:#11141f;color:#cfe3ff;border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:3px"><option value="all">All</option><option value="favorites">Favorites</option><option value="bans">Bans</option></select></label>' +
|
||||||
|
'<button id="vz-hold" style="' + BC_BTN + '">⏸ Hold</button>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div style="margin:5px 0 4px;font-size:11px;opacity:.75"><span id="vz-pcount">★ 0 🚫 0</span></div>' +
|
||||||
|
'<div id="vz-meter" style="opacity:.65;margin-top:6px;font:11px/1.3 monospace">gtr — · song —</div>' +
|
||||||
|
'<div style="opacity:.45;margin-top:4px;font-size:11px">` or ‹‹ to hide</div>';
|
||||||
|
(host || document.body).appendChild(p);
|
||||||
|
|
||||||
|
// Slide handle (<< / >>) so the panel can tuck off the right edge and stop
|
||||||
|
// covering the Now / Up-Next labels.
|
||||||
|
const tab = document.createElement('button');
|
||||||
|
tab.textContent = '>>';
|
||||||
|
tab.title = 'Hide / show controls';
|
||||||
|
tab.style.cssText = 'position:absolute;top:6px;left:-23px;width:23px;height:28px;border:none;cursor:pointer;' +
|
||||||
|
'background:rgba(8,10,20,0.82);color:#cfe3ff;border-radius:7px 0 0 7px;font:12px/1 monospace;padding:0;';
|
||||||
|
p.appendChild(tab);
|
||||||
|
tab.addEventListener('click', () => {
|
||||||
|
_bcCollapsed = !_bcCollapsed;
|
||||||
|
if (_bcCollapsed) _bcPaneOpen = false; // collapsing the panel hides the pane too
|
||||||
|
tab.textContent = _bcCollapsed ? '<<' : '>>';
|
||||||
|
const lb = p.querySelector('#vz-listbtn'); if (lb) lb.textContent = _bcPaneOpen ? '>>' : '<<';
|
||||||
|
_bcLayout();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sliding preset-list pane (sits to the LEFT of the control panel)
|
||||||
|
const pane = document.createElement('div');
|
||||||
|
pane.id = 'viz3d-listpane';
|
||||||
|
pane.style.cssText = 'position:absolute;top:50%;right:10px;z-index:99999;pointer-events:auto;width:236px;max-height:74vh;display:flex;flex-direction:column;' +
|
||||||
|
'background:rgba(8,10,20,0.93);border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,0.55);color:#cfe3ff;' +
|
||||||
|
'font:12px system-ui,sans-serif;overflow:hidden;transform:translateX(calc(100% + 16px)) translateY(-50%);transition:transform 0.28s ease;';
|
||||||
|
pane.innerHTML =
|
||||||
|
'<div style="display:flex;align-items:center;justify-content:space-between;padding:7px 9px 7px 10px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)"><span>Presets</span><button id="vz-defaults" title="Restore the bundled default favorites + bans" style="' + BC_BTN + ';font-weight:400">↺ defaults</button></div>' +
|
||||||
|
'<input id="vz-filter" placeholder="filter…" spellcheck="false" style="margin:8px 9px 6px;padding:4px 7px;background:#11141f;color:#cfe3ff;border:1px solid rgba(255,255,255,.15);border-radius:5px;outline:none">' +
|
||||||
|
'<div id="vz-list" style="overflow-y:auto;padding:0 4px 8px"></div>';
|
||||||
|
(host || document.body).appendChild(pane);
|
||||||
|
_bcPane = pane;
|
||||||
|
_bcListEl = pane.querySelector('#vz-list');
|
||||||
|
_bcFilterEl = pane.querySelector('#vz-filter');
|
||||||
|
_bcFilterEl.addEventListener('input', _bcRenderList);
|
||||||
|
pane.querySelector('#vz-defaults').addEventListener('click', _bcRestoreDefaults);
|
||||||
|
|
||||||
|
const q = (id) => p.querySelector(id);
|
||||||
|
_bcPanel = p;
|
||||||
|
|
||||||
|
// Preset curation wiring (favorites / bans / cycle / reset)
|
||||||
|
_bcLoadLists();
|
||||||
|
const cyc = q('#vz-cyc');
|
||||||
|
cyc.value = s.cyclePool || 'all';
|
||||||
|
// Read fresh: settings.html writes can replace _bcSettings, so the `s`
|
||||||
|
// captured at panel creation may be stale by the time this fires.
|
||||||
|
cyc.addEventListener('change', () => { _bcLoadSettings().cyclePool = cyc.value; _bcSaveSettings(); });
|
||||||
|
_bcSetHold(!!s.hold); // sync the Hold button label to the saved state
|
||||||
|
q('#vz-hold').addEventListener('click', () => _bcSetHold(!_bcLoadSettings().hold));
|
||||||
|
q('#vz-listbtn').addEventListener('click', () => _bcSetPane(!_bcPaneOpen));
|
||||||
|
q('#vz-pname').addEventListener('click', () => _bcSetPane(!_bcPaneOpen));
|
||||||
|
q('#vz-prev').addEventListener('click', () => { if (_bcPrimary) _bcPrimary.step(-1); });
|
||||||
|
q('#vz-next').addEventListener('click', () => { if (_bcPrimary) _bcPrimary.step(1); });
|
||||||
|
q('#vz-fav').addEventListener('click', () => { if (_bcPrimary) _bcPrimary.toggleFav(); });
|
||||||
|
q('#vz-ban').addEventListener('click', () => { if (_bcPrimary) _bcPrimary.banCur(); });
|
||||||
|
_bcSetPane(false); // start collapsed; sets the list-button label
|
||||||
|
_bcUpdatePanelPreset();
|
||||||
|
|
||||||
|
// Live level readout — proves the song (not just guitar) is driving things.
|
||||||
|
// Self-stops when the panel is removed (_bcPanel !== p).
|
||||||
|
(function meterLoop() {
|
||||||
|
if (_bcPanel !== p) return;
|
||||||
|
const m = p.querySelector('#vz-meter');
|
||||||
|
if (m) m.textContent = 'gtr ' + _bcMeters.gtr.toFixed(2) + ' · song ' + _bcMeters.song.toFixed(2);
|
||||||
|
setTimeout(meterLoop, 150);
|
||||||
|
})();
|
||||||
|
|
||||||
|
if (!_bcPanelKeyBound) {
|
||||||
|
_bcPanelKeyBound = true;
|
||||||
|
window.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key !== '`' || e.metaKey || e.ctrlKey || !_bcPanel) return;
|
||||||
|
const tag = (e.target && e.target.tagName) || '';
|
||||||
|
if (tag === 'INPUT' || tag === 'TEXTAREA') return;
|
||||||
|
const reveal = _bcPanel.style.display === 'none';
|
||||||
|
_bcPanel.style.display = reveal ? '' : 'none';
|
||||||
|
if (_bcPane) _bcPane.style.display = reveal ? '' : 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return _bcPanel;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a Butterchurn background controller bound to a wrap element.
|
||||||
|
export function _bcCreateController(wrap, sizeProvider, audioProvider) {
|
||||||
|
const ctrl = { viz: null, actx: null, guitar: null, map: null, keys: [], cycle: 0, dead: false, lastW: -1, lastH: -1, canvas: null, backdrop: null, scrim: null, tint: null, wrap: wrap };
|
||||||
|
// Layered DOM in the wrap, all BEHIND the transparent 3D highway:
|
||||||
|
// backdrop(z-4 dark) → bc canvas(z-3) → tint(z-2 instrument color) → scrim(z-1 lane dim)
|
||||||
|
const mkLayer = (cls, css) => { const d = document.createElement('div'); d.className = cls; d.style.cssText = css; wrap.appendChild(d); return d; };
|
||||||
|
const backdrop = mkLayer('viz3d-backdrop', 'position:absolute;top:0;left:0;right:0;bottom:0;z-index:-4;background:#070710;pointer-events:none;');
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.className = 'viz3d-bc';
|
||||||
|
canvas.style.cssText = 'position:absolute;top:0;left:0;z-index:-3;pointer-events:none;';
|
||||||
|
wrap.appendChild(canvas);
|
||||||
|
const tint = mkLayer('viz3d-tint', 'position:absolute;top:0;left:0;right:0;bottom:0;z-index:-2;pointer-events:none;mix-blend-mode:overlay;background:transparent;');
|
||||||
|
const scrim = mkLayer('viz3d-scrim', 'position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;');
|
||||||
|
ctrl.canvas = canvas; ctrl.backdrop = backdrop; ctrl.scrim = scrim; ctrl.tint = tint;
|
||||||
|
|
||||||
|
ctrl.applySettings = function () {
|
||||||
|
const s = _bcLoadSettings();
|
||||||
|
canvas.style.display = s.enabled ? '' : 'none';
|
||||||
|
canvas.style.opacity = String(s.enabled ? s.opacity : 0);
|
||||||
|
if (s.laneDim) {
|
||||||
|
const a = Math.max(0, Math.min(1, s.laneDimStrength)).toFixed(3);
|
||||||
|
scrim.style.display = '';
|
||||||
|
scrim.style.background = 'linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,' + a +
|
||||||
|
') 30%, rgba(0,0,0,' + a + ') 70%, rgba(0,0,0,0) 100%)';
|
||||||
|
} else {
|
||||||
|
scrim.style.display = 'none';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Preset curation (favorites / bans / cycle mode) ──
|
||||||
|
ctrl.curName = null; ctrl.lastManual = 0;
|
||||||
|
ctrl.allList = () => (ctrl.keys || []).filter((k) => !_bcBanned.has(k));
|
||||||
|
ctrl.pool = () => {
|
||||||
|
const mode = _bcLoadSettings().cyclePool || 'all';
|
||||||
|
if (mode === 'bans') return (ctrl.keys || []).filter((k) => _bcBanned.has(k));
|
||||||
|
if (mode === 'favorites') {
|
||||||
|
const f = (ctrl.keys || []).filter((k) => _bcFavorites.has(k) && !_bcBanned.has(k));
|
||||||
|
if (f.length) return f;
|
||||||
|
}
|
||||||
|
return ctrl.allList();
|
||||||
|
};
|
||||||
|
ctrl.browseArr = () => ctrl.keys || []; // ◀▶ and the list pane walk the full preset list
|
||||||
|
ctrl.loadByName = (name, blend) => {
|
||||||
|
if (!ctrl.viz || !name || !ctrl.map || !ctrl.map[name]) return;
|
||||||
|
try { ctrl.viz.loadPreset(ctrl.map[name], blend || 0); ctrl.curName = name; } catch (e) {}
|
||||||
|
_bcUpdatePanelPreset();
|
||||||
|
};
|
||||||
|
ctrl.autoTick = () => {
|
||||||
|
if (ctrl.dead || _bcLoadSettings().hold) return;
|
||||||
|
if (performance.now() - ctrl.lastManual < 8000) return;
|
||||||
|
const pool = ctrl.pool();
|
||||||
|
if (!pool.length) return;
|
||||||
|
let name = pool[(Math.random() * pool.length) | 0];
|
||||||
|
if (pool.length > 1 && name === ctrl.curName) name = pool[(pool.indexOf(name) + 1) % pool.length];
|
||||||
|
ctrl.loadByName(name, 2.7);
|
||||||
|
};
|
||||||
|
ctrl.step = (dir) => {
|
||||||
|
const list = ctrl.browseArr();
|
||||||
|
if (!list.length) return;
|
||||||
|
let i = list.indexOf(ctrl.curName); if (i < 0) i = (dir > 0 ? -1 : 0);
|
||||||
|
i = (i + dir + list.length) % list.length;
|
||||||
|
ctrl.lastManual = performance.now();
|
||||||
|
ctrl.loadByName(list[i], 1.5);
|
||||||
|
};
|
||||||
|
ctrl.toggleFav = () => {
|
||||||
|
if (!ctrl.curName) return;
|
||||||
|
if (_bcFavorites.has(ctrl.curName)) _bcFavorites.delete(ctrl.curName);
|
||||||
|
else { _bcFavorites.add(ctrl.curName); _bcBanned.delete(ctrl.curName); }
|
||||||
|
_bcSaveLists(); _bcUpdatePanelPreset();
|
||||||
|
};
|
||||||
|
ctrl.banCur = () => {
|
||||||
|
if (!ctrl.curName) return;
|
||||||
|
if (_bcBanned.has(ctrl.curName)) { // un-ban (two-way) — stay on it
|
||||||
|
_bcBanned.delete(ctrl.curName);
|
||||||
|
_bcSaveLists(); _bcUpdatePanelPreset();
|
||||||
|
} else { // ban + advance off it
|
||||||
|
_bcBanned.add(ctrl.curName); _bcFavorites.delete(ctrl.curName);
|
||||||
|
_bcSaveLists(); ctrl.step(1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
_bcPrimary = ctrl;
|
||||||
|
|
||||||
|
_bcControllers.add(ctrl);
|
||||||
|
_bcEnsurePanel(wrap);
|
||||||
|
ctrl.applySettings();
|
||||||
|
|
||||||
|
_bcLoadLib().then(() => {
|
||||||
|
if (ctrl.dead) return;
|
||||||
|
const bc = _bcResolve();
|
||||||
|
if (!bc || typeof bc.createVisualizer !== 'function') { console.warn('[viz3d] Butterchurn global missing'); return; }
|
||||||
|
const Ctx = window.AudioContext || window.webkitAudioContext;
|
||||||
|
const sz = (sizeProvider && sizeProvider()) || { w: 1280, h: 720 };
|
||||||
|
// Browser (Docker/web app): REUSE the highway's existing shared
|
||||||
|
// analyser (the fog scenery's #audio / stems tap) via audioProvider,
|
||||||
|
// and build Butterchurn on that SAME AudioContext so connectAudio()
|
||||||
|
// doesn't fail cross-context. Desktop uses its own context fed by the
|
||||||
|
// guitar/mic input. `ownsActx` tracks whether WE created the context
|
||||||
|
// (so destroy() closes only contexts we own, never the shared one).
|
||||||
|
const fogAudio = _bcIsDesktop() ? null : (audioProvider ? audioProvider() : null);
|
||||||
|
ctrl.ownsActx = !(fogAudio && fogAudio.ctx);
|
||||||
|
ctrl.actx = (fogAudio && fogAudio.ctx) || new Ctx();
|
||||||
|
if (ctrl.actx.state === 'suspended' && ctrl.actx.resume) ctrl.actx.resume().catch(() => {});
|
||||||
|
// Seed the DRAWING BUFFER (canvas.width/height) to the device-pixel
|
||||||
|
// render size and report that SAME size to Butterchurn. Its on-screen
|
||||||
|
// pass viewports to the reported size but never sizes the output canvas
|
||||||
|
// itself — leaving the buffer at the 300x150 default blits the whole
|
||||||
|
// visualizer into a corner that CSS then stretches across the highway.
|
||||||
|
// pixelRatio:1 because DPR is now folded into the reported size, so
|
||||||
|
// buffer == viewport == internal texsize (no double-counting).
|
||||||
|
const _bcRatio0 = Math.min(window.devicePixelRatio || 1, 1.5);
|
||||||
|
const _bcW0 = Math.max(1, Math.round((sz.w || 1280) * _bcRatio0));
|
||||||
|
const _bcH0 = Math.max(1, Math.round((sz.h || 720) * _bcRatio0));
|
||||||
|
canvas.width = _bcW0; canvas.height = _bcH0;
|
||||||
|
ctrl.viz = bc.createVisualizer(ctrl.actx, canvas, {
|
||||||
|
width: _bcW0, height: _bcH0,
|
||||||
|
pixelRatio: 1, textureRatio: 1,
|
||||||
|
});
|
||||||
|
if (_bcIsDesktop()) {
|
||||||
|
try {
|
||||||
|
ctrl.guitar = _bcGuitarFeed(ctrl.actx, (srcNode) => { try { if (ctrl.viz) ctrl.viz.connectAudio(srcNode); } catch (e) {} });
|
||||||
|
console.log('[viz3d] bg: feeding GUITAR input into Butterchurn');
|
||||||
|
} catch (e) { console.warn('[viz3d] guitar feed failed', e); }
|
||||||
|
} else if (fogAudio && fogAudio.analyser) {
|
||||||
|
// The shared AnalyserNode is a passthrough — connecting it onward
|
||||||
|
// to Butterchurn's internal analyser doesn't disturb the fog's reads.
|
||||||
|
try { ctrl.viz.connectAudio(fogAudio.analyser); console.log('[viz3d] browser: Butterchurn tapping shared analyser (' + (fogAudio.source || 'core') + ')'); }
|
||||||
|
catch (e) { console.warn('[viz3d] shared-analyser connect failed', e); }
|
||||||
|
}
|
||||||
|
_bcLoadLists();
|
||||||
|
const presets = _bcPresets();
|
||||||
|
if (presets && typeof presets.getPresets === 'function') { ctrl.map = presets.getPresets(); ctrl.keys = Object.keys(ctrl.map); }
|
||||||
|
const pool0 = ctrl.pool();
|
||||||
|
ctrl.loadByName(pool0.length ? pool0[(Math.random() * pool0.length) | 0] : (ctrl.keys[0] || null), 0.0);
|
||||||
|
ctrl.cycle = setInterval(() => ctrl.autoTick(), 30000);
|
||||||
|
ctrl.connectedAnalyser = (fogAudio && fogAudio.analyser) || null;
|
||||||
|
console.log('[viz3d] Butterchurn ready, presets:', ctrl.keys.length);
|
||||||
|
}).catch((e) => {
|
||||||
|
// Async init failed (lib load, WebGL/context creation, etc.). Clean up
|
||||||
|
// the half-mounted controller so we don't leak an owned AudioContext /
|
||||||
|
// DOM layers, and mark it dead so _bcSyncMode can retry on a later
|
||||||
|
// mount instead of seeing a live-looking but non-functional bcCtrl.
|
||||||
|
console.error('[viz3d] Butterchurn load/init failed', e);
|
||||||
|
try { _bcReleaseCanvasGL(ctrl.canvas); } catch (_) {}
|
||||||
|
try { if (ctrl.guitar) { ctrl.guitar.stop(); ctrl.guitar = null; } } catch (_) {}
|
||||||
|
try { [ctrl.canvas, ctrl.backdrop, ctrl.scrim, ctrl.tint].forEach((el) => { if (el && el.parentNode) el.parentNode.removeChild(el); }); } catch (_) {}
|
||||||
|
if (ctrl.ownsActx && ctrl.actx && typeof ctrl.actx.close === 'function') { try { ctrl.actx.close(); } catch (_) {} }
|
||||||
|
ctrl.actx = null; ctrl.viz = null; ctrl.dead = true;
|
||||||
|
_bcControllers.delete(ctrl);
|
||||||
|
});
|
||||||
|
// Size the Butterchurn output: set the canvas DRAWING BUFFER to the
|
||||||
|
// device-pixel render size AND report that same size, so buffer ==
|
||||||
|
// on-screen viewport == full fill. Butterchurn never sizes the output
|
||||||
|
// canvas itself; the previous code set only CSS size, leaving the buffer
|
||||||
|
// at the 300x150 default -> the viz showed a stretched lower-left corner
|
||||||
|
// (worse the larger the panel). Ratio reuses the highway's DPR budget.
|
||||||
|
function _bcApplySize(cssW, cssH) {
|
||||||
|
if (!(cssW > 0 && cssH > 0)) return;
|
||||||
|
ctrl.lastW = cssW; ctrl.lastH = cssH;
|
||||||
|
const ratio = Math.min(window.devicePixelRatio || 1, 1.5);
|
||||||
|
const bw = Math.max(1, Math.round(cssW * ratio)), bh = Math.max(1, Math.round(cssH * ratio));
|
||||||
|
if (canvas.width !== bw) canvas.width = bw;
|
||||||
|
if (canvas.height !== bh) canvas.height = bh;
|
||||||
|
const wpx = cssW + 'px', hpx = cssH + 'px';
|
||||||
|
// Confine ALL layers to exactly the highway-canvas rect so the opaque
|
||||||
|
// backdrop can't bleed over the transport bar above the highway.
|
||||||
|
[ctrl.canvas, ctrl.backdrop, ctrl.scrim, ctrl.tint].forEach((el) => {
|
||||||
|
if (el) { el.style.width = wpx; el.style.height = hpx; el.style.right = 'auto'; el.style.bottom = 'auto'; }
|
||||||
|
});
|
||||||
|
if (ctrl.viz && ctrl.viz.setRendererSize) { try { ctrl.viz.setRendererSize(bw, bh); } catch (e) {} }
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
applySettings() { ctrl.applySettings(); },
|
||||||
|
dead() { return ctrl.dead; },
|
||||||
|
ready() { return !!ctrl.viz; },
|
||||||
|
boundAnalyser() { return ctrl.connectedAnalyser || null; },
|
||||||
|
audioCtx() { return ctrl.actx; },
|
||||||
|
// Re-bind audio when the shared analyser changes (e.g. a stems song
|
||||||
|
// swap replaces the analyser). Same context → cheap reconnect; the
|
||||||
|
// caller handles a context change with a full rebuild (cross-context
|
||||||
|
// connectAudio is impossible — the visualizer is bound to one ctx).
|
||||||
|
reconnectAudio(a) {
|
||||||
|
if (!a || !a.analyser || !ctrl.viz) return false;
|
||||||
|
if (a.analyser === ctrl.connectedAnalyser) return true;
|
||||||
|
if (a.ctx && a.ctx !== ctrl.actx) return false; // needs rebuild
|
||||||
|
try { ctrl.viz.connectAudio(a.analyser); ctrl.connectedAnalyser = a.analyser; return true; } catch (e) { return false; }
|
||||||
|
},
|
||||||
|
chart(v) { if (ctrl.guitar && ctrl.guitar.setChart) ctrl.guitar.setChart(v); },
|
||||||
|
tint(hex, alpha) {
|
||||||
|
if (!ctrl.tint) return;
|
||||||
|
if (hex == null) { ctrl.tint.style.background = 'transparent'; return; }
|
||||||
|
const r = (hex >> 16) & 255, g = (hex >> 8) & 255, b = hex & 255;
|
||||||
|
ctrl.tint.style.background = 'rgba(' + r + ',' + g + ',' + b + ',' + (alpha || 0).toFixed(3) + ')';
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const s = _bcLoadSettings();
|
||||||
|
if (!ctrl.viz || !s.enabled) return; // skip GPU work when the bg is off
|
||||||
|
const sz = sizeProvider && sizeProvider();
|
||||||
|
if (sz && sz.w > 0 && sz.h > 0 && (sz.w !== ctrl.lastW || sz.h !== ctrl.lastH)) {
|
||||||
|
_bcApplySize(sz.w, sz.h);
|
||||||
|
}
|
||||||
|
try { ctrl.viz.render(); } catch (e) {}
|
||||||
|
},
|
||||||
|
resize(w, h) { _bcApplySize(w, h); },
|
||||||
|
destroy() {
|
||||||
|
ctrl.dead = true;
|
||||||
|
_bcControllers.delete(ctrl);
|
||||||
|
if (_bcPrimary === ctrl) { _bcPrimary = _bcControllers.values().next().value || null; _bcUpdatePanelPreset(); }
|
||||||
|
if (ctrl.cycle) { clearInterval(ctrl.cycle); ctrl.cycle = 0; }
|
||||||
|
if (ctrl.guitar) { ctrl.guitar.stop(); ctrl.guitar = null; }
|
||||||
|
// Release the Butterchurn WebGL context deterministically (don't
|
||||||
|
// wait for GC) so repeated mounts/toggles can't exhaust the
|
||||||
|
// browser's WebGL context cap (~16). Do it before removing the
|
||||||
|
// canvas from the DOM.
|
||||||
|
_bcReleaseCanvasGL(ctrl.canvas);
|
||||||
|
[ctrl.canvas, ctrl.backdrop, ctrl.scrim, ctrl.tint].forEach((el) => { if (el && el.parentNode) el.parentNode.removeChild(el); });
|
||||||
|
ctrl.viz = null; ctrl.connectedAnalyser = null;
|
||||||
|
// Close the AudioContext only if we own it (desktop, or the
|
||||||
|
// browser fallback). The browser path normally reuses the
|
||||||
|
// highway's shared context, which the fog system owns — never
|
||||||
|
// close that. Without this, desktop leaks a new AudioContext per
|
||||||
|
// mount and hits the browser's ~6-context cap after a few toggles.
|
||||||
|
if (ctrl.ownsActx && ctrl.actx && typeof ctrl.actx.close === 'function') {
|
||||||
|
try { ctrl.actx.close(); } catch (e) {}
|
||||||
|
}
|
||||||
|
ctrl.actx = null;
|
||||||
|
if (_bcControllers.size === 0) {
|
||||||
|
if (_bcPanel && _bcPanel.parentNode) _bcPanel.parentNode.removeChild(_bcPanel);
|
||||||
|
if (_bcPane && _bcPane.parentNode) _bcPane.parentNode.removeChild(_bcPane);
|
||||||
|
_bcPanel = null; _bcPane = null; _bcListEl = null; _bcFilterEl = null; _bcPaneOpen = false;
|
||||||
|
} else if (_bcPrimary && _bcPrimary.wrap) {
|
||||||
|
// Splitscreen: a controller other than this one is still
|
||||||
|
// alive. The singleton panel was parented to THIS (now
|
||||||
|
// destroyed) wrap, so re-home it onto the surviving primary's
|
||||||
|
// wrap — otherwise the panel is orphaned on the dead wrap and
|
||||||
|
// the surviving highway is left with no visualizer controls
|
||||||
|
// (_bcEnsurePanel only runs at controller creation). It moves
|
||||||
|
// the existing panel+pane when connected, or rebuilds them on
|
||||||
|
// the survivor if this wrap was already detached.
|
||||||
|
try { _bcEnsurePanel(_bcPrimary.wrap); _bcUpdatePanelPreset(); } catch (e) {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,193 @@
|
|||||||
|
// Class-killer tests for src/bc-panel.js — h3d-carve-4.
|
||||||
|
//
|
||||||
|
// Most tests are source-scan (grep for structural invariants that protect
|
||||||
|
// against specific mutations). Two tests eval _bcIsDesktop in isolation
|
||||||
|
// (a pure function that only reads window.*) using new Function so Node
|
||||||
|
// can run it without a browser. Screen.js wiring is verified by scanning
|
||||||
|
// the import declaration and checking that moved symbols are gone from the
|
||||||
|
// IIFE.
|
||||||
|
|
||||||
|
const { test } = require('node:test');
|
||||||
|
const assert = require('node:assert/strict');
|
||||||
|
const fs = require('node:fs');
|
||||||
|
const path = require('node:path');
|
||||||
|
|
||||||
|
const BC_PANEL_JS = path.join(__dirname, '..', '..', 'plugins', 'highway_3d', 'src', 'bc-panel.js');
|
||||||
|
const SCREEN_JS = path.join(__dirname, '..', '..', 'plugins', 'highway_3d', 'screen.js');
|
||||||
|
|
||||||
|
let _src;
|
||||||
|
function src() { if (!_src) _src = fs.readFileSync(BC_PANEL_JS, 'utf8'); return _src; }
|
||||||
|
|
||||||
|
let _screenSrc;
|
||||||
|
function screenSrc() { if (!_screenSrc) _screenSrc = fs.readFileSync(SCREEN_JS, 'utf8'); return _screenSrc; }
|
||||||
|
|
||||||
|
// ── Eval helper for _bcIsDesktop (pure; only reads window.*) ──────────────────
|
||||||
|
|
||||||
|
let _isDesktopFn;
|
||||||
|
function isDesktopFn() {
|
||||||
|
if (_isDesktopFn) return _isDesktopFn;
|
||||||
|
// Strip 'export' keywords; extract just _bcIsDesktop body for eval.
|
||||||
|
const stripped = src().replace(/^export\s+/gm, '');
|
||||||
|
// Wrap in a factory that returns _bcIsDesktop after evaluating the whole
|
||||||
|
// module (so inner references resolve). window is the only global needed.
|
||||||
|
const factory = new Function('window', stripped + '\nreturn _bcIsDesktop;');
|
||||||
|
_isDesktopFn = factory;
|
||||||
|
return _isDesktopFn;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 1. _bcLoading reset on rejection ─────────────────────────────────────────
|
||||||
|
|
||||||
|
test('_bcLoading reset to null when lib-load promise rejects', () => {
|
||||||
|
// Mutation: remove `.catch(() => { _bcLoading = null; })` from _bcLoadLib.
|
||||||
|
// Without it, a rejected load-promise is cached forever; every subsequent
|
||||||
|
// mount returns the rejected promise immediately → Butterchurn permanently
|
||||||
|
// disabled for the session with no retry.
|
||||||
|
assert.match(src(), /_bcLoading\s*=\s*null/,
|
||||||
|
'_bcLoadLib must reset _bcLoading to null in a .catch handler so failed loads retry');
|
||||||
|
// Verify the reset appears in a .catch context (not just an early-return path).
|
||||||
|
assert.match(src(), /\.catch\s*\([\s\S]{1,60}_bcLoading\s*=\s*null/,
|
||||||
|
'_bcLoading = null must appear inside a .catch callback');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 2. window.h3dBcApplySettings at module scope ──────────────────────────────
|
||||||
|
|
||||||
|
test('window.h3dBcApplySettings is assigned at module scope (not inside a function)', () => {
|
||||||
|
// Mutation: move assignment inside _bcCreateController → it isn't available
|
||||||
|
// until first mount; settings.html's `?.` call silently no-ops → settings
|
||||||
|
// changes (opacity, enabled, cycle mode) never apply until the user visits
|
||||||
|
// the player for the first time.
|
||||||
|
//
|
||||||
|
// Structural check: the assignment must appear BEFORE the first `function`
|
||||||
|
// or `export function` declaration in bc-panel.js (i.e. at module scope).
|
||||||
|
const s = src();
|
||||||
|
const assignIdx = s.indexOf('window.h3dBcApplySettings');
|
||||||
|
const firstFnIdx = s.search(/^(?:export\s+)?function\s+_bc/m);
|
||||||
|
assert.ok(assignIdx >= 0, 'window.h3dBcApplySettings must be assigned in bc-panel.js');
|
||||||
|
assert.ok(firstFnIdx < 0 || assignIdx < firstFnIdx,
|
||||||
|
'window.h3dBcApplySettings must appear before the first _bc* function declaration (module scope)');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 3. _bcIsDesktop guards all three required conditions ──────────────────────
|
||||||
|
|
||||||
|
test('_bcIsDesktop checks isDesktop, .audio, and typeof getRawAudioFrame', () => {
|
||||||
|
// Mutation: remove any one guard → non-desktop host (Docker/web app) enters
|
||||||
|
// the desktop guitar-feed path → audioProvider is wrong; pcmLoop errors
|
||||||
|
// every 16 ms trying to call an undefined getRawAudioFrame.
|
||||||
|
const s = src();
|
||||||
|
assert.match(s, /d\.isDesktop/,
|
||||||
|
'_bcIsDesktop must guard on d.isDesktop');
|
||||||
|
assert.match(s, /d\.audio/,
|
||||||
|
'_bcIsDesktop must guard on d.audio');
|
||||||
|
assert.match(s, /typeof\s+d\.audio\.getRawAudioFrame\s*===\s*'function'/,
|
||||||
|
"_bcIsDesktop must guard typeof d.audio.getRawAudioFrame === 'function'");
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 4. _bcIsDesktop eval: returns false when window has no desktop bridge ─────
|
||||||
|
|
||||||
|
test('_bcIsDesktop returns false when window.feedBackDesktop is absent', () => {
|
||||||
|
// Mutation: remove the `d && ...` guard → accessing .isDesktop on undefined
|
||||||
|
// throws in the browser; the whole highway init crashes.
|
||||||
|
const fn = isDesktopFn()({ feedBackDesktop: undefined, slopsmithDesktop: undefined });
|
||||||
|
assert.strictEqual(fn(), false,
|
||||||
|
'_bcIsDesktop must return false when neither feedBackDesktop nor slopsmithDesktop is set');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 5. _bcIsDesktop eval: returns false when isDesktop is missing from bridge ─
|
||||||
|
|
||||||
|
test('_bcIsDesktop returns false when bridge has audio but no isDesktop flag', () => {
|
||||||
|
// Mutation: rely on truthy bridge presence alone (drop isDesktop check) → any host
|
||||||
|
// that exposes feedBackDesktop for non-guitar purposes (e.g. file manager) would
|
||||||
|
// be misidentified as the guitar-input desktop host.
|
||||||
|
const fn = isDesktopFn()({
|
||||||
|
feedBackDesktop: { audio: { getRawAudioFrame: () => new Float32Array(512) } },
|
||||||
|
slopsmithDesktop: undefined,
|
||||||
|
});
|
||||||
|
assert.strictEqual(fn(), false,
|
||||||
|
'_bcIsDesktop must return false when feedBackDesktop lacks the isDesktop flag');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 6. destroy() removes controller from _bcControllers ──────────────────────
|
||||||
|
|
||||||
|
test('destroy() calls _bcControllers.delete(ctrl)', () => {
|
||||||
|
// Mutation: remove delete call → dead controller stays in _bcControllers;
|
||||||
|
// _bcApplyAll iterates the Set and calls applySettings() on the dead controller;
|
||||||
|
// null canvas/scrim refs throw; multiple repeated mounts eventually saturate Set.
|
||||||
|
assert.match(src(), /_bcControllers\.delete\s*\(\s*ctrl\s*\)/,
|
||||||
|
'destroy() must call _bcControllers.delete(ctrl) to remove the dead controller');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 7. _bcReleaseCanvasGL called in destroy() ─────────────────────────────────
|
||||||
|
|
||||||
|
test('_bcReleaseCanvasGL is called inside destroy()', () => {
|
||||||
|
// Mutation: remove the release call from destroy() → WebGL context not freed on
|
||||||
|
// dismount; browsers allow ~16 concurrent contexts; repeated mount/toggles
|
||||||
|
// exhaust the cap; subsequent mounts get null from getContext('webgl') →
|
||||||
|
// Butterchurn init silently fails.
|
||||||
|
//
|
||||||
|
// The call appears in two places: destroy() method and the .catch error handler.
|
||||||
|
// Both are required. This test checks that destroy() includes it.
|
||||||
|
const s = src();
|
||||||
|
// `destroy() {` (with space+brace) anchors the actual method definition,
|
||||||
|
// not comment references like "so destroy() closes only ...".
|
||||||
|
const destroyIdx = s.indexOf('destroy() {');
|
||||||
|
assert.ok(destroyIdx >= 0, 'destroy() method must exist in the returned controller object');
|
||||||
|
// Find the release call after the destroy label (within 1000 chars).
|
||||||
|
const destroyBlock = s.slice(destroyIdx, destroyIdx + 1000);
|
||||||
|
assert.match(destroyBlock, /_bcReleaseCanvasGL/,
|
||||||
|
'_bcReleaseCanvasGL must be called inside destroy() to free the WebGL context');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 8. _bcReleaseCanvasGL called in async-init failure handler ────────────────
|
||||||
|
|
||||||
|
test('_bcReleaseCanvasGL is called in the _bcLoadLib().catch handler', () => {
|
||||||
|
// Mutation: remove from .catch → half-initialised failure (lib load, WebGL
|
||||||
|
// context creation) leaves a bound WebGL context on the abandoned canvas;
|
||||||
|
// the context is never freed; same cap exhaustion as above.
|
||||||
|
const s = src();
|
||||||
|
// The error handler's .catch takes a named error param (e) and logs via
|
||||||
|
// console.error — that's how we distinguish it from the narrow no-op catches.
|
||||||
|
// Look for `_bcReleaseCanvasGL` inside a `.catch((e) => {` block.
|
||||||
|
assert.match(s, /\.catch\s*\(\s*\(e\)[\s\S]{1,600}_bcReleaseCanvasGL/,
|
||||||
|
'_bcReleaseCanvasGL must appear in the error-handler .catch((e) => {}) block');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 9. _bcLoadSettings merges saved state with BC_DEFAULTS ───────────────────
|
||||||
|
|
||||||
|
test('_bcLoadSettings uses Object.assign with BC_DEFAULTS as base', () => {
|
||||||
|
// Mutation: return raw parsed JSON without merging → missing keys from
|
||||||
|
// localStorage (fresh install, partial save) become undefined;
|
||||||
|
// s.enabled → undefined → bg disabled on first launch.
|
||||||
|
assert.match(src(), /Object\.assign\s*\(\s*\{\s*\}\s*,\s*BC_DEFAULTS/,
|
||||||
|
'_bcLoadSettings must merge with BC_DEFAULTS so missing keys get defaults');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 10. screen.js imports both exports from src/bc-panel.js ──────────────────
|
||||||
|
|
||||||
|
test('screen.js imports _bcCreateController and _bcIsDesktop from src/bc-panel.js', () => {
|
||||||
|
// Mutation: remove import → H-section call to _bcCreateController throws
|
||||||
|
// ReferenceError at the first butterchurn mount; the 3D highway becomes
|
||||||
|
// permanently broken when butterchurn bg is selected.
|
||||||
|
const s = screenSrc();
|
||||||
|
assert.match(s,
|
||||||
|
/import\s+\{[^}]*_bcCreateController[^}]*\}\s+from\s+['"]\.\/src\/bc-panel\.js['"]/,
|
||||||
|
'screen.js must import _bcCreateController from ./src/bc-panel.js');
|
||||||
|
assert.match(s,
|
||||||
|
/import\s+\{[^}]*_bcIsDesktop[^}]*\}\s+from\s+['"]\.\/src\/bc-panel\.js['"]/,
|
||||||
|
'screen.js must import _bcIsDesktop from ./src/bc-panel.js');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── 11. screen.js IIFE no longer defines moved B-section symbols ──────────────
|
||||||
|
|
||||||
|
test('screen.js IIFE does not redeclare _bcCreateController or _bcLoadLib', () => {
|
||||||
|
// Mutation: re-add function _bcCreateController() to the IIFE → double definition;
|
||||||
|
// the IIFE-scope function shadows the imported one inside the factory; bc-panel.js
|
||||||
|
// private state is split: the IIFE copy has its own _bcControllers, _bcSettings, etc.
|
||||||
|
// The panel never shows, controller objects leak, applySettings no-ops.
|
||||||
|
const s = screenSrc();
|
||||||
|
// Strip import lines so we only scan the IIFE body.
|
||||||
|
const iife = s.replace(/^import\s+.*\n/gm, '');
|
||||||
|
assert.doesNotMatch(iife, /function\s+_bcCreateController\s*\(/,
|
||||||
|
'IIFE must not redeclare _bcCreateController');
|
||||||
|
assert.doesNotMatch(iife, /function\s+_bcLoadLib\s*\(/,
|
||||||
|
'IIFE must not redeclare _bcLoadLib');
|
||||||
|
});
|
||||||
@@ -92,6 +92,14 @@ function loadHighway3dStatics() {
|
|||||||
_openStringPitchLabelsForTuning: () => [],
|
_openStringPitchLabelsForTuning: () => [],
|
||||||
_ssActive: () => false,
|
_ssActive: () => false,
|
||||||
_ssIsCanvasFocused: () => true,
|
_ssIsCanvasFocused: () => true,
|
||||||
|
// h3d-carve-4: Butterchurn panel moved to src/bc-panel.js.
|
||||||
|
_bcIsDesktop: () => false,
|
||||||
|
_bcCreateController: (wrap, sizeProvider, audioProvider) => ({
|
||||||
|
applySettings() {}, dead() { return false; }, ready() { return false; },
|
||||||
|
boundAnalyser() { return null; }, audioCtx() { return null; },
|
||||||
|
reconnectAudio() { return false; }, chart() {}, tint() {}, render() {},
|
||||||
|
resize() {}, destroy() {},
|
||||||
|
}),
|
||||||
};
|
};
|
||||||
vm.createContext(sandbox);
|
vm.createContext(sandbox);
|
||||||
vm.runInContext(instrumented, sandbox, { filename: SCREEN_JS });
|
vm.runInContext(instrumented, sandbox, { filename: SCREEN_JS });
|
||||||
|
|||||||
Reference in New Issue
Block a user