2020-04-25 16:29:59 +00:00
$ ( 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 ( ) ;
2022-03-01 23:25:16 +00:00
var available _pokemon = new Array ( ) ;
var domain = "https://poketest.marchal.dev/index.html" ;
2020-04-25 16:29:59 +00:00
/****** 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 ] ;
2022-02-23 12:58:51 +00:00
var G8 = [ 810 , 905 ] ;
2023-03-15 17:33:25 +00:00
var G9 = [ 906 , 1010 ] ;
var MEGA = [ 1011 , 1060 ] ;
var GIGA = [ 1061 , 1092 ] ;
var REG = [ 1093 , 1147 ] ;
2022-03-01 23:25:16 +00:00
var gen _number = 9 ;
var extra _number = 3 ; // mega, giga, reg
2020-04-25 16:29:59 +00:00
/************ UTIL *************/
/*******************************/
2022-03-03 12:14:56 +00:00
function random ( min , max )
{
2020-04-25 16:29:59 +00:00
return Math . floor ( Math . random ( ) * ( max - min + 1 ) + min ) ;
}
2022-03-03 12:14:56 +00:00
function shuffleArray ( array )
{
2020-04-25 16:29:59 +00:00
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 ;
}
2022-03-03 12:14:56 +00:00
function findInArray ( array , elem )
{
2020-04-25 16:29:59 +00:00
for ( var j = 0 ; j < array . length ; j ++ ) {
if ( array [ j ] === elem )
return true ;
}
return false ;
}
2022-03-14 20:30:46 +00:00
function normalizeString ( string )
{
return string . toLowerCase ( ) . normalize ( 'NFD' ) . replace ( /[\u0300-\u036f]/g , "" ) ;
}
2020-04-25 16:29:59 +00:00
/************ GAME *************/
/*******************************/
// loading json file
2022-03-03 12:14:56 +00:00
$ . getJSON ( 'pokemon.json' , function ( pk )
{
2020-04-25 16:29:59 +00:00
var pklist = pk ;
var pokemon _generation _list = new Array ( ) ;
// starting the game for the first time and creating the layout
2022-03-03 12:14:56 +00:00
function firstGame ( )
{
$ ( 'article #game' ) . fadeToggle ( 'quick' , function ( )
{
2022-03-15 11:47:37 +00:00
document . removeEventListener ( 'keydown' , funcListener ) ;
2020-04-25 16:29:59 +00:00
$ ( '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 ;
2022-03-03 12:14:56 +00:00
if ( max _questions == "set" )
{
2020-04-25 16:29:59 +00:00
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 ;
2022-02-28 17:39:21 +00:00
else // else, it's all the generation, from the first one to the regional forms
2022-03-01 23:25:16 +00:00
max _questions = REG [ 1 ] + 1 ;
2020-04-25 16:29:59 +00:00
}
2022-03-14 20:30:46 +00:00
answertype = $ ( 'article input[name="answertype"]:checked' ) . attr ( 'id' ) ;
2020-04-25 16:29:59 +00:00
game ( ) ;
} ) ;
}
// allows to start the game when pressing enter
2022-03-03 12:14:56 +00:00
document . addEventListener ( 'keydown' , funcListener = function ( event )
{
2020-04-25 16:29:59 +00:00
if ( event . keyCode == 13 ) // press enter
firstGame ( ) ;
} ) ;
2022-03-03 12:14:56 +00:00
2020-04-25 16:29:59 +00:00
// start the game when clicking on start game
2022-03-03 12:14:56 +00:00
$ ( 'article #container .button input.start' ) . click ( function ( )
{
2020-04-25 16:29:59 +00:00
firstGame ( ) ;
} ) ;
2022-03-03 12:14:56 +00:00
function generations ( )
{
2020-04-25 16:29:59 +00:00
// create the list of the different generations
2022-03-03 12:14:56 +00:00
function createGenerationList ( name )
{
2020-04-25 16:29:59 +00:00
if ( $ ( 'article input[name="' + name + '"]' ) . is ( ':checked' ) )
gen _list [ gen _list . length ] = name ;
}
// create the list of all possible pokemons for selected options
2022-03-03 12:14:56 +00:00
function generatePokemonList ( )
{
function evaluateByGeneration ( index , name , variable )
{
if ( gen _list [ index ] == name )
{
2020-04-25 16:29:59 +00:00
for ( j = ( variable [ 0 ] - 1 ) ; j <= ( variable [ 1 ] - 1 ) ; j ++ )
pokemon _generation _list [ pokemon _generation _list . length ] = j ;
}
}
2022-03-03 12:14:56 +00:00
if ( gen _list . length > 0 )
{
for ( i in gen _list )
{
2020-04-25 16:29:59 +00:00
evaluateByGeneration ( i , "1g" , G1 ) ; evaluateByGeneration ( i , "2g" , G2 ) ; evaluateByGeneration ( i , "3g" , G3 ) ;
evaluateByGeneration ( i , "4g" , G4 ) ; evaluateByGeneration ( i , "5g" , G5 ) ; evaluateByGeneration ( i , "6g" , G6 ) ;
2022-03-01 23:25:16 +00:00
evaluateByGeneration ( i , "7g" , G7 ) ; evaluateByGeneration ( i , "8g" , G8 ) ; evaluateByGeneration ( i , "9g" , G9 ) ;
2022-02-28 17:39:21 +00:00
evaluateByGeneration ( i , "mega" , MEGA ) ; evaluateByGeneration ( i , "gigantamax" , GIGA ) ; evaluateByGeneration ( i , "regional" , REG ) ;
2020-04-25 16:29:59 +00:00
}
}
}
// we parse the list of generation, then check if there are other forms
if ( $ ( 'article input[name="gen"]:checked' ) . attr ( 'id' ) === "all" )
2022-03-01 23:25:16 +00:00
{
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
{
2023-02-17 23:48:06 +00:00
for ( i = 1 ; i <= gen _number ; i ++ )
2022-03-01 23:25:16 +00:00
createGenerationList ( ( i + "g" ) ) ;
createGenerationList ( "mega" ) ;
createGenerationList ( "gigantamax" ) ;
createGenerationList ( "regional" ) ;
generatePokemonList ( ) ;
}
available _pokemon = [ ... pokemon _generation _list ] ;
max _questions = pokemon _generation _list . length ;
2020-04-25 16:29:59 +00:00
}
// multiple artworks
2022-03-03 12:14:56 +00:00
function imageType ( result )
{
2022-03-03 13:22:30 +00:00
function randomizer ( result )
2022-03-03 12:14:56 +00:00
{
2022-03-03 13:22:30 +00:00
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" ] ;
2020-04-25 16:29:59 +00:00
}
}
2022-03-03 13:22:30 +00:00
image _name = randomizer ( result ) ;
2020-04-25 16:29:59 +00:00
image _memory = new Image ( ) ;
image _memory . src = 'pokemon/' + image _name + '.png' ;
return image _name ;
}
2022-03-03 12:14:56 +00:00
function recursiveOptions ( options , lang )
{
2022-03-01 23:25:16 +00:00
tmp = pokemon _generation _list [ random ( 0 , pokemon _generation _list . length - 1 ) ] ;
2020-04-25 16:29:59 +00:00
// 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
2022-03-03 12:14:56 +00:00
function chooseOptions ( result , lang )
{
2020-04-25 16:29:59 +00:00
options = new Array ( ) ;
options [ 0 ] = pklist . mn [ result ] [ lang ] ;
for ( var i = 1 ; i < 4 ; i ++ )
options [ i ] = recursiveOptions ( options , lang ) ;
options = shuffleArray ( options ) ;
}
2022-03-03 12:14:56 +00:00
function choosePokemon ( )
{
2020-04-25 16:29:59 +00:00
lang = $ ( 'article select.lang option:selected' ) . attr ( 'id' ) ;
silhouette = $ ( 'article input[name="silhouette"]:checked' ) . attr ( 'id' ) ;
2022-03-01 23:25:16 +00:00
2022-03-03 12:14:56 +00:00
resultIndex = Math . floor ( ( available _pokemon . length - 1 ) * Math . random ( ) ) ;
result = available _pokemon [ resultIndex ] ;
2022-03-01 23:25:16 +00:00
if ( ! infinite )
2022-03-03 12:14:56 +00:00
available _pokemon . splice ( resultIndex , 1 ) ;
2022-03-01 23:25:16 +00:00
2020-04-25 16:29:59 +00:00
answer = pklist . mn [ result ] [ lang ] ;
2022-03-14 20:30:46 +00:00
if ( answertype == "choice" )
chooseOptions ( result , lang ) ;
2022-03-03 13:22:30 +00:00
imageType ( result ) ;
2020-04-25 16:29:59 +00:00
}
2022-03-03 12:14:56 +00:00
function game ( )
{
choosePokemon ( ) ;
2020-04-25 16:29:59 +00:00
questions ++ ;
chrono = max _chrono ;
$ ( 'article #container' ) . addClass ( 'game_active' ) ;
2022-03-14 20:30:46 +00:00
$ ( '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 ( ) ;
2023-02-17 23:48:06 +00:00
$ ( '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 ) + '" />' ) ;
2022-03-14 20:30:46 +00:00
if ( answertype == "choice" )
{
2023-02-17 23:48:06 +00:00
$ ( '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>' ) ;
2022-03-14 20:30:46 +00:00
}
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 > < / f o r m > ' ) ;
$ ( 'article #container #answers input' ) . focus ( ) . select ( ) ;
}
2020-04-25 16:29:59 +00:00
// timer setting
2022-03-03 12:14:56 +00:00
var clock = setInterval ( function ( )
{
2020-04-25 16:29:59 +00:00
chrono -- ;
2022-03-03 12:14:56 +00:00
if ( chrono === 0 )
{
2020-04-25 16:29:59 +00:00
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
2022-03-03 12:14:56 +00:00
$ ( 'article .option' ) . click ( function ( )
{
2020-04-25 16:29:59 +00:00
clearInterval ( clock ) ;
( $ ( this ) . attr ( 'value' ) == answer ) ? showAnswer ( true ) : showAnswer ( false ) ;
} ) ;
2022-03-03 12:14:56 +00:00
2022-03-14 20:30:46 +00:00
if ( answertype == "choice" )
2022-03-03 12:14:56 +00:00
{
2022-03-14 20:30:46 +00:00
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 )
2022-03-03 12:14:56 +00:00
{
2020-04-25 16:29:59 +00:00
clearInterval ( clock ) ;
2022-03-14 20:30:46 +00:00
pokemon _name = event . currentTarget [ 0 ] . value ;
event . preventDefault ( ) ; // do not submit form
if ( normalizeString ( answer ) == normalizeString ( pokemon _name ) )
showAnswer ( true ) ;
else
showAnswer ( false ) ;
} ) ;
}
2020-04-25 16:29:59 +00:00
2022-03-03 12:14:56 +00:00
function showAnswer ( ok )
{
2020-04-25 16:29:59 +00:00
document . removeEventListener ( 'keydown' , funcListener ) ;
$ ( 'article .pokemon img' ) . removeClass ( 'silhouette' ) ;
2022-03-03 12:14:56 +00:00
if ( ok )
{
2020-04-25 16:29:59 +00:00
good _answers ++ ;
$ ( 'article #answers' ) . empty ( ) . append ( "<p class=\"final_answer\"><span class=\"good\" > That ' s right ! < / s p a n > \
The answer is < strong > "+ answer +" < / s t r o n g > ! < / p > " ) ;
2022-03-03 12:14:56 +00:00
}
else
{
2020-04-25 16:29:59 +00:00
bad _answers ++ ;
$ ( 'article #answers' ) . empty ( ) . append ( "<p class=\"final_answer\"><span class=\"bad\" > Too bad ... < / s p a n > \
The answer was < strong > "+ answer +" < / s t r o n g > ! < / p > " ) ;
}
var wait = max _wait ;
2022-03-03 12:14:56 +00:00
clock = setInterval ( function ( )
{
2020-04-25 16:29:59 +00:00
wait -- ;
if ( wait === 0 ) {
if ( ! infinite ) questions < max _questions ? game ( ) : score ( ) ;
else bad _answers < max _infinite _errors ? game ( ) : score ( ) ;
}
} , 1000 ) ;
}
2022-03-03 12:14:56 +00:00
function score ( )
{
function generateTwitterText ( )
{
2020-04-25 16:29:59 +00:00
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 ;
}
2022-03-03 12:14:56 +00:00
function generateSeed ( )
{
2020-04-25 16:29:59 +00:00
gen = '' ;
2022-03-03 12:14:56 +00:00
if ( gen _list . length < ( gen _number + extra _number ) )
{
2020-04-25 16:29:59 +00:00
for ( i in gen _list )
gen += gen _list [ i ] . substring ( 0 , 1 ) ;
}
else gen += "all" ;
2023-02-17 23:48:06 +00:00
2020-04-25 16:29:59 +00:00
s _gen = "?gen=" + gen ;
s _lang = "&lang=" + lang ;
2022-03-14 20:30:46 +00:00
s _answertype = "&answertype=" + answertype ;
2020-04-25 16:29:59 +00:00
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 ) ;
2022-03-14 20:30:46 +00:00
localStorage . setItem ( 'answertype' , answertype ) ;
2020-04-25 16:29:59 +00:00
localStorage . setItem ( 'silhouette' , silhouette ) ;
localStorage . setItem ( 'questions' , ( ! whole _set ? max _questions : "set" ) ) ;
localStorage . setItem ( 'time' , max _chrono ) ;
2022-03-14 20:30:46 +00:00
return domain + s _gen + s _lang + s _answertype + s _silhouette + s _questions + s _time ;
2020-04-25 16:29:59 +00:00
}
2022-03-03 12:14:56 +00:00
2022-03-14 20:30:46 +00:00
$ ( 'article #container #score .pokemon' ) . empty ( ) . after ( '<div id="seed"></div><div id="share"></div>' ) ;
2020-04-25 16:29:59 +00:00
$ ( '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 > < / d i v > < a h r e f = " h t t p s : / / t w i t t e r . c o m / s h a r e " \
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
2022-03-14 20:30:46 +00:00
$ ( 'article #container #answers' ) . empty ( ) . append ( ' < p class = "button" > < input type = "submit" \
class = "start_again" name = "start_again" value = "Play again!" > < / p > ' ) ;
2020-04-25 16:29:59 +00:00
// copy seed in clipboard
2022-03-03 12:14:56 +00:00
$ ( "article #container #copyseed" ) . click ( function ( )
{
2020-04-25 16:29:59 +00:00
$ ( 'article #container #seed input' ) . select ( ) ;
2022-03-14 20:30:46 +00:00
navigator . clipboard . writeText ( $ ( 'article #container #seed input' ) . val ( ) ) ;
2020-04-25 16:29:59 +00:00
} ) ;
2022-03-03 12:14:56 +00:00
$ ( 'article #container .button input.start_again' ) . click ( function ( )
{
2020-04-25 16:29:59 +00:00
score = questions = good _answers = bad _answers = 0 ;
chrono = max _chrono ;
$ ( 'article #container .chrono' ) . show ( ) ;
$ ( 'article #container' ) . removeClass ( 'diploma' ) ;
2022-03-14 20:30:46 +00:00
$ ( 'article #container' ) . addClass ( 'game_active' ) ;
2020-04-25 16:29:59 +00:00
game ( ) ;
} ) ;
}
}
} ) ;
} ) ;