script.js

var players = [{"Player_name":"André Silva","Player_position":"FW","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250042521.jpg","Player_price":3},{"Player_name":"Anthony Lopes","Player_position":"GK","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/1901643.jpg","Player_price":1.7},{"Player_name":"Bernardo Silva","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250059115.jpg","Player_price":2.8},{"Player_name":"Bruno Fernandes","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250078886.jpg","Player_price":3.5},{"Player_name":"Cristiano Ronaldo","Player_position":"FW","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/63706.jpg","Player_price":4},{"Player_name":"Danilo Pereira","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250014528.jpg","Player_price":1.8},{"Player_name":"Diogo Jota","Player_position":"FW","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250080471.jpg","Player_price":2.8},{"Player_name":"Gonçalo Guedes","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250054760.jpg","Player_price":2.2},{"Player_name":"João Cancelo","Player_position":"DF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250024746.jpg","Player_price":2},{"Player_name":"João Félix","Player_position":"FW","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250101463.jpg","Player_price":2.8},{"Player_name":"João Moutinho","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/70098.jpg","Player_price":1.8},{"Player_name":"João Palhinha","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250067295.jpg","Player_price":1.7},{"Player_name":"José Fonte","Player_position":"DF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/101788.jpg","Player_price":1.7},{"Player_name":"Nélson Semedo","Player_position":"DF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250086090.jpg","Player_price":1.7},{"Player_name":"Nuno Mendes","Player_position":"DF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250136465.jpg","Player_price":1.5},{"Player_name":"Pedro Gonçalves","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/95417.jpg","Player_price":1.7},{"Player_name":"Pepe","Player_position":"DF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250143328.jpg","Player_price":2.3},{"Player_name":"Rafa Silva","Player_position":"FW","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250063447.jpg","Player_price":1.3},{"Player_name":"Raphaël Guerreiro","Player_position":"DF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250066156.jpg","Player_price":2.2},{"Player_name":"Renato Sanches","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250058218.jpg","Player_price":2},{"Player_name":"Rúben Dias","Player_position":"DF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250058220.jpg","Player_price":2},{"Player_name":"Rúben Neves","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250055271.jpg","Player_price":1.8},{"Player_name":"Rui Patrício","Player_position":"GK","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/93443.jpg","Player_price":1.8},{"Player_name":"Rui Silva","Player_position":"GK","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250062141.jpg","Player_price":2.2},{"Player_name":"Sérgio Oliveira","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250003853.jpg","Player_price":2},{"Player_name":"William Carvalho","Player_position":"MF","teamName":"Portugal","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/1907943.jpg","Player_price":1.7},{"Player_name":"Adama Traoré","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250056274.jpg","Player_price":1.7},{"Player_name":"Álvaro Morata","Player_position":"FW","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250024456.jpg","Player_price":3},{"Player_name":"Aymeric Laporte","Player_position":"DF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250027046.jpg","Player_price":2},{"Player_name":"César Azpilicueta","Player_position":"DF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/103827.jpg","Player_price":1.7},{"Player_name":"Dani Olmo","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250081720.jpg","Player_price":2.3},{"Player_name":"David de Gea","Player_position":"GK","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/1901746.jpg","Player_price":1.8},{"Player_name":"Diego Llorente","Player_position":"DF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250057121.jpg","Player_price":1.7},{"Player_name":"Eric García","Player_position":"DF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250103561.jpg","Player_price":1.5},{"Player_name":"Fabián Ruiz","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250115436.jpg","Player_price":2},{"Player_name":"Ferran Torres","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250088320.jpg","Player_price":2.7},{"Player_name":"Gerard Moreno","Player_position":"FW","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250074565.jpg","Player_price":2.2},{"Player_name":"Jordi Alba","Player_position":"DF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250000036.jpg","Player_price":2},{"Player_name":"José Gayà","Player_position":"DF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250047086.jpg","Player_price":1.7},{"Player_name":"Koke","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/1909917.jpg","Player_price":2.3},{"Player_name":"Marcos Llorente","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250079670.jpg","Player_price":1.5},{"Player_name":"Mikel Oyarzabal","Player_position":"FW","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250097180.jpg","Player_price":2.5},{"Player_name":"Pablo Sarabia","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/1909920.jpg","Player_price":2},{"Player_name":"Pau Torres","Player_position":"DF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250088461.jpg","Player_price":2.2},{"Player_name":"Pedri","Player_position":"FW","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250143693.jpg","Player_price":1.5},{"Player_name":"Robert Sánchez","Player_position":"GK","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250154983.jpg","Player_price":1.5},{"Player_name":"Rodri","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250082664.jpg","Player_price":1.7},{"Player_name":"Sergio Busquets","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250002704.jpg","Player_price":1.8},{"Player_name":"Thiago","Player_position":"MF","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/1906776.jpg","Player_price":2},{"Player_name":"Unai Simón","Player_position":"GK","teamName":"Spain","Player_image":"https://img.uefa.com/imgml/TP/players/3/2020/324x324/250076116.jpg","Player_price":1.7}]

let GK = document.getElementById('goal')
let DF = document.getElementById('def')
let MF = document.getElementById('mid')
let FW = document.getElementById('forward')

let price_div = document.getElementById('info')
let price = document.getElementById('info').textContent
price = parseFloat(price)

var map = new Map()
var user_pick = '{"theTeam":[]}'


function filterbyPosition(position){
    var result = players.filter( element => element.Player_position ==position)
    return result
}

function myFunction(id) {
    var popup = document.getElementById("myPopup");
    var new_id = id.substring(0, 2)
    var filtered_players = filterbyPosition(new_id)
    var output = " "
    output += `<div class="leaderboard" onclick = "hide_col()">
    <h1>
      ${new_id}
    </h1>
    <ol>`
    for (var i = 0; i < filtered_players.length; i++) {
      output += `
      <li data-item='${JSON.stringify(filtered_players[i])}' onclick="addplayer(this, '${id}')">
        <img class="head-image" src="${filtered_players[i].Player_image}" >
        <mark>${filtered_players[i].Player_name}</mark>
        <small>$ ${filtered_players[i].Player_price} m</small>
      </li>   
      `
    }
    output += '</ol></div>'
    popup.innerHTML = output
    popup.classList.toggle("show");
    popup.style.display = "block"
}


function hide_col(){
  var element = document.getElementById("myPopup");
  element.style.display = "none";
}


//formation logic

function formation(){

  document.getElementById('info').textContent = 12
  addPlayerToArray('reset')
  map = new Map()
  
  let defender = " "
  let midfielder = " "
  let forward = " "

  let position  = {'GK': 1, 'DF': 0, 'MF': 0, 'FW':0}
  var formation = document.getElementById("formation").value;
  var numb = formation.match(/\d/g);
  numb = numb.join("");
  var array = Array.from(String(numb), Number)
  position['DF'] = array[1]
  position['MF'] = array[2]
  position['FW'] = array[3]

  GK.innerHTML = `<div class="player" id="GK" onclick="myFunction(this.id)"><div class="select-card"><img class="card-image" src="add.png" ><br>GK</div></div>`

  for (let index = 0; index < position['DF']; index++) {
    defender += `<div class="player" id="DF DF${index}" onclick="myFunction(this.id)"><div class="select-card"><img class="card-image" src="add.png" ><br>DF</div></div>`
  }
  DF.innerHTML = defender

  for (let index = 0; index < position['MF']; index++) {
    midfielder += `<div class="player" id="MF MF${index}" onclick="myFunction(this.id)"><div class="select-card"><img class="card-image" src="add.png" ><br>MF</div></div>`
  }
  MF.innerHTML = midfielder

  for (let index = 0; index < position['FW']; index++) {
    forward += `<div class="player" id="FW FW${index}" onclick="myFunction(this.id)"><div class="select-card"><img class="card-image" src="add.png" ><br>FW</div></div>`
  }
  FW.innerHTML = forward

}

//add player
function addplayer(data, id){
  let player = JSON.parse(data.dataset.item)  
  let player_id = document.getElementById(id)
  
  //player repeat prevent
  if(map[player.Player_name]){
    return
  }

  if(map[id]){
    user_pick = JSON.parse(user_pick)
    for (let [i, players] of user_pick['theTeam'].entries()) {
      if (players.Player_name == map[id]) {
        map.delete(players.Player_name)
        map[players.teamName] -=1
        price_tracker(-players.Player_price)
        user_pick['theTeam'].splice(i, 1);   
        user_pick = JSON.stringify(user_pick)   
      }
   }
  }



  //player name splitting
  let name = player.Player_name
  let arr = name.split(' ');
  if(arr[1]){
    name = arr[1]
  }
  else{
    name = arr[0]
  }

  //team count
  if(map[player.teamName] == 3){
    return
  }else if(!map[player.teamName]){
    map[player.teamName] = 1
  }else{
    map[player.teamName] +=1
  }


  //final decision
  let decision = price_tracker(player.Player_price)
  if(decision == false){
    return
  }
  else{
    player_id.innerHTML = " "
    player_id.innerHTML = `<div class="select-card"><img class="card-image" src="${player.Player_image}" ><br>${name}<br>${player.Player_price}m</div>`
  
    var result = addPlayerToArray(player)
    console.log(result)
    map[player.Player_name] = player.Player_name
    map[id] = player.Player_name
  }
}



//add player to array for sending it to server
function addPlayerToArray(player){
  if(player == 'reset'){
    user_pick = '{"theTeam":[]}'
    return user_pick
  }else{
    user_pick = JSON.parse(user_pick)
    user_pick['theTeam'].push(player);
    user_pick = JSON.stringify(user_pick)
    return user_pick
  }
}


//price tracker
function price_tracker(money){
  let price_div = document.getElementById('info')
  let price = document.getElementById('info').textContent
  price = parseFloat(price)

  price = price - money
  if(price<0){
    return false
  }else{
  price_div.innerHTML = price.toFixed(1)
  }
}