Compare commits
35 Commits
bf67a65fc8
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 06f0835353 | |||
| fe4dd38656 | |||
| b6393beaee | |||
| 9429626a25 | |||
| 8afa5684cf | |||
| cba1c7c3ef | |||
| 670b33850f | |||
| a4b32ca3ae | |||
| 38bdaf397b | |||
| 9992e7cc28 | |||
| 4ab3df9b81 | |||
| bd413faf9f | |||
| ae165903bd | |||
| 36dc9b5923 | |||
| 09bbf223c3 | |||
| c3f84ab2ab | |||
| 109334f441 | |||
| 5ec2590920 | |||
| 68d555c676 | |||
| 9edf9e135d | |||
| 3bde0a4a4f | |||
| caab9fe47d | |||
| 074726aea4 | |||
| 396681cfb0 | |||
| 14e784f821 | |||
| 0b19f84814 | |||
| 18c80456c4 | |||
| 8eeb0dee35 | |||
| 37612ee218 | |||
| 19aa6b70b3 | |||
| 0e356f0caf | |||
| 408d9d442c | |||
| f0214cdd97 | |||
| 3a490aa173 | |||
| 10b56c86ee |
2
.gitmodules
vendored
2
.gitmodules
vendored
@ -1,3 +1,3 @@
|
||||
[submodule "pokemon"]
|
||||
path = pokemon
|
||||
url = https://git.n700.ovh/keb/poketest-pokemon.git
|
||||
url = https://git.marchal.dev/keb/poketest-pokemon.git
|
||||
|
||||
20
README.md
20
README.md
@ -2,30 +2,30 @@
|
||||
|
||||
### 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.
|
||||
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 now more than 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).
|
||||
Now that there are now more than a thousand 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
|
||||
- Make answer choices closer by type
|
||||
- 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>]'`
|
||||
`magick mogrify '*.png[x700>]'`
|
||||
|
||||
And this one allows to resize to 700x700px, but putting the image at the center if it is smaller than that.
|
||||
|
||||
`magick mogrify -resize 700x700 -background transparent -gravity center -extent 700x700 *.png`
|
||||
|
||||
### 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.
|
||||
This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library. It uses 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 - 2022.
|
||||
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 - 2025.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
90
about.html
90
about.html
@ -3,20 +3,24 @@
|
||||
<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!">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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="jquery-3.7.1.min.js"></script>
|
||||
<script src="interface.js"></script>
|
||||
<script src="poketest.js"></script>
|
||||
<title>Pokétest</title>
|
||||
<title>Pokétest - About</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg"></div>
|
||||
<div id="content-wrap">
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<div id="hamburger">
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
@ -28,58 +32,58 @@
|
||||
<img src="pokemon/877-0.png" class="top-companion" alt="morpeko" />
|
||||
<h1>About</h1>
|
||||
<ul>
|
||||
<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>
|
||||
<li><a href="#1">How to play: Pokétest</a></li>
|
||||
<li><a href="#2">How to use: Flashdex</a></li>
|
||||
<li><a href="#3">Website informations</a></li>
|
||||
<li><a href="#4">Copyrights</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="1">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="1">How to play: Pokétest</h3>
|
||||
<p>The Pokétest is a game where you have to guess the name of the Pokémon appearing. The following options are available:</p>
|
||||
<ul>
|
||||
<li><strong>Generations</strong>: you can filter the Pokémon generations that you want. Either all of them, or what you choose, including options for regional forms, mega-evolutions and gigantamax forms.</li>
|
||||
<li><strong>Language</strong>: all the languages available in the main games are present. Choose the one you're familiar with or want to learn! Please note that in certain country, the Pokémon names are the english ones.</li>
|
||||
<li><strong>Answer type</strong>: "choice" makes you choose between 4 propositions ; "input" makes you type the exact name, for a harder difficulty!</li>
|
||||
<li><strong>Silhouette</strong>: "silhouette" only allows you the see the shape, "full art" allows you to see the whole artwork.</li>
|
||||
<li><strong>Number of questions</strong>: a number to choose between 15, 30, 50, 100, Infinite or Whole Set. In the case of Infinite, the game ends when you have made 5 bad answers.</li>
|
||||
<li><strong>Time to answer</strong>: the timer, to choose between 2, 5, 10, 30 and 99 seconds. You can also deactivate it.</li>
|
||||
</ul>
|
||||
<p>Note: if the answer type is "Choice", you can use the "1", "2", "3" or "4" keys to answer. You can also use the "Enter" key to launch the game.</p>
|
||||
|
||||
<h3 id="2">What is this website made with?</h3>
|
||||
<h3 id="2">How to use: Flashdex</h3>
|
||||
<p>The Flashdex is a very simple Pokédex, useful to see the Pokémons in a good resolution. It is filtered by generation and alternate forms. You can chose the language in which it is displayed.</p>
|
||||
<p>When a deck is generated, the URL is changed with the parameters that were selected. This way, you can easily share it to whoever you want.</p>
|
||||
<p>Types are displayed in the top-left corner, and generations on the top-right corner. If there are different artworks available for the Pokémon, arrows are displayed on the bottom-left corner. You can use them to switch between artworks. Please note that those are not always alternate forms, they are alternate artworks. For example:</p>
|
||||
<ul>
|
||||
<li>The first generation has at least three artworks available by Pokémon.</li>
|
||||
<li>The starters of the third and fourth generations have two official artworks.</li>
|
||||
<li>A Pokémon like Pikachu (#25) has 17 official artworks, some of them are different forms available ingame.</li>
|
||||
<li>Castform (#351) or Rotom (#479), for example, have different forms with different types associated.</li>
|
||||
<li>A unique case is Beldum (#374) which has an artwork for its shiny form.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="3">Website informations</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 />
|
||||
This website is <strong>HTML5</strong> and <strong>CSS3</strong> compliant.<br />
|
||||
It has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library.<br />
|
||||
It uses the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>.
|
||||
</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.
|
||||
All of those components are licensed under the MIT license, as is the website source code, which is <a href="https://git.marchal.dev/keb/poketest">available here</a>.<br />
|
||||
If you found a bug or want to add a feature, you can always contact me or make a pull request.
|
||||
</p>
|
||||
<p>
|
||||
This website has been developed by <a href="https://theo.marchal.dev/">Théo</a>, a game developer having trouble to remember the name of all those monsters.
|
||||
</p>
|
||||
|
||||
<h3 id="3">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">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">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">This website doesn't work well on my browser.</h3>
|
||||
<p>Please contact me or make a pull request!</p>
|
||||
|
||||
<h3 id="7">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">Can you add this feature?</h3>
|
||||
<p>Please contact me or make a pull request!</p>
|
||||
|
||||
<h3 id="9">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 - 2022.<br />
|
||||
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>
|
||||
<h3 id="4">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 - 2025.</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 - 2022 Pokétest 2.6</p>
|
||||
<p>© 2012 - 2025 Pokétest 2.10</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 334 KiB After Width: | Height: | Size: 334 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 295 KiB After Width: | Height: | Size: 761 KiB |
BIN
artwork/artwork11.jpg
Normal file
BIN
artwork/artwork11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 820 KiB |
BIN
artwork/artwork12.jpg
Normal file
BIN
artwork/artwork12.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 730 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 302 KiB After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 332 KiB After Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 416 KiB After Width: | Height: | Size: 416 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 462 KiB After Width: | Height: | Size: 462 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 474 KiB After Width: | Height: | Size: 474 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 422 KiB After Width: | Height: | Size: 408 KiB |
4
backstretch-2.0.4.min.js
vendored
4
backstretch-2.0.4.min.js
vendored
@ -1,4 +0,0 @@
|
||||
/*! 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);
|
||||
@ -3,21 +3,25 @@
|
||||
<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!">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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="jquery-3.7.1.min.js"></script>
|
||||
<script src="waitforimages-2.4.0.min.js"></script>
|
||||
<script src="interface.js"></script>
|
||||
<script src="flashdex.js"></script>
|
||||
<title>Pokétest</title>
|
||||
<title>Pokétest - Flashdex</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg"></div>
|
||||
<div id="content-wrap">
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<div id="hamburger">
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
@ -27,29 +31,34 @@
|
||||
<article>
|
||||
<div id="container">
|
||||
<div id="game">
|
||||
<img src="pokemon/R549.png" alt="lilligant" class="companion" />
|
||||
<img src="pokemon/963-999.png" alt="finizen" class="flashdex-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>
|
||||
<p>✨ <strong>Now updated for Pokémon Scarlet and Violet DLC: The Hidden Treasure of Area Zero!</strong></p>
|
||||
|
||||
<p>The Flashdex is a very simple Pokédex, useful to see your favorite creatures in good resolution. Perfect for learning new names, and to see the different generations and Pokémon forms! It also includes the monster's type.</p>
|
||||
|
||||
<p>For more details, please read the <a href="about.html">About page</a>!</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="generation">
|
||||
<span class="gen"><input type="checkbox" name="1g" id="1g"><label for="1g"><strong><span class="RB1">1</span><span class="RB2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="2g" id="2g"><label for="2g"><strong><span class="GS1">2</span><span class="GS2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="3g" id="3g"><label for="3g"><strong><span class="RS1">3</span><span class="RS2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="4g" id="4g"><label for="4g"><strong><span class="DP1">4</span><span class="DP2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="5g" id="5g"><label for="5g"><strong><span class="BW1">5</span><span class="BW2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="6g" id="6g"><label for="6g"><strong><span class="XY1">6</span><span class="XY2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="7g" id="7g"><label for="7g"><strong><span class="SM1">7</span><span class="SM2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="8g" id="8g"><label for="8g"><strong><span class="SWSH1">8</span><span class="SWSH2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="9g" id="9g"><label for="9g"><strong><span class="SV1">9</span><span class="SV2">G</span></strong></label></span>
|
||||
</span>
|
||||
<span class="alternate_forms">Alternate forms</span>
|
||||
<input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label>
|
||||
<input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label>
|
||||
<input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label>
|
||||
<span class="gen"><input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
@ -77,9 +86,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<footer>
|
||||
<p>© 2012 - 2025 Pokétest 2.10</p>
|
||||
</footer>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2012 - 2022 Pokétest 2.6</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
281
flashdex.js
281
flashdex.js
@ -1,5 +1,5 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
$(document).ready(function()
|
||||
{
|
||||
/****** Generations ******/
|
||||
var G1 = [1, 151];
|
||||
var G2 = [152, 251];
|
||||
@ -9,32 +9,37 @@ $(document).ready(function() {
|
||||
var G6 = [650, 721];
|
||||
var G7 = [722, 809];
|
||||
var G8 = [810, 905];
|
||||
var MEGA = [906, 955];
|
||||
var GIGA = [956, 987];
|
||||
var REG = [988, 1040];
|
||||
var G9 = [906, 1025];
|
||||
var MEGA = [1026, 1075];
|
||||
var GIGA = [1076, 1107];
|
||||
var REG = [1108, 1162];
|
||||
var gen_number = 9;
|
||||
var extra_number = 3; // mega, giga, reg
|
||||
|
||||
/************ GAME *************/
|
||||
/*******************************/
|
||||
|
||||
// loading json file
|
||||
var json = $.getJSON('pokemon.json', function(pk) {
|
||||
|
||||
$.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)
|
||||
$('article #container #flashdex_config .all').click(function()
|
||||
{
|
||||
if ($(this).hasClass("unselected"))
|
||||
{
|
||||
for (i = 1; i < 10; ++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)
|
||||
}
|
||||
else
|
||||
{
|
||||
for (i = 1; i < 10; ++i)
|
||||
$('input[name="'+i+'g"]').prop('checked', false);
|
||||
$('input[name="mega"]').prop('checked', false);
|
||||
$('input[name="regional"]').prop('checked', false);
|
||||
@ -44,21 +49,38 @@ $(document).ready(function() {
|
||||
}
|
||||
})
|
||||
|
||||
// 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();
|
||||
|
||||
$('article #container .button input.start').click(function()
|
||||
{
|
||||
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();
|
||||
if (gen_list.length == 0)
|
||||
return;
|
||||
|
||||
function getFormText(pkmn) {
|
||||
setUrlSearch();
|
||||
|
||||
$('article #container #game #loading').show();
|
||||
$('article #container #game #flashdex').empty().hide();
|
||||
|
||||
function setUrlSearch()
|
||||
{
|
||||
gen = '';
|
||||
if (gen_list.length < (gen_number + extra_number))
|
||||
{
|
||||
for (i in gen_list)
|
||||
gen += gen_list[i].substring(0,1);
|
||||
}
|
||||
else gen += "all";
|
||||
|
||||
window.history.replaceState(null, null, "?gen=" + gen + "&lang=" + lang);
|
||||
localStorage.setItem('lang', lang);
|
||||
}
|
||||
|
||||
function getFormText(pkmn)
|
||||
{
|
||||
if (pkmn["origin"] == "Kanto")
|
||||
return '<span class="form RB"></span>'
|
||||
else if (pkmn["origin"] == "Johto")
|
||||
@ -73,66 +95,204 @@ $(document).ready(function() {
|
||||
return '<span class="form XY"></span>'
|
||||
else if (pkmn["origin"] == "Alola")
|
||||
return '<span class="form SM"></span>'
|
||||
else if (pkmn["origin"] == "Galar" || pkmn["origin"] == "Hisui")
|
||||
else if (pkmn["origin"] == "Galar")
|
||||
return '<span class="form SWSH"></span>'
|
||||
else if (pkmn["type"] == "mega")
|
||||
else if (pkmn["origin"] == "Hisui")
|
||||
return '<span class="form LA"></span>'
|
||||
else if (pkmn["origin"] == "Paldea")
|
||||
return '<span class="form SV"></span>'
|
||||
else if (pkmn["form"] == "mega")
|
||||
return '<span class="form mega"></span>';
|
||||
else if (pkmn["type"] == "giga")
|
||||
else if (pkmn["form"] == "giga")
|
||||
return '<span class="form giga"></span>';
|
||||
return '';
|
||||
}
|
||||
|
||||
function getFormattedNumber(num) {
|
||||
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) {
|
||||
function getFormattedTypes(num) {
|
||||
str = '<span class="types"><span class="'+num["type"][0]+'">'+num["type"][0]+'</span>';
|
||||
if (num["type"][1])
|
||||
str += '<span class="'+num["type"][1]+'">'+num["type"][1]+'</span>';
|
||||
str += '</span>';
|
||||
return str;
|
||||
}
|
||||
|
||||
function getFormattedTypes(num, index)
|
||||
{
|
||||
str = '<span class="'+num["type"+index][0]+'">'+num["type"+index][0]+'</span>';
|
||||
if (num["type"+index][1])
|
||||
str += '<span class="'+num["type"+index][1]+'">'+num["type"+index][1]+'</span>';
|
||||
return str;
|
||||
}
|
||||
|
||||
function getFormattedSpriteButton(num)
|
||||
{
|
||||
if (num["sprite"] || num["origin"] == "Kanto")
|
||||
return '<span class="button"><span class="left-arrow">◀︎</span><span class="right-arrow">▶︎</span></span>';
|
||||
return '';
|
||||
}
|
||||
|
||||
for (i in pokemon_generation_list)
|
||||
{
|
||||
$('article #container #game #flashdex').append(
|
||||
'<div class="pokedex id_'+pklist.mn[pokemon_generation_list[i]]["num"]+'">'
|
||||
+ '<span class="types">' + getFormattedTypes(pklist.mn[pokemon_generation_list[i]], '') + '</span>'
|
||||
+ getFormattedSpriteButton(pklist.mn[pokemon_generation_list[i]], '')
|
||||
+ getFormText(pklist.mn[pokemon_generation_list[i]]) // either gigantamax or mega-evolution
|
||||
+ '<img src="pokemon/'+ imageType((pklist.mn[pokemon_generation_list[i]]["num"])) +'.png"/>'
|
||||
+ '<img src="pokemon/'+ imageType(pklist.mn[pokemon_generation_list[i]]) +'.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() {
|
||||
$('article #container #game #flashdex').waitForImages(function()
|
||||
{
|
||||
$(this).show();
|
||||
$('article #container #game #loading').hide();
|
||||
});
|
||||
|
||||
function generations() {
|
||||
function handleArtworks(origin, left)
|
||||
{
|
||||
function handleDefault()
|
||||
{
|
||||
var form = url.split('-')[1];
|
||||
|
||||
if (left)
|
||||
{
|
||||
if (form > 0)
|
||||
form--;
|
||||
else
|
||||
form = pklist.mn[pokemon]["sprite"] - 1;
|
||||
}
|
||||
else
|
||||
{
|
||||
if (form < pklist.mn[pokemon]["sprite"] - 1)
|
||||
form++;
|
||||
else
|
||||
form = 0;
|
||||
}
|
||||
|
||||
var newUrl = 'pokemon/' + pokemonUrl + '-' + form + '.png';
|
||||
|
||||
origin.parent().parent().find("img").attr('src', newUrl);
|
||||
handleChangeType(form, pokemon);
|
||||
}
|
||||
|
||||
function handleKanto()
|
||||
{
|
||||
var KantoForm = '';
|
||||
for (var i = 0; i < originalUrl.length; i++)
|
||||
{
|
||||
if (originalUrl[i].match(/[A-Z]/))
|
||||
KantoForm += originalUrl[i];
|
||||
}
|
||||
|
||||
if (left)
|
||||
{
|
||||
if (KantoForm == "RG")
|
||||
KantoForm = "RB";
|
||||
else if (KantoForm == "RB")
|
||||
KantoForm = "";
|
||||
else
|
||||
KantoForm = "RG";
|
||||
}
|
||||
else
|
||||
{
|
||||
if (KantoForm == "RB")
|
||||
KantoForm = "RG";
|
||||
else if (KantoForm == "RG")
|
||||
KantoForm = "";
|
||||
else
|
||||
KantoForm = "RB";
|
||||
}
|
||||
|
||||
if (KantoForm)
|
||||
KantoForm = "-" + KantoForm;
|
||||
|
||||
var newUrl = 'pokemon/' + pokemonUrl + KantoForm + '.png';
|
||||
origin.parent().parent().find("img").attr('src', newUrl);
|
||||
}
|
||||
|
||||
function handleChangeType(form, num)
|
||||
{
|
||||
if (form != 0)
|
||||
{
|
||||
if (pklist.mn[num]["type"+form])
|
||||
origin.parent().parent().find(".types").empty().append(getFormattedTypes(pklist.mn[num], form));
|
||||
}
|
||||
else
|
||||
origin.parent().parent().find(".types").empty().append(getFormattedTypes(pklist.mn[num], ''));
|
||||
}
|
||||
|
||||
var url = origin.parent().parent().find("img").attr('src');
|
||||
var originalUrl = url;
|
||||
|
||||
url = url.split('/')[1];
|
||||
url = url.split('.')[0];
|
||||
var pokemonUrl = url.split('-')[0];
|
||||
|
||||
var pokemon = pklist.mn.findIndex(function(item, i)
|
||||
{
|
||||
return item.num == pokemonUrl;
|
||||
});
|
||||
|
||||
if (pklist.mn[pokemon]["origin"] == "Kanto" && !pklist.mn[pokemon]["sprite"])
|
||||
handleKanto();
|
||||
else if (pklist.mn[pokemon]["sprite"])
|
||||
handleDefault();
|
||||
}
|
||||
|
||||
$('.left-arrow').click(function(e)
|
||||
{
|
||||
handleArtworks($(this), true);
|
||||
});
|
||||
|
||||
$('.right-arrow').click(function(e)
|
||||
{
|
||||
handleArtworks($(this), false);
|
||||
});
|
||||
|
||||
function generations()
|
||||
{
|
||||
// create the list of the different generations
|
||||
function createGenerationList(name) {
|
||||
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) {
|
||||
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) {
|
||||
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, "7g", G7); evaluateByGeneration(i, "8g", G8); evaluateByGeneration(i, "9g", G9);
|
||||
evaluateByGeneration(i, "mega", MEGA); evaluateByGeneration(i, "regional", REG); evaluateByGeneration(i, "gigantamax", GIGA);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (i = 0; i < 9; i++)
|
||||
for (i = 0; i < 10; i++)
|
||||
createGenerationList((i + "g"));
|
||||
createGenerationList("regional");
|
||||
createGenerationList("mega");
|
||||
@ -141,44 +301,13 @@ $(document).ready(function() {
|
||||
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, 898];
|
||||
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, 892, 905, "G892"];
|
||||
|
||||
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);
|
||||
function imageType(num)
|
||||
{
|
||||
if (num["sprite"])
|
||||
return num["num"] + "-0";
|
||||
return num["num"];
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
BIN
img/border.png
BIN
img/border.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
57
index.html
57
index.html
@ -3,20 +3,24 @@
|
||||
<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!">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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="jquery-3.7.1.min.js"></script>
|
||||
<script src="interface.js"></script>
|
||||
<script src="poketest.js"></script>
|
||||
<title>Pokétest</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg"></div>
|
||||
<div id="content-wrap">
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<div id="hamburger">
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
@ -26,14 +30,14 @@
|
||||
<article>
|
||||
<div id="container">
|
||||
<div id="game">
|
||||
<img src="pokemon/R58.png" alt="Growlithe" class="companion" />
|
||||
<h1>What is Pokétest?</h1>
|
||||
<img src="pokemon/912.png" alt="Quaxly" class="poketest-companion" />
|
||||
<h1>Pokétest</h1>
|
||||
|
||||
<p>✨ <strong>Now updated for Pokémon Legends: Arceus!</strong></p>
|
||||
<p>✨ <strong>Now updated for Pokémon Scarlet and Violet DLC: The Hidden Treasure of Area Zero!</strong></p>
|
||||
|
||||
<p>There are now more than 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, Regional or Gigantamax Forms!</p>
|
||||
<p>We have now reached the thousand Pocket Monsters mark, and more than a hundred 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, Regional or Gigantamax Forms!</p>
|
||||
|
||||
<p>You can play with your keyboard: just press 1, 2, 3 or 4 to choose the answer!</p>
|
||||
<p>For more details, please read the <a href="about.html">About page</a>!</p>
|
||||
|
||||
<div id="configuration">
|
||||
<h2>Configuration</h2>
|
||||
@ -71,13 +75,17 @@
|
||||
<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">
|
||||
<input type="checkbox" name="8g" id="8g"><label for="8g"> <strong title="Galar">
|
||||
<span class="SWSH1">8</span><span class="SWSH2">G</span>
|
||||
</strong> (810 - 905)</label><br />
|
||||
|
||||
<input type="checkbox" name="9g" id="9g"><label for="9g"> <strong title="Paldea">
|
||||
<span class="SV1">9</span><span class="SV2">G</span>
|
||||
</strong> (906 - 1008)</label><br />
|
||||
|
||||
<input type="checkbox" name="regional" id="regional"><label for="regional"> <strong title="Regional">
|
||||
Regional Forms
|
||||
</strong> (53)</label><br />
|
||||
</strong> (55)</label><br />
|
||||
|
||||
<input type="checkbox" name="mega" id="mega"><label for="mega"> <strong title="Mega">
|
||||
Mega-Evolutions
|
||||
@ -100,6 +108,10 @@
|
||||
<option name="lang" id="cn" value="cn">繁體中文</option>
|
||||
<option name="lang" id="cs" value="cs">简体中文</option>
|
||||
</select>
|
||||
|
||||
<h3>Answer type</h3>
|
||||
<input type="radio" name="answertype" class="first" id="choice" checked><label for="choice"> Choice</label>
|
||||
<input type="radio" name="answertype" id="input"><label for="input"> Input</label>
|
||||
</div>
|
||||
<div id="right_config">
|
||||
<h3>Silhouette</h3>
|
||||
@ -108,7 +120,7 @@
|
||||
|
||||
<h3>Number of questions</h3>
|
||||
<select class="questions first">
|
||||
<!--<option name="questions" id="1" value="1">1 (debug)</option>-->
|
||||
<!-- <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>
|
||||
@ -119,14 +131,15 @@
|
||||
|
||||
<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="1" value="1">1 (debug)</option> -->
|
||||
<option name="time" id="2" value="2">2 seconds</option>
|
||||
<option name="time" id="5" value="5" selected>5 seconds</option>
|
||||
<option name="time" id="10" value="10">10 seconds</option>
|
||||
<option name="time" id="30" value="30">30 seconds</option>
|
||||
<option name="time" id="99" value="99">99 seconds</option>
|
||||
<option name="time" id="notimer" value="notimer">No timer</option>
|
||||
<!--<option name="time" id="10000" value="10000">10000 (debug)</option>-->
|
||||
</select> seconds
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -136,13 +149,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<footer>
|
||||
<p>© 2012 - 2025 Pokétest 2.10</p>
|
||||
</footer>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2012 - 2022 Pokétest 2.6</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>
|
||||
215
interface.js
215
interface.js
@ -1,92 +1,173 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
function random(min, max) {
|
||||
$(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, 10)+".jpg");
|
||||
//$.backstretch("artwork/artwork"+random(1, 10)+".jpg");
|
||||
|
||||
// hamburger mobile
|
||||
$("#hamburger .container").click(function()
|
||||
{
|
||||
if ($("nav").hasClass("active"))
|
||||
{
|
||||
$("nav ul").slideUp(200, function()
|
||||
{
|
||||
$("nav").removeClass("active");
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
$("nav").addClass("active");
|
||||
$("nav ul").slideDown(200);
|
||||
}
|
||||
});
|
||||
|
||||
// splice url arguments
|
||||
function gup(name, url) {
|
||||
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 );
|
||||
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');
|
||||
|
||||
// index.html
|
||||
if (location.pathname.includes("index.html"))
|
||||
{
|
||||
// read url
|
||||
local_gen = gup('gen', 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 < gen_list.length; i++) {
|
||||
if (gen_list.charAt(i)) {
|
||||
|
||||
if (gen_list.charAt(i) == "m")
|
||||
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 (gen_list.charAt(i) == "r")
|
||||
else if (local_gen.charAt(i) == "r")
|
||||
$('article #container #game #configuration #selected_options input#regional').attr('checked', true);
|
||||
else if (gen_list.charAt(i) == "g")
|
||||
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#' + gen_list.charAt(i) + 'g').attr('checked', true);
|
||||
$('article #container #game #configuration #selected_options input#' + local_gen.charAt(i) + 'g').attr('checked', true);
|
||||
}
|
||||
}
|
||||
$('#selected_options').slideDown();
|
||||
} else
|
||||
$('article #container #game #configuration input#all').attr('checked', true);
|
||||
}
|
||||
$('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);
|
||||
|
||||
if (gup('answertype', window.location.href) == "choice")
|
||||
$('article #container #game #configuration input#choice').attr('checked', true);
|
||||
else
|
||||
$('article #container #game #configuration input#input').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));
|
||||
}
|
||||
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'));
|
||||
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('answertype') != null)
|
||||
$('article #game #configuration input:radio[name=answertype]#'+localStorage.getItem('answertype')).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();
|
||||
});
|
||||
}
|
||||
|
||||
// flashdex.html
|
||||
if (location.pathname.includes("flashdex.html"))
|
||||
{
|
||||
// read url
|
||||
local_gen = gup('gen', location.href);
|
||||
if (local_gen != null)
|
||||
{
|
||||
if (local_gen == "all")
|
||||
{
|
||||
for (i = 0; i < 10; i++)
|
||||
$('article #container #game #flashdex_config input#' + i + 'g').attr('checked', true);
|
||||
$('article #container #game #flashdex_config input#mega').attr('checked', true);
|
||||
$('article #container #game #flashdex_config input#regional').attr('checked', true);
|
||||
$('article #container #game #flashdex_config input#gigantamax').attr('checked', true);
|
||||
}
|
||||
else
|
||||
{
|
||||
for (i = 0; i < local_gen.length; i++)
|
||||
{
|
||||
if (local_gen.charAt(i)) {
|
||||
if (local_gen.charAt(i) == "m")
|
||||
$('article #container #game #flashdex_config input#mega').attr('checked', true);
|
||||
else if (local_gen.charAt(i) == "r")
|
||||
$('article #container #game #flashdex_config input#regional').attr('checked', true);
|
||||
else if (local_gen.charAt(i) == "g")
|
||||
$('article #container #game #flashdex_config input#gigantamax').attr('checked', true);
|
||||
else
|
||||
$('article #container #game #flashdex_config input#' + local_gen.charAt(i) + 'g').attr('checked', true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// select generation toggle
|
||||
$('#configuration input#all').click(function() {
|
||||
$('#selected_options').slideUp();
|
||||
});
|
||||
|
||||
$('#configuration input#select').click(function() {
|
||||
$('#selected_options').slideDown();
|
||||
});
|
||||
$('article #container #game #flashdex_config select.lang').val(gup('lang', window.location.href));
|
||||
}
|
||||
else
|
||||
{
|
||||
if (localStorage.getItem('lang') != null)
|
||||
$('article #container #game #flashdex_config select.lang').val(localStorage.getItem('lang'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
4
jquery-2.2.2.min.js
vendored
4
jquery-2.2.2.min.js
vendored
File diff suppressed because one or more lines are too long
2
jquery-3.7.1.min.js
vendored
Normal file
2
jquery-3.7.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
pokemon
2
pokemon
Submodule pokemon updated: 9dc822ad63...7deba0828c
2206
pokemon.json
2206
pokemon.json
File diff suppressed because it is too large
Load Diff
353
poketest.js
353
poketest.js
@ -8,7 +8,6 @@ $(document).ready(function() {
|
||||
/********************************/
|
||||
|
||||
/****** General variables ******/
|
||||
var score = 0;
|
||||
var questions = 0;
|
||||
var good_answers = 0;
|
||||
var bad_answers = 0;
|
||||
@ -18,7 +17,8 @@ $(document).ready(function() {
|
||||
var image_name; // preload
|
||||
var image_memory; // preload
|
||||
var gen_list = new Array();
|
||||
var previous_pokemon = new Array();
|
||||
var available_pokemon = new Array();
|
||||
var domain = "https://poketest.marchal.dev/index.html";
|
||||
|
||||
/****** Generations ******/
|
||||
var G1 = [1, 151];
|
||||
@ -29,18 +29,23 @@ $(document).ready(function() {
|
||||
var G6 = [650, 721];
|
||||
var G7 = [722, 809];
|
||||
var G8 = [810, 905];
|
||||
var MEGA = [906, 955];
|
||||
var GIGA = [956, 987];
|
||||
var REG = [988, 1040];
|
||||
var G9 = [906, 1025];
|
||||
var MEGA = [1026, 1075];
|
||||
var GIGA = [1076, 1107];
|
||||
var REG = [1108, 1162];
|
||||
var gen_number = 9;
|
||||
var extra_number = 3; // mega, giga, reg
|
||||
|
||||
/************ UTIL *************/
|
||||
/*******************************/
|
||||
|
||||
function random(min, max) {
|
||||
function random(min, max)
|
||||
{
|
||||
return Math.floor(Math.random()*(max-min+1)+min);
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
function shuffleArray(array)
|
||||
{
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
@ -50,7 +55,8 @@ $(document).ready(function() {
|
||||
return array;
|
||||
}
|
||||
|
||||
function findInArray(array, elem, size) {
|
||||
function findInArray(array, elem)
|
||||
{
|
||||
for (var j = 0; j < array.length; j++) {
|
||||
if (array[j] === elem)
|
||||
return true;
|
||||
@ -58,131 +64,145 @@ $(document).ready(function() {
|
||||
return false;
|
||||
}
|
||||
|
||||
function normalizeString(string)
|
||||
{
|
||||
return string.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "");
|
||||
}
|
||||
|
||||
|
||||
/************ GAME *************/
|
||||
/*******************************/
|
||||
|
||||
// loading json file
|
||||
var json = $.getJSON('pokemon.json', function(pk) {
|
||||
|
||||
$.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() {
|
||||
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") {
|
||||
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;
|
||||
else // else, it's all the generation, from the first one to the regional forms
|
||||
max_questions = REG[1] + 1;
|
||||
}
|
||||
answertype = $('article input[name="answertype"]:checked').attr('id');
|
||||
game();
|
||||
});
|
||||
}
|
||||
|
||||
// allows to start the game when pressing enter
|
||||
document.addEventListener('keydown', funcListener = function(event) {
|
||||
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() {
|
||||
$('article #container .button input.start').click(function()
|
||||
{
|
||||
firstGame();
|
||||
});
|
||||
|
||||
function generations() {
|
||||
|
||||
function generations()
|
||||
{
|
||||
// create the list of the different generations
|
||||
function createGenerationList(name) {
|
||||
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) {
|
||||
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) {
|
||||
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);
|
||||
evaluateByGeneration(i, "7g", G7); evaluateByGeneration(i, "8g", G8); evaluateByGeneration(i, "9g", G9);
|
||||
evaluateByGeneration(i, "mega", MEGA); evaluateByGeneration(i, "gigantamax", GIGA); evaluateByGeneration(i, "regional", REG);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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();
|
||||
{
|
||||
gen_list.push("1g"); gen_list.push("2g"); gen_list.push("3g"); gen_list.push("4g"); gen_list.push("5g");
|
||||
gen_list.push("6g"); gen_list.push("7g"); gen_list.push("8g"); gen_list.push("9g");
|
||||
gen_list.push("mega"); gen_list.push("gigantamax"); gen_list.push("regional");
|
||||
generatePokemonList();
|
||||
}
|
||||
else
|
||||
{
|
||||
for (i = 1; i <= gen_number; i++)
|
||||
createGenerationList((i + "g"));
|
||||
createGenerationList("mega");
|
||||
createGenerationList("gigantamax");
|
||||
createGenerationList("regional");
|
||||
generatePokemonList();
|
||||
}
|
||||
available_pokemon = [...pokemon_generation_list];
|
||||
max_questions = pokemon_generation_list.length;
|
||||
}
|
||||
|
||||
// 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, 898];
|
||||
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, 892, 905, "G892"];
|
||||
|
||||
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));
|
||||
function imageType(result)
|
||||
{
|
||||
function randomizer(result)
|
||||
{
|
||||
if (pk.mn[result]["sprite"])
|
||||
return pklist.mn[result]["num"] + '-' + random(0, pk.mn[result]["sprite"] - 1);
|
||||
else
|
||||
{
|
||||
if (pk.mn[result]["origin"] == "Kanto")
|
||||
{
|
||||
randomValue = random(0, 2);
|
||||
if (randomValue == 0)
|
||||
return pklist.mn[result]["num"];
|
||||
else if (randomValue == 1)
|
||||
return pklist.mn[result]["num"]+'-RB';
|
||||
else if (randomValue == 2)
|
||||
return pklist.mn[result]["num"]+'-RG';
|
||||
}
|
||||
return pklist.mn[result]["num"];
|
||||
}
|
||||
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_name = randomizer(result);
|
||||
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);
|
||||
function recursiveOptions(options, lang)
|
||||
{
|
||||
tmp = pokemon_generation_list[random(0, pokemon_generation_list.length - 1)];
|
||||
|
||||
// checking if it's already there, if it is, recursion
|
||||
if (!findInArray(options, pklist.mn[tmp][lang]))
|
||||
@ -192,7 +212,8 @@ $(document).ready(function() {
|
||||
}
|
||||
|
||||
// choosing the four options
|
||||
function chooseOptions(result, lang) {
|
||||
function chooseOptions(result, lang)
|
||||
{
|
||||
options = new Array();
|
||||
options[0] = pklist.mn[result][lang];
|
||||
for (var i = 1; i < 4; i++)
|
||||
@ -200,59 +221,60 @@ $(document).ready(function() {
|
||||
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);
|
||||
function choosePokemon()
|
||||
{
|
||||
lang = $('article select.lang option:selected').attr('id');
|
||||
silhouette = $('article input[name="silhouette"]:checked').attr('id');
|
||||
|
||||
resultIndex = Math.floor((available_pokemon.length - 1) * Math.random());
|
||||
result = available_pokemon[resultIndex];
|
||||
|
||||
if (!infinite)
|
||||
available_pokemon.splice(resultIndex, 1);
|
||||
|
||||
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;
|
||||
|
||||
if (answertype == "choice")
|
||||
chooseOptions(result, lang);
|
||||
}
|
||||
imageType(result + 1);
|
||||
imageType(result);
|
||||
}
|
||||
|
||||
function game() {
|
||||
function game()
|
||||
{
|
||||
choosePokemon();
|
||||
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]+'">')
|
||||
$('article #container #share').remove();
|
||||
$('article #container #seed').remove();
|
||||
$('article #container #copyseed').remove();
|
||||
if (chrono != "notimer")
|
||||
$('article #container .chrono').empty().append(chrono);
|
||||
else
|
||||
$('article #container .chrono').hide();
|
||||
$('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) + ' ' + (answertype) + '" />');
|
||||
|
||||
if (answertype == "choice")
|
||||
{
|
||||
$('article #container #answers').empty().append('<span><input type="submit" class="option a1" name="a1" value="' + options[0] + '"></span>');
|
||||
$('article #container #answers').append('<span><input type="submit" class="option a2" name="a2" value="' + options[1] + '"></span>');
|
||||
$('article #container #answers').append('<span><input type="submit" class="option a3" name="a3" value="' + options[2] + '"></span>');
|
||||
$('article #container #answers').append('<span><input type="submit" class="option a4" name="a4" value="' + options[3] + '"></span>');
|
||||
}
|
||||
else
|
||||
{
|
||||
$('article #container #answers').empty().append('<form autocomplete="off"><input type="text" id="answer" name="answer" placeholder="Input the Pokémon name!"\
|
||||
class="choice"><p class="button"><input type="submit" value="Answer!"></p></form>');
|
||||
$('article #container #answers input').focus().select();
|
||||
}
|
||||
|
||||
// timer setting
|
||||
var clock = setInterval(function() {
|
||||
var clock = setInterval(function()
|
||||
{
|
||||
chrono--;
|
||||
if (chrono === 0) {
|
||||
if (chrono === 0)
|
||||
{
|
||||
clearInterval(clock);
|
||||
showAnswer(false); // timer has ended, so it's a bad answer
|
||||
}
|
||||
@ -260,36 +282,60 @@ $(document).ready(function() {
|
||||
}, 1000);
|
||||
|
||||
// checking if the answer is good or not
|
||||
$('article .option').click(function() {
|
||||
$('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) {
|
||||
if (answertype == "choice")
|
||||
{
|
||||
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);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
$("form").submit(function(event)
|
||||
{
|
||||
clearInterval(clock);
|
||||
pokemon_name = event.currentTarget[0].value;
|
||||
event.preventDefault(); // do not submit form
|
||||
if (normalizeString(answer) == normalizeString(pokemon_name))
|
||||
showAnswer(true);
|
||||
else
|
||||
showAnswer(false);
|
||||
});
|
||||
}
|
||||
|
||||
function showAnswer(ok)
|
||||
{
|
||||
document.removeEventListener('keydown', funcListener);
|
||||
$('article .pokemon img').removeClass('silhouette');
|
||||
if (ok) {
|
||||
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 {
|
||||
}
|
||||
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() {
|
||||
clock = setInterval(function()
|
||||
{
|
||||
wait--;
|
||||
if (wait === 0) {
|
||||
if (!infinite) questions < max_questions ? game() : score();
|
||||
@ -298,28 +344,21 @@ $(document).ready(function() {
|
||||
}, 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";
|
||||
function score()
|
||||
{
|
||||
function generateSeed()
|
||||
{
|
||||
gen = '';
|
||||
if (gen_list.length > 0) {
|
||||
if (gen_list.length < (gen_number + extra_number))
|
||||
{
|
||||
for (i in gen_list)
|
||||
gen += gen_list[i].substring(0,1);
|
||||
}
|
||||
else gen += "all";
|
||||
|
||||
s_gen = "?gen=" + gen;
|
||||
s_lang = "&lang=" + lang;
|
||||
s_answertype = "&answertype=" + answertype;
|
||||
s_silhouette = "&silhouette=" + (silhouette == "silhouette" ? "true" : "false");
|
||||
s_questions = "&questions=" + (!whole_set? max_questions : "set");
|
||||
s_time = "&time=" + max_chrono;
|
||||
@ -327,13 +366,15 @@ $(document).ready(function() {
|
||||
// save in the local storage for default use
|
||||
localStorage.setItem('generation', gen);
|
||||
localStorage.setItem('lang', lang);
|
||||
localStorage.setItem('answertype', answertype);
|
||||
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;
|
||||
return domain + s_gen + s_lang + s_answertype + s_silhouette + s_questions + s_time;
|
||||
}
|
||||
$('article #container #score .pokemon').after('<div id="seed"></div><div id="share"></div>');
|
||||
|
||||
$('article #container #score .pokemon').empty().after('<div id="seed"></div><div id="share"></div>');
|
||||
$('article #container').addClass('diploma');
|
||||
$('article #container').removeClass('game_active');
|
||||
$('article #container .chrono').hide();
|
||||
@ -344,29 +385,27 @@ $(document).ready(function() {
|
||||
|
||||
$('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>');
|
||||
$('article #container #share').empty().append('<div id="copyseed"><a href="#">Copy</a></div>');
|
||||
$('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 #copyseed").click(function()
|
||||
{
|
||||
$('article #container #seed input').select();
|
||||
document.execCommand("copy");
|
||||
navigator.clipboard.writeText($('article #container #seed input').val());
|
||||
});
|
||||
|
||||
$('article #container .button input.start_again').click(function() {
|
||||
$('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');
|
||||
$('article #container').addClass('game_active');
|
||||
game();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
386
style.css
386
style.css
@ -3,6 +3,7 @@ html, body { margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
width: 100vw; min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
margin: auto;
|
||||
font-family: Verdana;
|
||||
color: #e7e2e2;
|
||||
@ -10,6 +11,26 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.bg {
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
background: url("artwork/artwork11.jpg") center center;
|
||||
position: fixed;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@supports ( -webkit-touch-callout : none) {
|
||||
.bg { background-attachment: scroll }
|
||||
}
|
||||
|
||||
@supports not ( -webkit-touch-callout : none) {
|
||||
.bg { background-attachment: fixed; }
|
||||
}
|
||||
|
||||
a { color: #e7e2e2; font-weight: bold; }
|
||||
h1 { font-size: 1.7em; }
|
||||
h2 { text-align: center; }
|
||||
@ -18,7 +39,6 @@ h3 { font-variant: small-caps; }
|
||||
/**** HEADER ****/
|
||||
|
||||
header {
|
||||
height:14vh;
|
||||
background: #2f2e2e;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -27,13 +47,15 @@ header {
|
||||
header img {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: 12.5vh;
|
||||
margin-left: 8vw; margin-top: 0.75vh;
|
||||
margin-left: 8vw;
|
||||
padding-top: 0.5vh;
|
||||
padding-bottom: 0.5vh;
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex; align-items: flex-end;
|
||||
margin-right: 8vw; margin-bottom: 5vh;
|
||||
margin-right: 8vw; margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
header nav ul, header nav ul li {
|
||||
@ -57,7 +79,7 @@ header nav ul li a:hover { color: #ff6b79; }
|
||||
|
||||
/**** MAIN CONTENT ****/
|
||||
|
||||
article { width: 100vw; margin-top: 5vh; }
|
||||
article { width: 100vw; margin-top: 5vh; margin-bottom: 5vh; }
|
||||
|
||||
article #container {
|
||||
margin-left: 10vw; margin-right: 10vw;
|
||||
@ -65,14 +87,20 @@ article #container {
|
||||
background: rgba(0, 0, 0, .85);
|
||||
}
|
||||
|
||||
article #container .companion {
|
||||
article #container .poketest-companion {
|
||||
float: right;
|
||||
width: 280px;
|
||||
width: 210px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
article #container .flashdex-companion {
|
||||
float: right;
|
||||
width: 265px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
article #container .top-companion {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px; margin-bottom: 10px;
|
||||
float: right;
|
||||
width: 250px;
|
||||
margin-left: 25px; margin-right: 25px;
|
||||
@ -86,7 +114,6 @@ article #container .middle-companion {
|
||||
|
||||
article #container.about p { margin-left:20px; }
|
||||
|
||||
article #container.about ul { margin-bottom: 3.5%; }
|
||||
article #container.about ul li { margin-top: 5px; margin-bottom: 5px; }
|
||||
article #container.about ul li a { margin-top: 5px; margin-bottom: 5px; font-weight: normal; }
|
||||
|
||||
@ -110,6 +137,8 @@ article #container.about ul li a { margin-top: 5px; margin-bottom: 5px; font-wei
|
||||
.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; }
|
||||
.SV1 { background: #F34134; color: black; padding: 5px; border-radius: 10px 0px 0px 10px; }
|
||||
.SV2 { background: #8334B7; 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; }
|
||||
@ -119,11 +148,13 @@ article #container.about ul li a { margin-top: 5px; margin-bottom: 5px; font-wei
|
||||
.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; }
|
||||
.LA { border-radius:50%; background: #36597B; display:block; border: 1px solid white; }
|
||||
.SV { border-radius:50%; background: linear-gradient(-45deg, #F34134 50%, #8334B7 50%); display:block; border: 1px solid white; }
|
||||
|
||||
/**** FOOTER ****/
|
||||
|
||||
#content-wrap {
|
||||
padding-bottom: 12vh; /* Footer height */
|
||||
padding-bottom: 5vh; /* Footer height */
|
||||
}
|
||||
|
||||
footer {
|
||||
@ -131,7 +162,7 @@ footer {
|
||||
background: #2f2e2e;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100vw; height: 7vh;
|
||||
width: 100vw; height: 5vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -167,7 +198,7 @@ article #container #game #configuration #right_config { float: right; }
|
||||
|
||||
article #container #game .button {
|
||||
margin: auto;
|
||||
padding: 20px; padding-top: 30px;
|
||||
padding: 20px;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
@ -191,14 +222,16 @@ article #container input[type=submit]:hover {
|
||||
|
||||
/**** GAME LAUNCHED ****/
|
||||
|
||||
article #container.game_active { height: 68vh; }
|
||||
article #container #top_game { display: flex; justify-content: space-between; height: 8vh; }
|
||||
article #container.game_active { height: 72vh; }
|
||||
article #container #top_game { display: flex; justify-content: space-between; height: 10vh; }
|
||||
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;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
line-height: 2.4rem;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 100%;
|
||||
background: #e7e2e2;
|
||||
color: #2f2e2e;
|
||||
@ -217,14 +250,26 @@ article #container .pokemon img.silhouette { filter: contrast(0%) brightness(170
|
||||
|
||||
article #container #answers {
|
||||
text-align: center;
|
||||
height: 10vh;
|
||||
height: 14vh;
|
||||
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 input { margin-right: 15px; margin-left: 15px; display: inline; }
|
||||
|
||||
article #container #answers form input:last-child { margin: initial; }
|
||||
article #container #answers form input.choice {
|
||||
padding: 10px;
|
||||
min-width: 25vw;
|
||||
margin: auto;
|
||||
margin-bottom: auto;
|
||||
border-radius: 9px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
article #container #answers form .button { margin: 5px; display: inline-block; }
|
||||
|
||||
article #container #answers .final_answer { font-size: 23px; }
|
||||
article #container #answers .final_answer .good { color:#3ad48d; font-weight:bold; }
|
||||
@ -259,7 +304,6 @@ article #container #seed input {
|
||||
}
|
||||
|
||||
article #container #copyseed {
|
||||
float: left;
|
||||
width: 60px; height: 16px;
|
||||
display: block;
|
||||
padding: 10px; padding-top: 4px; padding-bottom: 8px;
|
||||
@ -268,7 +312,8 @@ article #container #copyseed {
|
||||
font-size: 15px;
|
||||
font-variant: small-caps;
|
||||
text-decoration: none;
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
article #container #copyseed a {
|
||||
@ -279,12 +324,6 @@ article #container #copyseed a {
|
||||
|
||||
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;
|
||||
@ -296,31 +335,29 @@ article #container.diploma #score {
|
||||
|
||||
/**** FLASHDEX ****/
|
||||
|
||||
#game #flashdex_config { margin:auto; max-width:600px; }
|
||||
#game #flashdex_config { margin:auto; }
|
||||
#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;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#container #game #flashdex {
|
||||
margin:auto;
|
||||
display:inline-block;
|
||||
display:none;
|
||||
text-align:center;
|
||||
margin-top:2vh;
|
||||
}
|
||||
|
||||
#container #game #flashdex .pokedex {
|
||||
width: 250px; height: 285px;
|
||||
width: 250px;
|
||||
border: 1px solid white;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
@ -335,27 +372,286 @@ article #container.diploma #score {
|
||||
height: 250px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin: 12px auto;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex span.name {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
margin: auto; margin-top: 15px;
|
||||
#game #flashdex .pokedex .button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 8px;
|
||||
background: white;
|
||||
padding: 0px;
|
||||
border-radius: 5px;
|
||||
color: dimgray;
|
||||
padding-bottom: 1.5px;
|
||||
padding-top: 0.5px;
|
||||
}
|
||||
|
||||
span.form {
|
||||
#game #flashdex .pokedex .left-arrow, #game #flashdex .pokedex .right-arrow {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 0.9rem;
|
||||
padding: 0rem 0.2rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex 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 {
|
||||
#game #flashdex .pokedex span.form.mega { background-image: url('img/icon_mega.png'); }
|
||||
#game #flashdex .pokedex 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;
|
||||
border-radius: 50%; border: 1px solid white;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex span.types {
|
||||
display: flex;
|
||||
float: left;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex span.types:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex span.types span {
|
||||
margin: 0px;
|
||||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 2px;
|
||||
font-family: Sans-Serif;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
text-shadow: 0 0 2px #000;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex span.types .Grass { background: #78C850; }
|
||||
#game #flashdex .pokedex span.types .Poison { background: #A040A0; }
|
||||
#game #flashdex .pokedex span.types .Fire { background: #F08030; }
|
||||
#game #flashdex .pokedex span.types .Dragon { background: #7038F8; }
|
||||
#game #flashdex .pokedex span.types .Flying { background: #A890F0; }
|
||||
#game #flashdex .pokedex span.types .Water { background: #6890F0; }
|
||||
#game #flashdex .pokedex span.types .Bug { background: #A8B820; }
|
||||
#game #flashdex .pokedex span.types .Normal { background: #A8A878; }
|
||||
#game #flashdex .pokedex span.types .Dark { background: #705848; }
|
||||
#game #flashdex .pokedex span.types .Electric { background: #F8D030; }
|
||||
#game #flashdex .pokedex span.types .Ground { background: #E0C068; }
|
||||
#game #flashdex .pokedex span.types .Psychic { background: #F85888; }
|
||||
#game #flashdex .pokedex span.types .Ice { background: #98D8D8; }
|
||||
#game #flashdex .pokedex span.types .Steel { background: #B8B8D0; }
|
||||
#game #flashdex .pokedex span.types .Fairy { background: #EE99AC; }
|
||||
#game #flashdex .pokedex span.types .Fighting { background: #C03028; }
|
||||
#game #flashdex .pokedex span.types .Rock { background: #B8A038; }
|
||||
#game #flashdex .pokedex span.types .Ghost { background: #705898; }
|
||||
|
||||
|
||||
/*** MOBILE ***/
|
||||
|
||||
@media screen and (max-width:1100px) {
|
||||
article #container {
|
||||
margin-left: 5vw;
|
||||
margin-right: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
|
||||
h1 { margin: 0.2em 0; font-size:1.3em; }
|
||||
h2 { font-size:1.25em; }
|
||||
h3 { margin: 10px; margin-left: 0; }
|
||||
|
||||
header img { margin-left: 4vw; }
|
||||
header nav ul { display: none; }
|
||||
|
||||
header { display: block; }
|
||||
|
||||
header nav {
|
||||
display: auto;
|
||||
align-items: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
header nav #hamburger {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
right: 1.2rem;
|
||||
|
||||
}
|
||||
|
||||
header nav #hamburger .bar1,
|
||||
header nav #hamburger .bar2,
|
||||
header nav #hamburger .bar3 { width:30px; height:3px; background-color:#ff3636; margin:6px 0; transition:0.4s; }
|
||||
|
||||
header nav.active #hamburger .bar1 { transform:rotate(-45deg) translate(-4px, 6px); }
|
||||
header nav.active #hamburger .bar2 { opacity:0; }
|
||||
header nav.active #hamburger .bar3 { transform:rotate(45deg) translate(-6px, -9.5px); }
|
||||
|
||||
header nav.active ul {
|
||||
margin: auto;
|
||||
margin-top: 0;
|
||||
background: #2f2e2e;
|
||||
width: 100%;
|
||||
text-align:center;
|
||||
padding: 10px;
|
||||
padding-top: 0px;
|
||||
z-index:0;
|
||||
}
|
||||
|
||||
header a { display: inline-block; }
|
||||
header nav ul, header nav ul li { margin: 15px; }
|
||||
header nav ul li a { margin-left: 0; font-size: 1.3em; }
|
||||
|
||||
#content-wrap { padding-bottom: 8vh; }
|
||||
|
||||
article { margin-top: 2vh; margin-bottom: 0vh; }
|
||||
|
||||
article #container {
|
||||
margin-left: 4vw;
|
||||
margin-right: 4vw;
|
||||
padding: 5px 10px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
/* poketest */
|
||||
|
||||
/*article #container #game #configuration #left_config { float: none; }
|
||||
article #container #game #configuration #right_config { float: none; }*/
|
||||
article #container #game #configuration input[name="gen"], article #container #game #selected_options input,
|
||||
article #container #game #configuration .first { margin-left:15px; margin-bottom:5px; }
|
||||
article #container #game .button { padding: 10px; padding-top: 20px; }
|
||||
|
||||
article #container #game #configuration input[type="checkbox"] {
|
||||
margin-left: 15px;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
article #container input[type="submit"] {
|
||||
padding: 5px;
|
||||
border: 2px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
article #container.game_active {
|
||||
max-height: 76vh;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
article #container #answers {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article #container #answers input:last-child { margin-right: 0px; margin-left: 0px; }
|
||||
article #container.game_active div#answers span { display: block; }
|
||||
|
||||
article #container #answers form input.choice { min-width: 75vw; margin-right:0px; }
|
||||
|
||||
article #container.diploma #score { background: none; }
|
||||
article #container #seed input {
|
||||
width: 90%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
article #container.diploma #score { padding: 0px; }
|
||||
article #container.diploma { border: none; }
|
||||
|
||||
article #container .pokemon img {
|
||||
height: 37vh;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
article #container .pokemon img.input {
|
||||
height: 42vh;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
article #container #top_game .whois { width: 80%; }
|
||||
article #container #top_game .chrono {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
line-height: 1.8rem;
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
article #container #game .button {
|
||||
padding: 10px; padding-top: 15px;
|
||||
}
|
||||
|
||||
article #container #answers form .button { display: block; }
|
||||
|
||||
/* flashdex */
|
||||
|
||||
#container #game #flashdex .pokedex { width: 230px; }
|
||||
|
||||
#game #flashdex_config p { text-align: left; }
|
||||
|
||||
#game #flashdex_config .generation {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#game #flashdex .pokedex img {
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
#game #flashdex_config .generation .gen {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game #flashdex_config .gen { padding: 0; margin: 0; display: block; }
|
||||
#game #flashdex_config .gen label { padding: 2px; margin: 2px; margin-left: 8px; }
|
||||
#game #flashdex_config select.lang { margin-left: 15px; margin-top:5px; }
|
||||
#game #flashdex_config p.button { padding-top: 0px; margin-top: 0px; }
|
||||
|
||||
/* about */
|
||||
|
||||
article #container .poketest-companion, article #container .flashdex-companion,
|
||||
article #container .top-companion, article #container .companion { display: none; }
|
||||
|
||||
article #container .middle-companion {
|
||||
width: 250px;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article #container.about ul {
|
||||
margin-left: 10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
article #container.about p { margin-left: 0px; }
|
||||
|
||||
footer { height:6vh; }
|
||||
}
|
||||
|
||||
@media screen and (max-width:500px) {
|
||||
article #container #game #configuration #left_config { float: none; text-align: center; }
|
||||
article #container #game #configuration #right_config { float: none; text-align: center; }
|
||||
|
||||
article #container #game #configuration input[name="gen"], article #container #game #selected_options input, article #container #game #configuration .first {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:400px) {
|
||||
header img { height: 60px; }
|
||||
header nav #hamburger { top: 1.05rem; }
|
||||
}
|
||||
2
waitforimages-2.2.0.min.js
vendored
2
waitforimages-2.2.0.min.js
vendored
@ -1,2 +0,0 @@
|
||||
/*! 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()}});
|
||||
2
waitforimages-2.4.0.min.js
vendored
Normal file
2
waitforimages-2.4.0.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! waitForImages jQuery Plugin 2018-02-13 */
|
||||
!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",c=function(a){return a.srcset&&a.sizes}(new Image);a.waitForImages={hasImageProperties:["backgroundImage","listStyleImage","borderImage","borderCornerImage","cursor"],hasImageAttributes:["srcset"]},a.expr.pseudos["has-src"]=function(b){return a(b).is('img[src][src!=""]')},a.expr.pseudos.uncached=function(b){return!!a(b).is(":has-src")&&!b.complete},a.fn.waitForImages=function(){var d,e,f,g=0,h=0,i=a.Deferred(),j=this,k=[],l=a.waitForImages.hasImageProperties||[],m=a.waitForImages.hasImageAttributes||[],n=/url\(\s*(['"]?)(.*?)\1\s*\)/g;if(a.isPlainObject(arguments[0])?(f=arguments[0].waitForAll,e=arguments[0].each,d=arguments[0].finished):1===arguments.length&&"boolean"===a.type(arguments[0])?f=arguments[0]:(d=arguments[0],e=arguments[1],f=arguments[2]),d=d||a.noop,e=e||a.noop,f=!!f,!a.isFunction(d)||!a.isFunction(e))throw new TypeError("An invalid callback was supplied.");return this.each(function(){var b=a(this);f?b.find("*").addBack().each(function(){var b=a(this);b.is("img:has-src")&&!b.is("[srcset]")&&k.push({src:b.attr("src"),element:b[0]}),a.each(l,function(a,c){var d,e=b.css(c);if(!e)return!0;for(;d=n.exec(e);)k.push({src:d[2],element:b[0]})}),a.each(m,function(a,c){var d=b.attr(c);return!d||void k.push({src:b.attr("src"),srcset:b.attr("srcset"),element:b[0]})})}):b.find("img:has-src").each(function(){k.push({src:this.src,element:this})})}),g=k.length,h=0,0===g&&(d.call(j),i.resolveWith(j)),a.each(k,function(f,k){var l=new Image,m="load."+b+" error."+b;a(l).one(m,function b(c){var f=[h,g,"load"==c.type];if(h++,e.apply(k.element,f),i.notifyWith(k.element,f),a(this).off(m,b),h==g)return d.call(j[0]),i.resolveWith(j[0]),!1}),c&&k.srcset&&(l.srcset=k.srcset,l.sizes=k.sizes),l.src=k.src}),i.promise()}});
|
||||
Reference in New Issue
Block a user