PoGO Collection Tracker, public v0.2 dropdown

late-April tweaks

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 automatically include unreleased Pokemon), 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, create backups or to copy/paste across to or from other browsers or spreadsheets.
     <p>
        By default every Gen 1, Gen 2 and Gen 3 Pokemon, collected (green), excluded (gray) or uncollected (white) will be shown, but any of these can be...

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);
  }
}


// load metadata from a JSON array of 
//  index, name, status, gen
var pokeJsonSource = "https://pogo.host/A/sync/metadata.v3.json";
var pokedexIxCol = 0;
var pokeNameCol = 1;
var pokeGenCol = 2;
var pokeIsUnreleasedCol = 9;
var pokeIsResearchOnlyCol = 10;
var pokeIsLegendaryCol = 11;
var pokeIsMythicalCol = 12;
var pokeIsRegionalCol = 13;
var pokeIsHatchOnlyCol = 14;
var pokeIsRaidOnlyCol = 15;
var pokeIsShinyAvailableCol = 16;
var pokeCanBeEvolvedFromCol = 17;
var pokeCanBeEvolvedToCol = 18;

collectedStatus = {};
pokemonMetadata = {};


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

function updateStatus(ix, newStatus) {
  localStorage.setItem("pokemonCollectionValueV3" + ix, newStatus);
  updateColorStyle(ix, newStatus);
  collectedStatus[ix] = newStatus;
}

function updateColorStyle(pokeIx, collectedStatus) {

	color = "white";
  opacity = 1;
  
  if (collectedStatus == 1) 
    color = "LightGreen";
  else if (collectedStatus == 2) {
  	if (isUnreleased(pokeIx)) { 
    	color = "#441111";
      opacity = 0.18;
      }
     else {
       opacity = 0.1;
       color = "#111111";
     }
  }
  
  $("#img" + pokeIx).css({
    "background-color": color
  });
      
    $("#img" + pokeIx).css({
        "opacity": opacity
   	});
    
}


// some testing detritus
function isProbablyMobile() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if (/windows phone/i.test(userAgent))
    return true;
  if (/android/i.test(userAgent))
    return true;
  if...