DELME Level 1 Collection Tracker, public v0.1

alt images

by yairamon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript">
  (function($) {
    $(function() {
      $("#accordion > div").accordion({
        header: "h3",
        collapsible: true
      });
    })
  })(jQuery);

</script>


<center>
  <h1 style="font-family:arial;">Level 1.0 Pokemon Collection</h1>
</center>

<div id="accordion">
  <div id="about">
    <h3><a href="#">About</a></h3>
    <div>
      This is a simple tool to track and visualize your Level 1.0 Pokemon GO collection.
      <p>
        <p>
          Just click on a Pokemon to indicate that it's been collected and its background will turn green. If something's in green that shouldn't be just click it again! The collection will even be saved locally on your browser so it's easy to revisit and update,
          and you can also use the Import or Export tools to, for example, copy/paste with spreadsheets.
        </p>

        By default every Gen 1 to Gen 3 Pokemon, collected or uncollected, will be shown, with "unattainable" Pokemon not available to catch or evolve to Level 1.0 shown but grayed out. Any of these can be hidden with the checkboxes under Settings so you can
        focus on, for example, only what you have or only what you're missing for a specific generation.
      </p>

    </div>
  </div>
  <div id="settings">
    <h3><a href="#">Settings</a></h3>
    <div>
      Show:
      <input type='checkbox' id='chk1' name='unused' value='unused' checked="true"> Gen 1
      </input>
      <input type='checkbox' id='chk2' name='unused' value='unused' checked="true"> Gen 2
      </input>
      <input type='checkbox' id='chk3' name='unused' value='unused' checked="true"> Gen 3
      </input>
      <p>

        Include: <input...

CSS

html,
body {
  width: 100%;
  height: 100%;
}

form {
  margin: 20px 0;
}

form input,
button {
  padding: 5px;
}

table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid #cdcdcd;
}

table th,
table td {
  padding: 10px;
  text-align: left;
}

#scroller {
  border: 1px solid gray;
  height: 60%;
  width: 98%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.gridSmall {
  display: grid;
  grid-gap: 0px;
  width: 100%;
  grid-template-columns: repeat(auto-fill, 27px);
}

.gridLarge {
  display: grid;
  grid-gap: 0px;
  width: 100%;
  grid-template-columns: repeat(auto-fill, 80px);
}

/*
a {
  background: green;
  color: #eee;
  padding: 5px 10px;
}
*/

.button {
  background-color: SlateGray;
  border: none;
  color: white;
  padding: 12px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 5px;
  margin: 1px 1px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 25px;
}

JavaScript

// includes for jQuery and jQuery UI
// includes for dom-to-image, html2canvas and FileSaver for the downloads

// ui tweakscat .
// setup the accordion
function collapseAccordions() {
  try {
    $("#about").accordion('option', 'active', 1);
    $("#settings").accordion('option', 'active', 1);
    $("#tools").accordion('option', 'active', 1);
  } catch (ex) {
    alert(ex);
  }
}


// general setup
var id = "1xCqAxBKNXHuATDgMmnstus8bOfdW_aUeHT4BJ-DuD-M";
var url = 'https://spreadsheets.google.com/feeds/cells/' + id + '/1/public/values?alt=json-in-script&callback=?';


$.getJSON(url, cellEntries);

function cellEntries(json) {
  var data = json.feed.entry;

  var allData = [];
  var rowData = [];
  var row = 0;

  for (var i = 0; i < data.length; i++) {
    var cell = data[i]["gs$cell"];

    if (cell.col == 1) {
      if (++row > 1) {
        allData.push(rowData);
        rowData = [];
      }
    }

    var val = cell["$t"];
    rowData.push(val);

  }

  allData.push(rowData);

  pokemonMetadata = allData;
  show(allData);
}


collectedStatus = {};
pokemonMetadata = {}

function show(allData) {

  // FIXME use headers instead of hard-coding,,,

  for (i = 1; i < allData.length; i++) {

    var pokeName = allData[i][1];
    var pokeAvailability = allData[i][8];
    var pokeStatus = allData[i][9];
    var notApplicable = (pokeStatus === "n/a");
    var pokeGen = allData[i][11];

    if (notApplicable)
      collectedStatus[i] = collected;
    else {
      savedVal = localStorage.getItem("pokemonUserValue" + i);
      collected = (savedVal != null) ?
        parseInt(savedVal) :
        0;

      collectedStatus[i] = collected;
    }


    imagePath = "https://pogo.host/A/resources/imageSet1/" + i + ".png";

    $('#graphs').append(
      "<div id ='pokeBox" + i + "'> " +
      "<img id='img" + i + "' 	src=' " + imagePath +
      "' style='width:27px;height:27px;' title='\n" + i + " " + pokeName + "'>");


    if (pokeStatus === "n/a") {
      $("#img" +...