WT Record your astral captures

by gdarussian

HTML

<p>
    <h1>
        Record your astral captures
        <span class="rightAligned">            
           <input type="button" id="btnSave" value="Save" 
                  title="Save the current grid data in the browser's local storage" />
           <input type="button" id="btnLoad" value="Load"
                  title="Load a grid from the browser's local storage" />
           <input type="button" id="btnLoadAdd" value="Add Saved" style="width:100px" 
                  title="Load the stored grid and add it to the current one (you must save manually, if desired)" />
        </span>
    </h1>
    <hr />
</p>

<p>
    <table id="dataTable">
        <tr>
            <td></td>
            <td>T1</td>
            <td>T2</td>
            <td>T3</td>
            <td>T4</td>
            <td>T5</td>
        </tr>
        <tr data-row="0">
            <th>Grey</th>
            <td><input type="textbox" data-col="0" /></td>
            <td><input type="textbox" data-col="1" /></td>
            <td><input type="textbox" data-col="2" /></td>
            <td><input type="textbox" data-col="3" /></td>
            <td><input type="textbox" data-col="4" /></td>
            <td id='row0Totals'></td>
        </tr>
        <tr data-row="1">
            <th>Green</th>
            <td><input type="textbox" data-col="0" /></td>
            <td><input type="textbox" data-col="1" /></td>
            <td><input type="textbox" data-col="2" /></td>
            <td><input type="textbox" data-col="3" /></td>
            <td><input type="textbox" data-col="4" /></td>
            <td id='row1Totals'></td>
        </tr>
        <tr data-row="2">
            <th>Blue</th>
            <td><input type="textbox" data-col="0" /></td>
            <td><input type="textbox" data-col="1" /></td>
            <td><input type="textbox" data-col="2" /></td>
            <td><input type="textbox" data-col="3" /></td>
            <td><input type="textbox" data-col="4" /></td>
            <td...

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: 150px; 
}

select {
    margin: 5px;
}
input {
    width: 45px;
}
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;
}

JavaScript

// Record your astral captures

var astralCosts = 
[
    4,
    5,
    6,
    8,
    10
]
var astralSellPrice =
[
    1.2,
    3.6,
    6,
    0,
    0
]
var astralXP = 
[
    0,
    10,
    30,
    50,
    80
]
var astralPoints  =
[
    1,
    2,
    3,
    4,
    5
]
    
var totalAstrals = 0
var totalSpent = 0
var totalReturned = 0
var xpEarned = 0
var pointsEarned = 0
var ojFound = 0
var sellIndex = 0

var data = 
[
    [],
    [],
    [],
    [],
    []
]
    
var numRows = 5
var numCols = 5

function saveData()
{
    localStorage.setItem("4K4zx_Data", JSON.stringify(data))
    $('btnSave').disable()
}
function exportData()
{
    var txt = ""
    for (var row = 0; row < numRows; row++)
    {
        var rowData = data[row]
        if (!rowData) txt += "0,0,0,0,0\n"
        for (var col = 0; col < numCols; col++)
        {
            var val = rowData[col]
            txt += val
            if (col < numCols - 1)
                txt += ","
        }
        txt += "\n"
    }
    txtImport.value = txt
}
function importData()
{
    setGrid(CSVToArray($('txtImport').value))
}
function loadData()
{
    setGrid(JSON.parse(localStorage.getItem("4K4zx_Data")))
}

function loadAsAddedData()
{
    var tmpData = JSON.parse(localStorage.getItem("4K4zx_Data"))
    for (var row = 0; row < numRows; row++)
    {
        var rowData = tmpData[row]
        if (!rowData) rowData = []
        if (!data[row]) data[row] = []
        for (var col = 0; col < numCols; col++)
        {
            var val = rowData[col]
            if (val == "," || !val || val == 0) 
                continue
            val = parseInt(val)
            if (data[row][col])
                data[row][col] = parseInt(data[row][col]) + val
            else
                data[row][col] = val
        }
    }
    setGrid(data)
}
function setGrid(tmpData)
{
    var colTotals = []
    for (var row = 0; row < numRows; row++)
    {
        var rowData = tmpData[row]
        if (!rowData)
            rowData =...