TEMP

Oct 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>
 <input type='checkbox' id='chkEmbiggen'>Use Large Images
          </input>

<div id="scroller">
  <div id="graphs" class="gridSmall">
  </div>
</div>

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

$('#chkEmbiggen').click(function() {
  size = ($('#chkEmbiggen').is(':checked')) ? 80 : 27;

  if (size == 80) {
    $('#graphs').removeClass("gridSmall");
    $('#graphs').addClass("gridLarge");
  } else {
    $('#graphs').removeClass("gridLarge");
    $('#graphs').addClass("gridSmall");
  }
  
    for (var i = 1; i <= 500 - 1; i++) {
      $('#img' + i).css("width", size + "px")
  	  $('#img' + i).css("height", size + "px")
    }
});


  for (i = 387; i <= 493; i++) {
  imagePath = "https://pogo.host/A/resources/imageSet1/" + i + ".png";
    
    prefix = i + "_00";
    if (i < 10) prefix = "00" + i + "_00";
    else if (i < 100) prefix = "0" + i + "_00";


   
   
   
   // -03 set for 387 - 435, except 412, 413, 421, 422, 423
   
   imagePath = "https://pokemongo.gamepress.gg/sites/pokemongo/files/styles/pokemon_small/public/2018-03/" + i + ".png";
 if (i >= 436)
/// -04 set for 436, except 479, 483, 484, 487, 492, 493 
   imagePath = "https://pokemongo.gamepress.gg/sites/pokemongo/files/styles/pokemon_small/public/2018-04/" + i + ".png";
   
if ([413].indexOf(i) >= 0)
   imagePath = "https://pokemongo.gamepress.gg/sites/pokemongo/files/styles/pokemon_small/public/2018-10/" + i + ".png";
if ([479].indexOf(i) >= 0)
   imagePath = "https://pokemongo.gamepress.gg/sites/pokemongo/files/styles/pokemon_small/public/2018-07/" + i + ".png";
  

if (i == 412)
   imagePath = "https://pokemongo.gamepress.gg/sites/pokemongo/files/styles/pokemon_small/public/2018-03/412-plant.png";
if (i == 421)
   imagePath = "https://pokemongo.gamepress.gg/sites/pokemongo/files/styles/pokemon_small/public/2018-07/421-overcast.png";
if (i == 422)
   imagePath = "https://pokemongo.gamepress.gg/sites/pokemongo/files/styles/pokemon_small/public/2018-07/shellos.png";
if (i == 423)
   imagePath = "https://pokemongo.gamepress.gg/sites/pokemongo/files/styles/pokemon_small/public/2018-07/gastrodon.png";
if (i == 483)
   imagePath =...