ALPHA PLAY

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">
  <div id="graphs" class="gridLarge">
  </div>
</div>



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

<br><br><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>

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>

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

.totally-top-left {
    position: absolute;
    top: 0px;
    left: 0px;
}

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

JavaScript

dataSrc = "https://spreadsheets.google.com/feeds/list/1KtyY11lpKOzeiGyZ6_sRLr9INC0sWAEoEwjdmdnmS1I/1/public/full?sq=candycount<1000 and trackcandy = TRUE and candycount > 0 &alt=json";

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



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

countData = {};
images = {};

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;
        countData[pokeNum]  = candyCount; 

   
  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";


 // not transparent
    imagePath = "https://pogo.host/A/resources/imageSet2/" + padLeft(pokeNum, 3, '0') + ".png";

// too fuzzy
	//imagePath = "https://pogo.host/A/sync/IMAGETEMP/" +pokeNum + ".png";
            
// too small?            
  //         imagePath = "https://pogo.host/A/sync/Assets/pokemon_icon_" +padLeft(pokeNum, 3, '0')   + "_00.png";
 
 
 
   notRed =   (0.7 +  Math.pow(candyCount/1000, 4) /1.7) *255;
         $('#graphs').append(

      "<div class='container' style='width:80px;height:80px;' + id='box" + pokeNum + "''>" + 
      "<img id='img" + pokeNum + "' 	src=' " +
      imagePath +
      "' style='width:80px;height:80px;' title='#"
      + pokeNum + " " + pokeName + " : " + candyCount + "'>  "+

      
     // "<div class='totally-top-left'><canvas id='imgx" +  pokeNum + "' style='width:80px;height:80px;' >" +
			"<div...