mirror of
https://github.com/got-feedBack/feedBack.git
synced 2026-08-10 18:59:56 +00:00
feat(highway_3d): colour theming — string presets + Background/Highway scene themes (#596)
* feat(highway_3d): add one-click string-color presets
Adds 12 named string-color presets (Warm→Cool, Vivid, Colorblind-friendly,
Neon, Accessible, Warm Ember, Tape Deck, CRT Green/Amber, Pitch Ramp, Sunrise)
selectable from the 3D Highway settings panel.
Extends the existing core HWC (highway-color) subsystem in static/app.js with
HWC_PRESETS + applyHighwayStringPreset(), exposed on the existing facade as
window.feedBack.highwayColors.{presets, applyPreset}. The plugin settings page
renders the preset buttons from that core list and refreshes the per-string
pickers on apply. Purely additive — stock behavior is unchanged.
Scope: core static/app.js (the shared HWC facade both highways consume) plus the
highway_3d plugin's settings.html / screen.js / CLAUDE.md.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011Q9BpGYqUaga9ZJyS3dDPq
* fix(highway_3d): address review of colour-theming PR
- Rebuild assets/plugin.css so the new `flex-wrap` (preset row) and
`text-[10px]` (theme-dropdown helper) Tailwind classes are actually
compiled, and bump plugin.json 3.26.0 -> 3.27.0 so the <link>'s ?v=
cache-buster fetches the fresh CSS (per the plugin's build rule).
- Replace the mirror-at-every-read hwTheme migration with a one-time
backfill (persist hwTheme := bgTheme on first load, no emit). The two
scene-color axes are now genuinely independent: changing the Background
dropdown no longer silently retints the Highway surface/lane, and the
rendered highway can't disagree with the Highway dropdown value.
- Collapse the duplicated theme id-set in settings.html (two identical
<option> lists + VALID_BG_THEMES) into a single SCENE_THEMES source the
dropdowns and validator are generated from; sync points 4 -> 2.
- Update CLAUDE.md to document the backfill + reduced sync contract.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: byrongamatos <xasiklas@gmail.com>
This commit is contained in:
ChrisBeWithYou
co-authored by
Claude Opus 4.8
byrongamatos
Claude Opus 4.8
byrongamatos
parent
b70fde9b02
commit
97dae88860
@@ -14,6 +14,15 @@
|
||||
<button type="button" onclick="window.hwcSaveTheme?.()" class="bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-300">Save as…</button>
|
||||
<button type="button" onclick="window.hwcDeleteTheme?.()" class="bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-400">Delete</button>
|
||||
</div>
|
||||
<!-- One-click presets: apply a whole named palette to every string at once.
|
||||
Buttons are generated from window.feedBack.highwayColors.presets so the
|
||||
list stays in sync with core (app.js HWC_PRESETS). Each calls
|
||||
applyPreset(id), which persists + applies to both highways and refreshes
|
||||
the pickers below. Older core without the presets API leaves this empty. -->
|
||||
<div class="mb-3">
|
||||
<span class="text-xs text-gray-500 mb-1 block">Quick presets</span>
|
||||
<div id="hwc-presets" class="flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
<div id="hwc-pickers" class="mb-3" style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;"></div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<button type="button" onclick="window.hwcReset?.()" class="bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-300">Reset to defaults</button>
|
||||
@@ -36,6 +45,33 @@
|
||||
if (typeof window.hwcInitSettingsUI === 'function') {
|
||||
try { window.hwcInitSettingsUI(); } catch (e) { console.warn('[3D-Hwy] hwcInitSettingsUI failed', e); }
|
||||
}
|
||||
// Render the one-click preset buttons from core's preset list.
|
||||
try {
|
||||
const api = window.feedBack && window.feedBack.highwayColors;
|
||||
const host = document.getElementById('hwc-presets');
|
||||
if (api && Array.isArray(api.presets) && host) {
|
||||
host.innerHTML = '';
|
||||
// Slot order low → high for the preview swatch (bass-side first).
|
||||
const order = ['lowE', 'A', 'D', 'G', 'B', 'highE'];
|
||||
for (const p of api.presets) {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'flex items-center gap-2 bg-dark-700 border border-gray-800 rounded-lg px-2 py-1 text-xs text-gray-300';
|
||||
const sw = document.createElement('span');
|
||||
const stops = order.map((k) => p.colors[k]).filter(Boolean).join(',');
|
||||
sw.style.cssText = 'width:2.5rem;height:0.85rem;border-radius:3px;border:1px solid #0006;'
|
||||
+ 'background:linear-gradient(90deg,' + stops + ');';
|
||||
btn.appendChild(sw);
|
||||
const txt = document.createElement('span');
|
||||
txt.textContent = p.label;
|
||||
btn.appendChild(txt);
|
||||
btn.addEventListener('click', function () {
|
||||
try { api.applyPreset(p.id); } catch (e) { console.warn('[3D-Hwy] applyPreset failed', e); }
|
||||
});
|
||||
host.appendChild(btn);
|
||||
}
|
||||
}
|
||||
} catch (e) { console.warn('[3D-Hwy] preset render failed', e); }
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
@@ -93,6 +129,36 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Scene colors — TWO independent axes sharing one palette family:
|
||||
Background (clear + fog) and Highway (board surface + lit lane). Same
|
||||
id-set in both, so any background can mix with any highway; picking the
|
||||
same in both gives the original "matched" look. "Default" is the
|
||||
original look on both. -->
|
||||
<div class="mt-3">
|
||||
<label for="h3d-bg-theme" class="text-xs font-medium text-gray-400 mb-1 block">Background</label>
|
||||
<!-- Options are populated from SCENE_THEMES (the single id+label source)
|
||||
in the hydration script below, so the two dropdowns can't drift. -->
|
||||
<select id="h3d-bg-theme"
|
||||
onchange="window.h3dBgSetBgTheme && window.h3dBgSetBgTheme(this.value)"
|
||||
class="w-full bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-300 outline-none">
|
||||
</select>
|
||||
<p class="text-[10px] text-gray-500 mt-1">
|
||||
Tints the background + distance fog. Applies to the 3D highway immediately.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label for="h3d-hw-theme" class="text-xs font-medium text-gray-400 mb-1 block">Highway (surface + lane)</label>
|
||||
<!-- Options populated from SCENE_THEMES (see below), same source as the
|
||||
Background dropdown so the two stay in lockstep. -->
|
||||
<select id="h3d-hw-theme"
|
||||
onchange="window.h3dBgSetHwTheme && window.h3dBgSetHwTheme(this.value)"
|
||||
class="w-full bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-300 outline-none">
|
||||
</select>
|
||||
<p class="text-[10px] text-gray-500 mt-1">
|
||||
Tints the fretboard surface + the lit lane. Applies to the 3D highway immediately.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Intensity -->
|
||||
<div class="mt-3">
|
||||
<label for="h3d-bg-intensity" class="text-xs font-medium text-gray-400 mb-1 block">
|
||||
@@ -712,8 +778,27 @@
|
||||
no-selection / NaN state. -->
|
||||
<script>
|
||||
(function () {
|
||||
const DEFAULTS = { style: 'particles', intensity: 0.5, reactive: true, palette: 'default', showFretOnNote: true, fretNumberGhostScope: 'chords', cameraSmoothing: 0.5, zoomSmoothing: 0.5, tiltSmoothing: 0.5, cameraLockLow: false, cameraLockZoom: 0.5, cameraMode: 'lookahead', nutHeadstockVisible: true, tuningLabelsVisible: true, nutColor: '#f5f3f0', headstockColor: '#d4b48a', textSize: 0.5, vibrancy: 0.85, glow: 0.25, customImageDataUrl: '', customImageName: '', customVideoName: '', chordDiagramVisible: true, chordDiagramSize: 0.5, chordDiagramPosition: 'tl', fretColumnMarkerCadence: 1, projectionVisible: true, inlayLabelsVisible: false, sectionLabelsOnHighway: false, sectionHudVisible: false, sectionHudPosition: 'tr', sectionHudSize: 0.5, toneHudVisible: false, toneHudPosition: 'tl', toneHudSize: 0.5, fpsVisible: false, fretDividersVisible: true, slideArrowApproachVisible: true, slideArrowNeckVisible: true, slideArrowChainPreviewVisible: true };
|
||||
const DEFAULTS = { style: 'particles', intensity: 0.5, reactive: true, palette: 'default', bgTheme: 'default', hwTheme: 'default', showFretOnNote: true, fretNumberGhostScope: 'chords', cameraSmoothing: 0.5, zoomSmoothing: 0.5, tiltSmoothing: 0.5, cameraLockLow: false, cameraLockZoom: 0.5, cameraMode: 'lookahead', nutHeadstockVisible: true, tuningLabelsVisible: true, nutColor: '#f5f3f0', headstockColor: '#d4b48a', textSize: 0.5, vibrancy: 0.85, glow: 0.25, customImageDataUrl: '', customImageName: '', customVideoName: '', chordDiagramVisible: true, chordDiagramSize: 0.5, chordDiagramPosition: 'tl', fretColumnMarkerCadence: 1, projectionVisible: true, inlayLabelsVisible: false, sectionLabelsOnHighway: false, sectionHudVisible: false, sectionHudPosition: 'tr', sectionHudSize: 0.5, toneHudVisible: false, toneHudPosition: 'tl', toneHudSize: 0.5, fpsVisible: false, fretDividersVisible: true, slideArrowApproachVisible: true, slideArrowNeckVisible: true, slideArrowChainPreviewVisible: true };
|
||||
const VALID_STYLES = new Set(['off', 'particles', 'silhouettes', 'lights', 'geometric', 'image', 'video']);
|
||||
// Scene color themes — the single id+label source for BOTH the
|
||||
// Background and Highway dropdowns AND the validator below. The
|
||||
// <option>s are generated from this list (see hydration), so the two
|
||||
// dropdowns can't drift from each other or from VALID_BG_THEMES.
|
||||
// Mirror these ids with screen.js BG_THEMES (the color table).
|
||||
const SCENE_THEMES = [
|
||||
{ id: 'default', label: 'Default (blue-black)' },
|
||||
{ id: 'midnight', label: 'Midnight (deep blue)' },
|
||||
{ id: 'charcoal', label: 'Charcoal (neutral gray)' },
|
||||
{ id: 'deeppurple', label: 'Deep purple' },
|
||||
{ id: 'forest', label: 'Forest (dark green)' },
|
||||
{ id: 'warmslate', label: 'Warm Slate (espresso)' },
|
||||
{ id: 'deepfocus', label: 'Deep Focus (near-black)' },
|
||||
{ id: 'deepsea', label: 'Deep Sea (dark teal)' },
|
||||
{ id: 'cathode', label: 'Cathode (amber CRT)' },
|
||||
{ id: 'cathodegreen', label: 'Cathode Green (green CRT)' },
|
||||
{ id: 'hearth', label: 'Hearth (warm red)' },
|
||||
];
|
||||
const VALID_BG_THEMES = new Set(SCENE_THEMES.map((t) => t.id));
|
||||
const VALID_CAMERA_MODES = new Set(['steady', 'lookahead']);
|
||||
// Chord diagram is top-only (bl/br removed).
|
||||
const VALID_CHORD_DIAG_POSITIONS = new Set(['tl', 'tr']);
|
||||
@@ -771,6 +856,9 @@
|
||||
const VIDEO_UPLOAD_URL = '/api/plugins/highway_3d/files';
|
||||
|
||||
function coerceStyle(v) { return VALID_STYLES.has(v) ? v : DEFAULTS.style; }
|
||||
function coerceBgTheme(v) { return VALID_BG_THEMES.has(v) ? v : DEFAULTS.bgTheme; }
|
||||
// Highway axis shares the same valid id-set as the background axis.
|
||||
function coerceHwTheme(v) { return VALID_BG_THEMES.has(v) ? v : DEFAULTS.hwTheme; }
|
||||
function coerceCameraMode(v) {
|
||||
if (v === 'classic') v = 'steady';
|
||||
return VALID_CAMERA_MODES.has(v) ? v : DEFAULTS.cameraMode;
|
||||
@@ -812,7 +900,7 @@
|
||||
return fallback;
|
||||
}
|
||||
|
||||
let storedStyle = null, storedI = null, storedR = null, storedFretOnNote = null, storedFretNumberGhostScope = null;
|
||||
let storedStyle = null, storedBgTheme = null, storedHwTheme = null, storedI = null, storedR = null, storedFretOnNote = null, storedFretNumberGhostScope = null;
|
||||
let storedCameraSmoothing = null;
|
||||
let storedCameraMode = null;
|
||||
let storedCustomImageDataUrl = null, storedCustomImageName = null;
|
||||
@@ -848,6 +936,8 @@
|
||||
let storedSlideArrowChainPreviewVisible = null;
|
||||
try {
|
||||
storedStyle = localStorage.getItem('h3d_bg_style');
|
||||
storedBgTheme = localStorage.getItem('h3d_bg_bgTheme');
|
||||
storedHwTheme = localStorage.getItem('h3d_bg_hwTheme');
|
||||
storedI = localStorage.getItem('h3d_bg_intensity');
|
||||
storedR = localStorage.getItem('h3d_bg_reactive');
|
||||
storedFretOnNote = localStorage.getItem('h3d_bg_showFretOnNote');
|
||||
@@ -889,6 +979,15 @@
|
||||
} catch (_) { /* storage blocked */ }
|
||||
|
||||
const style = coerceStyle(storedStyle);
|
||||
const bgTheme = coerceBgTheme(storedBgTheme);
|
||||
// Highway axis. BACKWARD-COMPAT: when hwTheme was never written
|
||||
// (pre-split installs, or the panel opened before the highway has
|
||||
// mounted and run its one-time backfill), show the background pick —
|
||||
// exactly the value screen.js will persist on first load — so the
|
||||
// dropdown matches what's rendered. Once hwTheme is stored (which the
|
||||
// renderer's backfill or any explicit pick does) it reads
|
||||
// independently and the two axes no longer track each other.
|
||||
const hwTheme = (storedHwTheme == null) ? bgTheme : coerceHwTheme(storedHwTheme);
|
||||
const intensity = coerceIntensity(storedI);
|
||||
const reactive = coerceBool(storedR, DEFAULTS.reactive);
|
||||
const showFretOnNote = coerceBool(storedFretOnNote, DEFAULTS.showFretOnNote);
|
||||
@@ -959,6 +1058,20 @@
|
||||
const customVideoName = (typeof storedCustomVideoName === 'string') ? storedCustomVideoName : DEFAULTS.customVideoName;
|
||||
|
||||
const sel = document.getElementById('h3d-bg-style');
|
||||
const bgThemeSel = document.getElementById('h3d-bg-theme');
|
||||
const hwThemeSel = document.getElementById('h3d-hw-theme');
|
||||
// Populate both scene-theme dropdowns from the single SCENE_THEMES
|
||||
// source so they can't drift. (Values are selected further below.)
|
||||
for (const selEl of [bgThemeSel, hwThemeSel]) {
|
||||
if (!selEl) continue;
|
||||
selEl.innerHTML = '';
|
||||
for (const t of SCENE_THEMES) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = t.id;
|
||||
opt.textContent = t.label;
|
||||
selEl.appendChild(opt);
|
||||
}
|
||||
}
|
||||
const sli = document.getElementById('h3d-bg-intensity');
|
||||
const lbl = document.getElementById('h3d-bg-intensity-label');
|
||||
const rea = document.getElementById('h3d-bg-reactive');
|
||||
@@ -1200,6 +1313,8 @@
|
||||
sel.value = style;
|
||||
}
|
||||
}
|
||||
if (bgThemeSel) bgThemeSel.value = bgTheme;
|
||||
if (hwThemeSel) hwThemeSel.value = hwTheme;
|
||||
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener('change', function () {
|
||||
|
||||
Reference in New Issue
Block a user