script.js

// Collecting document data through classes,etc
var tabs = document.querySelectorAll('[data-tab-target]');
var tabContent = document.querySelectorAll('[data-tab-content]');
var teamMenu = document.getElementById('team');
var dropdownButton = document.querySelector('.dropbutton');

const TEAM_NAME_TO_ABBR = {
    'Atlanta Hawks': 'ATL',
    'Boston Celtics': 'BOS',
    'Brooklyn Nets': 'BKN',
    'Charlotte Hornets': 'CHA',
    'Chicago Bulls': 'CHI',
    'Cleveland Cavaliers': 'CLE',
    'Dallas Mavericks': 'DAL',
    'Denver Nuggets': 'DEN',
    'Detroit Pistons': 'DET',
    'Golden State Warriors': 'GSW',
    'Houston Rockets': 'HOU',
    'Indiana Pacers': 'IND',
    'Los Angeles Clippers': 'LAC',
    'Los Angeles Lakers': 'LAL',
    'Memphis Grizzlies': 'MEM',
    'Miami Heat': 'MIA',
    'Milwaukee Bucks': 'MIL',
    'Minnesota Timberwolves': 'MIN',
    'New Orleans Pelicans': 'NOP',
    'New York Knicks': 'NYK',
    'Oklahoma City Thunder': 'OKC',
    'Orlando Magic': 'ORL',
    'Philadelphia 76ers': 'PHI',
    'Phoenix Suns': 'PHX',
    'Portland Trail Blazers': 'POR',
    'Sacramento Kings': 'SAC',
    'San Antonio Spurs': 'SAS',
    'Toronto Raptors': 'TOR',
    'Utah Jazz': 'UTA',
    'Washington Wizards': 'WAS',
    //City
    'Atlanta': 'ATL',
    'Boston': 'BOS',
    'Brooklyn': 'BKN',
    'Charlotte': 'CHA',
    'Chicago': 'CHI',
    'Cleveland': 'CLE',
    'Dallas': 'DAL',
    'Denver': 'DEN',
    'Detroit': 'DET',
    'Golden State': 'GSW',
    'Houston': 'HOU',
    'Indiana': 'IND',
    'LA Clippers': 'LAC',
    'LA Lakers': 'LAL',
    'Memphis': 'MEM',
    'Miami': 'MIA',
    'Milwaukee': 'MIL',
    'Minnesota': 'MIN',
    'New Orleans': 'NOP',
    'New York': 'NYK',
    'Oklahoma City': 'OKC',
    'Orlando': 'ORL',
    'Philadelphia': 'PHI',
    'Phoenix': 'PHX',
    'Portland': 'POR',
    'Sacramento': 'SAC',
    'San Antonio': 'SAS',
    'Toronto': 'TOR',
    'Utah': 'UTA',
    'Washington': 'WAS'
  };

const TEAM_LOGOS = {
  ATL: '1610612737',
  BOS: '1610612738',
  BKN: '1610612751',
  CHA: '1610612766',
  CHI: '1610612741',
  CLE: '1610612739',
  DAL: '1610612742',
  DEN: '1610612743',
  DET: '1610612765',
  GSW: '1610612744',
  HOU: '1610612745',
  IND: '1610612754',
  LAC: '1610612746',
  LAL: '1610612747',
  MEM: '1610612763',
  MIA: '1610612748',
  MIL: '1610612749',
  MIN: '1610612750',
  NOP: '1610612740',
  NYK: '1610612752',
  OKC: '1610612760',
  ORL: '1610612753',
  PHI: '1610612755',
  PHX: '1610612756',
  POR: '1610612757',
  SAC: '1610612758',
  SAS: '1610612759',
  TOR: '1610612761',
  UTA: '1610612762',
  WAS: '1610612764'
};

function getLogoUrl(teamAbbr) {
  var teamId = TEAM_LOGOS[teamAbbr];
  if (!teamId) return '';
  return `https://cdn.nba.com/logos/nba/${teamId}/primary/L/logo.svg`;
}

function decorateLast10Matchups() {
  // Select all opponent cells in the last 10 games table
  var matchupCells = document.querySelectorAll('#recent-games #last10-body tr td:nth-child(2)');
  matchupCells.forEach((cell) => {
    var opponentStr = cell.textContent.trim();
    let parts = opponentStr.split(' ');
    parts.shift(); // Remove 'vs' or '@'
    let name = parts.join(' ');
    let abbr;
    if (name === 'Los Angeles') {
      abbr = 'LAL'; // Lakers
    } else if (name === 'LA') {
      abbr = 'LAC'; // Clippers
    } else {
      abbr = TEAM_NAME_TO_ABBR[name];
    }
    if (abbr && TEAM_LOGOS[abbr]) {
      let logoUrl = getLogoUrl(abbr);
      cell.innerHTML = `<img src="${logoUrl}" class="logo-small" alt="${abbr} logo"> ${opponentStr}`;
    }
  });
}

//Fetching collected JSON data
const fetchedStatsData = fetch('/data/team-stats.json')
  .then((res) => res.json())
  .catch((error) => {
    console.log('Status fetch failed: ', error);
    return [];
  })

const fetchedContractsData = fetch('/data/team-contracts.json')
  .then((res) => res.json())
  .catch((err) => {
    console.log('Failed fetch:', err);
    return [];
  })

const fetchedPlayerData = fetch('/data/player-stats.json')
  .then((res) => res.json())
  .catch((err) => {
    console.log('Error detected', err);
    return [];
  })

const fetchlast10 = fetch('/data/last10.json')
  .then((res) => res.json())
  .catch((err) => {
    console.log('Found error:', err);
    return [];
  })

// When a tab is clicked, this allows me to show the respective content of each tab
tabs.forEach(tabs => {
  tabs.addEventListener('click', () => {
    var tabTarget = document.querySelector(tabs.dataset.tabTarget);
    tabContent.forEach(tabContent => {
      tabContent.classList.remove('active');
    })
    tabTarget.classList.add('active');
  })
})

//Function for my 'select team' button to manage its visibility
function rosterDropdown() {
  teamMenu.classList.toggle('show');
}

if (dropdownButton && teamMenu) {
  dropdownButton.addEventListener('click', rosterDropdown);
}

window.addEventListener('click', function(e) {
  if (teamMenu && !e.target.closest('.dropdown') && teamMenu.classList.contains('show')) {
    teamMenu.classList.remove('show');
  }
});

function setText(id, value) {
  var el = document.getElementById(id);
  if (el) {
    el.textContent = value || '-';
  }
}

//Function for loading each team's respective content
function loadContent (url, teamName) {
  fetch(url)
  .then(response => {
    if(!response.ok) {
      throw new Error(`HTTP Error! Status: ${response.status}`);
    }
    return response.text();
  })

  .then(html => {
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html');

    var homeContent = doc.querySelector('#home');
    var contractContent = doc.querySelector('#contracts');
    var draftPicksContent = doc.querySelector('#draftpicks');
    var playerStatsContent = doc.querySelector('#roster');

    document.getElementById('home').innerHTML = homeContent.innerHTML;
    document.getElementById('contracts').innerHTML = contractContent.innerHTML;
    document.getElementById('draftpicks').innerHTML = draftPicksContent.innerHTML;
    document.getElementById('roster').innerHTML = playerStatsContent.innerHTML;

    localStorage.setItem('selectedTeamUrl', url);
    if (teamName) {
      localStorage.setItem('selectedTeamName', teamName);
    } else {
      localStorage.removeItem('selectedTeamName');
    }

    if (teamName) {
      loadTeamStats(teamName);
      loadContracts(teamName);
      loadPlayerStats(teamName);
      loadLast10(teamName);
    }
  })
  .catch(error => {
    console.error(error);
  });
}

async function loadTeamStats (teamName) {
  const data = await fetchedStatsData;
  const team = data.find((row) => row.Team === teamName);

  if(!team) return;

  setText('pts', team.PTS);
  setText('apg', team.AST);
  setText('3p-pct', team['3P%']);
  setText('rebs', team.REB);
  setText('stls', team.STL);
  setText('blks', team.BLK);
  setText('wins', team.W);
  setText('losses', team.L)
}

async function loadContracts(teamName) {
  const contractData = await fetchedContractsData;
  const teamContracts = contractData.find((entry) => entry.team === teamName);

  var contractsBody = document.getElementById('contracts-body');
  if (!contractsBody) {
    return;
  }


  contractsBody.innerHTML = teamContracts.contracts
    .filter((row) => row.name)
    .map((row) => {
      return `
        <tr>
          <td>${row.name || '-'}</td>
          <td>${row.age || '-'}</td>
          <td>${row['2025-2026'] || '-'}</td>
          <td>${row['2026-2027'] || '-'}</td>
          <td>${row['2027-2028'] || '-'}</td>
          <td>${row['2028-2029'] || '-'}</td>
          <td>${row['2029-2030'] || '-'}</td>
          <td>${row.total || '-'}</td>
        </tr>
      `;
    })
    .join('');
}

async function loadPlayerStats(teamName) {
  const players = await fetchedPlayerData;
  const playerData = players.find((entry) => entry.team === teamName);

  var statistics = document.getElementById('roster-body');

  statistics.innerHTML = playerData.stats
    .filter((row) => row.Player)
    .map((row) => {
      return `
        <tr>
          <td>${row.Player}</td>
          <td>${row.MPG}</td>
          <td>${row.PPG}</td>
          <td>${row['FG%']}</td>
          <td>${row['3P%']}</td>
          <td>${row['FT%']}</td>
          <td>${row.RPG}</td>
          <td>${row.APG}</td>
          <td>${row.SPG}</td>
          <td>${row.BPG}</td>
          <td>${row.TOV}</td>
        </tr>
      `;
    })
    .join('');
}

async function loadLast10(teamName) {
  const stats = await fetchlast10;
  let abbr = teamName;
  if (TEAM_NAME_TO_ABBR[teamName]) {
    abbr = TEAM_NAME_TO_ABBR[teamName];
  }
  const statData = stats.find((entry) => entry.team === abbr);

  let gameStats = document.getElementById('last10-body');

  gameStats.innerHTML = statData.last10
    .map((row) => {
      return `
        <tr>
          <td>${row.date}</td>
          <td>${row.opponent}</td>
          <td>${row.score}</td>
          <td>${row.record}</td>
          <td>${row.topTeamScorer}</td>
          <td>${row.topTeamRebounder}</td>
          <td>${row.topTeamAssister}</td>
        </tr>
      `;
    })
    .join('');
    decorateLast10Matchups();
}

window.onload = function () {
      var selectedTeamUrl = localStorage.getItem('selectedTeamUrl');
      var selectedTeamName = localStorage.getItem('selectedTeamName');

      if (selectedTeamUrl) {
        loadContent(selectedTeamUrl, selectedTeamName);
      } else {
        decorateLast10Matchups();
      }
    }

document.querySelectorAll('[data-url]').forEach((item) => {
  item.addEventListener('click', () => {
    loadContent(item.dataset.url, item.dataset.team);
    if (teamMenu) {
      teamMenu.classList.remove('show');
    }
  });
});