PROFERIS - Mi³osz Stocki
67 lines
2.9 KiB
JavaScript
67 lines
2.9 KiB
JavaScript
import SequenceRunner from './sequence-runner.js';
|
|
import UI from './ui.js';
|
|
|
|
export function buildQuickSequencesHTML() {
|
|
return `
|
|
<div class="card" id="quick-sequences-card" style="margin-bottom: 16px;">
|
|
<div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<span class="card-title">Quick Sequences</span>
|
|
<button id="btn-stop-sequence" class="btn btn-sm btn-danger" style="display:none;">STOP</button>
|
|
</div>
|
|
<div id="quick-sequences-list" style="display:flex; flex-direction:column; gap:8px;">
|
|
<div style="padding: 12px; text-align: center; color: var(--text-muted); font-size: 0.9rem;">
|
|
Loading sequences...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
export async function initQuickSequences(bgName, getSpots, getSteps, onStepComplete) {
|
|
const listEl = document.getElementById('quick-sequences-list');
|
|
const stopBtn = document.getElementById('btn-stop-sequence');
|
|
if (!listEl) return;
|
|
|
|
try {
|
|
const res = await fetch(`web/assets/backgrounds/${bgName}/sequences.json?v=${Date.now()}`);
|
|
if (!res.ok) throw new Error('Not found');
|
|
const sequences = await res.json();
|
|
const favorites = sequences.filter(s => s.favorite);
|
|
|
|
if (favorites.length === 0) {
|
|
listEl.innerHTML = `<div style="padding: 12px; text-align: center; color: var(--text-muted); font-size: 0.9rem;">No favorite sequences found.</div>`;
|
|
return;
|
|
}
|
|
|
|
listEl.innerHTML = favorites.map(seq => `
|
|
<div class="sequence-item" style="display:flex; justify-content:space-between; align-items:center; background:var(--surface-2); padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border);">
|
|
<span style="font-weight:bold; font-size:1rem;">${seq.name}</span>
|
|
<button class="btn btn-sm btn-success btn-play-seq" data-seq-id="${seq.id}" title="Play Sequence" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display:flex; align-items:center; justify-content:center;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
|
</button>
|
|
</div>
|
|
`).join('');
|
|
|
|
// Attach listeners
|
|
listEl.querySelectorAll('.btn-play-seq').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const seq = favorites.find(s => s.id === btn.dataset.seqId);
|
|
if (seq) {
|
|
stopBtn.style.display = 'block';
|
|
const { steps1, steps2 } = getSteps();
|
|
await SequenceRunner.run(seq, getSpots(), steps1, steps2, onStepComplete);
|
|
stopBtn.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
stopBtn.addEventListener('click', () => {
|
|
SequenceRunner.stop();
|
|
stopBtn.style.display = 'none';
|
|
});
|
|
|
|
} catch (e) {
|
|
listEl.innerHTML = `<div style="padding: 12px; text-align: center; color: var(--text-muted); font-size: 0.9rem;">No sequences.json found for this background.</div>`;
|
|
}
|
|
}
|