Last active
October 10, 2016 09:04
-
-
Save alexbbrown/7916c3c88c3b8bfd9a6d45de90a0b87b to your computer and use it in GitHub Desktop.
Pokemon Guess Who
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license:gpl-2.0; | |
| height:800px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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