@dodlhuat/basix 1.4.1 → 1.4.3

package/css/guitar-chords.css

@@ -1,251 +0,0 @@
-.controls-container {
-    display: flex;
-    gap: 2rem;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
-}
-
-.control-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.chord-display {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: var(--primary-color);
-}
-
-.fretboard-container {
-    overflow-x: auto;
-    padding: 1rem 0;
-}
-
-.fretboard {
-    display: flex;
-    flex-direction: column;
-    background-color: #5d4037;
-    /* Fretboard wood color */
-    padding: 20px;
-    border-radius: 4px;
-    position: relative;
-    min-width: 800px;
-}
-
-.string {
-    display: flex;
-    position: relative;
-    height: 40px;
-    /* Spacing between strings */
-    align-items: center;
-}
-
-.string::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    height: 2px;
-    /* String thickness */
-    background-color: #c0c0c0;
-    /* String color */
-    z-index: 1;
-    transform: translateY(-50%);
-}
-
-/* Make lower strings thicker */
-.string:nth-child(1)::before {
-    height: 4px;
-}
-
-.string:nth-child(2)::before {
-    height: 3.5px;
-}
-
-.string:nth-child(3)::before {
-    height: 3px;
-}
-
-.string:nth-child(4)::before {
-    height: 2.5px;
-}
-
-.string:nth-child(5)::before {
-    height: 2px;
-}
-
-.string:nth-child(6)::before {
-    height: 1.5px;
-}
-
-.fret {
-    flex: 1;
-    border-right: 4px solid #aaa;
-    /* Fret wire */
-    height: 100%;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    z-index: 2;
-}
-
-.fret.nut {
-    border-right: 8px solid #ddd;
-    /* Nut */
-    flex: 0 0 50px;
-    /* Nut width */
-    background-color: #3e2723;
-}
-
-.note-marker {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background-color: var(--primary-color);
-    color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 0.8rem;
-    font-weight: bold;
-    z-index: 3;
-    opacity: 0;
-    transition: opacity 0.2s;
-    pointer-events: none;
-    /* Let clicks pass through to fret */
-}
-
-.fret.active .note-marker {
-    opacity: 1;
-}
-
-/* Fret markers (dots) */
-.fretboard::after {
-    content: '';
-    position: absolute;
-    /* This is tricky with flexbox, might need a different approach for dots 
-       or just put them on specific frets in JS or specific nth-child CSS 
-    */
-}
-
-/* Simple single dots */
-.string:nth-child(3) .fret:nth-child(4)::after,
-/* 3rd fret */
-.string:nth-child(3) .fret:nth-child(6)::after,
-/* 5th fret */
-.string:nth-child(3) .fret:nth-child(8)::after,
-/* 7th fret */
-.string:nth-child(3) .fret:nth-child(10)::after
-
-/* 9th fret */
-    {
-    content: '';
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    background-color: rgba(255, 255, 255, 0.5);
-    border-radius: 50%;
-    z-index: 0;
-    top: 100%;
-    /* Position below the 3rd string (between 3 and 4 visually) */
-    transform: translate(50%, -50%);
-    /* Center on the fret wire? No, center in fret */
-    left: 50%;
-    transform: translate(-50%, 20px);
-    /* Push down to between strings */
-}
-
-/* Double dot at 12th fret */
-.string:nth-child(2) .fret:nth-child(13)::after,
-.string:nth-child(4) .fret:nth-child(13)::after {
-    content: '';
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    background-color: rgba(255, 255, 255, 0.5);
-    border-radius: 50%;
-    z-index: 0;
-    left: 50%;
-    transform: translate(-50%, 20px);
-}
-
-@media (max-width: 768px) {
-    .controls-container {
-        gap: 1rem;
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .control-group {
-        width: 100%;
-    }
-
-    .button-group {
-        display: flex;
-        gap: 0.5rem;
-    }
-
-    .button-group button {
-        flex: 1;
-    }
-
-    .fretboard-container {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        /* Hide overflow as requested */
-    }
-
-
-    .fretboard {
-        min-width: 0;
-        /* Allow it to shrink to fit screen */
-        width: 100%;
-        padding: 10px 0;
-        /* Reduce padding */
-        box-sizing: border-box;
-        /* Ensure padding is included */
-    }
-
-    .fret-numbers {
-        padding-left: 0;
-        padding-right: 0;
-    }
-}
-
-/* Fret Numbers Styles */
-.fret-numbers {
-    display: flex;
-    height: 30px;
-    align-items: center;
-    margin-top: 5px;
-    padding-left: 20px;
-    /* Match fretboard padding */
-    padding-right: 20px;
-}
-
-.fret-number {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1rem;
-    /* Increased size */
-    color: var(--primary-text);
-    /* Higher contrast */
-    font-weight: bold;
-    border-right: 4px solid transparent;
-    /* Match fret wire width to align perfectly */
-    box-sizing: border-box;
-    /* Ensure border is calculated in size if we switch that on */
-}
-
-/* Ensure frets also use consistent box sizing if not already */
-.fret {
-    box-sizing: border-box;
-}

package/js/form-builder.js

@@ -1,107 +0,0 @@
-let dragged_element = null;
-let action = 'copy';
-let row_count = 1;
-
-let formbuilder = {
-    init() {
-        document.querySelectorAll('.draggable').forEach(function (element) {
-            element.removeEventListener("dragstart", dragAction);
-            element.addEventListener("dragstart", dragAction);
-        });
-        initDropzones();
-    },
-    addRow() {
-        document.querySelector('.form-content').innerHTML += buildRowElement();
-    },
-    addColumn() {
-
-    },
-    removeRow() {
-
-    },
-    removeColumn() {
-
-    },
-    load(file_name) {
-        load(file_name).then((data) => {
-            console.log(data);
-        });
-    }
-}
-
-const moveAction = function (event) {
-    dragged_element = event.target;
-    action = 'move';
-}
-const dragAction = function (event) {
-    dragged_element = event.target;
-    action = 'copy';
-}
-const addMoveListeners = function () {
-    document.querySelectorAll('.movable').forEach(function (element) {
-        element.removeEventListener("dragstart", moveAction);
-        element.addEventListener("dragstart", moveAction);
-    });
-}
-
-const load = async function (file_name) {
-    const url = new URL(file_name,
-        document.currentScript && document.currentScript.src || location.href)
-    // fetch and parse template as string
-    let template = await fetch(url)
-    template = await template.text()
-    template = new DOMParser().parseFromString(template, 'text/html')
-        .querySelector('template')
-    if (!template) throw new TypeError('No template element found')
-    return template.innerHTML.trim()
-}
-
-const buildRowElement = function () {
-    const row = document.createElement('div');
-    row_count++;
-    row.setAttribute('data-row-id', String(row_count));
-    row.className = 'row';
-    const col = document.createElement('div');
-    col.className = 'column';
-    const dropzone = document.createElement('div');
-    dropzone.className = 'dropzone';
-    col.innerHTML = dropzone.outerHTML;
-    row.innerHTML = col.outerHTML;
-    return row.outerHTML;
-}
-
-const dropEvent = function (event) {
-    event.preventDefault();
-    let node = dragged_element;
-    if (action === 'copy') {
-        node = dragged_element.cloneNode(true);
-    }
-    node.classList.remove('draggable');
-    node.classList.add('movable');
-    const label = node.querySelector('span.label');
-    if (label) {
-        label.setAttribute('contenteditable', true);
-    }
-    const pElement = node.querySelector('p');
-    if (pElement) {
-        pElement.setAttribute('contenteditable', true);
-    }
-    event.target.appendChild(node);
-    addMoveListeners();
-}
-
-const dragOverEvent = function (event) {
-    event.preventDefault();
-    event.dataTransfer.effectAllowed = action;
-}
-
-const initDropzones = function () {
-    document.querySelectorAll('.dropzone').forEach(function (dropzone) {
-        dropzone.removeEventListener('drop', dropEvent);
-        dropzone.addEventListener('drop', dropEvent);
-        dropzone.removeEventListener('dragover', dragOverEvent);
-        dropzone.addEventListener('dragover', dragOverEvent);
-    });
-}
-
-export {formbuilder}

package/js/guitar-chords.js

@@ -1,268 +0,0 @@
-const NOTES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
-const STRINGS = ['E', 'B', 'G', 'D', 'A', 'E']; // High E to Low E
-const FRETS = 15;
-
-// Standard tuning offsets from C (C=0)
-// E=4, B=11, G=7, D=2, A=9, E=4
-// But we need absolute pitch to know octaves if we want to be precise, 
-// but for simple note names, relative is fine.
-// Let's map open strings to their semitone value (0-11)
-const STRING_TUNING = [4, 11, 7, 2, 9, 4];
-
-// Chord Formulas (intervals in semitones)
-const CHORD_FORMULAS = {
-    'Major': [0, 4, 7],
-    'Minor': [0, 3, 7],
-    '5': [0, 7],
-    '7': [0, 4, 7, 10],
-    'Maj7': [0, 4, 7, 11],
-    'm7': [0, 3, 7, 10],
-    'sus4': [0, 5, 7],
-    'sus2': [0, 2, 7],
-    'dim': [0, 3, 6],
-    'aug': [0, 4, 8]
-};
-
-// Common open chords for the dropdown
-const COMMON_CHORDS = {
-    'C Major': [0, 1, 0, 2, 3, -1], // -1 for muted/unused
-    'A Major': [0, 2, 2, 2, 0, -1],
-    'G Major': [3, 0, 0, 0, 2, 3],
-    'E Major': [0, 0, 1, 2, 2, 0],
-    'D Major': [2, 3, 2, 0, -1, -1],
-    'A Minor': [0, 1, 2, 2, 0, -1],
-    'E Minor': [0, 0, 0, 2, 2, 0],
-    'D Minor': [1, 3, 2, 0, -1, -1]
-};
-
-// State
-let selectedFrets = [-1, -1, -1, -1, -1, -1];
-let startFret = 0;
-let visibleFrets = 15;
-
-function init() {
-    handleResize();
-    window.addEventListener('resize', handleResize);
-
-    renderFretboard();
-    populateChordSelect();
-    setupEventListeners();
-}
-
-function handleResize() {
-    const isMobile = window.innerWidth <= 768;
-    const newVisible = isMobile ? 5 : 15;
-    if (newVisible !== visibleFrets) {
-        visibleFrets = newVisible;
-        renderFretboard();
-    }
-}
-
-function renderFretboard() {
-    const container = document.getElementById('fretboard');
-    container.innerHTML = '';
-
-    STRINGS.forEach((stringName, stringIndex) => {
-        const stringDiv = document.createElement('div');
-        stringDiv.className = 'string';
-
-        // Label for string name (optional, but good for context)
-        // For now, keeping it simple as before
-
-        // Create frets (showing visibleFrets count)
-        for (let i = 0; i <= visibleFrets; i++) {
-            // Actual semantic fret number
-            const currentFretNum = startFret + i;
-
-            // Skip rendering if beyond max reasonable frets (e.g., 24), but let's just stick to logic
-
-            const fretDiv = document.createElement('div');
-            fretDiv.className = 'fret';
-
-            // Mark if this is the Nut (fret 0)
-            if (currentFretNum === 0) {
-                fretDiv.classList.add('nut');
-            }
-
-            // Check if selected
-            if (selectedFrets[stringIndex] === currentFretNum) {
-                fretDiv.classList.add('active');
-            }
-
-            // Note marker
-            const marker = document.createElement('div');
-            marker.className = 'note-marker';
-
-            // Calculate note
-            const noteIndex = (STRING_TUNING[stringIndex] + currentFretNum) % 12;
-            marker.textContent = NOTES[noteIndex];
-
-            fretDiv.appendChild(marker);
-
-            // Click handler
-            fretDiv.addEventListener('click', () => toggleFret(stringIndex, currentFretNum));
-
-            // Fret labels (markers)
-            // Adding dots logic dynamically might be complex. 
-            // Simplified: showing note name is good enough? 
-            // Let's add a small number indicator for the fret number if needed?
-            // User didn't request explicit fret numbers, but it helps.
-            // Let's leave it clean for now.
-
-            stringDiv.appendChild(fretDiv);
-        }
-
-        container.appendChild(stringDiv);
-    });
-
-    // Add Fret Numbers Row
-    const numberRow = document.createElement('div');
-    numberRow.className = 'fret-numbers';
-
-    for (let i = 0; i <= visibleFrets; i++) {
-        const currentFretNum = startFret + i;
-        const numberDiv = document.createElement('div');
-        numberDiv.className = 'fret-number';
-
-        // Handle Nut alignment matching
-        if (currentFretNum === 0) {
-            numberDiv.classList.add('nut-number');
-            numberDiv.style.flex = '0 0 50px';
-            numberDiv.style.borderRightWidth = '8px'; // Match nut border
-            numberDiv.style.borderRightColor = 'transparent';
-            numberDiv.textContent = '0';
-        } else {
-            numberDiv.textContent = currentFretNum;
-        }
-
-        numberRow.appendChild(numberDiv);
-    }
-    container.appendChild(numberRow);
-}
-
-function toggleFret(stringIndex, fretIndex) {
-    if (selectedFrets[stringIndex] === fretIndex) {
-        // Deselect
-        selectedFrets[stringIndex] = -1;
-    } else {
-        // Select
-        selectedFrets[stringIndex] = fretIndex;
-    }
-    renderFretboard();
-    detectChord();
-}
-
-function populateChordSelect() {
-    const select = document.getElementById('chord-select');
-    for (const [name, frets] of Object.entries(COMMON_CHORDS)) {
-        const option = document.createElement('option');
-        option.value = name;
-        option.textContent = name;
-        select.appendChild(option);
-    }
-}
-
-function setupEventListeners() {
-    document.getElementById('chord-select').addEventListener('change', (e) => {
-        const chordName = e.target.value;
-        if (chordName && COMMON_CHORDS[chordName]) {
-            selectedFrets = [...COMMON_CHORDS[chordName]];
-            // If selected frets are out of view, maybe jump startFret?
-            // Let's just render.
-            // Find min/max fret to adjust view?
-            // Optional polish. For now, leave startFret as user set.
-            renderFretboard();
-            detectChord();
-        }
-    });
-
-    document.getElementById('transpose-up').addEventListener('click', () => transpose(1));
-    document.getElementById('transpose-down').addEventListener('click', () => transpose(-1));
-
-    const startFretInput = document.getElementById('start-fret');
-    if (startFretInput) {
-        startFretInput.addEventListener('change', (e) => {
-            let val = parseInt(e.target.value);
-            if (val < 0) val = 0;
-            if (val > 15) val = 15; // Arbitrary max
-            startFret = val;
-            renderFretboard();
-        });
-    }
-}
-
-function transpose(semitones) {
-    // Shift all selected frets
-    for (let i = 0; i < selectedFrets.length; i++) {
-        if (selectedFrets[i] !== -1) { // Don't shift muted strings
-            let newFret = selectedFrets[i] + semitones;
-            // logic for open strings shifting down implies they can't go below 0 unless muted.
-            if (newFret < 0) newFret = 0; // clamp
-            if (newFret > 24) newFret = 24; // arbitrary max
-            selectedFrets[i] = newFret;
-        }
-    }
-    renderFretboard();
-    detectChord();
-
-    // Reset select to custom because we modified it
-    document.getElementById('chord-select').value = "";
-}
-
-function detectChord() {
-    // Collect all notes being played
-    const playedNotes = [];
-    const playedIndices = [];
-
-    selectedFrets.forEach((fret, stringIndex) => {
-        if (fret !== -1) {
-            const noteIndex = (STRING_TUNING[stringIndex] + fret) % 12;
-            playedNotes.push(NOTES[noteIndex]);
-            playedIndices.push(noteIndex);
-        }
-    });
-
-    if (playedNotes.length === 0) {
-        document.getElementById('detected-chord').textContent = "--";
-        return;
-    }
-
-    // Remove duplicates and sort
-    const uniqueIndices = [...new Set(playedIndices)].sort((a, b) => a - b);
-
-    // Try to match against formulas
-    // We need to check every note as a potential root
-    let bestMatch = null;
-
-    for (const rootIndex of uniqueIndices) {
-        const rootNote = NOTES[rootIndex];
-
-        // Calculate intervals relative to this root
-        const currentIntervals = uniqueIndices.map(index => {
-            let interval = index - rootIndex;
-            if (interval < 0) interval += 12;
-            return interval;
-        }).sort((a, b) => a - b);
-
-        // Compare with formulas
-        for (const [type, formula] of Object.entries(CHORD_FORMULAS)) {
-            if (arraysEqual(currentIntervals, formula)) {
-                bestMatch = `${rootNote} ${type}`;
-                break;
-            }
-        }
-        if (bestMatch) break;
-    }
-
-    document.getElementById('detected-chord').textContent = bestMatch || "Unknown";
-}
-
-function arraysEqual(a, b) {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-        if (a[i] !== b[i]) return false;
-    }
-    return true;
-}
-
-init();