Incremento asincrono abilità GDRCD

by Salvatore Rotondo

HTML

<p>
Punti disponibili <span class="skill_availablepoints">940</span>
</p>
<p>
  <span class="skill" data-skillcurvalue="3" data-skillid="1">3</span>
  <a class="skill_incr" data-skillid="1">[ + ]</a>
  <a class="skill_decr" data-skillid="1">[ - ]</a>
</p>
<p>
  <span class="skill" data-skillcurvalue="0" data-skillid="2">0</span>
  <span class="skill_incr" data-skillid="2">[ + ]</span>
  <span class="skill_decr" data-skillid="2">[ - ]</span>
</p>
<p>
  <span class="skill" data-skillcurvalue="0" data-skillid="3">0</span>
  <span class="skill_incr" data-skillid="3">[ + ]</span>
  <span class="skill_decr" data-skillid="3">[ - ]</span>
</p>
<p>
  <span class="skill" data-skillcurvalue="0" data-skillid="4">0</span>
  <span class="skill_incr" data-skillid="4">[ + ]</span>
  <span class="skill_decr" data-skillid="4">[ - ]</span>
</p>
<p>
  <span class="skill" data-skillcurvalue="0" data-skillid="5">0</span>
  <span class="skill_incr" data-skillid="5">[ + ]</span>
  <span class="skill_decr" data-skillid="5">[ - ]</span>
</p>
<p>
<button id="exportTest">Test esportazione:</button>
<span id="outputTest"></span>
</p>

CSS

.skill_incr, .skill_decr{
  cursor: pointer;
}

.skill_incr:hover, .skill_decr:hover{
  text-decoration: underline;
}

JavaScript

/**
 * gdrcdSkills
 * E' una classe javascript che permette di gestire l'incremento e il decremento multiplo di più skills in contemporanea
 * 
 * @author Blancks
 */
(function(w) {
    /* Il risultato di questa funzione determina il valore massimo raggiungibile per una skill */
    function maxSkillRank(skillContainer) {
        return 10;
    }

    /* Algoritmo di default per il calcolo del costo del punto successivo */
    function incrementCostAlgo(rank) {
        return 10*rank;
    }
  
    /* Registra le funzioni dei tastini di incremento e decremento per le skills */
    function listenerRegister(skills, incrementButtons, decrementButtons) {
        var skillid; 
      
        for (var skill of skills) {
            (function(gdrcdAsyncSkillManagement, skill) {
                skillid = skill.dataset.skillid;
                
                // Tasto incremento
                document.querySelector(skillSelectorFormat(incrementButtons.trim(), skillid))
                    .addEventListener('click', function(e) {
                        gdrcdAsyncSkillManagement.skillIncrement(skill);
                        clearSelection();
                });
                
                // Tasto decremento
                document.querySelector(skillSelectorFormat(decrementButtons.trim(), skillid))
                    .addEventListener('click', function(e) {
                        gdrcdAsyncSkillManagement.skillDecrement(skill);
                        clearSelection();
                    });
            })(this, skill);
        }
    }
    
    var eventsCallbacks = [];

    /* Classe principale per la gestione degli incrementi/decrementi delle skills */ 
    function gdrcdAsyncSkillManagement(availableContainer, skillsContainer, skillsIncrementButton, skillsDecrementButton, incrementAlgo, maxSkillRankAlgo) {
        this.pointsContainer = document.querySelector(availableContainer);
        this.skillsContainer = document.querySelectorAll(skillsContainer);
  ...