Widget:Stat Calculator

img {           width:44px; height:44px; }

input[type=button]{ background: url('https://hydra-media.cursecdn.com/arcfall.gamepedia.com/c/cf/Button.png') no-repeat; cursor:pointer; border: none; width: 94px; height: 28px; font-style: "Arial"; font-size: 12px; font-weight: bold; color : #A69C81 ; }

input[type=button]:active{ background: url('https://hydra-media.cursecdn.com/arcfall.gamepedia.com/0/00/Button_active.png') no-repeat; cursor:pointer; border: none; width: 94px; height: 28px; font-style: "Arial"; font-size: 12px; font-weight: bold; color : #A69C81 ; }

input[type=number] {            -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; margin: 0; width:44px; height:44px; text-align:center; background-color: #171512 ; font-style: "Arial"; font-size: 12px; font-weight: bold; color : #D3B76B ; border-style: solid; border-color: #4F120B #2B2725 #2B2725 #4F120B; }

#container {       height: 530; position: relative; width: 180; }       #resultCanvas {       height: 100%; width: 100%; }       #controls {       bottom: 0; left: 0; position: absolute; width: 100%; }

td#statTable { padding:0; margin:0; }       table#statTable { border-collapse: collapse; }                

const primary_stat_point   = 4; //Increase 1 primary per how many points const secondary_stat_point = 5; //Increase 1 secondary per how many points const health_per_stat_point = 10; //Increase health by 10 per point const mana_per_stat_point  = 10; //Increase mana by 10 per point const weight_per_stat_point = 10; //Increase weight by 10 per point

//Stats + Basic Stats

/*

var strength       =   0; var dexterity      =   0; var endurance      =   0; var physical       =   0; var poison_resist  =   0; var potential      =   0; var intelligence   =   0; var willpower      =   0; var fire_resist    =   0; var ice_resist     =   0;



//Basic Stats

var strength       =   15; var dexterity      =   10; var endurance      =   15; var physical       =   5; var poison_resist  =   5; var potential      =   5; var intelligence   =   5; var willpower      =   5; var fire_resist    =   5; var ice_resist     =   5;

//Skill List and their variables | null means not implemented

var alchemy        = [0,"int"]; var archery        = [0,"dex","end"]; var blacksmithing  = [0,"str","dex"]; var bowmaking      = [0, null]; var carpentry      = [0,"end"]; var cartography    = [0,"pot"]; var cooking        = [0,"pot","will"]; var farming        = [0,"str"]; var fishing        = [0,"pot"]; var fletching      = [0, null]; var gathering      = [0, null]; var healing        = [0,"end","int"]; var hewing         = [0,"str","dex"]; var leather_works  = [0,"str","pot"]; var lockpicking    = [0, null]; var lumberjack     = [0,"end","dex"]; var magery         = [0,"int","will"]; var mining         = [0,"str","end"]; var refining       = [0,"dex"]; var skinning       = [0, null]; var stealing       = [0, null]; var swordsmanship  = [0,"str","end"]; var tailoring      = [0,"pot","int"]; var tinkering      = [0, null];

var skillArray = [ alchemy , archery , blacksmithing , bowmaking , carpentry , cartography , cooking , farming , fishing , fletching , gathering , healing , hewing , leather_works , lockpicking , lumberjack , magery , mining , refining , skinning , stealing , swordsmanship , tailoring , tinkering ];

var health         = 20; // Default health is 20 not counting the default stats var mana           = 20; // Default mana is 20 not counting the default stats var weight         = 20; // Default weight is 20 not counting the default stats var total_points   = 0;  // Total skills points added up

const statusImageSource = "https://hydra-media.cursecdn.com/arcfall.gamepedia.com/e/ea/Statpage.png"; const resultImage      = "https://hydra-media.cursecdn.com/arcfall.gamepedia.com/d/d9/Result_border_v3.png";

function setStats {

//Set basic stats

strength       =   15; dexterity      =   10; endurance      =   15; physical       =   5; poison_resist  =   5; potential      =   5; intelligence   =   5; willpower      =   5; fire_resist    =   5; ice_resist     =   5;

health         =   20; mana           =   20; weight         =   20;

//Get stats from fields

alchemy[0]            =   document.getElementById("alchemy").value; archery[0]            =   document.getElementById("archery").value; blacksmithing[0]      =   document.getElementById("blacksmithing").value; bowmaking[0]          =   document.getElementById("bowmaking").value; carpentry[0]          =   document.getElementById("carpentry").value; cartography[0]        =   document.getElementById("cartography").value; cooking[0]            =   document.getElementById("cooking").value; farming[0]            =   document.getElementById("farming").value; fishing[0]            =   document.getElementById("fishing").value; fletching[0]          =   document.getElementById("fletching").value; gathering[0]          =   document.getElementById("gathering").value; healing[0]            =   document.getElementById("healing").value; hewing[0]             =   document.getElementById("hewing").value; leather_works[0]      =   document.getElementById("leather_works").value; lockpicking[0]        =   document.getElementById("lockpicking").value; lumberjack[0]         =   document.getElementById("lumberjack").value; magery[0]             =   document.getElementById("magery").value; mining[0]             =   document.getElementById("mining").value; refining[0]           =   document.getElementById("refining").value; skinning[0]           =   document.getElementById("skinning").value; stealing[0]           =   document.getElementById("stealing").value; swordsmanship[0]      =   document.getElementById("swordsmanship").value; tailoring[0]          =   document.getElementById("tailoring").value; tinkering[0]          =   document.getElementById("tinkering").value; }

function calcStats {       for (i = 0; i < skillArray.length; i++) {       var skill = skillArray[i]; if (skill[1] != null) {           switch(skill[1]) {               case "str": strength += Math.floor(skill[0] / primary_stat_point); break;

case "dex": dexterity += Math.floor(skill[0] / primary_stat_point); break;

case "end": endurance += Math.floor(skill[0] / primary_stat_point); break;

case "pot": potential += Math.floor(skill[0] / primary_stat_point); break;

case "int": intelligence += Math.floor(skill[0] / primary_stat_point); break;

case "will": willpower += Math.floor(skill[0] / primary_stat_point); break; }           if (skill[2] != null) {               switch(skill[2]) {                   case "str": strength += Math.floor(skill[0] / secondary_stat_point); break;

case "dex": dexterity += Math.floor(skill[0] / secondary_stat_point); break;

case "end": endurance += Math.floor(skill[0] / secondary_stat_point); break;

case "pot": potential += Math.floor(skill[0] / secondary_stat_point); break;

case "int": intelligence += Math.floor(skill[0] / secondary_stat_point); break;

case "will": willpower += Math.floor(skill[0] / secondary_stat_point); break; }           }        }    }

//calculate health / mana / weight

health += (endurance * health_per_stat_point); mana   += ((intelligence + willpower) * mana_per_stat_point); weight += (strength * weight_per_stat_point);

total_points = 0;

for (i = 0; i < skillArray.length; i++) {       var skill = skillArray[i]; total_points += parseInt(skill[0]); } }

var statCanvas     = document.getElementById("statCanvas"); var resultCanvas   = document.getElementById("resultCanvas"); var statBackground; var resultBackground;

function drawStats(choice, canvas) {   switch(choice) {       case "statCanvas": /*           console.log("Strength: "        + strength); console.log("Dexterity: "      + dexterity); console.log("Endurance: "      + endurance); console.log("Physical: "       + physical); console.log("Poison Resist: "  + poison_resist); console.log("Potential: "      + potential); console.log("Intelligence: "   + intelligence); console.log("Willpower: "      + willpower); console.log("Fire Resist: "    + fire_resist); console.log("Ice Resist: "     + ice_resist); */

var statContext            = canvas.getContext("2d"); statContext.fillStyle      = "#D3B76B"; statContext.font           = "Bold 15px Arial";

//Draw Text

statContext.fillText(strength,131,426); statContext.fillText(dexterity,131,446); statContext.fillText(endurance,131,465); statContext.fillText(physical,131,487); statContext.fillText(poison_resist,131,507);

statContext.fillText(potential,319,426); statContext.fillText(intelligence,319,446); statContext.fillText(willpower,319,465); statContext.fillText(fire_resist,319,487); statContext.fillText(ice_resist,319,507); break;

case "resultCanvas": var resultContext            = canvas.getContext("2d"); resultContext.fillStyle      = "#A69C81"; resultContext.font           = "Bold 15px Arial";

//Draw Health and Mana resultContext.fillStyle      = "#A69C81";

resultContext.fillText("Health:",26,33); resultContext.fillText("Mana:",26,53); resultContext.fillText("Weight:",26,73); resultContext.fillText("Used Points:",26,93);

resultContext.fillStyle      = "#D3B76B";

resultContext.fillText(health,126,33); resultContext.fillText(mana,126,53); resultContext.fillText(weight,126,73); resultContext.fillText(total_points,126,93); break;

case "calculate": var resultContext            = resultCanvas.getContext("2d"); var statContext              = statCanvas.getContext("2d"); resultContext.clearRect(0, 0, resultCanvas.width, resultCanvas.height); statContext.clearRect(0, 0, statCanvas.width, statCanvas.height); statContext.drawImage(statBackground,0,0); resultContext.drawImage(resultBackground,0,0); drawStats("statCanvas", statCanvas); drawStats("resultCanvas", resultCanvas); break; } }

function calculate {   setStats; calcStats; drawStats("calculate"); }

window.onload = function(e) {     var statContext         = statCanvas.getContext("2d"); var resultContext      = resultCanvas.getContext("2d"); statBackground         = new Image; resultBackground       = new Image; statBackground.src     = statusImageSource; resultBackground.src   = resultImage;

setStats; calcStats;

statBackground.onload  = function {       statContext.drawImage(statBackground,0,0); drawStats("statCanvas",statCanvas); }   resultBackground.onload = function {       resultContext.drawImage(resultBackground,0,0); drawStats("resultCanvas",resultCanvas); }   };