PoGO Collection Tracker, interim v0.4

May 2019, pin Jquery

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>



 <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 to Gen 4 Pokemon, collected (green), excluded (gray) or uncollected (white) will be shown, but any of these can be hidden with the checkboxes under Display Settings so you can focus on, for example, only what you have or only what you're missing for a specific generation.
    </div>
  </div>

  <div id="relevants">
   ...

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

$(document).load(function(){
  return;
  
  
 (function($) {
    $(function() {
    debugger;
    
      $("#accordion > div").accordion({
        header: "h3",
        collapsible: true
      });
    })
  })(jQuery);
  
  
// 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 {
  debugger;
    $("#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.v4.json";
var pokedexIxCol = 0;
var pokeNameCol = 1;
var pokeGenCol = 2;

var pokeIsUnreleasedCol = 6;

var pokeIsLegendaryCol = 8;
var pokeIsMythicalCol = 9;
var pokeIsRegionalCol = 10;
var pokeIsHatchOnlyCol = 11;
var pokeIsRaidOnlyCol = 12;
var pokeIsResearchOnlyCol = 13;
var pokeIsShinyAvailableCol = 14;
var pokeCanBeEvolvedFromCol = 15;
var pokeCanBeEvolvedToCol = 16;

collectedStatus = {};
pokemonMetadata = {};


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


function updateStatus(ix, newStatus) {
  localStorage.setItem("pokemonCollectionValueVn3" + 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...