PoGO 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>


 <input type="button"  title="show top" class="flipButton" id="btnShowTop" style="position:absolute;top:18px;left:18px;display:none;" value="&#9658"></input>

<div id="topPanel">
<center>
 <h1 style="font-family:arial;">
 <input type="button"  title="maximize display area" class="flipButton" id="btnHideTop"  value="&#9660"></input>

  Pokemon Collection Tracker</h1>
</center>

<div id="accordion">
  <div id="about">
    <h3><a href="#">About</a></h3>
    <div>
      This is a simple tool to help track and visualize progress on Pokemon GO collections for objectives such as overall completion, or maintaining a "living dex", or collecting Level 1.0s, or Level 40.0s, or shinies, or 100% IV perfects, or 0%s, etc.
      <p>
 Click on Pokemon to mark them as "collected" (with a green background), "excluded" from collection goals (with a gray background; these include unreleased Pokemon or others such as regionals to exclude), or back to "uncollected" (with a white background).
      <p>
These settings can also be quickly edited using tools under "Collection Settings"
      <p>
      </p>
      Your collection data will be saved locally on your browser so it's easy to revisit and update, and you can also use the Import or Export Additional Tools to, for example, copy/paste to/from other browsers or spreadsheets.
     <p>
        By default every Gen 1 to Gen 3 Pokemon, collected (green), excluded (gray) or uncollected (white) will be shown, but any of these can be hidden with the...

CSS

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

form {
  margin: 20px 0;
}

form input,
button {
  padding: 1px;
}

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: 96%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.scrollerMax {
  position: relative;
  top: 55px; 
  border: 1px solid gray;
  height: 90%;
  width: 96%;
  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: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;;
  margin: 1px 1px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 12px;
}


.flipButton {
  position: relative;
  top: -10px; 
  
  background-color: lightgray;
  border: none;
  color: SlateGray;
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 1px 1px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 12px;
}

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);
    $("#relevants").accordion('option', 'active', 1);
    $("#settings").accordion('option', 'active', 1);
    $("#tools").accordion('option', 'active', 1);
  } catch (ex) {
    alert(ex);
  }
}


// metadata from a JSON array of 
//  index, name, status, gen
var pokeJsonSource = "https://pogo.host/A/sync/pokemon.json";
var pokedexIxCol = 0;
var pokeNameCol = 1;
var pokeStatusCol = 2;
var pokeGenCol = 3;

collectedStatus = {};
pokemonMetadata = {};





function isUnreleased(pokeStatus) {
 	return (pokeStatus === "Unreleased");
}



$.getJSON(pokeJsonSource, function (json) {
  pokemonMetadata = json;
  show(json);
});


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

    var pokeName = allData[i][pokeNameCol];
    var pokeStatus = allData[i][pokeStatusCol];
    let notReleased = isUnreleased(pokeStatus);
    var pokeGen = allData[i][pokeGenCol];

    if (notReleased)
      collectedStatus[i] = 2;
    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 + "'>");

    updateColorStyle(i,  collectedStatus[i]);

    let ix = i;
    $('#img' + i).click(function() {
     if (notReleased) return;
     
      newStatus = (collectedStatus[ix] + 1) % 3;
      updateStatus(ix, newStatus);
      updateSummaryLabel();
    })
  }

  updateDisplay();
  collapseAccordions();
}


function updateStatus(ix, newStatus) {
 ...