game.js

document.addEventListener('DOMContentLoaded', function () {
    // Retrieve all elements for "Numero" and "Posizione" headers
    var numeroHeaders = document.querySelectorAll('th[data-header="Number"]');
    var posizioneHeaders = document.querySelectorAll('th[data-header="Position"]');

    function checkScreenSize() {
        if (window.innerWidth <= 800) {
            // Update each "Numero" header
            numeroHeaders.forEach(function(header) {
                header.textContent = 'N';
            });
            // Update each "Posizione" header
            posizioneHeaders.forEach(function(header) {
                header.textContent = 'Pos'; // Shortened text for "Posizione"
            });
        } else {
            // Revert back to full text for larger screens
            numeroHeaders.forEach(function(header) {
                header.textContent = 'Number';
            });
            posizioneHeaders.forEach(function(header) {
                header.textContent = 'Position';
            });
        }
    }

    // Add event listener for window resize
    window.addEventListener('resize', checkScreenSize);
    // Initial check on load
    checkScreenSize();
});


document.addEventListener('DOMContentLoaded', function() {
    // Define a mapping from full position names to abbreviations
    const positionAbbreviations = {
        'Goalkeeper': 'GK',
        'Left-Back': 'LB',
        'Right-Back': 'RB',
        'Centre-Back': 'CB',
        'Defensive Midfield': 'DM',
        'Left Midfield': 'LM',
        'Central Midfield': 'CM',
        'Right Midfield': 'RM',
        'Centre-Forward': 'CF',
        'Left Winger': 'LW',
        'Right Winger': 'RW',
        'Attacking Midfield': 'AM',
        'Second Striker': 'SS'
    };

    function replacePositionText() {
        if (window.innerWidth <= 800) { // Only execute if the screen size is 800px or smaller
            // Find all td elements that could contain these positions
            const tds = document.querySelectorAll('td');

            // Loop through each td and replace the text if it matches a position
            tds.forEach(td => {
                // Check if the text content of the td is a key in the positionAbbreviations map
                if (positionAbbreviations[td.textContent]) {
                    // Replace the text content with the corresponding abbreviation
                    td.textContent = positionAbbreviations[td.textContent];
                }
            });
        }
    }

    // Run when the page is loaded
    replacePositionText();

    // Additionally, adjust when the window is resized
    window.addEventListener('resize', replacePositionText);
});