Player card

card.js

window.onload = playerCard();

// Generate the card
function playerCard() {
  var request = new XMLHttpRequest();
  request.open('GET', '/assets/data/player-stats.json', true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      // Success!
      var data = JSON.parse(request.responseText);
      var players = formatData(data);

      var selectdata = selectData(data);
      setupSelect(selectdata);
      photoNameBadgeStats(players);

    } else {
      console.log('Server returned an error');
    }
  };

  request.onerror = function() {
    console.log('Connection error');
  };
  request.send();
}

// Setup Player Data
function getPlayer(entry) {
  var key = entry.player.id;
  var playerid = {
    id: key,
    name: entry.player.name.first + ' ' + entry.player.name.last,
    position: entry.player.info.positionInfo,
    team: entry.player.currentTeam.id,
    appearences: entry.stats[6].value,
    goals: entry.stats[0].value,
    assists: entry.stats[5].value,
    gpm: (entry.stats[0].value / entry.stats[6].value).toFixed(2),
    ppm: (entry.stats[4].value / entry.stats[7].value).toFixed(2),
  }
  return playerid;
}

// Clean up the Data
function formatData(source) {
  var players = [];
  source.players.forEach((value, index, self) => {
    var player = getPlayer(value)
    players[player.id] = player
  })
  return players;
}


// Clean up the Data
function selectData(source) {

  var team = source;
  // console.log( team);
  playerselect = []
  for (var i = 0; i < team.players.length; i++) {
    var playerselectdata = {
      name: team.players[i].player.name.first + ' ' + team.players[i].player.name.last,
      id: team.players[i].player.id,

    };

    playerselect.push(playerselectdata);

  }
  return playerselect;
  //  console.log(playerselect);
}

// Setup Select
function setupSelect(players) {
  // console.log(players);
  var ele = document.getElementById('players');
  for (var i = 0; i < players.length; i++) {
    var option = document.createElement("option");
    option.value = players[i].id;
    option.text = players[i].name;
    ele.appendChild(option);
  }
}


// Change picture, name, badge

function photoNameBadgeStats(players) {

  // console.log(players);
  selector = document.getElementById('players');

  popTable('player-data-table', selector.value, players);

  selector.addEventListener('change', function() {

    var photo = document.getElementById('pphoto');
    var imgloc = 'assets/images/players/';
    var imgfilename = imgloc + 'p' + this.value + '.png';

    var badgeel = document.getElementById('pbadge');
    var titleel = document.getElementById('pname');
    var posel = document.getElementById('ppos');

    //console.log(players.player)
    // Photo
    photo.src = imgfilename;
    // Badge
    badgeel.className = 'badge' + players[this.value].team;
    // Title
    titleel.innerHTML = players[this.value].name;
    // Position
    posel.innerHTML = players[this.value].position;

    // STAT TABLE
    popTable('player-data-table', this.value, players);


  });

}

// Add Stats to table

function popTable(table, playerid, players) {

  // console.log(players);

  var tbl = document.getElementById(table);
  removeBody(table);

  var table = document.createElement('tbody');
  tbl.appendChild(table);
  // Rows
  rowMaker(table, "Appearences", players[playerid].appearences);
  rowMaker(table, "Goals", players[playerid].goals);
  rowMaker(table, "Assists", players[playerid].assists);
  rowMaker(table, "Goals per match", players[playerid].gpm);
  rowMaker(table, "Passes per minute", players[playerid].ppm);
}

// Remove body on select change

function removeBody(tableid) {
  var tbl = document.getElementById(tableid);
  tbl.removeChild(tbl.getElementsByTagName("tbody")[0]);
}

// Make some rows

function rowMaker(body, label, value) {
  var row1 = body.insertRow(0);
  var cell1 = row1.insertCell(0);
  var cell2 = row1.insertCell(1);
  cell1.innerHTML = label;
  cell2.innerHTML = value;
  body.appendChild(row1);
};