372 lines
14 KiB
JavaScript
372 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 score = 0;
|
|||
|
|
var questions = 0;
|
|||
|
|
var good_answers = 0;
|
|||
|
|
var bad_answers = 0;
|
|||
|
|
var chrono = max_chrono;
|
|||
|
|
var infinite = false; // type of game
|
|||
|
|
var whole_set = false; // type of game
|
|||
|
|
var image_name; // preload
|
|||
|
|
var image_memory; // preload
|
|||
|
|
var gen_list = new Array();
|
|||
|
|
var previous_pokemon = new Array();
|
|||
|
|
|
|||
|
|
/****** Generations ******/
|
|||
|
|
var G1 = [1, 151];
|
|||
|
|
var G2 = [152, 251];
|
|||
|
|
var G3 = [252, 386];
|
|||
|
|
var G4 = [387, 493];
|
|||
|
|
var G5 = [494, 649];
|
|||
|
|
var G6 = [650, 721];
|
|||
|
|
var G7 = [722, 809];
|
|||
|
|
var G8 = [810, 890]
|
|||
|
|
var MEGA = [891, 940];
|
|||
|
|
var REG = [941, 971];
|
|||
|
|
var GIGA = [972, 1000];
|
|||
|
|
|
|||
|
|
/************ UTIL *************/
|
|||
|
|
/*******************************/
|
|||
|
|
|
|||
|
|
function random(min, max) {
|
|||
|
|
return Math.floor(Math.random()*(max-min+1)+min);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function shuffleArray(array) {
|
|||
|
|
for (var i = array.length - 1; i > 0; i--) {
|
|||
|
|
var j = Math.floor(Math.random() * (i + 1));
|
|||
|
|
var temp = array[i];
|
|||
|
|
array[i] = array[j];
|
|||
|
|
array[j] = temp;
|
|||
|
|
}
|
|||
|
|
return array;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function findInArray(array, elem, size) {
|
|||
|
|
for (var j = 0; j < array.length; j++) {
|
|||
|
|
if (array[j] === elem)
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/************ GAME *************/
|
|||
|
|
/*******************************/
|
|||
|
|
|
|||
|
|
// loading json file
|
|||
|
|
var json = $.getJSON('pokemon.json', function(pk) {
|
|||
|
|
|
|||
|
|
var pklist = pk;
|
|||
|
|
var pokemon_generation_list = new Array();
|
|||
|
|
|
|||
|
|
// starting the game for the first time and creating the layout
|
|||
|
|
function firstGame() {
|
|||
|
|
$('article #game').fadeToggle('quick', function() {
|
|||
|
|
document.removeEventListener('keydown', funcListener);
|
|||
|
|
$('article #container').append('<div id="score"><div id="top_game"><h1 class="whois"></h1><h1 class="chrono"></h1></div></div>');
|
|||
|
|
$('article #container #score').append('<p class="pokemon"></p><div id="answers"></div>');
|
|||
|
|
generations();
|
|||
|
|
choosePokemon();
|
|||
|
|
max_chrono = $('article select.time option:selected').attr('id');
|
|||
|
|
max_questions = $('article select.questions option:selected').attr('id');
|
|||
|
|
if (max_questions == "infinite") infinite = true;
|
|||
|
|
if (max_questions == "set") {
|
|||
|
|
whole_set = true;
|
|||
|
|
// set max_questions depending on generation
|
|||
|
|
|
|||
|
|
// if it's not all generation, we check list of available pokemons
|
|||
|
|
if (pokemon_generation_list.length > 0)
|
|||
|
|
max_questions = pokemon_generation_list.length;
|
|||
|
|
else // else, it's all the generation, from the first one to the gigantamax forms
|
|||
|
|
max_questions = GIGA[1] - 1;
|
|||
|
|
}
|
|||
|
|
game();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// allows to start the game when pressing enter
|
|||
|
|
document.addEventListener('keydown', funcListener = function(event) {
|
|||
|
|
if (event.keyCode == 13) // press enter
|
|||
|
|
firstGame();
|
|||
|
|
});
|
|||
|
|
// start the game when clicking on start game
|
|||
|
|
$('article #container .button input.start').click(function() {
|
|||
|
|
firstGame();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function generations() {
|
|||
|
|
|
|||
|
|
// create the list of the different generations
|
|||
|
|
function createGenerationList(name) {
|
|||
|
|
if ( $('article input[name="'+name+'"]').is(':checked') )
|
|||
|
|
gen_list[gen_list.length] = name;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// create the list of all possible pokemons for selected options
|
|||
|
|
function generatePokemonList() {
|
|||
|
|
|
|||
|
|
function evaluateByGeneration(index, name, variable) {
|
|||
|
|
if (gen_list[index] == name) {
|
|||
|
|
for (j = (variable[0] - 1); j <= (variable[1] - 1); j++)
|
|||
|
|
pokemon_generation_list[pokemon_generation_list.length] = j;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (gen_list.length > 0) {
|
|||
|
|
for (i in gen_list) {
|
|||
|
|
evaluateByGeneration(i, "1g", G1); evaluateByGeneration(i, "2g", G2); evaluateByGeneration(i, "3g", G3);
|
|||
|
|
evaluateByGeneration(i, "4g", G4); evaluateByGeneration(i, "5g", G5); evaluateByGeneration(i, "6g", G6);
|
|||
|
|
evaluateByGeneration(i, "7g", G7); evaluateByGeneration(i, "8g", G8);
|
|||
|
|
evaluateByGeneration(i, "mega", MEGA); evaluateByGeneration(i, "regional", REG); evaluateByGeneration(i, "gigantamax", GIGA);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// we parse the list of generation, then check if there are other forms
|
|||
|
|
if ( $('article input[name="gen"]:checked').attr('id') === "all" )
|
|||
|
|
return;
|
|||
|
|
for (i = 0; i < 9; i++)
|
|||
|
|
createGenerationList((i + "g"));
|
|||
|
|
createGenerationList("mega");
|
|||
|
|
createGenerationList("regional");
|
|||
|
|
createGenerationList("gigantamax");
|
|||
|
|
generatePokemonList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// multiple artworks
|
|||
|
|
function imageType(result) {
|
|||
|
|
var four_types = [351, 386, 585, 586, 676, 741, 800];
|
|||
|
|
var three_types = [249, 250, 384, 412, 413, 718, 745];
|
|||
|
|
var two_types = [251, 252, 255, 258, 374, 387, 390, 393, 421, 422, 423, 487, 492, 495, 498, 501, 521, 550, 555,
|
|||
|
|
592, 593, 641, 642, 643, 644, 645, 647, 648, 668, 678, 681, 720, 746, 774, 791, 792, 802, 849,
|
|||
|
|
876, 877, 888, 889];
|
|||
|
|
|
|||
|
|
function randomizer() {
|
|||
|
|
if (result >= MEGA[0]) return (pklist.mn[result-1]["num"])
|
|||
|
|
if (result === 25) return (result+'-'+random(0, 16));
|
|||
|
|
if (result === 666) return (result+'-'+random(0, 20));
|
|||
|
|
if (result === 646) return (result+'-'+random(0, 6));
|
|||
|
|
if (result === 479) return (result+'-'+random(0, 5));
|
|||
|
|
for (i in four_types) {
|
|||
|
|
if (four_types[i] == result) return (result+'-'+random(0, 3));
|
|||
|
|
}
|
|||
|
|
for (i in three_types) {
|
|||
|
|
if (three_types[i] == result) return (result+'-'+random(0, 2));
|
|||
|
|
}
|
|||
|
|
for (i in two_types) {
|
|||
|
|
if (two_types[i] == result) return (result+'-'+random(0, 1));
|
|||
|
|
}
|
|||
|
|
if (result > 151) return result;
|
|||
|
|
if ((tmp = random(0, 2)) == 0) return result;
|
|||
|
|
else if (tmp == 1) return (result+'RB');
|
|||
|
|
else return (result+'RG');
|
|||
|
|
}
|
|||
|
|
image_name = randomizer(result+1);
|
|||
|
|
image_memory = new Image();
|
|||
|
|
image_memory.src = 'pokemon/' + image_name + '.png';
|
|||
|
|
return image_name;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function recursiveOptions(options, lang) {
|
|||
|
|
// if it's not all generation, we check list of available pokemons
|
|||
|
|
if (pokemon_generation_list.length > 0)
|
|||
|
|
tmp = pokemon_generation_list[random(0, pokemon_generation_list.length - 1)];
|
|||
|
|
else // else, it's all the generation, from the first one to the gigantamax forms
|
|||
|
|
tmp = random(0, GIGA[1] - 1);
|
|||
|
|
|
|||
|
|
// checking if it's already there, if it is, recursion
|
|||
|
|
if (!findInArray(options, pklist.mn[tmp][lang]))
|
|||
|
|
return pklist.mn[tmp][lang];
|
|||
|
|
else
|
|||
|
|
return recursiveOptions(options, lang);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// choosing the four options
|
|||
|
|
function chooseOptions(result, lang) {
|
|||
|
|
options = new Array();
|
|||
|
|
options[0] = pklist.mn[result][lang];
|
|||
|
|
for (var i = 1; i < 4; i++)
|
|||
|
|
options[i] = recursiveOptions(options, lang);
|
|||
|
|
options = shuffleArray(options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// avoid repetition of the same pokemon in a short lapse of time
|
|||
|
|
function checkPreviousPokemon(pkmn) {
|
|||
|
|
if (!whole_set) { // if it's not the whole set, we have to delete some older occurrences
|
|||
|
|
if (pokemon_generation_list.length > 0) {
|
|||
|
|
if (previous_pokemon.length + 6 > pokemon_generation_list.length)
|
|||
|
|
previous_pokemon.splice(0, 6);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if (previous_pokemon.length + 6 > GIGA[1] - 1)
|
|||
|
|
previous_pokemon.splice(0, 6);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return findInArray(previous_pokemon, pkmn);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function choosePokemon() {
|
|||
|
|
// if it's not all generation, we check list of available pokemons
|
|||
|
|
if (pokemon_generation_list.length > 0)
|
|||
|
|
result = pokemon_generation_list[random(0, pokemon_generation_list.length - 1)];
|
|||
|
|
else // else, it's all the generation, from the first one to the gigantamax forms
|
|||
|
|
result = random(0, GIGA[1] - 1);
|
|||
|
|
lang = $('article select.lang option:selected').attr('id');
|
|||
|
|
silhouette = $('article input[name="silhouette"]:checked').attr('id');
|
|||
|
|
answer = pklist.mn[result][lang];
|
|||
|
|
if (checkPreviousPokemon(answer)) { // if it's already been selected within a short lapse of time
|
|||
|
|
if (whole_set && questions == max_questions) { } // makes the last question of whole set work
|
|||
|
|
else choosePokemon(); // recursive call
|
|||
|
|
} else {
|
|||
|
|
previous_pokemon[previous_pokemon.length] = answer;
|
|||
|
|
chooseOptions(result, lang);
|
|||
|
|
}
|
|||
|
|
imageType(result + 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function game() {
|
|||
|
|
questions++;
|
|||
|
|
chrono = max_chrono;
|
|||
|
|
$('article #container').addClass('game_active');
|
|||
|
|
$('article #container #share').empty();
|
|||
|
|
$('article #container #seed').empty();
|
|||
|
|
$('article #container #copyseed').empty();
|
|||
|
|
$('article #container .chrono').empty().append(chrono);
|
|||
|
|
$('article #container .whois').empty().append("Who's that Pokémon? " + (!infinite? " ("+questions+"/"+max_questions+")" : ""));
|
|||
|
|
$('article #container .pokemon').empty().append('<img src="pokemon/'+image_name+'.png" class="'+(silhouette)+'" />');
|
|||
|
|
$('article #container #answers').empty().append('<input type="submit" class="option a1" name="a1" value="'+options[0]+'">')
|
|||
|
|
$('article #container #answers').append('<input type="submit" class="option a2" name="a2" value="'+options[1]+'">')
|
|||
|
|
$('article #container #answers').append('<input type="submit" class="option a3" name="a3" value="'+options[2]+'">')
|
|||
|
|
$('article #container #answers').append('<input type="submit" class="option a4" name="a4" value="'+options[3]+'">')
|
|||
|
|
|
|||
|
|
// timer setting
|
|||
|
|
var clock = setInterval(function() {
|
|||
|
|
chrono--;
|
|||
|
|
if (chrono === 0) {
|
|||
|
|
clearInterval(clock);
|
|||
|
|
showAnswer(false); // timer has ended, so it's a bad answer
|
|||
|
|
}
|
|||
|
|
$('article #container .chrono').empty().append(chrono);
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
// checking if the answer is good or not
|
|||
|
|
$('article .option').click(function() {
|
|||
|
|
clearInterval(clock);
|
|||
|
|
($(this).attr('value') == answer) ? showAnswer(true) : showAnswer(false);
|
|||
|
|
});
|
|||
|
|
document.addEventListener('keydown', funcListener = function(event) {
|
|||
|
|
function checkAnswer(v) {
|
|||
|
|
clearInterval(clock);
|
|||
|
|
($('#answers input.a'+v).attr('value') == answer) ? showAnswer(true) : showAnswer(false);
|
|||
|
|
}
|
|||
|
|
if (event.keyCode == 49 || event.keyCode == 72) checkAnswer(1);
|
|||
|
|
else if (event.keyCode == 50 || event.keyCode == 74) checkAnswer(2);
|
|||
|
|
else if (event.keyCode == 51 || event.keyCode == 75) checkAnswer(3);
|
|||
|
|
else if (event.keyCode == 52 || event.keyCode == 76) checkAnswer(4);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function showAnswer(ok) {
|
|||
|
|
document.removeEventListener('keydown', funcListener);
|
|||
|
|
$('article .pokemon img').removeClass('silhouette');
|
|||
|
|
if (ok) {
|
|||
|
|
good_answers++;
|
|||
|
|
$('article #answers').empty().append("<p class=\"final_answer\"><span class=\"good\">That's right!</span> \
|
|||
|
|
The answer is <strong>"+ answer +"</strong>!</p>");
|
|||
|
|
} else {
|
|||
|
|
bad_answers++;
|
|||
|
|
$('article #answers').empty().append("<p class=\"final_answer\"><span class=\"bad\">Too bad...</span> \
|
|||
|
|
The answer was <strong>"+ answer +"</strong>!</p>");
|
|||
|
|
}
|
|||
|
|
choosePokemon();
|
|||
|
|
var wait = max_wait;
|
|||
|
|
var clock = setInterval(function() {
|
|||
|
|
wait--;
|
|||
|
|
if (wait === 0) {
|
|||
|
|
if (!infinite) questions < max_questions ? game() : score();
|
|||
|
|
else bad_answers < max_infinite_errors ? game() : score();
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function score() {
|
|||
|
|
|
|||
|
|
function generateTwitterText() {
|
|||
|
|
var start_sentence = 'I got ';
|
|||
|
|
var end_sentence = 'Can you get a better score than me?';
|
|||
|
|
var score_sentence = (Math.floor(good_answers/max_questions*100))+'% Pokémons right!'
|
|||
|
|
var questions_sentence = max_questions + " questions"
|
|||
|
|
|
|||
|
|
if (!infinite) return start_sentence+score_sentence+" "+end_sentence;
|
|||
|
|
else return start_sentence+good_answers+" good Pokémon answers! "+end_sentence;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function generateSeed() {
|
|||
|
|
s_domain = "https://poketest.marchal.dev/index.html";
|
|||
|
|
gen = '';
|
|||
|
|
if (gen_list.length > 0) {
|
|||
|
|
for (i in gen_list)
|
|||
|
|
gen += gen_list[i].substring(0,1);
|
|||
|
|
}
|
|||
|
|
else gen += "all";
|
|||
|
|
s_gen = "?gen=" + gen;
|
|||
|
|
s_lang = "&lang=" + lang;
|
|||
|
|
s_silhouette = "&silhouette=" + (silhouette == "silhouette" ? "true" : "false");
|
|||
|
|
s_questions = "&questions=" + (!whole_set? max_questions : "set");
|
|||
|
|
s_time = "&time=" + max_chrono;
|
|||
|
|
|
|||
|
|
// save in the local storage for default use
|
|||
|
|
localStorage.setItem('generation', gen);
|
|||
|
|
localStorage.setItem('lang', lang);
|
|||
|
|
localStorage.setItem('silhouette', silhouette);
|
|||
|
|
localStorage.setItem('questions', (!whole_set? max_questions : "set"));
|
|||
|
|
localStorage.setItem('time', max_chrono);
|
|||
|
|
|
|||
|
|
return s_domain + s_gen + s_lang + s_silhouette + s_questions + s_time;
|
|||
|
|
}
|
|||
|
|
$('article #container #score .pokemon').after('<div id="seed"></div><div id="share"></div>');
|
|||
|
|
$('article #container').addClass('diploma');
|
|||
|
|
$('article #container').removeClass('game_active');
|
|||
|
|
$('article #container .chrono').hide();
|
|||
|
|
if (!infinite)
|
|||
|
|
$('article #container .pokemon').empty().append("<p class=\"score-text\">Score: <strong>"+(Math.floor(good_answers/max_questions*100))+"%</strong></p>");
|
|||
|
|
else
|
|||
|
|
$('article #container .pokemon').empty().append("<p class=\"score-text\">Score: <strong>"+good_answers+" good answer"+(good_answers>1?("s"):"")+"!</strong></p>");
|
|||
|
|
|
|||
|
|
$('article #container #seed').empty().append('<p style="margin:0px;">Share your configuration</p><input type="text" name="seed" value="'+
|
|||
|
|
generateSeed()+'">');
|
|||
|
|
$('article #container #share').empty().append('<div id="copyseed"><a href="#">Copy</a></div><a href="https://twitter.com/share" \
|
|||
|
|
class="twitter-share-button" data-url="'+generateSeed()+'" data-text="'+generateTwitterText()+
|
|||
|
|
'" data-size="large" data-hashtags="Pokétest">Tweet</a>');
|
|||
|
|
$.getScript("//platform.twitter.com/widgets.js"); // for the twitter button to work
|
|||
|
|
$('article #container #answers').remove(); // until play again is fixed
|
|||
|
|
//$('article #container #answers').empty().append('<p class="button"><input type="submit" \
|
|||
|
|
// class="start_again" name="start_again" value="Play again!"></p>');
|
|||
|
|
|
|||
|
|
// copy seed in clipboard
|
|||
|
|
$("article #container #copyseed").click(function() {
|
|||
|
|
$('article #container #seed input').select();
|
|||
|
|
document.execCommand("copy");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('article #container .button input.start_again').click(function() {
|
|||
|
|
score = questions = good_answers = bad_answers = 0;
|
|||
|
|
chrono = max_chrono;
|
|||
|
|
$('article #container .chrono').show();
|
|||
|
|
$('article #container').removeClass('diploma');
|
|||
|
|
game();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
});
|