Endless Frontier - Artifacts

by gdarussian

HTML

<section>
    <h1>
        Endless Frontier - Artifacts
        <span class="rightAligned">            
           <input type="button" id="btnSave" value="Save" 
                  title="Save the current data in the browser's local storage" />
           <input type="button" id="btnLoad" value="Load"
                  title="Load data from the browser's local storage" />
        </span>
    </h1>
</section>
<!-- <section>
    <input type="button" id="btnClearLog" value="Clear" />
    <div id="debug">
    </div>
</section> -->
<section>
    <!-- <h3>Costs</h3> -->
    <table id="costsTable">
        <thead>
            <tr>
                <th>Yellow</th>
                <th>White</th>
                <th>Red</th>
                <th>Green</th>
                <th>Black</th>
                <th>Unknown</th>
                <th>Total</th>
                <th>#Honor</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="yellowCost"></td>
                <td id="whiteCost"></td>
                <td id="redCost"></td>
                <td id="greenCost"></td>
                <td id="blackCost"></td>
                <td id="unknownCost"></td>
                <td id="totalCost"></td>
                <td id="honorCost"></td>
            </tr>
        </tbody>
    </table>
</section>


<section>
    <!-- <h3>Stats</h3> -->
    <table>
        <thead>
            <tr>
                <th>Stat</th>
                <th>Additional Amount</th>
                <th>Amount Before</th>
                <th>Amount After</th>
                <th title="200% Diff would mean you can expect that stat to be twice as good after buying the selected artifacts">% Diff</th>
                <th title="Based on the formula of Original/(1+buff) found here: https://www.reddit.com/r/EndlessFrontier/comments/481b47/artifacts_limitation/">% of Original*</th>
            </tr>
        </thead>
        <tbody id="statsTable">
        </tbody>
   ...

CSS

body {
    margin: 1em;
    font-size: 85%;
    font-family: arial, helvetica, sans-serif;
}

.slider {
    width: 50;
    height: 20;
}

input[type="text"] {
    width: 10px;
    text-align: right;
}

.bad {
    color: red;
}

.good {
    color: green;
}

p {
    font-size: 1em;
    margin: 0 0 .8em 0;
}

#chkMoveMenu {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

.rightAligned {
    position: absolute;
    right: 55px;
}

.rightAligned2 {
    position: absolute;
    right: 30px;
}

.setName {
    font-style: italic;
}

html>body {
    font-size: 12px;
}

h1 {
    font-weight: bold;
    font-size: big;
}

th {
    text-align: left;
    padding: 1px 5px 0 0;
    border-bottom: 1px solid gray;
    padding: 3px;
}

td {
}

section {
    font-size: 1em;
    border: 3px solid white;
    margin: 10px 0 0 0;
    padding: 5px;
    vertical-align: middle;
    box-shadow: 0px 0px 20px 3px #d3d3d3;
    border-radius: 4px;
    background-color: #ffffff;
}

.best {
    background-color: lightcyan;
    font-weight: bold;
}

JavaScript

var sets =
[
	{	name: "5* Great General's",
		level: 5,
		items: 
		[
			{ 	name: "Hammer",
				costs: [ "red", "black" ],
				stats:
				[
					{ name: "Attack", value: 600, upgrade: 32 },
					{ name: "Quest Open Cost", value: -850, upgrade: -81 }
				]
			},
			{ 	name: "Greatsword",
				costs: [  "green", "black" ],
				stats:
				[
					{ name: "Crit Rate", value: 13.2, upgrade: 0.3 },
					{ name: "Ranged Attack", value: 650, upgrade: 50 }
				]
			},
			{ 	name: "Cloak",
				costs: [  "yellow", "black" ],
				stats:
				[
					{ name: "Dungeon Unit HP", value: -15, upgrade: -0.25 },
					{ name: "Quest Time", value: -200, upgrade: -5 }
				]
			}			
		],
		bonus:
		[
			{	numItems: 3,
				stats:
				[
					{ name: "Attack Speed", value: 5 },
					{ name: "Crit Damage", value: 500 },
					{ name: "Medals", value: 30 }
				]
			}			
		]
	},
	
	
	{	name: "5* Temple Battlemage's",
		level: 5,
		items: 
		[
			{ 	name: "Shoes",
				costs: [  "white", "black" ],
				stats:
				[
					{ name: "Revival time", value: -20, upgrade: -0.25 },
					{ name: "Unit Upgrade Cost", value: -650, upgrade: -50 }
				]
			},
			{ 	name: "Hat",
				costs: [  "yellow", "red" ],
				stats:
				[
					{ name: "Defense", value: 900, upgrade: 48 },
					{ name: "Quest Upgrade Cost", value: -650, upgrade: -50 }
				]
			},
			{ 	name: "Tunic",
				costs: [  "white", "green" ],
				stats:
				[
					{ name: "Unit HP", value: 2400, upgrade: 128 },
					{ name: "Quest Gold", value: 5500, upgrade: 470 }
				]
			}			
		],
		bonus:
		[
			{	numItems: 3,
				stats:
				[
					{ name: "Attack", value: 496 },
					{ name: "Move Speed", value: 3 },
					{ name: "Dungeon Materials", value: 30 }
				]
			}			
		]
	},
    
	{	name: "5* Heaven's",
		level: 5,
		items: 
		[
			{ 	name: "Necklace",
				costs: [  "white", "green" ],
				stats:
				[
					{ name: "Melee HP", value: 2600 },
					{ name: "Melee Defense", value: 975 }
				]
			},
		],
		bonus:
		[
			{	numItems:...