keb/poketest
1
0
Fork 0
Code Issues Releases Activity

Version 2.9

Browse Source 
* Custom input for answer
* Option for no timer
* Play again button
* Rewrite About page
* Modernize clipboard copy
* Lots of misc. fixes
This commit is contained in:
Théo Marchal 2022-03-14 21:30:46 +01:00
parent 074726aea4
commit caab9fe47d
8 changed files with 208 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -9,7 +9,6 @@ Now that there are now more than 900 of them, and it's as useful as ever! The we
### Planned updates ### Planned updates
- Make answer choices closer by type - Make answer choices closer by type
- Custom input answers for harder difficulty
- Type weakness calculator - Type weakness calculator
### Scripts ### Scripts

77
about.html
View File

@ -10,7 +10,7 @@
<script src="jquery-3.6.0.min.js"></script> <script src="jquery-3.6.0.min.js"></script>
<script src="interface.js"></script> <script src="interface.js"></script>
<script src="poketest.js"></script> <script src="poketest.js"></script>
<title>Pokétest</title> <title>Pokétest - About</title>
</head> </head>
<body> <body>
<div class="bg"></div> <div class="bg"></div>
@ -32,54 +32,57 @@
<img src="pokemon/877-0.png" class="top-companion" alt="morpeko" /> <img src="pokemon/877-0.png" class="top-companion" alt="morpeko" />
<h1>About</h1> <h1>About</h1>
<ul> <ul>
<li><a href="#1">Who are you?</a></li> <li><a href="#1">How to play: Pokétest</a></li>
<li><a href="#2">What is this website made with?</a></li> <li><a href="#2">How to use: Flashdex</a></li>
<li><a href="#3">Can I use my keyboard to play?</a></li> <li><a href="#3">Website informations</a></li>
<li><a href="#4">What is the «Infinite» option in the number of questions exactly?</a></li> <li><a href="#4">Copyrights</a></li>
<li><a href="#5">This website doesn't work well on my browser.</a></li>
<li><a href="#6">Can you add more languages?</a></li>
<li><a href="#7">Can you add this feature?</a></li>
<li><a href="#8">Copyrights</a></li>
</ul> </ul>
<h3 id="1">Who are you?</h3> <h3 id="1">How to play: Pokétest</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> <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>
<h3 id="2">What is this website made with?</h3> <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">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>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> <p>
This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library.<br /> This website is <strong>HTML5</strong> and <strong>CSS3</strong> compliant.<br />
It uses the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>.<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>
<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 /> 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. 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> </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> <h3 id="4">Copyrights</h3>
<p>When playing with the Infinite option, the game ends when you have 5 bad answers on all the set.</p> <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.</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>
<img src="pokemon/60RB.png" class="middle-companion" alt="poliwag" />
<h3 id="5">This website doesn't work well on my browser.</h3>
<p>Please contact me or make a pull request!</p>
<h3 id="6">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="7">Can you add this feature?</h3>
<p>Please contact me or make a pull request!</p>
<h3 id="8">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>
</div> </div>
</article> </article>
</div> </div>
<footer> <footer>
<p>© 2012 - 2022 Pokétest 2.8</p> <p>© 2012 - 2022 Pokétest 2.9</p>
</footer> </footer>
</body> </body>
</html> </html>

6
flashdex.html
View File

@ -11,7 +11,7 @@
<script src="waitforimages-2.4.0.min.js"></script> <script src="waitforimages-2.4.0.min.js"></script>
<script src="interface.js"></script> <script src="interface.js"></script>
<script src="flashdex.js"></script> <script src="flashdex.js"></script>
<title>Pokétest</title> <title>Pokétest - Flashdex</title>
</head> </head>
<body> <body>
<div class="bg"></div> <div class="bg"></div>
@ -39,6 +39,8 @@
<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 different Pokémon forms!</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 different Pokémon forms!</p>
<p>For more details, please read the <a href="about.html">About page</a>!</p>
<div id="flashdex_config"> <div id="flashdex_config">
<h2><a href="#" class="all unselected"><strong>Select all</strong></a></h2> <h2><a href="#" class="all unselected"><strong>Select all</strong></a></h2>
<p> <p>
@ -85,7 +87,7 @@
</div> </div>
</article> </article>
<footer> <footer>
<p>© 2012 - 2022 Pokétest 2.8</p> <p>© 2012 - 2022 Pokétest 2.9</p>
</footer> </footer>
</div> </div>
</body> </body>

17
flashdex.js
View File

@ -16,14 +16,12 @@ $(document).ready(function()
var EXCEPTION = 990; // urshifu g-max var EXCEPTION = 990; // urshifu g-max
/************ GAME *************/ /************ GAME *************/
/*******************************/ /*******************************/
// loading json file // loading json file
$.getJSON('pokemon.json', function(pk) $.getJSON('pokemon.json', function(pk)
{ {
$('article #container #game #loading').hide(); $('article #container #game #loading').hide();
var pklist = pk; var pklist = pk;
@ -54,16 +52,17 @@ $(document).ready(function()
// start the game when clicking on start game // start the game when clicking on start game
$('article #container .button input.start').click(function() $('article #container .button input.start').click(function()
{ {
$('article #container #game #loading').show();
$('article #container #game #flashdex').empty();
var lang = $('article select.lang option:selected').attr('id'); var lang = $('article select.lang option:selected').attr('id');
var gen_list = new Array(); var gen_list = new Array();
var pokemon_generation_list = new Array(); var pokemon_generation_list = new Array();
generations(); generations();
$('article #container #game #flashdex').hide(); if (gen_list.length == 0)
return;
$('article #container #game #loading').show();
$('article #container #game #flashdex').empty().hide();
function getFormText(pkmn) function getFormText(pkmn)
{ {
@ -96,7 +95,7 @@ $(document).ready(function()
function getFormattedNumber(num) function getFormattedNumber(num)
{ {
if (num > 905 && num < 909) if (num > 905 && num < 909) // 9G temporary numbers
return "???"; return "???";
if (num[0] == 'M' || num[0] == 'R' || num[0] == 'G') if (num[0] == 'M' || num[0] == 'R' || num[0] == 'G')
return num.substring(1, num.length); return num.substring(1, num.length);
@ -137,7 +136,7 @@ $(document).ready(function()
+ '<span class="name">' + '<strong>' + '#' + getFormattedNumber(pklist.mn[[pokemon_generation_list[i]]]["num"]) + '</strong> ' + '<span class="name">' + '<strong>' + '#' + getFormattedNumber(pklist.mn[[pokemon_generation_list[i]]]["num"]) + '</strong> '
+ pklist.mn[[pokemon_generation_list[i]]][lang] + '</span>' + pklist.mn[[pokemon_generation_list[i]]][lang] + '</span>'
+ '</div>' + '</div>'
); );
} }
$('article #container #game #flashdex').waitForImages(function() $('article #container #game #flashdex').waitForImages(function()
@ -304,8 +303,6 @@ $(document).ready(function()
// multiple artworks // multiple artworks
function imageType(num) function imageType(num)
{ {
//if (num["origin"] == "Kanto")
// return num["num"] + "RB";
if (num["sprite"]) if (num["sprite"])
return num["num"] + "-0"; return num["num"] + "-0";
return num["num"]; return num["num"];

23
index.html
View File

@ -31,13 +31,13 @@
<div id="container"> <div id="container">
<div id="game"> <div id="game">
<img src="pokemon/R58.png" alt="Growlithe" class="poketest-companion" /> <img src="pokemon/R58.png" alt="Growlithe" class="poketest-companion" />
<h1>What is Pokétest?</h1> <h1>Pokétest</h1>
<p>✨ <strong>Now updated for Pokémon Legends: Arceus!</strong></p> <p>✨ <strong>Now updated for Pokémon Legends: Arceus!</strong></p>
<p>There are now more than 900 Pocket&nbsp;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&nbsp;Evolutions, Regional or Gigantamax&nbsp;Forms!</p> <p>There are now more than 900 Pocket&nbsp;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&nbsp;Evolutions, Regional or Gigantamax&nbsp;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"> <div id="configuration">
<h2>Configuration</h2> <h2>Configuration</h2>
@ -104,6 +104,10 @@
<option name="lang" id="cn" value="cn">繁體中文</option> <option name="lang" id="cn" value="cn">繁體中文</option>
<option name="lang" id="cs" value="cs">简体中文</option> <option name="lang" id="cs" value="cs">简体中文</option>
</select> </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>
<div id="right_config"> <div id="right_config">
<h3>Silhouette</h3> <h3>Silhouette</h3>
@ -124,13 +128,14 @@
<h3>Time to answer</h3> <h3>Time to answer</h3>
<select class="time first"> <select class="time first">
<!--<option name="time" id="1" value="1">1 (debug)</option>--> <!--<option name="time" id="1" value="1">1 (debug)</option>-->
<option name="time" id="2" value="2">2</option> <option name="time" id="2" value="2">2 seconds</option>
<option name="time" id="5" value="5" selected>5</option> <option name="time" id="5" value="5" selected>5 seconds</option>
<option name="time" id="10" value="10">10</option> <option name="time" id="10" value="10">10 seconds</option>
<option name="time" id="30" value="30">30</option> <option name="time" id="30" value="30">30 seconds</option>
<option name="time" id="99" value="99">99</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>--> <!--<option name="time" id="10000" value="10000">10000 (debug)</option>-->
</select> seconds </select>
</div> </div>
</div> </div>
@ -141,7 +146,7 @@
</div> </div>
</article> </article>
<footer> <footer>
<p>© 2012 - 2022 Pokétest 2.8</p> <p>© 2012 - 2022 Pokétest 2.9</p>
</footer> </footer>
</div> </div>
<script> <script>

61
interface.js
View File

@ -1,6 +1,7 @@
$(document).ready(function() { $(document).ready(function()
{
function random(min, max) { function random(min, max)
{
return Math.floor(Math.random()*(max-min+1)+min); return Math.floor(Math.random()*(max-min+1)+min);
} }
@ -8,7 +9,8 @@ $(document).ready(function() {
//$.backstretch("artwork/artwork"+random(1, 10)+".jpg"); //$.backstretch("artwork/artwork"+random(1, 10)+".jpg");
// splice url arguments // splice url arguments
function gup(name, url) { function gup(name, url)
{
if (!url) url = location.href; if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)"; var regexS = "[\\?&]"+name+"=([^&#]*)";
@ -19,12 +21,15 @@ $(document).ready(function() {
// read url // read url
local_gen = gup('gen', window.location.href); local_gen = gup('gen', window.location.href);
if (local_gen != null) { if (local_gen != null)
{
if (local_gen == "all") if (local_gen == "all")
$('article #container #game #configuration input#all').attr('checked', true); $('article #container #game #configuration input#all').attr('checked', true);
else { else
{
$('article #container #game #configuration input#select').attr('checked', true); $('article #container #game #configuration input#select').attr('checked', true);
for (i = 0; i < local_gen.length; i++) { for (i = 0; i < local_gen.length; i++)
{
if (local_gen.charAt(i)) { if (local_gen.charAt(i)) {
if (local_gen.charAt(i) == "m") if (local_gen.charAt(i) == "m")
$('article #container #game #configuration #selected_options input#mega').attr('checked', true); $('article #container #game #configuration #selected_options input#mega').attr('checked', true);
@ -39,23 +44,33 @@ $(document).ready(function() {
$('#selected_options').slideDown(); $('#selected_options').slideDown();
} }
$('article #container #game #configuration select.lang').val(gup('lang', window.location.href)); $('article #container #game #configuration select.lang').val(gup('lang', window.location.href));
if (gup('silhouette', window.location.href) == "true") if (gup('silhouette', window.location.href) == "true")
$('article #container #game #configuration input#silhouette').attr('checked', true); $('article #container #game #configuration input#silhouette').attr('checked', true);
else else
$('article #container #game #configuration input#full').attr('checked', true); $('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.questions').val(gup('questions', window.location.href));
$('article #container #game #configuration select.time').val(gup('time', 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 else // if we did not come from a personalized URL, we read localstorage
{
if (localStorage.getItem('generation') != null) { if (localStorage.getItem('generation') != null)
if (localStorage.getItem('generation') != 'all') { {
if (localStorage.getItem('generation') != 'all')
{
gen_list = localStorage.getItem('generation'); gen_list = localStorage.getItem('generation');
$('article #container #game #configuration input#select').attr('checked', true); $('article #container #game #configuration input#select').attr('checked', true);
for (i = 0; i < gen_list.length; i++) { for (i = 0; i < gen_list.length; i++)
if (gen_list.charAt(i)) { {
if (gen_list.charAt(i))
{
if (gen_list.charAt(i) == "m") if (gen_list.charAt(i) == "m")
$('article #container #game #configuration #selected_options input#mega').attr('checked', true); $('article #container #game #configuration #selected_options input#mega').attr('checked', true);
else if (gen_list.charAt(i) == "r") else if (gen_list.charAt(i) == "r")
@ -67,37 +82,39 @@ $(document).ready(function() {
} }
} }
$('#selected_options').slideDown(); $('#selected_options').slideDown();
} else }
else
$('article #container #game #configuration input#all').attr('checked', true); $('article #container #game #configuration input#all').attr('checked', true);
} }
if (localStorage.getItem('lang') != null) if (localStorage.getItem('lang') != null)
$('article #game #configuration select.lang').val(localStorage.getItem('lang')); $('article #game #configuration select.lang').val(localStorage.getItem('lang'));
if (localStorage.getItem('silhouette') != null) if (localStorage.getItem('silhouette') != null)
$('article #game #configuration input:radio[name=silhouette]#'+localStorage.getItem('silhouette')).attr('checked', true); $('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) if (localStorage.getItem('questions') != null)
$('article #game #configuration select.questions').val(localStorage.getItem('questions')); $('article #game #configuration select.questions').val(localStorage.getItem('questions'));
if (localStorage.getItem('time') != null) if (localStorage.getItem('time') != null)
$('article #game #configuration select.time').val(localStorage.getItem('time')); $('article #game #configuration select.time').val(localStorage.getItem('time'));
} }
// select generation toggle // select generation toggle
$('#configuration input#all').click(function() { $('#configuration input#all').click(function()
{
$('#selected_options').slideUp(); $('#selected_options').slideUp();
}); });
$('#configuration input#select').click(function() { $('#configuration input#select').click(function()
{
$('#selected_options').slideDown(); $('#selected_options').slideDown();
}); });
// hamburger mobile // hamburger mobile
$("#hamburger .container").click(function() $("#hamburger .container").click(function()
{ {
if ($("nav").hasClass("active")) if ($("nav").hasClass("active"))
{ {
$("ul").slideUp(200, function() $("nav ul").slideUp(200, function()
{ {
$("nav").removeClass("active"); $("nav").removeClass("active");
}); });
@ -105,7 +122,7 @@ $(document).ready(function() {
else else
{ {
$("nav").addClass("active"); $("nav").addClass("active");
$("ul").slideDown(200); $("nav ul").slideDown(200);
} }
}); });
}); });

93
poketest.js
View File

@ -8,7 +8,6 @@ $(document).ready(function() {
/********************************/ /********************************/
/****** General variables ******/ /****** General variables ******/
var score = 0;
var questions = 0; var questions = 0;
var good_answers = 0; var good_answers = 0;
var bad_answers = 0; var bad_answers = 0;
@ -65,6 +64,11 @@ $(document).ready(function() {
return false; return false;
} }
function normalizeString(string)
{
return string.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "");
}
/************ GAME *************/ /************ GAME *************/
/*******************************/ /*******************************/
@ -80,7 +84,6 @@ $(document).ready(function() {
{ {
$('article #game').fadeToggle('quick', function() $('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').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>'); $('article #container #score').append('<p class="pokemon"></p><div id="answers"></div>');
generations(); generations();
@ -96,6 +99,7 @@ $(document).ready(function() {
else // else, it's all the generation, from the first one to the regional forms else // else, it's all the generation, from the first one to the regional forms
max_questions = REG[1] + 1; max_questions = REG[1] + 1;
} }
answertype = $('article input[name="answertype"]:checked').attr('id');
game(); game();
}); });
} }
@ -228,7 +232,9 @@ $(document).ready(function() {
available_pokemon.splice(resultIndex, 1); available_pokemon.splice(resultIndex, 1);
answer = pklist.mn[result][lang]; answer = pklist.mn[result][lang];
chooseOptions(result, lang);
if (answertype == "choice")
chooseOptions(result, lang);
imageType(result); imageType(result);
} }
@ -238,16 +244,29 @@ $(document).ready(function() {
questions++; questions++;
chrono = max_chrono; chrono = max_chrono;
$('article #container').addClass('game_active'); $('article #container').addClass('game_active');
$('article #container #share').empty(); $('article #container #share').remove();
$('article #container #seed').empty(); $('article #container #seed').remove();
$('article #container #copyseed').empty(); $('article #container #copyseed').remove();
$('article #container .chrono').empty().append(chrono); 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 .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 .pokemon').empty().append('<img src="pokemon/'+image_name+'.png" class="'+(silhouette)+' '+ (answertype) +'" />');
$('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>') if (answertype == "choice")
$('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>') $('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 // timer setting
var clock = setInterval(function() var clock = setInterval(function()
@ -268,18 +287,34 @@ $(document).ready(function() {
($(this).attr('value') == answer) ? showAnswer(true) : showAnswer(false); ($(this).attr('value') == answer) ? showAnswer(true) : showAnswer(false);
}); });
document.addEventListener('keydown', funcListener = function(event) if (answertype == "choice")
{ {
function checkAnswer(v) 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); clearInterval(clock);
($('#answers input.a'+v).attr('value') == answer) ? showAnswer(true) : showAnswer(false); pokemon_name = event.currentTarget[0].value;
} event.preventDefault(); // do not submit form
if (event.keyCode == 49 || event.keyCode == 72) checkAnswer(1); if (normalizeString(answer) == normalizeString(pokemon_name))
else if (event.keyCode == 50 || event.keyCode == 74) checkAnswer(2); showAnswer(true);
else if (event.keyCode == 51 || event.keyCode == 75) checkAnswer(3); else
else if (event.keyCode == 52 || event.keyCode == 76) checkAnswer(4); showAnswer(false);
}); });
}
function showAnswer(ok) function showAnswer(ok)
{ {
@ -331,6 +366,7 @@ $(document).ready(function() {
else gen += "all"; else gen += "all";
s_gen = "?gen=" + gen; s_gen = "?gen=" + gen;
s_lang = "&lang=" + lang; s_lang = "&lang=" + lang;
s_answertype = "&answertype=" + answertype;
s_silhouette = "&silhouette=" + (silhouette == "silhouette" ? "true" : "false"); s_silhouette = "&silhouette=" + (silhouette == "silhouette" ? "true" : "false");
s_questions = "&questions=" + (!whole_set? max_questions : "set"); s_questions = "&questions=" + (!whole_set? max_questions : "set");
s_time = "&time=" + max_chrono; s_time = "&time=" + max_chrono;
@ -338,14 +374,15 @@ $(document).ready(function() {
// save in the local storage for default use // save in the local storage for default use
localStorage.setItem('generation', gen); localStorage.setItem('generation', gen);
localStorage.setItem('lang', lang); localStorage.setItem('lang', lang);
localStorage.setItem('answertype', answertype);
localStorage.setItem('silhouette', silhouette); localStorage.setItem('silhouette', silhouette);
localStorage.setItem('questions', (!whole_set? max_questions : "set")); localStorage.setItem('questions', (!whole_set? max_questions : "set"));
localStorage.setItem('time', max_chrono); localStorage.setItem('time', max_chrono);
return 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').addClass('diploma');
$('article #container').removeClass('game_active'); $('article #container').removeClass('game_active');
$('article #container .chrono').hide(); $('article #container .chrono').hide();
@ -360,15 +397,14 @@ $(document).ready(function() {
class="twitter-share-button" data-url="'+generateSeed()+'" data-text="'+generateTwitterText()+ class="twitter-share-button" data-url="'+generateSeed()+'" data-text="'+generateTwitterText()+
'" data-size="large" data-hashtags="Pokétest">Tweet</a>'); '" data-size="large" data-hashtags="Pokétest">Tweet</a>');
$.getScript("//platform.twitter.com/widgets.js"); // for the twitter button to work $.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" \
//$('article #container #answers').empty().append('<p class="button"><input type="submit" \ class="start_again" name="start_again" value="Play again!"></p>');
// class="start_again" name="start_again" value="Play again!"></p>');
// copy seed in clipboard // copy seed in clipboard
$("article #container #copyseed").click(function() $("article #container #copyseed").click(function()
{ {
$('article #container #seed input').select(); $('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()
@ -377,6 +413,7 @@ $(document).ready(function() {
chrono = max_chrono; chrono = max_chrono;
$('article #container .chrono').show(); $('article #container .chrono').show();
$('article #container').removeClass('diploma'); $('article #container').removeClass('diploma');
$('article #container').addClass('game_active');
game(); game();
}); });
} }

48
style.css
View File

@ -100,7 +100,7 @@ article #container .flashdex-companion {
} }
article #container .top-companion { article #container .top-companion {
margin-top: 20px; margin-top: 20px; margin-bottom: 10px;
float: right; float: right;
width: 250px; width: 250px;
margin-left: 25px; margin-right: 25px; margin-left: 25px; margin-right: 25px;
@ -114,7 +114,6 @@ article #container .middle-companion {
article #container.about p { margin-left:20px; } 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 { margin-top: 5px; margin-bottom: 5px; }
article #container.about ul li a { margin-top: 5px; margin-bottom: 5px; font-weight: normal; } article #container.about ul li a { margin-top: 5px; margin-bottom: 5px; font-weight: normal; }
@ -257,8 +256,20 @@ article #container #answers {
justify-content: center; justify-content: center;
} }
article #container #answers input { margin-right: 30px; display: inline; } article #container #answers input { margin-right: 15px; margin-left: 15px; display: inline; }
article #container #answers input:last-child { margin-right: 30px; }
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 { font-size: 23px; }
article #container #answers .final_answer .good { color:#3ad48d; font-weight:bold; } article #container #answers .final_answer .good { color:#3ad48d; font-weight:bold; }
@ -349,7 +360,6 @@ article #container.diploma #score {
margin:auto; margin:auto;
display:none; display:none;
text-align:center; text-align:center;
margin-top:2vh;
} }
#container #game #flashdex .pokedex { #container #game #flashdex .pokedex {
@ -426,6 +436,7 @@ article #container.diploma #score {
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
font-size: 0.8rem; font-size: 0.8rem;
text-shadow: 0 0 2px #000;
} }
#game #flashdex .pokedex span.types .Grass { background: #78C850; } #game #flashdex .pokedex span.types .Grass { background: #78C850; }
@ -519,8 +530,8 @@ article #container.diploma #score {
/* poketest */ /* poketest */
article #container #game #configuration #left_config { float: none; } /*article #container #game #configuration #left_config { float: none; }
article #container #game #configuration #right_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 input[name="gen"], article #container #game #selected_options input,
article #container #game #configuration .first { margin-left:15px; margin-bottom:5px; } article #container #game #configuration .first { margin-left:15px; margin-bottom:5px; }
article #container #game .button { padding: 10px; padding-top: 20px; } article #container #game .button { padding: 10px; padding-top: 20px; }
@ -549,8 +560,11 @@ article #container.diploma #score {
display: block; display: block;
} }
article #container #answers input:last-child { margin-right: 0px; } article #container #answers input:last-child { margin-right: 0px; margin-left: 0px; }
article #container.game_active div#answers span { display: block; } 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.diploma #score { background: none; }
article #container #seed input { article #container #seed input {
width: 90%; width: 90%;
@ -564,6 +578,11 @@ article #container.diploma #score {
margin-top: 1vh; margin-top: 1vh;
} }
article #container .pokemon img.input {
height: 42vh;
margin-top: 1vh;
}
article #container #top_game .whois { width: 80%; } article #container #top_game .whois { width: 80%; }
article #container #top_game .chrono { article #container #top_game .chrono {
width: 2rem; width: 2rem;
@ -577,6 +596,8 @@ article #container.diploma #score {
padding: 10px; padding-top: 15px; padding: 10px; padding-top: 15px;
} }
article #container #answers form .button { display: block; }
/* flashdex */ /* flashdex */
#container #game #flashdex .pokedex { width: 230px; } #container #game #flashdex .pokedex { width: 230px; }
@ -604,7 +625,7 @@ article #container.diploma #score {
#game #flashdex_config .gen { padding: 0; margin: 0; display: block; } #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 .gen label { padding: 2px; margin: 2px; margin-left: 8px; }
#game #flashdex_config select.lang { margin-left: 15px; margin-top:5px; } #game #flashdex_config select.lang { margin-left: 15px; margin-top:5px; }
#game #flashdex_config p.button { padding-top: 15px; margin-top: 15px; } #game #flashdex_config p.button { padding-top: 0px; margin-top: 0px; }
/* about */ /* about */
@ -627,6 +648,15 @@ article #container.diploma #score {
footer { height:6vh; } 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) { @media screen and (max-width:400px) {
header img { height: 60px; } header img { height: 60px; }
header nav #hamburger { top: 1.05rem; } header nav #hamburger { top: 1.05rem; }