Play a song to start tracking your accuracy and best scores.
' + 'player id ' + esc(_profile.player_hash.slice(0, 12)) + '
' : '') + '' + (editing ? 'Edit your player profile' : 'Set up your player profile') + '
' + stepDots + 'Choose the folder where your songs are stored. We’ll scan it to build your library. You can change this later in Settings.
' + 'Each path levels up by completing challenges — together they make up your Mastery Rank. You can add more later.
' + 'Prove your setup: play the fee[dB]ack Diagnostic with note detection and finish at 100% accuracy to reach Mastery Rank 1.
' + 'Not ready? Skip it and you’ll start at Rank 1 anyway — you can still play it later from the Progress screen.
Couldn’t load instrument paths — you can pick them later on the Progress screen.
'; refreshSubmit(); host.querySelectorAll('[data-ob-path]').forEach((b) => { b.addEventListener('click', () => { const id = b.getAttribute('data-ob-path'); const idx = selectedPaths.indexOf(id); if (idx >= 0) selectedPaths.splice(idx, 1); else selectedPaths.push(id); b.classList.toggle('ring-2', idx < 0); b.classList.toggle('ring-fb-primary', idx < 0); refreshSubmit(); }); }); } nameEl.addEventListener('input', refreshSubmit); // Reflect the pre-filled name + existing avatar immediately so an edit // with no changes can still Save (button doesn't stay disabled until // the user touches the form). refreshSubmit(); function selectTile(el, choice) { selected = choice; grid.querySelectorAll('[data-av]').forEach((t) => t.classList.remove('ring-2', 'ring-fb-primary')); if (el) el.classList.add('ring-2', 'ring-fb-primary'); refreshSubmit(); } // Load bundled defaults. The default avatar's stored value is its // bundled FILENAME (e.g. "pick.svg"), which the server validates // against the bundled set. fetch('/api/profile/avatars').then((r) => r.ok ? r.json() : []).then((list) => { grid.innerHTML = (list || []).map((a) => '').join(''); grid.querySelectorAll('[data-av]').forEach((b) => { b.addEventListener('click', () => selectTile(b, { type: 'default', value: b.dataset.name })); }); // Pre-select the current avatar when editing. if (editing && profile && profile.avatar_url) { const match = Array.from(grid.querySelectorAll('[data-av]')).find((b) => b.dataset.url === profile.avatar_url); if (match) selectTile(match, { type: 'default', value: match.dataset.name }); } }).catch(() => { /* offline / server restart — leave the avatar grid empty rather than throw */ }); // Upload handler — base64 to /api/profile/avatar (mirrors art upload). overlay.querySelector('#v3-ob-upload-btn').addEventListener('click', () => fileEl.click()); fileEl.addEventListener('change', () => { const f = fileEl.files && fileEl.files[0]; if (!f) return; if (f.size > 6 * 1024 * 1024) { showErr('Image too large (max 6 MB).'); return; } const reader = new FileReader(); reader.onload = async () => { try { const res = await fetch('/api/profile/avatar', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image: reader.result }), }); const body = await res.json(); if (!res.ok) { showErr(body.error || 'Upload failed.'); return; } preview.innerHTML = '