Permalink
Browse files

Speed up display of images and reduce bandwidth usage

Total download drops from 20+ MB to only 2+ MB
  • Loading branch information...
cheeaun committed Jul 18, 2016
1 parent 101122b commit fcc3e4ce7d1c8df30f6d2922b1f23f2ed78e6f76
Showing with 816 additions and 9 deletions.
  1. +3 −0 .gitignore
  2. +5 −0 .spritesmith.js
  3. +3 −0 README.md
  4. BIN data/pokemon.jpg
  5. +12 −8 index.html
  6. +6 −1 package.json
  7. +720 −0 pokemon.css
  8. +37 −0 scripts/images.js
  9. +30 −0 scripts/sprite.js
View
@@ -1,2 +1,5 @@
.DS_Store
node_modules
scripts/config.json
data/images
data/pokemon.png
View
@@ -0,0 +1,5 @@
module.exports = {
src: './data/images/*.png',
destImage: 'data/pokemon.png',
destCSS: 'pokemon.css',
};
View
@@ -16,11 +16,14 @@ How?
Dev
---
- `npm i` - install dependencies
- `npm run pokemon` - grab the pokémons
- `npm run repokemon` - grab the Github repos
- Copy `config.sample.json` to `config.json`, configure it with `client_id` and `client_secret` from GitHub
- Takes about 30 minutes to prevent API rate limit issues
- `npm run stats` - show stats of the collected data
- `npm run images` - download all pokémon images to `data/images` (not included in this repo)
- `npm run sprite` - generate a sprite image `data/pokemon.png` (not included in this repo), which I manually convert to `data/pokemon.jpg`.
Credits
---
View
Binary file not shown.
View
@@ -5,6 +5,7 @@
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#DD2120">
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="pokemon.css">
<style>
body{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -58,9 +59,6 @@
transition: background-color .3s;
padding: 10px 15px;
}
#list li a:hover{
background-color: #FAFCA9;
}
#list li a *{
pointer-events: none;
}
@@ -69,11 +67,17 @@
margin: 0;
padding: 0;
}
#list li img{
#list li .img{
background-image: url(data/pokemon.jpg);
background-repeat: no-repeat;
background-size: 2700px 2700px;
width: 100px;
height: 100px;
display: inline-block;
transform: scale(.9, .9);
transition: transform .3s;
transition: transform .2s;
}
#list li a:hover img{
#list li a:hover .img{
transform: scale(1, 1);
}
#list li a .metadata{
@@ -106,7 +110,7 @@ <h1>Repokémon</h1>
$list.innerHTML = data.map(function(d){
var repo = d.repo;
if (!repo) return '<li class="unavailable">'
+ '<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/' + d.id + '.png" width="100" height="100" alt="">'
+ '<div class="img img-' + d.id + '"></div>'
+ '<h2>' + d.name + '</h2>'
+ '</li>';
var longDesc = repo.desc || '';
@@ -115,7 +119,7 @@ <h1>Repokémon</h1>
var desc = veryLongDesc ? longDesc.slice(0, descLimit-1) + '&hellip;' : longDesc;
return '<li class="available">'
+ '<a href="https://github.com/' + repo.full_name + '" title="' + (veryLongDesc ? longDesc : '') + '">'
+ '<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/' + d.id + '.png" width="100" height="100" alt="">'
+ '<div class="img img-' + d.id + '"></div>'
+ '<h2>' + d.name + '</h2>'
+ '<div class="metadata">' + desc + '</div>'
+ '<div class="metadata">⭐️ ' + repo.stars + ' 🍴' + repo.forks + '</div>'
View
@@ -14,6 +14,11 @@
"scripts": {
"pokemon": "curl -o data/pokemon-list.json http://www.pokemon.com/us/api/pokedex/kalos",
"repokemon": "node scripts/repokemon.js",
"stats": "node scripts/stats.js"
"stats": "node scripts/stats.js",
"images": "node scripts/images.js",
"sprite": "node scripts/sprite.js",
},
"devDependencies": {
"spritesmith": "~3.1.0"
}
}
Oops, something went wrong.

0 comments on commit fcc3e4c

Please sign in to comment.