Version 2.9

* 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:
2022-03-14 21:30:46 +01:00
parent 074726aea4
commit caab9fe47d
8 changed files with 208 additions and 118 deletions

View File

@ -8,7 +8,6 @@ $(document).ready(function() {
/********************************/
/****** General variables ******/
var score = 0;
var questions = 0;
var good_answers = 0;
var bad_answers = 0;
@ -65,6 +64,11 @@ $(document).ready(function() {
return false;
}
function normalizeString(string)
{
return string.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "");
}
/************ GAME *************/
/*******************************/
@ -80,7 +84,6 @@ $(document).ready(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 #score').append('<p class="pokemon"></p><div id="answers"></div>');
generations();
@ -96,6 +99,7 @@ $(document).ready(function() {
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();
});
}
@ -228,7 +232,9 @@ $(document).ready(function() {
available_pokemon.splice(resultIndex, 1);
answer = pklist.mn[result][lang];
chooseOptions(result, lang);
if (answertype == "choice")
chooseOptions(result, lang);
imageType(result);
}
@ -238,16 +244,29 @@ $(document).ready(function() {
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 #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)+'" />');
$('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>')
$('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()
@ -268,18 +287,34 @@ $(document).ready(function() {
($(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);
($('#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);
});
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)
{
@ -331,6 +366,7 @@ $(document).ready(function() {
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;
@ -338,14 +374,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 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();
@ -360,15 +397,14 @@ $(document).ready(function() {
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 #answers').empty().append('<p class="button"><input type="submit" \
class="start_again" name="start_again" value="Play again!"></p>');
// copy seed in clipboard
$("article #container #copyseed").click(function()
{
$('article #container #seed input').select();
document.execCommand("copy");
navigator.clipboard.writeText($('article #container #seed input').val());
});
$('article #container .button input.start_again').click(function()
@ -377,6 +413,7 @@ $(document).ready(function() {
chrono = max_chrono;
$('article #container .chrono').show();
$('article #container').removeClass('diploma');
$('article #container').addClass('game_active');
game();
});
}