Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const knobs = document.querySelectorAll('.knob');
+ let activeKnob = null;
+ let startY;
+ let startRotation;
+
+ // Knob rotation handling
+ knobs.forEach(knob => {
+ knob.addEventListener('mousedown', initKnobTurn);
+ knob.addEventListener('touchstart', initKnobTurn);
+ });
+
+ document.addEventListener('mousemove', turnKnob);
+ document.addEventListener('touchmove', turnKnob);
+ document.addEventListener('mouseup', stopKnobTurn);
+ document.addEventListener('touchend', stopKnobTurn);
+
+ function initKnobTurn(e) {
+ e.preventDefault();
+ activeKnob = e.target;
+ startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;
+ startRotation = getCurrentRotation(activeKnob);
+ }
+
+ function turnKnob(e) {
+ if (!activeKnob) return;
+
+ const currentY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;
+ const deltaY = startY - currentY;
+ const rotation = startRotation + deltaY;
+
+ // Limit rotation to 300 degrees
+ const limitedRotation = Math.max(0, Math.min(300, rotation));
+
+ activeKnob.style.transform = `rotate(${limitedRotation}deg)`;
+ activeKnob.dataset.value = Math.round((limitedRotation / 300) * 100);
+ }
+
+ function stopKnobTurn() {
+ activeKnob = null;
+ }
+
+ function getCurrentRotation(element) {
+ const style = window.getComputedStyle(element);
+ const matrix = style.getPropertyValue('transform');
+
+ if (matrix === 'none') return 0;
+
+ const values = matrix.split('(')[1].split(')')[0].split(',');
+ const a = values[0];
+ const b = values[1];
+ const angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
+
+ return angle < 0 ? angle + 360 : angle;
+ }
+
+ // Save tone functionality
+ document.getElementById('save-tone').addEventListener('click', () => {
+ const settings = {
+ comp: {
+ value: document.getElementById('comp-knob').dataset.value,
+ type: document.getElementById('comp').value
+ },
+ od: {
+ value: document.getElementById('od-knob').dataset.value,
+ type: document.getElementById('od').value
+ },
+ mod: {
+ value: document.getElementById('mod-knob').dataset.value,
+ type: document.getElementById('mod').value
+ }
+ };
+
+ saveTone(settings);
+ displayTones();
+ });
+
+ // Reset functionality
+ document.getElementById('reset').addEventListener('click', () => {
+ knobs.forEach(knob => {
+ knob.style.transform = 'rotate(0deg)';
+ knob.dataset.value = '0';
+ });
+
+ const selects = document.querySelectorAll('select');
+ selects.forEach(select => {
+ select.selectedIndex = 0;
+ });
+ });
+ });
+
+ function saveTone(settings) {
+ let tones = JSON.parse(localStorage.getItem('tones') || '[]');
+ tones.push(settings);
+ localStorage.setItem('tones', JSON.stringify(tones));
+ }
+
+ function displayTones() {
+ const tones = JSON.parse(localStorage.getItem('tones') || '[]');
+ const container = document.getElementById('saved-tones');
+
+ container.innerHTML = tones.map((tone, index) => `
+
+
Tone ${index + 1}
+
COMP: ${tone.comp.type} (${tone.comp.value}%)
+
OD/DS: ${tone.od.type} (${tone.od.value}%)
+
MOD: ${tone.mod.type} (${tone.mod.value}%)
+
+ `).join('');
+ }