WT Skill vs Astral Comparison

by gdarussian

HTML

<p>
    <h1>
        Skill vs Astral Comparison
    </h1>
    <hr />
</p>

<p>
    <label>Skill:</label>
    <select id="skillType" size="1" onChange="calc()">
        <option value="0" selected="selected">Attack</option>
        <option value="1">Defense</option>
        <option value="2">Stamina</option>
        <option value="3">Charisma</option>
    </select>
</p>

<p>
    <label>Level:</label>
    <select id="skillLevel" size="1" onChange="calc()">
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
        <option value="3">4</option>
        <option value="4">5</option>
        <option value="5">6</option>
        <option value="6">7</option>
        <option value="7">8</option>
        <option value="8" selected="selected">9</option>
    </select>
</p>

<p>
    <label></label>
    <input type="radio" checked="checked" name="g1" id="rdoAtkOnly" style="width: 12px" />
    Include only attack points in attack skill calculation
</p>

<p>
    <label></label>
    <input type="radio" name="g1" id="rdoAtkAndDef" style="width: 12px" />
    Include both attack and defense points in attack skill calculation
</p>
<p>
    <label></label>
    <input type="radio" name="g1" id="rdoDefOnly" style="width: 12px" />
    Include only defense points in attack skill calculation
</p>
<p>
    <label></label>vs.
</p>

<p>
    <label>Astral:</label>
    <select id="astralType" size="1" onChange="calc()">
        <option value="0">Green</option>
        <option value="1">Blue</option>
        <option value="2">Purple</option>
        <option value="3" selected="selected">Orange</option>
    </select>
</p>

<p>
    <label>Current Level:</label>
    <select id="astralLevel" size="1" onChange="calc()">
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
        <option value="3" selected="selected">4</option>
        <option value="4">5</option>
        <option...

CSS

body { 
    margin: 1em; 
    font-size: 85%;
}

* {
    font-family:arial, helvetica, sans-serif;
    margin:0;
    padding:0;
}

p {
    font-size:1em;
    margin: 0 0 .8em 0;
}
.rightAligned {
    position:absolute;
    right: 55px;
}

.result {
    font-weight: bold;
    font-size: 100%;
}

.stoneColor0 { color: black; }
.stoneColor1 { color: black; }
.stoneColor2 { color: green; }
.stoneColor3 { color: deepskyblue; }
.stoneColor4 { color: lightgreen; }
.stoneColor5 { color: blue; }
.stoneColor6 { color: red; }
.stoneColor7 { color: violet; }
.stoneColor8 { color: orange; }
.stoneColor9 { color: fuchsia; }

table {
    margin: 1em 0 0 0;
}

html>body {
    font-size: 12px;
}
h1 {
    font-weight: bold;
    font-size: big;
    margin: 0 1em 1em 0;
}

label {
    display: inline-block; 
    width: 85px; 
}

select {
    width: 100px;
}
input {
    width: 100px;
}
th {
    text-align: right;
    padding: 1px 5px 0 0;
}
td {
    padding: 1px 5px 0 0;
}


.button {
    width: 80px;
}

.sectionStart {
    border-style: solid;
    border-color: grey;
    border-width: 1px 0 0 0;
    padding: 8px 5px 0 0px;
}
.mainResults {
    font-size: 1.2em;
    margin: 0 0 5px 0;
}

JavaScript

// Skill vs Astral Comparison

var baseXP = [
    [ 50, 200, 600 ],
    [ 70, 500, 1400 ],
    [ 100, 600, 3000 ],
    [ 150, 1000, 7200 ],
]
    
var baseStats = [
    [ 72, 108, 144, 216 ],
    [ 72, 108, 144, 216 ],
    [ 200, 300, 400, 500 ],
    [ 12, 18, 24, 36 ]
]

var skillNames = [
    "Attack",
    "Defense",
    "HP",
    "Charisma"
]
var skillCosts = [ 200, 500, 1000, 2000, 3000, 4000, 5000, 6000, 8000 ]
var skillStats = [
    160,
    320,
    800,
    20,
]
    
var astralFmt="Astral cost is {0}k to get an extra {1} {2}, which is {3}k per stat point"
var skillFmt="Skill cost is {0}k to get an extra {1}, which is {2}k per stat point"
var resultFmt = "Leveling the <span class='result'>{0}</span> is a better choice"
    
function calc()
{
    var skillType = parseInt($('skillType').value)
    var skillLevel = parseInt($('skillLevel').value)
    var astralType = parseInt($('astralType').value)
    var astralLevel = parseInt($('astralLevel').value)
    var astralXP = parseInt($('astralXP').value)
    var goldPerXP = parseInt($('goldPerXP').value)
    if (!goldPerXP)
        return
    
    var xpToLevel = GetXPToLevel(astralType, astralLevel, astralXP)
    var goldToLevelAstral = goldPerXP * xpToLevel / 1000
    var goldToLevelSkill = skillCosts[skillLevel]
    var currentAstralStat = GetAstralStatValue(skillType, astralType, astralLevel)
    var nextAstralStat = GetAstralStatValue(skillType, astralType, astralLevel + 1)
    var astralStatDiff = nextAstralStat - currentAstralStat
    var astralCostPerStat = goldToLevelAstral / astralStatDiff
    var skillName = skillNames[skillType]
    var skillStatDiff = skillStats[skillType]
    var extraSkillResult = ""
    if (skillType == 0)
    {
        if ($('rdoAtkAndDef').checked)
        {
            extraSkillResult = "160 attack and 40 defense"
            skillStatDiff = 200
        }
        else if ($('rdoDefOnly').checked)
        {
            extraSkillResult = "40 defense"
            skillStatDiff...