MediaWiki:Gadget-SkillForm.js

var SkillData = {};

RLQ.push(function () {
  $(document).ready(function() {
    var skillforms = $('.skillform');
    if (skillforms.length > 0) {
      // New way
      skillforms.each(function(idx, element) {
        initSkillForm(element);
        $(element).find('.tabButtonLane button').last().click();
      });
    } else if (document.getElementById("skill_calculator")) {
      // Old way
      $.get("/index.php?title=" + mw.config.get("wgPageName") +"/skilldata&action=raw", function( data, textStatus, jqxhr ) {
        build_skill_form(data);
      });	
    }
  });
});

function initSkillForm(element) {
  var skillform = $(element);
  var tabs = skillform.find('.tabButtonLane button');
  
  tabs.click(function(evt) {
    skillformButtonHandler(evt.target);
  });
}

function skillformButtonHandler(element) {
  var currentButton = $(element);
  var skillform = currentButton.closest('.skillform');
  var tdoll = mw.config.get("wgPageName"); //skillform.data('tdollId'); // For debugging, pagename
  var skillId = "skilldata";
  
  // ToDo: Maybe another way to get a nice name?
  var skillname = currentButton.text();
  if (skillname.length > 0 && skillname[skillname.length-1] == "2") {
    skillId = skillId + "2";
  }
  
  skillform.addClass("loading");
  
  var successHandler = function(data, textStatus, jqxhr) {
    console.log("successHandler", data, textStatus, jqxhr);
    skillform.removeClass("loading");
    
    skillform.find('.tabButtonLane button').removeClass('tabButton-active');
    currentButton.addClass('tabButton-active');
    
    build_skill_form(data);
  };
  
  var failureHandler = function(jqXHR, textStatus, errorThrown) {
    skillform.removeClass("loading");
    console.log("failureHandler", jqXHR, textStatus, errorThrown);
  };
  
  var url = "/index.php?title=" + tdoll +"/" + skillId + "&action=raw";
  $.ajax({
    url: url,
    success: successHandler,
    error: failureHandler,
    dataType: "text"
  });
}

function get_skill_data(pagedata) {
	skill_data = {};
	var key;
	$.each(pagedata.split("\n"), function(index, value) {
		if (value.charAt(0) == "!") {
			key = value.substring(1).trim();
		} else if (value.charAt(0) == "|" && value.charAt(1) !== "-" && value.charAt(1) !== "}") {
			if (key == "initial" || key == "text")
				skill_data[key] = value.substring(value.lastIndexOf("|") + 1).trim();
			else
				skill_data[key] = $.map(value.substring(1).split("||"), $.trim); 
		}
	});
	return skill_data;
} 

function build_skill_form(data) {
    skill_data = get_skill_data(data);

    if (skill_data.text) {
        var skillDataContainer = $('#skill_calculator');
        var skillName = $(".skillname, #skill_calculator~table td[colspan=2]").text();
        var oldimg = $('#skill_calculator~table .center>.floatnone>img, #skill_calculator img');
        
        var parent = skillDataContainer.parent();
        parent.empty();
        parent.append(skillDataContainer);
        
        // Now let's build up the view
        skillDataContainer.empty();
        
        // var skillDataContainer = $('<div></div>');
        // calculator_element.prop('id', 'skill_calculator');
        skillDataContainer.css('position', 'absolute');
        skillDataContainer.css('display', 'flex'); 
        skillDataContainer.css('flex-direction', 'column'); 
        skillDataContainer.css('top', '0'); 
        skillDataContainer.css('bottom', '0');
        // skillDataContainer.append(skillDataContainer);
        
        var table = $('<table></table>');
        table.prop('cellspacing', '5');
        table.css('margin-top', '10px');
        skillDataContainer.append(table);
        
        var rowFirst = $('<tr></tr>');
        table.append(rowFirst);
        
        var headCell1 = $('<td></td>');
        headCell1.prop('rowspan', 2);
        headCell1.css('background', 'rgba(128, 128, 128, 0)');
        headCell1.css('width', '52px');
        headCell1.css('height', '52px');
        headCell1.append(oldimg);
        rowFirst.append(headCell1);
        
        var headCell2 = $('<td></td>');
        headCell2.prop('colspan', 2);
        headCell2.css('background', 'rgba(255, 255, 255, 0.25)');
        headCell2.css('min-width', '300px');
        headCell2.addClass('skillname');
        headCell2.text(skillName);
        rowFirst.append(headCell2);
        
        var rowSecond = $('<tr></tr>');
        table.append(rowSecond);
        
        var cellData = $('<td></td>');
        cellData.css('width', '60px');
        rowSecond.append(cellData);

        var levelSelector = $('<select></select>');
        levelSelector.addClass('skill');
        levelSelector.prop('id', 'skill_level');
        levelSelector.change(function() { display_data(data); });
        if (skill_data.hasOwnProperty('cost')) {
          if (skill_data.hasOwnProperty('cooldown')) levelSelector.css('background-color', '#739ee7');
          else levelSelector.css('background-color', '#f76529');
        }
        cellData.append(levelSelector);

        var idx = 0;
        for (idx=0; idx<10; idx++) {
          var opt = $('<option></option>');
          opt.text('Lv. ' + (idx+1));
          opt.attr('value', idx);
          if (idx == 9) opt.prop('selected', true);
          levelSelector.append(opt);
        }

        var cooldownCell = $('<td></td>');
        cooldownCell.prop('id', 'cooldown');
        rowSecond.append(cooldownCell);
        
        var rowThird = $('<tr></tr>');
        table.append(rowThird);

        var cellDesc = $('<td></td>');
        cellDesc.prop('colspan', 3);
        rowThird.append(cellDesc);
        
        var description = $('<p></p>');
        description.css('overflow-y', 'auto');
        description.prop('id', 'description');
        skillDataContainer.append(description);
        
        display_data(data);
    }
}
 
function display_data(skillDataRaw) {
    data = get_skill_data(skillDataRaw);

    if (data !== null) {
        index = document.getElementById("skill_level").value;
        regex = /\(\$\w+\)/g;
        formatted_text = data.text;
        vars = data.text.match(regex);
        for (i = 0; i < vars.length; i++) {
            var_name = vars[i].substring(2, vars[i].length - 1);
            formatted_text = formatted_text.replace(
                vars[i],
                data[var_name][index]);
        }
        if (data.hasOwnProperty('cost')) {
        	if (data.hasOwnProperty('cooldown')) {
	        	cooldownText = '<td id="cooldown" style="color:rgba(115, 158, 231, 1)">' + data.cost + ' support point(s) per use';
	    		cooldownText += ', ' + data.cooldown + ' turn cooldown';
    		} else {
	        	cooldownText = '<td id="cooldown" style="color:rgba(247, 101, 41, 1)">' + data.cost + ' support point(s) per use';
        	}
        	cooldownText += '</td>';
	        document.getElementById("cooldown").outerHTML = cooldownText;
        } else if (data.hasOwnProperty('cooldown')) {
        	cooldownText = '<td id="cooldown" style="color:rgba(255, 182, 0, 1)">' + data.cooldown[index] + 's cooldown';
        	if (data.hasOwnProperty('initial')) {
        		cooldownText += ', ' + data.initial + 's initial cooldown';
        	}
        	cooldownText += '</td>';
	        document.getElementById("cooldown").outerHTML = cooldownText;
        } else if (data.hasOwnProperty('activation')) {
	        document.getElementById("cooldown").outerHTML =
	            '<td id="cooldown" style="color:rgba(255, 182, 0, 1)">' + data.activation[index] + '% chance to activate</td>';
        } else {
        	document.getElementById("cooldown").outerHTML =
	            '<td id="cooldown" style="color:rgba(255, 182, 0, 1)">Passive</td>';
        }
        document.getElementById("description").outerHTML =
            '<p id="description">' + formatted_text + '</p>';
    }
}