poketest/poketest.js

$(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, 905];
	var MEGA 	= [906, 955]; 
	var GIGA	= [956, 987];
	var REG		= [988, 1040];

	/************ 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, 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));
				}
				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('<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>')

			// 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();
				});
			}
		}

	});
});