champs/public/scripts/champion.js

var elements =
{
    name:document.getElementById('name'),
    title:document.getElementById('title'),
    championImage:document.getElementById('champion'),
    chroma:document.getElementById('chroma'),
    P:document.getElementById('P'),
    Q:document.getElementById('Q'),
    W:document.getElementById('W'),
    E:document.getElementById('E'),
    R:document.getElementById('R'),
    spellName:document.getElementById('spellName'),
    description:document.getElementById('description'),
    lore:document.getElementById('lore')
}
var version = 0;
var champCache = '';
var currentSkin = 0;
var champName =''
window.onload = ()=>
{
    champName = new URL(location.href).searchParams.get('name');
    if(isMobile()) handleMobile();
    document.getElementById('previous').onclick = previousSkin;
    document.getElementById('next').onclick = nextSkin;
    document.getElementById('P').onclick = ability;
    document.getElementById('Q').onclick = ability;
    document.getElementById('W').onclick = ability;
    document.getElementById('E').onclick = ability;
    document.getElementById('R').onclick = ability;
    getVersion().then(v=>
        {
            version = v;
            let listURL = `https://ddragon.leagueoflegends.com/cdn/${version}/data/en_US/champion/${champName}.json`;
            fetch(listURL)
                .then(response=>
                    {
                        return response.json().then(
                            json=>
                            {
                                return response.ok? json:Promise.reject(json);
                            }
                        )
                    })
                .then(data=>
                    {
                        return data.data[`${Object.keys(data.data)[0]}`];
                    })
                .catch(error=>{return error})
                .then(champ=>
                    {
                        champCache = champ;
                        elements.name.textContent = champ.name; 
                        elements.title.textContent = champ.title; 
                        let fontSize =32;
                        var textWidth = getTextWidth(champ.title, `${fontSize}px`)
                        while (textWidth>=window.innerWidth)
                        {
                            fontSize--;
                            textWidth = getTextWidth(champ.title, `${fontSize}px`)
                        }
                        elements.title.style.fontSize = `${fontSize}px`;                   
                        elements.lore.textContent = champ.lore;
                        elements.description.textContent = getClearDescriptionText(champ.passive.description);
                        elements.championImage.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champ.id}_${champ.skins[currentSkin].num}.jpg)`;
                        document.getElementsByTagName('body')[0].style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champ.id}_${champ.skins[currentSkin].num}.jpg)`;
                        elements.P.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/passive/${champ.passive.image.full})`;
                        elements.P.classList.add('active');
                        elements.spellName.textContent = champ.passive.name;
                        elements.Q.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/spell/${champ.spells[0].id}.png )`;
                        elements.W.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/spell/${champ.spells[1].id}.png )`;
                        elements.E.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/spell/${champ.spells[2].id}.png )`;
                        elements.R.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/spell/${champ.spells[3].id}.png )`;
                    })
            });
}

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 previousSkin ()
{
    currentSkin--;
    if(currentSkin==-1) currentSkin = champCache.skins.length-1;
    showSkin();

}
function nextSkin ()
{
    currentSkin++;
    if(currentSkin==champCache.skins.length) currentSkin = 0;
    showSkin();
}
function showSkin()
{
    console.log(currentSkin)
    elements.championImage.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champCache.id}_${champCache.skins[currentSkin].num}.jpg)`;
    document.getElementsByTagName('body')[0].style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champCache.id}_${champCache.skins[currentSkin].num}.jpg)`;
    elements.chroma.classList.add('hidden');
    if(champCache.skins[currentSkin].chromas) elements.chroma.classList.remove('hidden');
}
function ability()
{
    var element = this;
    document.getElementsByClassName('active')[0].classList.remove('active');
    element.classList.add('active');
    if(element.id=='P') 
    {
        console.log(champCache.passive)
        elements.spellName.textContent = champCache.passive.name;
        elements.description.textContent =getClearDescriptionText(champCache.passive.description);
        return
    }
    for(var spell of champCache.spells)
    {
        if(spell.id == champName+element.id) 
        {
            elements.spellName.textContent = spell.name;
            elements.description.textContent =getClearDescriptionText(spell.description);
        }
    }

}

function getClearDescriptionText(text)
{
    return new DOMParser().parseFromString(text, "text/html").getElementsByTagName('body')[0].textContent;
}

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 isMobile()
{
    return window.innerWidth<innerHeight;
}
function handleMobile()
{
    var elements_ = document.getElementsByClassName('desktop');
    for(var element of elements_)
    {
        console.log(element)
        element.classList.remove('desktop');
        element.classList.add('mobile')
    }
}