Amy Needs Candy!

v1

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>


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



<input type="button" id="buttonDownload" class="button" value="Download an Image" />




<div id="scroller2" class="scroller">

<br><br>

<div id="summary"></div>

<br><br>

<div>0-999 <input type="text" id="listA"  width=400>  <input type="button"  class="button" value="Copy" id="copyA" /></div>
<br>

<div>&lt;=200 <input type="text" id="listB"  width=400>  <input type="button"  class="button" value="Copy" id="copyB" /></div>
<br>


<div>&gt;=900 <input type="text" id="listC"  width=400>    <input type="button" class="button" value="Copy" id="copyC" /></div>
<br>


<div>n/a <input type="text" id="listD"  width=400>    <input type="button" class="button" value="Copy" id="copyD" /></div>
<br>
</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: 40%;
  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;
  row-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;
}

.container {
    position: relative;
    text-align: center;
    color: brown;
}


.bottom-left {
    position: absolute;
    bottom: 1px;
    left: 1px;
}

.top-left {
    position: absolute;
    top: 1px;
    left: 1px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.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

dataSrc = "https://spreadsheets.google.com/feeds/list/1KtyY11lpKOzeiGyZ6_sRLr9INC0sWAEoEwjdmdnmS1I/1/public/full?sq=showit = TRUE&alt=json";

let $div1_ = document.querySelector('#scroller');



listAll = ""
list900Plus = ""
list200OrLess = ""

missingTypes = 0;
missingCandy = 0;



countData = {};


function padLeft(nr, n, str){
    return Array(n-String(nr).length+1).join(str||'0')+nr;
}



fetch(dataSrc)
  .then(response => {
    if (response.ok) {
      response.json().then(data => {
      
      $("header").remove();
      
         entries = data.feed.entry;

      for (i = 0; i < entries.length; i++)
      {
      	
   
   

  
        pokeNum = data.feed.entry[i].gsx$id.$t;
        pokeName = data.feed.entry[i].gsx$pokémon.$t;
        candyCount = data.feed.entry[i].gsx$candycount.$t;
    
   
  if (candyCount >= 1000)
	  continue;
    
 	countData[pokeNum]  = candyCount; 
	missingCandy += (1000 - candyCount);
	missingTypes++;

  listAll += pokeNum + ",";
  if (candyCount >= 900) list900Plus += pokeNum + ",";
  if (candyCount <= 200) list200OrLess += pokeNum + ",";

            imagePath = "https://pldh.net/media/pokemon/ken_sugimori/update1/" + padLeft(pokeNum, 3, '0') + ".png";
            
               imagePath = "https://pogo.host/A/resources/imageSet2/" + padLeft(pokeNum, 3, '0') + ".png";
            imagePath = "https://pogo.host/A/sync/IMAGETEMP/" +pokeNum + ".png";
 
 imagePath ="https://raw.githubusercontent.com/ZeChrales/PogoAssets/master/pokemon_icons/pokemon_icon_" + padLeft(pokeNum, 3, '0') + "_00.png";
 if (pokeNum == 201)	
 	imagePath = "https://raw.githubusercontent.com/ZeChrales/PogoAssets/master/pokemon_icons/pokemon_icon_201_11.png";
 if (pokeNum == 327)
 	imagePath = "https://raw.githubusercontent.com/ZeChrales/PogoAssets/master/pokemon_icons/pokemon_icon_327_11.png";
 
   notRed =   (0.7 +  Math.pow(candyCount/1000, 4) /1.7) *255;
         $('#graphs').append(

      "<div class='container' style='width:80px;height:80px;'><img...