423 lines
14 KiB
JavaScript
423 lines
14 KiB
JavaScript
$(document).ready(function() {
|
|
|
|
/****** CONFIGURATION ***********/
|
|
var max_questions = 15;
|
|
var max_chrono = 5;
|
|
var max_wait = 2;
|
|
var max_infinite_errors = 5;
|
|
/********************************/
|
|
|
|
/****** General variables ******/
|
|
var questions = 0;
|
|
var good_answers = 0;
|
|
var bad_answers = 0;
|
|
var chrono = max_chrono;
|
|
var infinite = false; // type of game
|
|
var whole_set = false; // type of game
|
|
var image_name; // preload
|
|
var image_memory; // preload
|
|
var gen_list = new Array();
|
|
var available_pokemon = new Array();
|
|
var domain = "https://poketest.marchal.dev/index.html";
|
|
|
|
/****** Generations ******/
|
|
var G1 = [1, 151];
|
|
var G2 = [152, 251];
|
|
var G3 = [252, 386];
|
|
var G4 = [387, 493];
|
|
var G5 = [494, 649];
|
|
var G6 = [650, 721];
|
|
var G7 = [722, 809];
|
|
var G8 = [810, 905];
|
|
var G9 = [906, 908];
|
|
var MEGA = [909, 958];
|
|
var GIGA = [959, 990];
|
|
var REG = [991, 1043];
|
|
var gen_number = 9;
|
|
var extra_number = 3; // mega, giga, reg
|
|
|
|
/************ UTIL *************/
|
|
/*******************************/
|
|
|
|
function random(min, max)
|
|
{
|
|
return Math.floor(Math.random()*(max-min+1)+min);
|
|
}
|
|
|
|
function shuffleArray(array)
|
|
{
|
|
for (var i = array.length - 1; i > 0; i--) {
|
|
var j = Math.floor(Math.random() * (i + 1));
|
|
var temp = array[i];
|
|
array[i] = array[j];
|
|
array[j] = temp;
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function findInArray(array, elem)
|
|
{
|
|
for (var j = 0; j < array.length; j++) {
|
|
if (array[j] === elem)
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function normalizeString(string)
|
|
{
|
|
return string.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "");
|
|
}
|
|
|
|
|
|
/************ GAME *************/
|
|
/*******************************/
|
|
|
|
// loading json file
|
|
$.getJSON('pokemon.json', function(pk)
|
|
{
|
|
var pklist = pk;
|
|
var pokemon_generation_list = new Array();
|
|
|
|
// starting the game for the first time and creating the layout
|
|
function firstGame()
|
|
{
|
|
$('article #game').fadeToggle('quick', function()
|
|
{
|
|
document.removeEventListener('keydown', funcListener);
|
|
$('article #container').append('<div id="score"><div id="top_game"><h1 class="whois"></h1><h1 class="chrono"></h1></div></div>');
|
|
$('article #container #score').append('<p class="pokemon"></p><div id="answers"></div>');
|
|
generations();
|
|
max_chrono = $('article select.time option:selected').attr('id');
|
|
max_questions = $('article select.questions option:selected').attr('id');
|
|
if (max_questions == "infinite") infinite = true;
|
|
if (max_questions == "set")
|
|
{
|
|
whole_set = true;
|
|
// 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 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)
|
|
{
|
|
if (event.keyCode == 13) // press enter
|
|
firstGame();
|
|
});
|
|
|
|
// start the game when clicking on start game
|
|
$('article #container .button input.start').click(function()
|
|
{
|
|
firstGame();
|
|
});
|
|
|
|
function generations()
|
|
{
|
|
// create the list of the different generations
|
|
function createGenerationList(name)
|
|
{
|
|
if ( $('article input[name="'+name+'"]').is(':checked') )
|
|
gen_list[gen_list.length] = name;
|
|
}
|
|
|
|
// create the list of all possible pokemons for selected options
|
|
function generatePokemonList()
|
|
{
|
|
function evaluateByGeneration(index, name, variable)
|
|
{
|
|
if (gen_list[index] == name)
|
|
{
|
|
for (j = (variable[0] - 1); j <= (variable[1] - 1); j++)
|
|
pokemon_generation_list[pokemon_generation_list.length] = j;
|
|
}
|
|
}
|
|
|
|
if (gen_list.length > 0)
|
|
{
|
|
for (i in gen_list)
|
|
{
|
|
evaluateByGeneration(i, "1g", G1); evaluateByGeneration(i, "2g", G2); evaluateByGeneration(i, "3g", G3);
|
|
evaluateByGeneration(i, "4g", G4); evaluateByGeneration(i, "5g", G5); evaluateByGeneration(i, "6g", G6);
|
|
evaluateByGeneration(i, "7g", G7); evaluateByGeneration(i, "8g", G8); evaluateByGeneration(i, "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" )
|
|
{
|
|
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 = 0; 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)
|
|
{
|
|
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"];
|
|
}
|
|
}
|
|
image_name = randomizer(result);
|
|
image_memory = new Image();
|
|
image_memory.src = 'pokemon/' + image_name + '.png';
|
|
return image_name;
|
|
}
|
|
|
|
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]))
|
|
return pklist.mn[tmp][lang];
|
|
else
|
|
return recursiveOptions(options, lang);
|
|
}
|
|
|
|
// choosing the four options
|
|
function chooseOptions(result, lang)
|
|
{
|
|
options = new Array();
|
|
options[0] = pklist.mn[result][lang];
|
|
for (var i = 1; i < 4; i++)
|
|
options[i] = recursiveOptions(options, lang);
|
|
options = shuffleArray(options);
|
|
}
|
|
|
|
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 (answertype == "choice")
|
|
chooseOptions(result, lang);
|
|
imageType(result);
|
|
}
|
|
|
|
function game()
|
|
{
|
|
choosePokemon();
|
|
questions++;
|
|
chrono = max_chrono;
|
|
$('article #container').addClass('game_active');
|
|
$('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()
|
|
{
|
|
chrono--;
|
|
if (chrono === 0)
|
|
{
|
|
clearInterval(clock);
|
|
showAnswer(false); // timer has ended, so it's a bad answer
|
|
}
|
|
$('article #container .chrono').empty().append(chrono);
|
|
}, 1000);
|
|
|
|
// checking if the answer is good or not
|
|
$('article .option').click(function()
|
|
{
|
|
clearInterval(clock);
|
|
($(this).attr('value') == answer) ? showAnswer(true) : showAnswer(false);
|
|
});
|
|
|
|
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)
|
|
{
|
|
good_answers++;
|
|
$('article #answers').empty().append("<p class=\"final_answer\"><span class=\"good\">That's right!</span> \
|
|
The answer is <strong>"+ answer +"</strong>!</p>");
|
|
}
|
|
else
|
|
{
|
|
bad_answers++;
|
|
$('article #answers').empty().append("<p class=\"final_answer\"><span class=\"bad\">Too bad...</span> \
|
|
The answer was <strong>"+ answer +"</strong>!</p>");
|
|
}
|
|
var wait = max_wait;
|
|
clock = setInterval(function()
|
|
{
|
|
wait--;
|
|
if (wait === 0) {
|
|
if (!infinite) questions < max_questions ? game() : score();
|
|
else bad_answers < max_infinite_errors ? game() : score();
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function score()
|
|
{
|
|
function generateTwitterText()
|
|
{
|
|
var start_sentence = 'I got ';
|
|
var end_sentence = 'Can you get a better score than me?';
|
|
var score_sentence = (Math.floor(good_answers/max_questions*100))+'% Pokémons right!'
|
|
|
|
if (!infinite) return start_sentence+score_sentence+" "+end_sentence;
|
|
else return start_sentence+good_answers+" good Pokémon answers! "+end_sentence;
|
|
}
|
|
|
|
function generateSeed()
|
|
{
|
|
gen = '';
|
|
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;
|
|
|
|
// 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_answertype + s_silhouette + s_questions + s_time;
|
|
}
|
|
|
|
$('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();
|
|
if (!infinite)
|
|
$('article #container .pokemon').empty().append("<p class=\"score-text\">Score: <strong>"+(Math.floor(good_answers/max_questions*100))+"%</strong></p>");
|
|
else
|
|
$('article #container .pokemon').empty().append("<p class=\"score-text\">Score: <strong>"+good_answers+" good answer"+(good_answers>1?("s"):"")+"!</strong></p>");
|
|
|
|
$('article #container #seed').empty().append('<p style="margin:0px;">Share your configuration</p><input type="text" name="seed" value="'+
|
|
generateSeed()+'">');
|
|
$('article #container #share').empty().append('<div id="copyseed"><a href="#">Copy</a></div><a href="https://twitter.com/share" \
|
|
class="twitter-share-button" data-url="'+generateSeed()+'" data-text="'+generateTwitterText()+
|
|
'" data-size="large" data-hashtags="Pokétest">Tweet</a>');
|
|
$.getScript("//platform.twitter.com/widgets.js"); // for the twitter button to work
|
|
$('article #container #answers').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();
|
|
navigator.clipboard.writeText($('article #container #seed input').val());
|
|
});
|
|
|
|
$('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();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}); |