119 lines
3.9 KiB
JavaScript
119 lines
3.9 KiB
JavaScript
function promptManualSearch() {
|
|
const query = prompt("Enter track name and artist manually (e.g. 'Alphaville Big in Japan'):");
|
|
if (query && query.trim()) {
|
|
simulateRecognition(query.trim());
|
|
}
|
|
}
|
|
|
|
function renderSuggestions(currentKey) {
|
|
const sugContainer = document.getElementById('suggestions');
|
|
sugContainer.innerHTML = '';
|
|
|
|
if (!currentKey || !window.mixingRules[currentKey]) {
|
|
sugContainer.innerHTML = '<div style="color:var(--text-dim);font-size:12px;">No suggestions available.</div>';
|
|
return;
|
|
}
|
|
|
|
// Create some dummy suggestions based on the rules for the mockup
|
|
const compatKeys = window.mixingRules[currentKey].slice(1);
|
|
const dummySuggestions = compatKeys.map((c, i) => {
|
|
return {
|
|
c: c,
|
|
m: window.camelotToMusicKey[c],
|
|
color: window.colorMatrix[c],
|
|
title: `Dummy Track ${i+1}`,
|
|
artist: `Artist ${c}`,
|
|
bpm: 120 + Math.floor(Math.random() * 10 - 5),
|
|
compat: i + 1 // 1=Quinte-1, 2=Quinte+1, etc.
|
|
};
|
|
});
|
|
|
|
dummySuggestions.forEach(s => {
|
|
const div = document.createElement('div');
|
|
div.className = 'sug';
|
|
const idSafe = `sug-cover-${s.c.replace(/\s/g,'_')}-${s.title.replace(/[^A-Za-z0-9]/g,'')}`;
|
|
div.innerHTML = `
|
|
<div class="sug-cover" id="${idSafe}">
|
|
<div class="sug-cover-placeholder">♪</div>
|
|
</div>
|
|
<div class="sug-meta">
|
|
<div class="sug-key" style="background:${s.color}">${s.c}</div>
|
|
<div class="sug-bpm">${s.bpm} BPM</div>
|
|
</div>
|
|
<div>
|
|
<div class="sug-title">${s.title}</div>
|
|
<div class="sug-artist">${s.artist} · ${s.m}</div>
|
|
</div>
|
|
<div class="sug-compat">${window.compatLabels[s.compat]}</div>
|
|
`;
|
|
sugContainer.appendChild(div);
|
|
window.fetchCover(`${s.artist} ${s.title}`, div.querySelector('.sug-cover'));
|
|
});
|
|
}
|
|
|
|
// Temporary simulation function to show the UI working
|
|
function simulateRecognition(query) {
|
|
// Try to extract artist and title simply
|
|
const parts = query.split(' ');
|
|
const title = parts.slice(0, Math.max(1, parts.length - 1)).join(' ');
|
|
const artist = parts[parts.length - 1] || 'Unknown';
|
|
|
|
// Pick a random key for the demo
|
|
const keysArr = Object.keys(window.colorMatrix);
|
|
const randomKey = keysArr[Math.floor(Math.random() * keysArr.length)];
|
|
const bpm = 110 + Math.floor(Math.random() * 30);
|
|
|
|
updateHero({
|
|
title,
|
|
artist,
|
|
key: randomKey,
|
|
bpm: bpm,
|
|
match: '99%',
|
|
tags: [randomKey, 'Electronic', 'Pop']
|
|
});
|
|
}
|
|
|
|
function updateHero(track) {
|
|
window.currentTrack = track;
|
|
|
|
document.getElementById('track-title').textContent = track.title;
|
|
document.getElementById('track-artist').textContent = track.artist;
|
|
|
|
document.getElementById('stat-key').textContent = track.key;
|
|
document.getElementById('stat-key').style.color = window.colorMatrix[track.key];
|
|
document.getElementById('stat-key-sub').textContent = window.camelotToMusicKey[track.key];
|
|
|
|
document.getElementById('stat-bpm').textContent = track.bpm;
|
|
document.getElementById('stat-match').textContent = track.match;
|
|
|
|
// Update tags
|
|
const tagsRow = document.getElementById('tags-row');
|
|
tagsRow.innerHTML = '';
|
|
track.tags.forEach(tag => {
|
|
const span = document.createElement('span');
|
|
span.className = 'tag ' + (tag === track.key ? 'tag-key' : 'tag-genre');
|
|
if (tag === track.key) {
|
|
span.style.background = window.colorMatrix[track.key];
|
|
}
|
|
span.textContent = tag;
|
|
tagsRow.appendChild(span);
|
|
});
|
|
|
|
// Update Hero Border
|
|
document.documentElement.style.setProperty('--key-current', window.colorMatrix[track.key]);
|
|
|
|
// Update Wheel
|
|
window.updateWheel(track.key);
|
|
|
|
// Fetch Cover
|
|
window.fetchCover(`${track.artist} ${track.title}`, document.getElementById('cover'));
|
|
|
|
// Update Suggestions
|
|
renderSuggestions(track.key);
|
|
}
|
|
|
|
// Set initial mock state for preview
|
|
setTimeout(() => {
|
|
simulateRecognition("Alphaville Made in Japan");
|
|
}, 500);
|