PoGO Collection Tracker

Sept 23 19, added gen 5 etc.

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 Catch Visualizer</h1>
</center>

<div id="accordion">
  <div id="about">
    <h3><a href="#">About</a></h3>
    <div>
      This is a quick throwaway derived from a personal collection tracker.
    </div>
  </div>

  <div id="relevants">
    <h3><a href="#">Collectiom Settings</a></h3>
      <textarea id=inputTxt rows=20></textarea>
      
    <div>
Mark      
    <select id="setWho">
      <option value="everything">everything</option>
      <option value="notExcluded">non-excluded</option>
      <option value="gen1">gen 1</option>
      <option value="gen2">gen 2</option>
      <option value="gen3">gen 3</option>
      <option value="gen4">gen 4</option>
      <option value="gen5">gen 5</option>
      <option value="legendary">legendary</option>
      <option value="level1Avail">level 1.0 available</option>
      <option value="shinyAvail">shiny available</option>
      <option value="regional">regional</option>
      <option value="researchOnly">research only</option>
      <option value="baseEvolve">base evolve</option>
      <option value="middleEvolve">middle evolve</option>
      <option value="finalEvolve">final evolve</option>
 ...

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

function getImagePath(i, pokeName)
{
			// previously used images for gen 1 to gen 4
     imagePath = "https://pogo.host/A/sync/IMAGETEMP/" + i + ".png";
    
    	// awful hack for meltan and melmetal...
      if (pokeName == "Meltan") imagePath = "https://pogo.host/A/sync/IMAGETEMP/" + 494 + ".png";
      if (pokeName == "Melmetal") imagePath = "https://pogo.host/A/sync/IMAGETEMP/" + 495 + ".png";
      
     
     //  switching to pokemon DB for new gen 5.. and maybe gen 2-3
     if (i>=251 && pokeName != "Meltan" && pokeName != "Melmetal")
     {
	     	dbName = pokeName.toLowerCase();
      
      	if (i == 439) dbName = "mime-jr";
        
    //    imagePath =  "https://img.pokemondb.net/sprites/x-y/normal/" +  dbName + ".png";
     		imagePath = "https://pogo.host/A/sync/ImageXY/" +  dbName + ".png";
     }
     
     return imagePath;

/*
    imagePath = "https://pogo.host/A/resources/imageSet0/" + i + ".png";
    imagePath = "https://pogo.host/A/sync/IMAGETEMP/" + i + ".png";
	

       imagePath = "https://pldh.net/media/pokemon/ken_sugimori/update1/" + i + ".png";

    prefix = i + "_00";
    if (i < 10) prefix = "00" + i + "_00";
    else if (i < 100) prefix = "0" + i + "_00";

   prefix = i;
    if (i < 10) prefix = "00" + i;
    else if (i < 100) prefix = "0" + i;

       imagePath = "https://pldh.net/media/pokemon/ken_sugimori/update1/" + prefix + ".png";  

    imagePath = "https://pogo.host/A/resources/imageSet2/" + prefix + ".png";
    */
/*
   if (i > 386) 
	  imagePath = "https://raw.githubusercontent.com/ZeChrales/PogoAssets/master/pokemon_icons/pokemon_icon_"  + prefix + ".png";
  */

}


// 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);
   ...