Original commit (r57)
This commit is contained in:
commit
3f6522218d
7
LICENSE
Normal file
7
LICENSE
Normal file
@ -0,0 +1,7 @@
|
||||
Copyright 2012 - 2020 Théo Marchal
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
32
README.md
Normal file
32
README.md
Normal file
@ -0,0 +1,32 @@
|
||||
# Pokétest
|
||||
|
||||
### About
|
||||
|
||||
Around 2012, when I was still a computer science student, I found increasingly difficult the remember the name of all Pokémons. So I decided, as a way to be familiar with JavaScript (even though I've never touched it again after that) to program this little website: <u>Pokétest</u>, an interactive browser game, where you have to find the name of Pokémons in a limited time ; and <u>Flashdex</u>, which is a simple Pokédex with high resolution images.
|
||||
|
||||
Now that there are almost 900 of them, and it's as useful as ever! The website features filters for all generations, eight languages settings (English, French, Deutsch, Korean, Japanese, Rōmaji, Traditional and Simplified Chinese) and four combinables modes (image visible or as a silhouette ; configurable number of questions or infinite). It can be played with the mouse or the keyboard (input 1, 2, 3, 4).
|
||||
|
||||
### Planned updates
|
||||
|
||||
- Smaller resolutions support
|
||||
- Mobile stylesheet support
|
||||
- Multiple forms visible in Flashdex
|
||||
- Custom input answers for harder difficulty
|
||||
- Pokémon type support
|
||||
- Type weakness calculator
|
||||
|
||||
### Scripts
|
||||
|
||||
**imagemagick** can be extremely useful to work with batch of images. This script allows to resize a batch of PNG images to a max width of 700px, without altering the height while keeping the ratio:
|
||||
|
||||
`mogrify '*.png[x700>]'`
|
||||
|
||||
### Licenses
|
||||
|
||||
This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library. It uses the <a href="https://srobbin.com/jquery-plugins/backstretch/">Backstretch plugin</a> to have a neat background image, and the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>. All of those components are licensed under the MIT license, as is this website's source code. This website is <strong>HTML5</strong> and <strong>CSS3</strong> compliant.
|
||||
|
||||
The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2020.
|
||||
|
||||
All the Pokémon artworks were taken from <a href="https://bulbapedia.bulbagarden.net/wiki/Main_Page">Bulbapedia</a>, that I'd like to thank for their huge work for the Pokémon community.
|
||||
|
||||
Feel free to reuse this source code for others themes. For instance, I'd love to see a similar concept for Digimons!
|
||||
85
about.html
Normal file
85
about.html
Normal file
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
|
||||
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
<script src="jquery-2.2.2.min.js"></script>
|
||||
<script src="backstretch-2.0.4.min.js"></script>
|
||||
<script src="interface.js"></script>
|
||||
<script src="poketest.js"></script>
|
||||
<title>Pokétest</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content-wrap">
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<div id="container">
|
||||
<img src="pokemon/753.png" class="top-companion" alt="fomantis" />
|
||||
<h1>About</h1>
|
||||
<ul class="about">
|
||||
<li><a href="#1">Who are you?</a></li>
|
||||
<li><a href="#2">What is this website made with?</a></li>
|
||||
<li><a href="#3">Can I use my keyboard to play?</a></li>
|
||||
<li><a href="#4">What is the «Infinite» option in the number of questions exactly?</a></li>
|
||||
<li><a href="#5">This website doesn't work well with mobile devices.</a></li>
|
||||
<li><a href="#6">This website doesn't work well on my browser.</a></li>
|
||||
<li><a href="#7">Can you add more languages?</a></li>
|
||||
<li><a href="#8">Can you add this feature?</a></li>
|
||||
<li><a href="#9">Copyrights</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="1" class="about_titles">Who are you?</h3>
|
||||
<p>Hi! My name is <a href="https://theo.marchal.dev/">Théo</a> and I'm a game developer. I love Pokémon, but it has been getting hard to remember all those names, even though I always complete the Pokédex in my games!</p>
|
||||
|
||||
<h3 id="2" class="about_titles">What is this website made with?</h3>
|
||||
<p>
|
||||
This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library.<br />
|
||||
It uses the <a href="https://srobbin.com/jquery-plugins/backstretch/">Backstretch plugin</a> to have a neat background image, and the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>.<br />
|
||||
</p>
|
||||
<p>
|
||||
All of those components are licensed under the MIT license, as is the website source code, which is <a href="https://git.n700.ovh/keb/poketest">available here</a>.<br />
|
||||
This website is <strong>HTML5</strong> and <strong>CSS3</strong> compliant.
|
||||
</p>
|
||||
|
||||
<h3 id="3" class="about_titles">Can I use my keyboard to play?</h3>
|
||||
<p>Yes! You can launch the game with "Enter", then press "1", "2", "3" or "4" to answer.</p>
|
||||
|
||||
<h3 id="4" class="about_titles">What is the «Infinite» option in the number of questions exactly?</h3>
|
||||
<p>When playing with the Infinite option, the game ends when you have 5 bad answers on all the set.</p>
|
||||
|
||||
<img src="pokemon/60RB.png" class="middle-companion" alt="poliwag" />
|
||||
|
||||
<h3 id="5" class="about_titles">This website doesn't work well with mobile devices.</h3>
|
||||
<p>This is something I'll be working on... someday... promise!</p>
|
||||
|
||||
<h3 id="6" class="about_titles">This website doesn't work well on my browser.</h3>
|
||||
<p>Please contact me or make a pull request!</p>
|
||||
|
||||
<h3 id="7" class="about_titles">Can you add more languages?</h3>
|
||||
<p>The game currently supports all of the languages available in the main games. If your language is not on the list, it probably uses the English names! I will not support other languages by myself, but you can always contribute by making a pull request!</p>
|
||||
|
||||
<h3 id="8" class="about_titles">Can you add this feature?</h3>
|
||||
<p>Please contact me or make a pull request!</p>
|
||||
|
||||
<h3 id="9" class="about_titles">Copyrights</h3>
|
||||
<p>The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2020.</p>
|
||||
<p>All the Pokémon artworks were taken from <a href="https://bulbapedia.bulbagarden.net/wiki/Main_Page">Bulbapedia</a>, that I'd like to thank for their huge work for the Pokémon community.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2012 - 2020 Pokétest 2.6 (r57)</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
artwork/artwork1.jpg
Normal file
BIN
artwork/artwork1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
BIN
artwork/artwork2.jpg
Normal file
BIN
artwork/artwork2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
BIN
artwork/artwork3.jpg
Normal file
BIN
artwork/artwork3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
BIN
artwork/artwork4.jpg
Normal file
BIN
artwork/artwork4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
BIN
artwork/artwork5.jpg
Normal file
BIN
artwork/artwork5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
BIN
artwork/artwork6.jpg
Normal file
BIN
artwork/artwork6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
BIN
artwork/artwork7.jpg
Normal file
BIN
artwork/artwork7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
BIN
artwork/artwork8.jpg
Normal file
BIN
artwork/artwork8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 474 KiB |
BIN
artwork/artwork9.jpg
Normal file
BIN
artwork/artwork9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
4
backstretch-2.0.4.min.js
vendored
Normal file
4
backstretch-2.0.4.min.js
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
/*! Backstretch - v2.0.4 - 2013-06-19
|
||||
* http://srobbin.com/jquery-plugins/backstretch/
|
||||
* Copyright (c) 2013 Scott Robbin; Licensed MIT */
|
||||
(function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);
|
||||
85
flashdex.html
Normal file
85
flashdex.html
Normal file
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
|
||||
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
<script src="jquery-2.2.2.min.js"></script>
|
||||
<script src="backstretch-2.0.4.min.js"></script>
|
||||
<script src="waitforimages-2.2.0.min.js"></script>
|
||||
<script src="interface.js"></script>
|
||||
<script src="flashdex.js"></script>
|
||||
<title>Pokétest</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content-wrap">
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<div id="container">
|
||||
<div id="game">
|
||||
<img src="pokemon/877-0.png" alt="morpeko" class="companion" />
|
||||
|
||||
<h1>Flashdex</h1>
|
||||
|
||||
<p>Well, well, well! This is the simplest Pokédex you'll find in the web, which is useful to see your favorite creatures in good resolution. Furthermore, you can see all the new Pokémons that are announced because we are adding them really fast! This page is perfect to learn those new names, so let's get started!</p>
|
||||
|
||||
<div id="flashdex_config">
|
||||
<h2><a href="#" class="all unselected"><strong>Select all</strong></a></h2>
|
||||
<p>
|
||||
<input type="checkbox" name="1g" id="1g"><label for="1g"><strong><span class="RB1">1</span><span class="RB2">G</span></strong></label>
|
||||
<input type="checkbox" name="2g" id="2g"><label for="2g"><strong><span class="GS1">2</span><span class="GS2">G</span></strong></label>
|
||||
<input type="checkbox" name="3g" id="3g"><label for="3g"><strong><span class="RS1">3</span><span class="RS2">G</span></strong></label>
|
||||
<input type="checkbox" name="4g" id="4g"><label for="4g"><strong><span class="DP1">4</span><span class="DP2">G</span></strong></label>
|
||||
<br />
|
||||
<input type="checkbox" name="5g" id="5g"><label for="5g"><strong><span class="BW1">5</span><span class="BW2">G</span></strong></label>
|
||||
<input type="checkbox" name="6g" id="6g"><label for="6g"><strong><span class="XY1">6</span><span class="XY2">G</span></strong></label>
|
||||
<input type="checkbox" name="7g" id="7g"><label for="7g"><strong><span class="SM1">7</span><span class="SM2">G</span></strong></label>
|
||||
<input type="checkbox" name="8g" id="8g"><label for="8g"><strong><span class="SWSH1">8</span><span class="SWSH2">G</span></strong></label>
|
||||
<br />
|
||||
<span class="alternate_forms">Alternate forms</span>
|
||||
<input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label>
|
||||
<input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label>
|
||||
<input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span>Select language: </span>
|
||||
<select class="lang first">
|
||||
<option name="lang" id="en" value="en">English</option>
|
||||
<option name="lang" id="fr" value="fr">Français</option>
|
||||
<option name="lang" id="de" value="de">Deutsch</option>
|
||||
<option name="lang" id="kr" value="kr">한국어</option>
|
||||
<option name="lang" id="ja" value="ja">日本語</option>
|
||||
<option name="lang" id="romaji" value="romaji">日本語 (Rōmaji)</option>
|
||||
<option name="lang" id="cn" value="cn">繁體中文</option>
|
||||
<option name="lang" id="cs" value="cs">简体中文</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p class="button">
|
||||
<input type="submit" class="start" name="start" value="Generate deck">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="loading">Now loading...</div>
|
||||
<div id="flashdex"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2012 - 2020 Pokétest 2.6 (r57)</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
184
flashdex.js
Normal file
184
flashdex.js
Normal file
@ -0,0 +1,184 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
/****** Generations ******/
|
||||
var G1 = [1, 151];
|
||||
var G2 = [152, 251];
|
||||
var G3 = [252, 386];
|
||||
var G4 = [387, 493];
|
||||
var G5 = [494, 649];
|
||||
var G6 = [650, 721];
|
||||
var G7 = [722, 809];
|
||||
var G8 = [810, 890]
|
||||
var MEGA = [891, 940];
|
||||
var REG = [941, 971];
|
||||
var GIGA = [972, 1000];
|
||||
|
||||
/************ GAME *************/
|
||||
/*******************************/
|
||||
|
||||
// loading json file
|
||||
var json = $.getJSON('pokemon.json', function(pk) {
|
||||
|
||||
$('article #container #game #loading').hide();
|
||||
var pklist = pk;
|
||||
|
||||
$('article #container #flashdex_config .all').click(function() {
|
||||
|
||||
if ($(this).hasClass("unselected")) {
|
||||
|
||||
for (i = 1; i < 9; ++i)
|
||||
$('input[name="'+i+'g"]').prop('checked', true);
|
||||
$('input[name="mega"]').prop('checked', true);
|
||||
$('input[name="regional"]').prop('checked', true);
|
||||
$('input[name="gigantamax"]').prop('checked', true);
|
||||
$(this).removeClass("unselected").addClass("selected");
|
||||
$(this).text("Unselect all");
|
||||
} else {
|
||||
for (i = 1; i < 9; ++i)
|
||||
$('input[name="'+i+'g"]').prop('checked', false);
|
||||
$('input[name="mega"]').prop('checked', false);
|
||||
$('input[name="regional"]').prop('checked', false);
|
||||
$('input[name="gigantamax"]').prop('checked', false);
|
||||
$(this).removeClass("selected").addClass("unselected");
|
||||
$(this).text("Select all");
|
||||
}
|
||||
})
|
||||
|
||||
// start the game when clicking on start game
|
||||
$('article #container .button input.start').click(function() {
|
||||
|
||||
$('article #container #game #loading').show();
|
||||
$('article #container #game #flashdex').empty();
|
||||
|
||||
var lang = $('article select.lang option:selected').attr('id');
|
||||
var gen_list = new Array();
|
||||
var pokemon_generation_list = new Array();
|
||||
|
||||
generations();
|
||||
|
||||
$('article #container #game #flashdex').hide();
|
||||
|
||||
function getFormText(pkmn) {
|
||||
if (pkmn["origin"] == "Kanto")
|
||||
return '<span class="form RB"></span>'
|
||||
else if (pkmn["origin"] == "Johto")
|
||||
return '<span class="form GS"></span>'
|
||||
else if (pkmn["origin"] == "Hoenn")
|
||||
return '<span class="form RS"></span>'
|
||||
else if (pkmn["origin"] == "Sinnoh")
|
||||
return '<span class="form DP"></span>'
|
||||
else if (pkmn["origin"] == "Unova")
|
||||
return '<span class="form BW"></span>'
|
||||
else if (pkmn["origin"] == "Kalos")
|
||||
return '<span class="form XY"></span>'
|
||||
else if (pkmn["origin"] == "Alola")
|
||||
return '<span class="form SM"></span>'
|
||||
else if (pkmn["origin"] == "Galar")
|
||||
return '<span class="form SWSH"></span>'
|
||||
else if (pkmn["type"] == "mega")
|
||||
return '<span class="form mega"></span>';
|
||||
else if (pkmn["type"] == "giga")
|
||||
return '<span class="form giga"></span>';
|
||||
return '';
|
||||
}
|
||||
|
||||
function getFormattedNumber(num) {
|
||||
if (num[0] == 'M' || num[0] == 'R' || num[0] == 'G')
|
||||
return num.substring(1, num.length);
|
||||
return num;
|
||||
}
|
||||
|
||||
for (i in pokemon_generation_list) {
|
||||
$('article #container #game #flashdex').append(
|
||||
'<div class="pokedex id_'+pklist.mn[pokemon_generation_list[i]]["num"]+'">'
|
||||
+ getFormText(pklist.mn[pokemon_generation_list[i]]) // either gigantamax or mega-evolution
|
||||
+ '<img src="pokemon/'+ imageType((pklist.mn[pokemon_generation_list[i]]["num"])) +'.png"/>'
|
||||
+ '<span class="name">' + '<strong>' + '#' + getFormattedNumber(pklist.mn[[pokemon_generation_list[i]]]["num"]) + '</strong> '
|
||||
+ pklist.mn[[pokemon_generation_list[i]]][lang] + '</span>'
|
||||
+ '</div>'
|
||||
);
|
||||
}
|
||||
|
||||
$('article #container #game #flashdex').waitForImages(function() {
|
||||
$(this).show();
|
||||
$('article #container #game #loading').hide();
|
||||
});
|
||||
|
||||
function generations() {
|
||||
|
||||
// create the list of the different generations
|
||||
function createGenerationList(name) {
|
||||
if ( $('article input[name="'+name+'"]').is(':checked') )
|
||||
gen_list[gen_list.length] = name;
|
||||
}
|
||||
|
||||
// create the list of all possible pokemons for selected options
|
||||
function generatePokemonList() {
|
||||
|
||||
function evaluateByGeneration(index, name, variable) {
|
||||
if (gen_list[index] == name) {
|
||||
for (j = (variable[0] - 1); j <= (variable[1] - 1); j++)
|
||||
pokemon_generation_list[pokemon_generation_list.length] = j;
|
||||
}
|
||||
}
|
||||
|
||||
if (gen_list.length > 0) {
|
||||
for (i in gen_list) {
|
||||
evaluateByGeneration(i, "1g", G1); evaluateByGeneration(i, "2g", G2); evaluateByGeneration(i, "3g", G3);
|
||||
evaluateByGeneration(i, "4g", G4); evaluateByGeneration(i, "5g", G5); evaluateByGeneration(i, "6g", G6);
|
||||
evaluateByGeneration(i, "7g", G7); evaluateByGeneration(i, "8g", G8);
|
||||
evaluateByGeneration(i, "mega", MEGA); evaluateByGeneration(i, "regional", REG); evaluateByGeneration(i, "gigantamax", GIGA);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (i = 0; i < 9; i++)
|
||||
createGenerationList((i + "g"));
|
||||
createGenerationList("mega");
|
||||
createGenerationList("regional");
|
||||
createGenerationList("gigantamax");
|
||||
|
||||
generatePokemonList();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// multiple artworks
|
||||
function imageType(result) {
|
||||
var four_types = [351, 386, 585, 586, 676, 741, 800];
|
||||
var three_types = [249, 250, 384, 412, 413, 718, 745];
|
||||
var two_types = [251, 252, 255, 258, 374, 387, 390, 393, 421, 422, 423, 487, 492, 495, 498, 501, 521, 550, 555,
|
||||
592, 593, 641, 642, 643, 644, 645, 647, 648, 668, 678, 681, 720, 746, 774, 791, 792, 802, 849,
|
||||
876, 877, 888, 889];
|
||||
|
||||
function no_randomizer() {
|
||||
if (result === 25)
|
||||
return (result+'-9');
|
||||
if (result === 666)
|
||||
return (result+'-0');
|
||||
if (result === 646)
|
||||
return (result+'-0');
|
||||
if (result === 479)
|
||||
return (result+'-0');
|
||||
for (a in four_types) {
|
||||
if (four_types[a] == result)
|
||||
return (result+'-0');
|
||||
}
|
||||
for (a in three_types) {
|
||||
if (three_types[a] == result)
|
||||
return (result+'-0');
|
||||
}
|
||||
for (a in two_types) {
|
||||
if (two_types[a] == result)
|
||||
return (result+'-0');
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
return no_randomizer(result);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
BIN
img/border.png
Normal file
BIN
img/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
img/favicon.png
Normal file
BIN
img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
img/icon_giga.png
Normal file
BIN
img/icon_giga.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
img/icon_mega.png
Normal file
BIN
img/icon_mega.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
img/red.png
Normal file
BIN
img/red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
145
index.html
Normal file
145
index.html
Normal file
@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
|
||||
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
<script src="jquery-2.2.2.min.js"></script>
|
||||
<script src="backstretch-2.0.4.min.js"></script>
|
||||
<script src="interface.js"></script>
|
||||
<script src="poketest.js"></script>
|
||||
<title>Pokétest</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content-wrap">
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<div id="container">
|
||||
<div id="game">
|
||||
<img src="pokemon/831-000.png" alt="wooloo" class="companion" />
|
||||
<h1>What is Pokétest?</h1>
|
||||
<p>There are now almost 900 Pocket Monsters, and a handful number of alternative forms. It's getting pretty tricky to know them all, let alone to catch them all. With Pokétest, you can train yourself and become unbeatable! Filter by generation, language and even by Mega Evolutions or Regional Forms!</p>
|
||||
|
||||
<p>You can play with your keyboard: just press 1, 2, 3 or 4 to choose the answer!</p>
|
||||
|
||||
<div id="configuration">
|
||||
<h2>Configuration</h2>
|
||||
<div id="left_config">
|
||||
<h3>Generations</h3>
|
||||
<input type="radio" name="gen" id="all" checked><label for="all"> <strong title="all">All</strong></label><br />
|
||||
<input type="radio" name="gen" id="select"><label for="select"> <strong title="select">Select</strong></label><br />
|
||||
|
||||
<div id="selected_options">
|
||||
<input type="checkbox" name="1g" id="1g"><label for="1g"> <strong title="Kanto">
|
||||
<span class="RB1">1</span><span class="RB2">G</span>
|
||||
</strong> (001 - 151)</label><br />
|
||||
|
||||
<input type="checkbox" name="2g" id="2g"><label for="2g"> <strong title="Johto">
|
||||
<span class="GS1">2</span><span class="GS2">G</span>
|
||||
</strong> (152 - 251)</label><br />
|
||||
|
||||
<input type="checkbox" name="3g" id="3g"><label for="3g"> <strong title="Hoenn">
|
||||
<span class="RS1">3</span><span class="RS2">G</span>
|
||||
</strong> (252 - 386)</label><br />
|
||||
|
||||
<input type="checkbox" name="4g" id="4g"><label for="4g"> <strong title="Sinnoh">
|
||||
<span class="DP1">4</span><span class="DP2">G</span>
|
||||
</strong> (387 - 493)</label><br />
|
||||
|
||||
<input type="checkbox" name="5g" id="5g"><label for="5g"> <strong title="Unys">
|
||||
<span class="BW1">5</span><span class="BW2">G</span>
|
||||
</strong> (494 - 649)</label><br />
|
||||
|
||||
<input type="checkbox" name="6g" id="6g"><label for="6g"> <strong title="Kalos">
|
||||
<span class="XY1">6</span><span class="XY2">G</span>
|
||||
</strong> (650 - 721)</label><br />
|
||||
|
||||
<input type="checkbox" name="7g" id="7g"><label for="7g"> <strong title="Alola">
|
||||
<span class="SM1">7</span><span class="SM2">G</span>
|
||||
</strong> (722 - 809)</label><br />
|
||||
|
||||
<input type="checkbox" name="8g" id="8g"><label for="8g"> <strong title="8g">
|
||||
<span class="SWSH1">8</span><span class="SWSH2">G</span>
|
||||
</strong> (810 - 890)</label><br />
|
||||
|
||||
<input type="checkbox" name="mega" id="mega"><label for="mega"> <strong title="Mega">
|
||||
Mega-Evolutions
|
||||
</strong> (50)</label><br />
|
||||
|
||||
<input type="checkbox" name="regional" id="regional"><label for="regional"> <strong title="Regional">
|
||||
Regional Forms
|
||||
</strong> (31)</label><br />
|
||||
|
||||
<input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"> <strong title="Gigantamax">
|
||||
Gigantamax Forms
|
||||
</strong> (22)</label>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Language</h3>
|
||||
<select class="lang first">
|
||||
<option name="lang" id="en" value="en">English</option>
|
||||
<option name="lang" id="fr" value="fr">Français</option>
|
||||
<option name="lang" id="de" value="de">Deutsch</option>
|
||||
<option name="lang" id="kr" value="kr">한국어</option>
|
||||
<option name="lang" id="ja" value="ja">日本語</option>
|
||||
<option name="lang" id="romaji" value="romaji">日本語 (rōmaji)</option>
|
||||
<option name="lang" id="cn" value="cn">繁體中文</option>
|
||||
<option name="lang" id="cs" value="cs">简体中文</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="right_config">
|
||||
<h3>Silhouette</h3>
|
||||
<input type="radio" name="silhouette" class="first" id="silhouette" checked><label for="silhouette"> Silhouette</label>
|
||||
<input type="radio" name="silhouette" id="full"><label for="full"> Full Art</label>
|
||||
|
||||
<h3>Number of questions</h3>
|
||||
<select class="questions first">
|
||||
<option name="questions" id="1" value="1">1 (debug)</option>
|
||||
<option name="questions" id="15" value="15">15</option>
|
||||
<option name="questions" id="30" value="30">30</option>
|
||||
<option name="questions" id="50" value="50">50</option>
|
||||
<option name="questions" id="100" value="100">100</option>
|
||||
<option name="questions" id="set" value="set">Whole set</option>
|
||||
<option name="questions" id="infinite" value="infinite">Infinite</option>
|
||||
</select>
|
||||
|
||||
<h3>Time to answer</h3>
|
||||
<select class="time first">
|
||||
<option name="time" id="1" value="1">1 (debug)</option>
|
||||
<option name="time" id="2" value="2">2</option>
|
||||
<option name="time" id="5" value="5" selected>5</option>
|
||||
<option name="time" id="10" value="10">10</option>
|
||||
<option name="time" id="30" value="30">30</option>
|
||||
<option name="time" id="30" value="30">99</option>
|
||||
<option name="time" id="10000" value="10000">10000 (debug)</option>
|
||||
</select> seconds
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="button">
|
||||
<input type="submit" class="start" name="start" value="Start game!">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2012 - 2020 Pokétest 2.6 (r57)</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
92
interface.js
Normal file
92
interface.js
Normal file
@ -0,0 +1,92 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
function random(min, max) {
|
||||
return Math.floor(Math.random()*(max-min+1)+min);
|
||||
}
|
||||
|
||||
// have a nice little background
|
||||
$.backstretch("artwork/artwork"+random(1, 9)+".jpg");
|
||||
|
||||
// splice url arguments
|
||||
function gup(name, url) {
|
||||
if (!url) url = location.href;
|
||||
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
|
||||
var regexS = "[\\?&]"+name+"=([^&#]*)";
|
||||
var regex = new RegExp( regexS );
|
||||
var results = regex.exec( url );
|
||||
return results == null ? null : results[1];
|
||||
}
|
||||
|
||||
// read url
|
||||
local_gen = gup('gen', window.location.href);
|
||||
if (local_gen != null) {
|
||||
if (local_gen == "all")
|
||||
$('article #container #game #configuration input#all').attr('checked', true);
|
||||
else {
|
||||
$('article #container #game #configuration input#select').attr('checked', true);
|
||||
for (i = 0; i < local_gen.length; i++) {
|
||||
if (local_gen.charAt(i)) {
|
||||
if (local_gen.charAt(i) == "m")
|
||||
$('article #container #game #configuration #selected_options input#mega').attr('checked', true);
|
||||
else if (local_gen.charAt(i) == "r")
|
||||
$('article #container #game #configuration #selected_options input#regional').attr('checked', true);
|
||||
else if (local_gen.charAt(i) == "g")
|
||||
$('article #container #game #configuration #selected_options input#gigantamax').attr('checked', true);
|
||||
else
|
||||
$('article #container #game #configuration #selected_options input#' + local_gen.charAt(i) + 'g').attr('checked', true);
|
||||
}
|
||||
}
|
||||
$('#selected_options').slideDown();
|
||||
}
|
||||
$('article #container #game #configuration select.lang').val(gup('lang', window.location.href));
|
||||
if (gup('silhouette', window.location.href) == "true")
|
||||
$('article #container #game #configuration input#silhouette').attr('checked', true);
|
||||
else
|
||||
$('article #container #game #configuration input#full').attr('checked', true);
|
||||
$('article #container #game #configuration select.questions').val(gup('questions', window.location.href));
|
||||
$('article #container #game #configuration select.time').val(gup('time', window.location.href));
|
||||
}
|
||||
else { // if we did not come from a personalized URL, we read localstorage
|
||||
|
||||
if (localStorage.getItem('generation') != null) {
|
||||
if (localStorage.getItem('generation') != 'all') {
|
||||
gen_list = localStorage.getItem('generation');
|
||||
|
||||
$('article #container #game #configuration input#select').attr('checked', true);
|
||||
for (i = 0; i < gen_list.length; i++) {
|
||||
if (gen_list.charAt(i)) {
|
||||
|
||||
if (gen_list.charAt(i) == "m")
|
||||
$('article #container #game #configuration #selected_options input#mega').attr('checked', true);
|
||||
else if (gen_list.charAt(i) == "r")
|
||||
$('article #container #game #configuration #selected_options input#regional').attr('checked', true);
|
||||
else if (gen_list.charAt(i) == "g")
|
||||
$('article #container #game #configuration #selected_options input#gigantamax').attr('checked', true);
|
||||
else
|
||||
$('article #container #game #configuration #selected_options input#' + gen_list.charAt(i) + 'g').attr('checked', true);
|
||||
}
|
||||
}
|
||||
$('#selected_options').slideDown();
|
||||
} else
|
||||
$('article #container #game #configuration input#all').attr('checked', true);
|
||||
}
|
||||
if (localStorage.getItem('lang') != null)
|
||||
$('article #game #configuration select.lang').val(localStorage.getItem('lang'));
|
||||
if (localStorage.getItem('silhouette') != null)
|
||||
$('article #game #configuration input:radio[name=silhouette]#'+localStorage.getItem('silhouette')).attr('checked', true);
|
||||
if (localStorage.getItem('questions') != null)
|
||||
$('article #game #configuration select.questions').val(localStorage.getItem('questions'));
|
||||
if (localStorage.getItem('time') != null)
|
||||
$('article #game #configuration select.time').val(localStorage.getItem('time'));
|
||||
}
|
||||
|
||||
|
||||
// select generation toggle
|
||||
$('#configuration input#all').click(function() {
|
||||
$('#selected_options').slideUp();
|
||||
});
|
||||
|
||||
$('#configuration input#select').click(function() {
|
||||
$('#selected_options').slideDown();
|
||||
});
|
||||
});
|
||||
4
jquery-2.2.2.min.js
vendored
Normal file
4
jquery-2.2.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
349
normalize-8.0.1.css
Normal file
349
normalize-8.0.1.css
Normal file
@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
1004
pokemon.json
Normal file
1004
pokemon.json
Normal file
File diff suppressed because it is too large
Load Diff
372
poketest.js
Normal file
372
poketest.js
Normal file
@ -0,0 +1,372 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
/****** CONFIGURATION ***********/
|
||||
var max_questions = 15;
|
||||
var max_chrono = 5;
|
||||
var max_wait = 2;
|
||||
var max_infinite_errors = 5;
|
||||
/********************************/
|
||||
|
||||
/****** General variables ******/
|
||||
var score = 0;
|
||||
var questions = 0;
|
||||
var good_answers = 0;
|
||||
var bad_answers = 0;
|
||||
var chrono = max_chrono;
|
||||
var infinite = false; // type of game
|
||||
var whole_set = false; // type of game
|
||||
var image_name; // preload
|
||||
var image_memory; // preload
|
||||
var gen_list = new Array();
|
||||
var previous_pokemon = new Array();
|
||||
|
||||
/****** Generations ******/
|
||||
var G1 = [1, 151];
|
||||
var G2 = [152, 251];
|
||||
var G3 = [252, 386];
|
||||
var G4 = [387, 493];
|
||||
var G5 = [494, 649];
|
||||
var G6 = [650, 721];
|
||||
var G7 = [722, 809];
|
||||
var G8 = [810, 890]
|
||||
var MEGA = [891, 940];
|
||||
var REG = [941, 971];
|
||||
var GIGA = [972, 1000];
|
||||
|
||||
/************ UTIL *************/
|
||||
/*******************************/
|
||||
|
||||
function random(min, max) {
|
||||
return Math.floor(Math.random()*(max-min+1)+min);
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
array[i] = array[j];
|
||||
array[j] = temp;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function findInArray(array, elem, size) {
|
||||
for (var j = 0; j < array.length; j++) {
|
||||
if (array[j] === elem)
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
/************ GAME *************/
|
||||
/*******************************/
|
||||
|
||||
// loading json file
|
||||
var json = $.getJSON('pokemon.json', function(pk) {
|
||||
|
||||
var pklist = pk;
|
||||
var pokemon_generation_list = new Array();
|
||||
|
||||
// starting the game for the first time and creating the layout
|
||||
function firstGame() {
|
||||
$('article #game').fadeToggle('quick', function() {
|
||||
document.removeEventListener('keydown', funcListener);
|
||||
$('article #container').append('<div id="score"><div id="top_game"><h1 class="whois"></h1><h1 class="chrono"></h1></div></div>');
|
||||
$('article #container #score').append('<p class="pokemon"></p><div id="answers"></div>');
|
||||
generations();
|
||||
choosePokemon();
|
||||
max_chrono = $('article select.time option:selected').attr('id');
|
||||
max_questions = $('article select.questions option:selected').attr('id');
|
||||
if (max_questions == "infinite") infinite = true;
|
||||
if (max_questions == "set") {
|
||||
whole_set = true;
|
||||
// set max_questions depending on generation
|
||||
|
||||
// if it's not all generation, we check list of available pokemons
|
||||
if (pokemon_generation_list.length > 0)
|
||||
max_questions = pokemon_generation_list.length;
|
||||
else // else, it's all the generation, from the first one to the gigantamax forms
|
||||
max_questions = GIGA[1] - 1;
|
||||
}
|
||||
game();
|
||||
});
|
||||
}
|
||||
|
||||
// allows to start the game when pressing enter
|
||||
document.addEventListener('keydown', funcListener = function(event) {
|
||||
if (event.keyCode == 13) // press enter
|
||||
firstGame();
|
||||
});
|
||||
// start the game when clicking on start game
|
||||
$('article #container .button input.start').click(function() {
|
||||
firstGame();
|
||||
});
|
||||
|
||||
function generations() {
|
||||
|
||||
// create the list of the different generations
|
||||
function createGenerationList(name) {
|
||||
if ( $('article input[name="'+name+'"]').is(':checked') )
|
||||
gen_list[gen_list.length] = name;
|
||||
}
|
||||
|
||||
// create the list of all possible pokemons for selected options
|
||||
function generatePokemonList() {
|
||||
|
||||
function evaluateByGeneration(index, name, variable) {
|
||||
if (gen_list[index] == name) {
|
||||
for (j = (variable[0] - 1); j <= (variable[1] - 1); j++)
|
||||
pokemon_generation_list[pokemon_generation_list.length] = j;
|
||||
}
|
||||
}
|
||||
|
||||
if (gen_list.length > 0) {
|
||||
for (i in gen_list) {
|
||||
evaluateByGeneration(i, "1g", G1); evaluateByGeneration(i, "2g", G2); evaluateByGeneration(i, "3g", G3);
|
||||
evaluateByGeneration(i, "4g", G4); evaluateByGeneration(i, "5g", G5); evaluateByGeneration(i, "6g", G6);
|
||||
evaluateByGeneration(i, "7g", G7); evaluateByGeneration(i, "8g", G8);
|
||||
evaluateByGeneration(i, "mega", MEGA); evaluateByGeneration(i, "regional", REG); evaluateByGeneration(i, "gigantamax", GIGA);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// we parse the list of generation, then check if there are other forms
|
||||
if ( $('article input[name="gen"]:checked').attr('id') === "all" )
|
||||
return;
|
||||
for (i = 0; i < 9; i++)
|
||||
createGenerationList((i + "g"));
|
||||
createGenerationList("mega");
|
||||
createGenerationList("regional");
|
||||
createGenerationList("gigantamax");
|
||||
generatePokemonList();
|
||||
}
|
||||
|
||||
// multiple artworks
|
||||
function imageType(result) {
|
||||
var four_types = [351, 386, 585, 586, 676, 741, 800];
|
||||
var three_types = [249, 250, 384, 412, 413, 718, 745];
|
||||
var two_types = [251, 252, 255, 258, 374, 387, 390, 393, 421, 422, 423, 487, 492, 495, 498, 501, 521, 550, 555,
|
||||
592, 593, 641, 642, 643, 644, 645, 647, 648, 668, 678, 681, 720, 746, 774, 791, 792, 802, 849,
|
||||
876, 877, 888, 889];
|
||||
|
||||
function randomizer() {
|
||||
if (result >= MEGA[0]) return (pklist.mn[result-1]["num"])
|
||||
if (result === 25) return (result+'-'+random(0, 16));
|
||||
if (result === 666) return (result+'-'+random(0, 20));
|
||||
if (result === 646) return (result+'-'+random(0, 6));
|
||||
if (result === 479) return (result+'-'+random(0, 5));
|
||||
for (i in four_types) {
|
||||
if (four_types[i] == result) return (result+'-'+random(0, 3));
|
||||
}
|
||||
for (i in three_types) {
|
||||
if (three_types[i] == result) return (result+'-'+random(0, 2));
|
||||
}
|
||||
for (i in two_types) {
|
||||
if (two_types[i] == result) return (result+'-'+random(0, 1));
|
||||
}
|
||||
if (result > 151) return result;
|
||||
if ((tmp = random(0, 2)) == 0) return result;
|
||||
else if (tmp == 1) return (result+'RB');
|
||||
else return (result+'RG');
|
||||
}
|
||||
image_name = randomizer(result+1);
|
||||
image_memory = new Image();
|
||||
image_memory.src = 'pokemon/' + image_name + '.png';
|
||||
return image_name;
|
||||
}
|
||||
|
||||
function recursiveOptions(options, lang) {
|
||||
// if it's not all generation, we check list of available pokemons
|
||||
if (pokemon_generation_list.length > 0)
|
||||
tmp = pokemon_generation_list[random(0, pokemon_generation_list.length - 1)];
|
||||
else // else, it's all the generation, from the first one to the gigantamax forms
|
||||
tmp = random(0, GIGA[1] - 1);
|
||||
|
||||
// checking if it's already there, if it is, recursion
|
||||
if (!findInArray(options, pklist.mn[tmp][lang]))
|
||||
return pklist.mn[tmp][lang];
|
||||
else
|
||||
return recursiveOptions(options, lang);
|
||||
}
|
||||
|
||||
// choosing the four options
|
||||
function chooseOptions(result, lang) {
|
||||
options = new Array();
|
||||
options[0] = pklist.mn[result][lang];
|
||||
for (var i = 1; i < 4; i++)
|
||||
options[i] = recursiveOptions(options, lang);
|
||||
options = shuffleArray(options);
|
||||
}
|
||||
|
||||
// avoid repetition of the same pokemon in a short lapse of time
|
||||
function checkPreviousPokemon(pkmn) {
|
||||
if (!whole_set) { // if it's not the whole set, we have to delete some older occurrences
|
||||
if (pokemon_generation_list.length > 0) {
|
||||
if (previous_pokemon.length + 6 > pokemon_generation_list.length)
|
||||
previous_pokemon.splice(0, 6);
|
||||
}
|
||||
else {
|
||||
if (previous_pokemon.length + 6 > GIGA[1] - 1)
|
||||
previous_pokemon.splice(0, 6);
|
||||
}
|
||||
}
|
||||
return findInArray(previous_pokemon, pkmn);
|
||||
}
|
||||
|
||||
function choosePokemon() {
|
||||
// if it's not all generation, we check list of available pokemons
|
||||
if (pokemon_generation_list.length > 0)
|
||||
result = pokemon_generation_list[random(0, pokemon_generation_list.length - 1)];
|
||||
else // else, it's all the generation, from the first one to the gigantamax forms
|
||||
result = random(0, GIGA[1] - 1);
|
||||
lang = $('article select.lang option:selected').attr('id');
|
||||
silhouette = $('article input[name="silhouette"]:checked').attr('id');
|
||||
answer = pklist.mn[result][lang];
|
||||
if (checkPreviousPokemon(answer)) { // if it's already been selected within a short lapse of time
|
||||
if (whole_set && questions == max_questions) { } // makes the last question of whole set work
|
||||
else choosePokemon(); // recursive call
|
||||
} else {
|
||||
previous_pokemon[previous_pokemon.length] = answer;
|
||||
chooseOptions(result, lang);
|
||||
}
|
||||
imageType(result + 1);
|
||||
}
|
||||
|
||||
function game() {
|
||||
questions++;
|
||||
chrono = max_chrono;
|
||||
$('article #container').addClass('game_active');
|
||||
$('article #container #share').empty();
|
||||
$('article #container #seed').empty();
|
||||
$('article #container #copyseed').empty();
|
||||
$('article #container .chrono').empty().append(chrono);
|
||||
$('article #container .whois').empty().append("Who's that Pokémon? " + (!infinite? " ("+questions+"/"+max_questions+")" : ""));
|
||||
$('article #container .pokemon').empty().append('<img src="pokemon/'+image_name+'.png" class="'+(silhouette)+'" />');
|
||||
$('article #container #answers').empty().append('<input type="submit" class="option a1" name="a1" value="'+options[0]+'">')
|
||||
$('article #container #answers').append('<input type="submit" class="option a2" name="a2" value="'+options[1]+'">')
|
||||
$('article #container #answers').append('<input type="submit" class="option a3" name="a3" value="'+options[2]+'">')
|
||||
$('article #container #answers').append('<input type="submit" class="option a4" name="a4" value="'+options[3]+'">')
|
||||
|
||||
// timer setting
|
||||
var clock = setInterval(function() {
|
||||
chrono--;
|
||||
if (chrono === 0) {
|
||||
clearInterval(clock);
|
||||
showAnswer(false); // timer has ended, so it's a bad answer
|
||||
}
|
||||
$('article #container .chrono').empty().append(chrono);
|
||||
}, 1000);
|
||||
|
||||
// checking if the answer is good or not
|
||||
$('article .option').click(function() {
|
||||
clearInterval(clock);
|
||||
($(this).attr('value') == answer) ? showAnswer(true) : showAnswer(false);
|
||||
});
|
||||
document.addEventListener('keydown', funcListener = function(event) {
|
||||
function checkAnswer(v) {
|
||||
clearInterval(clock);
|
||||
($('#answers input.a'+v).attr('value') == answer) ? showAnswer(true) : showAnswer(false);
|
||||
}
|
||||
if (event.keyCode == 49 || event.keyCode == 72) checkAnswer(1);
|
||||
else if (event.keyCode == 50 || event.keyCode == 74) checkAnswer(2);
|
||||
else if (event.keyCode == 51 || event.keyCode == 75) checkAnswer(3);
|
||||
else if (event.keyCode == 52 || event.keyCode == 76) checkAnswer(4);
|
||||
});
|
||||
|
||||
function showAnswer(ok) {
|
||||
document.removeEventListener('keydown', funcListener);
|
||||
$('article .pokemon img').removeClass('silhouette');
|
||||
if (ok) {
|
||||
good_answers++;
|
||||
$('article #answers').empty().append("<p class=\"final_answer\"><span class=\"good\">That's right!</span> \
|
||||
The answer is <strong>"+ answer +"</strong>!</p>");
|
||||
} else {
|
||||
bad_answers++;
|
||||
$('article #answers').empty().append("<p class=\"final_answer\"><span class=\"bad\">Too bad...</span> \
|
||||
The answer was <strong>"+ answer +"</strong>!</p>");
|
||||
}
|
||||
choosePokemon();
|
||||
var wait = max_wait;
|
||||
var clock = setInterval(function() {
|
||||
wait--;
|
||||
if (wait === 0) {
|
||||
if (!infinite) questions < max_questions ? game() : score();
|
||||
else bad_answers < max_infinite_errors ? game() : score();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function score() {
|
||||
|
||||
function generateTwitterText() {
|
||||
var start_sentence = 'I got ';
|
||||
var end_sentence = 'Can you get a better score than me?';
|
||||
var score_sentence = (Math.floor(good_answers/max_questions*100))+'% Pokémons right!'
|
||||
var questions_sentence = max_questions + " questions"
|
||||
|
||||
if (!infinite) return start_sentence+score_sentence+" "+end_sentence;
|
||||
else return start_sentence+good_answers+" good Pokémon answers! "+end_sentence;
|
||||
}
|
||||
|
||||
function generateSeed() {
|
||||
s_domain = "https://poketest.marchal.dev/index.html";
|
||||
gen = '';
|
||||
if (gen_list.length > 0) {
|
||||
for (i in gen_list)
|
||||
gen += gen_list[i].substring(0,1);
|
||||
}
|
||||
else gen += "all";
|
||||
s_gen = "?gen=" + gen;
|
||||
s_lang = "&lang=" + lang;
|
||||
s_silhouette = "&silhouette=" + (silhouette == "silhouette" ? "true" : "false");
|
||||
s_questions = "&questions=" + (!whole_set? max_questions : "set");
|
||||
s_time = "&time=" + max_chrono;
|
||||
|
||||
// save in the local storage for default use
|
||||
localStorage.setItem('generation', gen);
|
||||
localStorage.setItem('lang', lang);
|
||||
localStorage.setItem('silhouette', silhouette);
|
||||
localStorage.setItem('questions', (!whole_set? max_questions : "set"));
|
||||
localStorage.setItem('time', max_chrono);
|
||||
|
||||
return s_domain + s_gen + s_lang + s_silhouette + s_questions + s_time;
|
||||
}
|
||||
$('article #container #score .pokemon').after('<div id="seed"></div><div id="share"></div>');
|
||||
$('article #container').addClass('diploma');
|
||||
$('article #container').removeClass('game_active');
|
||||
$('article #container .chrono').hide();
|
||||
if (!infinite)
|
||||
$('article #container .pokemon').empty().append("<p class=\"score-text\">Score: <strong>"+(Math.floor(good_answers/max_questions*100))+"%</strong></p>");
|
||||
else
|
||||
$('article #container .pokemon').empty().append("<p class=\"score-text\">Score: <strong>"+good_answers+" good answer"+(good_answers>1?("s"):"")+"!</strong></p>");
|
||||
|
||||
$('article #container #seed').empty().append('<p style="margin:0px;">Share your configuration</p><input type="text" name="seed" value="'+
|
||||
generateSeed()+'">');
|
||||
$('article #container #share').empty().append('<div id="copyseed"><a href="#">Copy</a></div><a href="https://twitter.com/share" \
|
||||
class="twitter-share-button" data-url="'+generateSeed()+'" data-text="'+generateTwitterText()+
|
||||
'" data-size="large" data-hashtags="Pokétest">Tweet</a>');
|
||||
$.getScript("//platform.twitter.com/widgets.js"); // for the twitter button to work
|
||||
$('article #container #answers').remove(); // until play again is fixed
|
||||
//$('article #container #answers').empty().append('<p class="button"><input type="submit" \
|
||||
// class="start_again" name="start_again" value="Play again!"></p>');
|
||||
|
||||
// copy seed in clipboard
|
||||
$("article #container #copyseed").click(function() {
|
||||
$('article #container #seed input').select();
|
||||
document.execCommand("copy");
|
||||
});
|
||||
|
||||
$('article #container .button input.start_again').click(function() {
|
||||
score = questions = good_answers = bad_answers = 0;
|
||||
chrono = max_chrono;
|
||||
$('article #container .chrono').show();
|
||||
$('article #container').removeClass('diploma');
|
||||
game();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
361
style.css
Normal file
361
style.css
Normal file
@ -0,0 +1,361 @@
|
||||
html { background-color:#2f2e2e; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
width: 100vw; min-height: 100vh;
|
||||
margin: auto;
|
||||
font-family: Verdana;
|
||||
color: #e7e2e2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a { color: #e7e2e2; font-weight: bold; }
|
||||
h1 { font-size: 1.7em; }
|
||||
h2 { text-align: center; }
|
||||
h3 { font-variant: small-caps; }
|
||||
|
||||
/**** HEADER ****/
|
||||
|
||||
header {
|
||||
height:14vh;
|
||||
background: #2f2e2e;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
header img {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: 12.5vh;
|
||||
margin-left: 8vw; margin-top: 0.75vh;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex; align-items: flex-end;
|
||||
margin-right: 8vw; margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
header nav ul, header nav ul li {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
header nav ul li a {
|
||||
padding: 0px;
|
||||
margin-left: 3.5vw;
|
||||
color: rgb(202, 207, 208);
|
||||
text-decoration: none;
|
||||
font-size: 1.6em;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
header nav ul li a:hover { color: #ff6b79; }
|
||||
|
||||
|
||||
/**** MAIN CONTENT ****/
|
||||
|
||||
article { width: 100vw; margin-top: 5vh; }
|
||||
|
||||
article #container {
|
||||
margin-left: 10vw; margin-right: 10vw;
|
||||
padding: 5px 20px;
|
||||
background: rgba(0, 0, 0, .85);
|
||||
}
|
||||
|
||||
article #container .companion {
|
||||
float: right;
|
||||
width: 180px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
article #container .top-companion {
|
||||
margin-top: 20px;
|
||||
float: right;
|
||||
width: 250px;
|
||||
margin-left: 25px; margin-right: 25px;
|
||||
}
|
||||
|
||||
article #container .middle-companion {
|
||||
float: right;
|
||||
width: 250px;
|
||||
margin-left: 25px; margin-right: 25px;
|
||||
}
|
||||
|
||||
|
||||
article #container .about { margin-bottom: 3.5%; }
|
||||
article #container .about li { margin-top: 5px; margin-bottom: 5px; }
|
||||
article #container .about li a { margin-top: 5px; margin-bottom: 5px; font-weight: normal; }
|
||||
|
||||
article #container .about_titles { text-decoration: underline; }
|
||||
|
||||
|
||||
|
||||
/**** GENERATIONS COLOR ****/
|
||||
|
||||
.RB1 { background: #FF1111; color: black; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.RB2 { background: #1111FF; color: white; padding: 5px; border-radius: 0px 10px 10px 0px; }
|
||||
.GS1 { background: #DAA520; color: black; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.GS2 { background: #C0C0C0; color: black; padding: 5px; border-radius: 0px 10px 10px 0px; }
|
||||
.RS1 { background: #A00000; color: white; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.RS2 { background: #0000A0; color: white; padding: 5px; border-radius: 0px 10px 10px 0px; }
|
||||
.DP1 { background: #AAAAFF; color: black; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.DP2 { background: #FFAAAA; color: black; padding: 5px; border-radius: 0px 10px 10px 0px; }
|
||||
.BW1 { background: #444444; color: white; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.BW2 { background: #E1E1E1; color: black; padding: 5px; border-radius: 0px 10px 10px 0px; }
|
||||
.XY1 { background: #025DA6; color: white; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.XY2 { background: #EA1A3E; color: black; padding: 5px; border-radius: 0px 10px 10px 0px; }
|
||||
.SM1 { background: #ef9039; color: black; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.SM2 { background: #589ac8; color: black; padding: 5px; border-radius: 0px 10px 10px 0px; }
|
||||
.SWSH1 { background: #00A1E9; color: black; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.SWSH2 { background: #BF004F; color: white; padding: 5px; border-radius: 0px 10px 10px 0px; }
|
||||
|
||||
.RB { border-radius:50%; background: linear-gradient(-45deg, #FF1111 50%, #1111FF 50%); display:block; border: 1px solid white; }
|
||||
.GS { border-radius:50%; background: linear-gradient(-45deg, #DAA520 50%, #C0C0C0 50%); display:block; border: 1px solid white; }
|
||||
.RS { border-radius:50%; background: linear-gradient(-45deg, #A00000 50%, #0000A0 50%); display:block; border: 1px solid white; }
|
||||
.DP { border-radius:50%; background: linear-gradient(-45deg, #AAAAFF 50%, #FFAAAA 50%); display:block; border: 1px solid white; }
|
||||
.BW { border-radius:50%; background: linear-gradient(-45deg, #444444 50%, #E1E1E1 50%); display:block; border: 1px solid white; }
|
||||
.XY { border-radius:50%; background: linear-gradient(-45deg, #025DA6 50%, #EA1A3E 50%); display:block; border: 1px solid white; }
|
||||
.SM { border-radius:50%; background: linear-gradient(-45deg, #ef9039 50%, #589ac8 50%); display:block; border: 1px solid white; }
|
||||
.SWSH { border-radius:50%; background: linear-gradient(-45deg, #00A1E9 50%, #BF004F 50%); display:block; border: 1px solid white; }
|
||||
|
||||
/**** FOOTER ****/
|
||||
|
||||
#content-wrap {
|
||||
padding-bottom: 12vh; /* Footer height */
|
||||
}
|
||||
|
||||
footer {
|
||||
bottom:0;
|
||||
background: #2f2e2e;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100vw; height: 7vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer p { margin: auto; }
|
||||
|
||||
|
||||
|
||||
/**** POKETEST ****/
|
||||
|
||||
article #container #game #configuration {
|
||||
min-width: 200px; max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
article #container #game #configuration input[name="gen"], article #container #game #selected_options input {
|
||||
margin-left: 40px; margin-bottom: 11px;
|
||||
}
|
||||
|
||||
article #container #game #configuration input[type="checkbox"] { margin-left: 75px; }
|
||||
article #container #game #configuration .first { margin-left: 40px; }
|
||||
article #container #game #configuration select { font-size: 15px; }
|
||||
|
||||
article #container #game #configuration #selected_options {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
article #container #game #configuration #left_config { float: left; }
|
||||
article #container #game #configuration #right_config { float: right; }
|
||||
|
||||
article #container #game .button {
|
||||
margin: auto;
|
||||
padding: 20px; padding-top: 30px;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article #container input[type=submit] {
|
||||
padding: 10px;
|
||||
border: 2px;
|
||||
border-radius: 15px;
|
||||
background: #e7e2e2;
|
||||
color: #2f2e2e;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
article #container input[type=submit]:hover {
|
||||
background: #2f2e2e;
|
||||
color: #e7e2e2;
|
||||
}
|
||||
|
||||
|
||||
/**** GAME LAUNCHED ****/
|
||||
|
||||
article #container.game_active { height: 68vh; }
|
||||
article #container #top_game { display: flex; justify-content: space-between; height: 8vh; }
|
||||
article #container #top_game .whois { display: flex; align-items: flex-start; }
|
||||
|
||||
article #container #top_game .chrono {
|
||||
width: 35px; height: 35px;
|
||||
margin-top: 10px; margin-bottom: 0px;
|
||||
padding: 12px 10px 10px 10px;
|
||||
border-radius: 100%;
|
||||
background: #e7e2e2;
|
||||
color: #2f2e2e;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article #container .pokemon {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
font-size: 2.1em;
|
||||
}
|
||||
|
||||
article #container .pokemon img { height: 50vh; }
|
||||
|
||||
article #container .pokemon img.silhouette { filter: contrast(0%) brightness(170%); }
|
||||
|
||||
article #container #answers {
|
||||
text-align: center;
|
||||
height: 10vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
article #container #answers input { margin-right: 30px; display: inline; }
|
||||
article #container #answers input:last-child { margin-right: 0px; }
|
||||
|
||||
article #container #answers .final_answer { font-size: 23px; }
|
||||
article #container #answers .final_answer .good { color:#3ad48d; font-weight:bold; }
|
||||
article #container #answers .final_answer .bad { color: #f85050; font-weight:bold; }
|
||||
|
||||
|
||||
/* game end screen */
|
||||
|
||||
article #container #score .score-text { margin-top:40px; }
|
||||
|
||||
article #container #share {
|
||||
width: 200px;
|
||||
margin: auto; margin-top: 8px; margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article #container #seed {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
article #container #seed input {
|
||||
width: 35em;
|
||||
padding-top: 4px; padding-bottom: 4px;
|
||||
border-radius: 5px;
|
||||
background: #e7e2e2;
|
||||
border: #e7e2e2;
|
||||
color: #2f2e2e;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
article #container #copyseed {
|
||||
float: left;
|
||||
width: 60px; height: 16px;
|
||||
display: block;
|
||||
padding: 10px; padding-top: 4px; padding-bottom: 8px;
|
||||
border-radius: 5px;
|
||||
background: darkcyan;
|
||||
font-size: 15px;
|
||||
font-variant: small-caps;
|
||||
text-decoration: none;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
article #container #copyseed a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
article #container #copyseed:hover { background:lightseagreen; }
|
||||
|
||||
article #container.diploma {
|
||||
border-style: solid;
|
||||
border-image: url(img/border.png) 64 64 64 62 repeat;
|
||||
border-width: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
article #container.diploma #score {
|
||||
background: url('img/red.png') no-repeat;
|
||||
background-size: 180px; background-position: right bottom;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**** FLASHDEX ****/
|
||||
|
||||
#game #flashdex_config { margin:auto; max-width:600px; }
|
||||
#game #flashdex_config p { text-align: center; }
|
||||
#game #flashdex_config p a { text-decoration: none; }
|
||||
#game #flashdex_config p label { display: inline-block; margin: 7px; }
|
||||
#game #flashdex_config h2 { text-decoration: underline; font-size: 1.05em; margin-top: 25px; }
|
||||
#game #flashdex_config span.alternate_forms { margin-top: 20px; margin-bottom: 0px; display: block; font-variant: small-caps; font-size: 19px; }
|
||||
|
||||
#game #flashdex_config p.button { padding: 0px; margin-top: 20px; }
|
||||
|
||||
#loading {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
#container #game #flashdex {
|
||||
margin:auto;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
margin-top:2vh;
|
||||
}
|
||||
|
||||
#container #game #flashdex .pokedex {
|
||||
width: 250px; height: 285px;
|
||||
border: 1px solid white;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 10px 10px;
|
||||
background-color: rgba(60, 60, 60, 0.9);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex img {
|
||||
height: 250px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex span.name {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
margin: auto; margin-top: 15px;
|
||||
}
|
||||
|
||||
span.form {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 25px; height: 25px;
|
||||
background-size: 25px 25px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
span.form.mega { background-image: url('img/icon_mega.png'); }
|
||||
span.form.giga {
|
||||
background-image: url('img/icon_giga.png'); background-color: white;
|
||||
background-position: center; background-size:20px;
|
||||
border-radius:50%; border: 1px solid white;
|
||||
}
|
||||
2
waitforimages-2.2.0.min.js
vendored
Normal file
2
waitforimages-2.2.0.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! waitForImages jQuery Plugin 2016-01-04 */
|
||||
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){var b="waitForImages";a.waitForImages={hasImageProperties:["backgroundImage","listStyleImage","borderImage","borderCornerImage","cursor"],hasImageAttributes:["srcset"]},a.expr[":"]["has-src"]=function(b){return a(b).is('img[src][src!=""]')},a.expr[":"].uncached=function(b){return a(b).is(":has-src")?!b.complete:!1},a.fn.waitForImages=function(){var c,d,e,f=0,g=0,h=a.Deferred();if(a.isPlainObject(arguments[0])?(e=arguments[0].waitForAll,d=arguments[0].each,c=arguments[0].finished):1===arguments.length&&"boolean"===a.type(arguments[0])?e=arguments[0]:(c=arguments[0],d=arguments[1],e=arguments[2]),c=c||a.noop,d=d||a.noop,e=!!e,!a.isFunction(c)||!a.isFunction(d))throw new TypeError("An invalid callback was supplied.");return this.each(function(){var i=a(this),j=[],k=a.waitForImages.hasImageProperties||[],l=a.waitForImages.hasImageAttributes||[],m=/url\(\s*(['"]?)(.*?)\1\s*\)/g;e?i.find("*").addBack().each(function(){var b=a(this);b.is("img:has-src")&&!b.is("[srcset]")&&j.push({src:b.attr("src"),element:b[0]}),a.each(k,function(a,c){var d,e=b.css(c);if(!e)return!0;for(;d=m.exec(e);)j.push({src:d[2],element:b[0]})}),a.each(l,function(a,c){var d=b.attr(c);return d?void j.push({src:b.attr("src"),srcset:b.attr("srcset"),element:b[0]}):!0})}):i.find("img:has-src").each(function(){j.push({src:this.src,element:this})}),f=j.length,g=0,0===f&&(c.call(i[0]),h.resolveWith(i[0])),a.each(j,function(e,j){var k=new Image,l="load."+b+" error."+b;a(k).one(l,function m(b){var e=[g,f,"load"==b.type];return g++,d.apply(j.element,e),h.notifyWith(j.element,e),a(this).off(l,m),g==f?(c.call(i[0]),h.resolveWith(i[0]),!1):void 0}),j.srcset&&(k.srcset=j.srcset),k.src=j.src})}),h.promise()}});
|
||||
Loading…
Reference in New Issue
Block a user