champs/public/scripts/game.js

var champs = new Map();
var version;
var Allnames = [];
var names = [];
var isTimmerOn = false;
var isOutOfTime = false;
var secondsRemaining = 20*60;
var totalchamps =0;
var interval;
/* Iron 0 Bronze -140 Silver -280 Gold -425 Platinum -570 Diamond -716 Master -860 GrandMaster -1010 Challanger -1151*/
var rank =  new Map([
    [0,'0px'],
    [1,'0px'],
    [2,'-140px'],
    [3,'-280px'],
    [4,'-425px'],
    [5,'-570px'],
    [6,'-716px'],
    [7,'-820px'],
    [8,'-1010px'],
    [9,'-1151px'],
    [10,'-1151px']
  ])
window.onload=()=>
{   
    document.getElementById('guess').addEventListener('input', handleGuess)
    document.getElementById("reload").onclick = () => 
    {
        location.href = location.href;
    }
    document.getElementById('missed_bt').onclick = ()=>
    {
        document.getElementById('missingGrid').classList.remove('hidden');
        drawMissingGrid();
    }
    document.getElementById('close_bt').onclick = ()=>
    {
        document.getElementById('missingGrid').classList.add('hidden');
    }
    document.getElementById('giveUp').onclick = ()=>
    {
        if(isTimmerOn) handleTimerEnd();
    }
    document.getElementById('guess').focus();
    getVersion().then(v=>
        {
            version = v;
            let listURL = `https://ddragon.leagueoflegends.com/cdn/${version}/data/en_US/champion.json`;
            fetch(listURL)
                .then(response=>
                    {
                        return response.json().then(
                            json=>
                            {
                                return response.ok? json:Promise.reject(json);
                            }
                        )
                    })
                .then(data=>
                    {
                        data = data.data;
                        totalchamps = Object.keys(data).length;
                        document.getElementById('totalInfo').innerHTML += ' ' + totalchamps
                        var aux= new Map();
                        for(var key of Object.keys(data))
                        {
                            Allnames.push(data[`${key}`].name)
                            let img = data[`${key}`].image.full;
                            aux.set(key.toLowerCase(),{name:data[`${key}`].name, used:0,img});
                            if(key!=data[`${key}`].name) aux.set(data[`${key}`].name.toLowerCase(),{name:data[`${key}`].name, used:0, img});
                        }
                        return aux;
                    })
                .catch(error=>{return error})
                .then(list=>
                    {
                        champs = list;
                    })
        });
}

function getVersion()
{
    return fetch("https://ddragon.leagueoflegends.com/api/versions.json").then(handleResponse)
                .then(handleData)
                .catch(handleError)
            function handleResponse(response) 
            {
            return response.json().then(function (json) 
            {
            return response.ok ? json : Promise.reject(json);
            });
            }
            function handleError(error) {
            return error;
            }
            function handleData(data) {return data[0]}
}
function startTimer ()
{
       interval = setInterval(() => 
        {
            secondsRemaining -= 1;
            updateTimer();
            if (secondsRemaining == 0) return handleTimerEnd()
        }, 1000);
}
function handleTimerEnd()
{
    if(isOutOfTime) return;
    clearInterval(interval);
    document.getElementById('endCard').classList.remove('hidden');
    document.getElementById('guessed').innerHTML += names.length;
    document.getElementById('total').innerHTML += totalchamps;
    var percentage =  Math.floor(names.length/totalchamps*100, -3)
    document.getElementById('percentage').innerHTML +=percentage+'%';
    document.getElementById('rank').style.backgroundPositionX= rank.get(Math.floor(percentage/10));
    isOutOfTime = true;
}
function updateTimer()
{
    let seconds = secondsRemaining-(Math.floor(secondsRemaining/60)*60)
    seconds= seconds<10?'0'+seconds:seconds;
    document.getElementById('timer').innerHTML = `${Math.floor(secondsRemaining/60)}:${seconds}`;
}
function handleCorrect(name)
{
    let input = document.getElementById('guess');
    let aux = champs.get(name);
    champs.set(name,{name:aux.name, used:1, img:aux.img})
    input.value = '';
    names.push(aux.name)
    document.getElementById('guessedInfo').innerHTML= `Guessed: ${names.length}`
    drawGrid();


    if(names.length == totalchamps) handleTimerEnd()
}

function handleGuess(e)
{
    document.getElementById('guess').placeholder = '';
    if(isOutOfTime) return
    let name = e.target.value.toLowerCase();
    name = name.split(' ')?name.split(' ').join(''):name;
    name = name.split("'")?name.split("'").join(''):name;
    //EdgeCase:
    name = name==='mundo'?'drmundo':name;

    if(!isTimmerOn) 
    {
        isTimmerOn = true;
        startTimer();
    }
    if(!champs.get(name)) return
    if(champs.get(name).used<1) handleCorrect(name);
}
function handleRepeated()
{
    document.getElementById('guess').innerHTML = ''
}

function drawGrid()
{
    document.getElementById('ChampGrid').innerHTML = ''
    var _names = getOrganizedNames();
    for(var name of _names)
    {
        document.getElementById('ChampGrid').append(card(name));
    }
}
function drawMissingGrid()
{
    for(var name of getMissingChamps())
    {
       document.getElementById('missingGrid').append(card(name));
    }
}
function getOrganizedNames()
{
    return names.sort(function(a, b) {
        return (a < b) ? -1 : (a > b) ? 1 : 0;
    });
}

function card(name)
{
    let champ = champs.get(name.toLowerCase());
    name = champ.name;
    let nameForURL = champ.img;
    var card = document.createElement('div');
    card.classList.add('card');
    var img = document.createElement('img');
    img.src = `https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${nameForURL}`;
    var p = document.createElement('p');
    p.textContent = `${name.toUpperCase()}`;
    p.onclick = ()=>{
            window.open(location.origin+'/champion?name='+champ.img.split('.png')[0])
        }
    p.style.cursor = 'pointer';
    let fontSize = 16;
    var textWidth = getTextWidth(p.textContent, `${fontSize}px`)
    while (textWidth>=65)
    {
        fontSize--;
        textWidth = getTextWidth(p.textContent, `${fontSize}px`)
    }
    p.style.fontSize = `${fontSize}px`;
    card.appendChild(img);
    card.appendChild(p);
    return card
};

function getTextWidth (text, size)
 {

    var span = document.getElementById('sizeTestDiv');
	if (!span) {
		span = document.createElement('span');
		span.setAttribute('style', 'display: none;');
		span.id = 'sizeTestDiv';
		document.body.appendChild(span);
	}
	span.setAttribute('style', 'position: absolute; visibiliy: hidden; display: block; color: transparent; font-size: ' + size);
	span.innerText = text;
	var width = span.offsetWidth;
	span.setAttribute('style', 'display: none;');
	return width;
}
function getMissingChamps()
{
    return Allnames.filter(item => !names.includes(item));
}