Skip to content

Instantly share code, notes, and snippets.

@alexbbrown
Last active October 10, 2016 09:04
Show Gist options
  • Save alexbbrown/7916c3c88c3b8bfd9a6d45de90a0b87b to your computer and use it in GitHub Desktop.
Save alexbbrown/7916c3c88c3b8bfd9a6d45de90a0b87b to your computer and use it in GitHub Desktop.
Pokemon Guess Who
license:gpl-2.0;
height:800px;
<html>
<link rel='stylesheet' href='style.css' type='text/css' media='all'/>
<link rel="stylesheet" type="text/css" media="print" href="style.css" />
<head>
<title>PokeWho</title>
</head>
<body>
<div id="ours"></div>
<!-- http://www.dragonflycave.com/resources/pokemon-list-generator?format=%25%5Bname%5D%25&linebreaks=1&gens=1&order=national -->
<div id="names" style="display:none">Bulbasaur
Ivysaur
Venusaur
Charmander
Charmeleon
Charizard
Squirtle
Wartortle
Blastoise
Caterpie
Metapod
Butterfree
Weedle
Kakuna
Beedrill
Pidgey
Pidgeotto
Pidgeot
Rattata
Raticate
Spearow
Fearow
Ekans
Arbok
Pikachu
Raichu
Sandshrew
Sandslash
Nidorano (F)
Nidorina
Nidoqueen
Nidorano (M)
Nidorino
Nidoking
Clefairy
Clefable
Vulpix
Ninetales
Jigglypuff
Wigglytuff
Zubat
Golbat
Oddish
Gloom
Vileplume
Paras
Parasect
Venonat
Venomoth
Diglett
Dugtrio
Meowth
Persian
Psyduck
Golduck
Mankey
Primeape
Growlithe
Arcanine
Poliwag
Poliwhirl
Poliwrath
Abra
Kadabra
Alakazam
Machop
Machoke
Machamp
Bellsprout
Weepinbell
Victreebel
Tentacool
Tentacruel
Geodude
Graveler
Golem
Ponyta
Rapidash
Slowpoke
Slowbro
Magnemite
Magneton
Farfetch'd
Doduo
Dodrio
Seel
Dewgong
Grimer
Muk
Shellder
Cloyster
Gastly
Haunter
Gengar
Onix
Drowzee
Hypno
Krabby
Kingler
Voltorb
Electrode
Exeggcute
Exeggutor
Cubone
Marowak
Hitmonlee
Hitmonchan
Lickitung
Koffing
Weezing
Rhyhorn
Rhydon
Chansey
Tangela
Kangaskhan
Horsea
Seadra
Goldeen
Seaking
Staryu
Starmie
Mr. Mime
Scyther
Jynx
Electabuzz
Magmar
Pinsir
Tauros
Magikarp
Gyarados
Lapras
Ditto
Eevee
Vaporeon
Jolteon
Flareon
Porygon
Omanyte
Omastar
Kabuto
Kabutops
Aerodactyl
Snorlax
Articuno
Zapdos
Moltres
Dratini
Dragonair
Dragonite
Mewtwo
Mew</div><div id="yours">
</div>
</body>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var yourbox = d3.select("#yours")
var namestring = d3.select("#names")
var namelist = namestring.text().split("\n")
var numbers = d3.range(24,48)
var pokeroot = "http://assets.pokemon.com/assets/cms2/img/pokedex/detail/"
var pokebind = yourbox.selectAll("span.monster")
.data(numbers)
var entered = pokebind
.enter().append("span").classed("monster",true)
entered.append("img")
entered.append("div").classed("label",true).text("foo")
var all = pokebind.merge(entered)
all
.select("img")
.attr("src", function(d) { return pokeroot + d3.format("03")(d+1) + ".png" })
all
.select("div")
.text(function(d) { return namelist[d]})
pokebind.exit().remove()
var ourbox = d3.select("#ours")
var numbers = d3.range(0,24)
var ourbind = ourbox.selectAll("span.monster")
.data(numbers)
var entered = ourbind
.enter().append("span").classed("monster",true)
entered.append("img")
entered.append("div").classed("label",true).text("foo")
var all = pokebind.merge(entered)
all
.select("img")
.attr("src", function(d) { return pokeroot + d3.format("03")(d+1) + ".png" })
all
.select("div")
.text(function(d) { return namelist[d]})
pokebind.exit().remove()
</script>
</html>
body {background-color: #6dd1ae;
background-image: url(original.jpg);
background-size: 21.3cm;
padding: 0;
width: 21.5cm;
}
span.monster {
display: inline-block;
}
#ours {
padding-left: 1.9cm;
padding-top: 1.2cm;
height: 4.3cm;
padding-bottom: 0.6cm;
}
#ours span.monster {
height:1.9cm;
width: 1.55cm;
}
#yours {
/* border-style: solid; */
padding-right: 0.345cm;
padding-left: 0.945cm;
}
#yours span.monster {
margin-right: 0.2cm;
margin-left: 0.2cm;
width: 2.8cm;
height: 4.5cm;
}
span.monster img {
/* background-color: rgba(254, 255, 255, 0.2444365); */
margin-bottom: .2cm;
}
#ours span.monster img {
-webkit-filter: drop-shadow(12px 12px 5px rgba(0,0,0,0.2));
margin-bottom: .05cm;
width: 1.8cm;
}
#yours span.monster img {
-webkit-filter: drop-shadow(12px 3px 5px rgba(0,0,0,0.2));
margin-bottom: .2cm;
width: 2.7cm;
}
/* @group My Group */
/* @end */
span.monster .label {
/* color: #000; */
text-align: center;
background-color: #feffff;
display: block;
float: none;
position: relative;
vertical-align: middle;
z-index: -1;
}
#ours span.monster .label {
border-radius: 5px;
border: 1px solid #a9a9a9;
padding-top: 2px;
padding-bottom: 2px;
z-index: -1;
text-transform: uppercase;
font: bold 0.19cm "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
bottom: 0.35cm;
}
#yours span.monster .label {
font: bold 0.40cm "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius: 6px;
border: 2px solid #a9a9a9;
padding-top: 9px;
padding-bottom: 9px;
z-index: -1;
bottom: 0.3cm;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment