Simplification of multiple artworks

README.md

@@ -8,9 +8,8 @@ Now that there are now more than 900 of them, and it's as useful as ever! The we
 
 ### Planned updates
 
-- Multiple forms visible in Flashdex
+- Make answer choices closer by type
 - Custom input answers for harder difficulty
-- Pokémon type support
 - Type weakness calculator
 
 ### Scripts

about.html

@@ -79,7 +79,7 @@
 			</article>
 		</div>
 		<footer>
-			<p>© 2012 - 2022 Pokétest 2.7</p>
+			<p>© 2012 - 2022 Pokétest 2.8</p>
 		</footer>
 	</body>
 </html>

flashdex.html

@@ -85,7 +85,7 @@
 				</div>
 			</article>
 			<footer>
-				<p>© 2012 - 2022 Pokétest 2.7</p>
+				<p>© 2012 - 2022 Pokétest 2.8</p>
 			</footer>
 		</div>
 	</body>

flashdex.js

@@ -1,5 +1,5 @@
-$(document).ready(function() {
+$(document).ready(function() 
-
+{
 	/****** Generations ******/
 	var G1 		= [1, 151];
 	var G2 		= [152, 251];
@@ -14,19 +14,23 @@ $(document).ready(function() {
 	var GIGA	= [959, 990];
 	var REG		= [991, 1043];
 
+	var EXCEPTION = 990; // urshifu g-max
+
+
 	/************ GAME *************/
 	/*******************************/
 
 	// loading json file
-	var json = $.getJSON('pokemon.json', function(pk) {
+	$.getJSON('pokemon.json', function(pk)
+	{
 
 		$('article #container #game #loading').hide();
 		var pklist = pk;
 
-		$('article #container #flashdex_config .all').click(function() {
+		$('article #container #flashdex_config .all').click(function()
-				
+		{	
-			if ($(this).hasClass("unselected")) {
+			if ($(this).hasClass("unselected"))
-				
+			{
 				for (i = 1; i < 10; ++i)
 					$('input[name="'+i+'g"]').prop('checked', true);
 				$('input[name="mega"]').prop('checked', true);
@@ -34,7 +38,9 @@ $(document).ready(function() {
 				$('input[name="gigantamax"]').prop('checked', true);
 				$(this).removeClass("unselected").addClass("selected");
 				$(this).text("Unselect all");
-			} else {
+			}
+			else
+			{
 				for (i = 1; i < 10; ++i)
 					$('input[name="'+i+'g"]').prop('checked', false);
 				$('input[name="mega"]').prop('checked', false);
@@ -46,8 +52,8 @@ $(document).ready(function() {
 		})
 
 		// start the game when clicking on start game
-		$('article #container .button input.start').click(function() {
+		$('article #container .button input.start').click(function()
-
+		{
 			$('article #container #game #loading').show();
 			$('article #container #game #flashdex').empty();
 
@@ -59,7 +65,8 @@ $(document).ready(function() {
 
 			$('article #container #game #flashdex').hide();
 
-			function getFormText(pkmn) {
+			function getFormText(pkmn)
+			{
 				if (pkmn["origin"] == "Kanto")
 					return '<span class="form RB"></span>'
 				else if (pkmn["origin"] == "Johto")
@@ -80,55 +87,203 @@ $(document).ready(function() {
 					return '<span class="form LA"></span>'
 				else if (pkmn["origin"] == "9G")
 					return '<span class="form SV"></span>'
-				else if (pkmn["type"] == "mega")
+				else if (pkmn["form"] == "mega")
 					return '<span class="form mega"></span>';
-				else if (pkmn["type"] == "giga")
+				else if (pkmn["form"] == "giga")
 					return '<span class="form giga"></span>';
 				return '';
 			}
 
-			function getFormattedNumber(num) {
+			function getFormattedNumber(num)
+			{
+				if (num > 905 && num < 909)
+					return "???";
 				if (num[0] == 'M' || num[0] == 'R' || num[0] == 'G')
 					return num.substring(1, num.length);
 				return num;
 			}
 
-			for (i in pokemon_generation_list) {
+			function getFormattedTypes(num) {
+				str = '<span class="types"><span class="'+num["type"][0]+'">'+num["type"][0]+'</span>';
+				if (num["type"][1])
+					str += '<span class="'+num["type"][1]+'">'+num["type"][1]+'</span>';
+				str += '</span>';
+				return str;
+			}
+
+			function getFormattedTypes(num, index)
+			{
+				str = '<span class="'+num["type"+index][0]+'">'+num["type"+index][0]+'</span>';
+				if (num["type"+index][1])
+					str += '<span class="'+num["type"+index][1]+'">'+num["type"+index][1]+'</span>';
+				return str;
+			}
+
+			function getFormattedSpriteButton(num)
+			{
+				if (num["sprite"] || num["origin"] == "Kanto")
+					return '<span class="button"><span class="left-arrow">⯇</span><span class="right-arrow">⯈</span></span>';
+				return '';
+			}
+
+			for (i in pokemon_generation_list)
+			{
 				$('article #container #game #flashdex').append(
 					'<div class="pokedex id_'+pklist.mn[pokemon_generation_list[i]]["num"]+'">'
+					+ '<span class="types">' + getFormattedTypes(pklist.mn[pokemon_generation_list[i]], '') + '</span>'
+					+ getFormattedSpriteButton(pklist.mn[pokemon_generation_list[i]], '')
 					+ getFormText(pklist.mn[pokemon_generation_list[i]]) // either gigantamax or mega-evolution
-					+ '<img src="pokemon/'+ imageType((pklist.mn[pokemon_generation_list[i]]["num"])) +'.png"/>'
+					+ '<img src="pokemon/'+ imageType(pklist.mn[pokemon_generation_list[i]]) +'.png"/>'
 					+ '<span class="name">' + '<strong>' + '#' + getFormattedNumber(pklist.mn[[pokemon_generation_list[i]]]["num"]) + '</strong> '
 					+ pklist.mn[[pokemon_generation_list[i]]][lang] + '</span>'
 					+ '</div>'
 					);
 			}
 
-			$('article #container #game #flashdex').waitForImages(function() {
+			$('article #container #game #flashdex').waitForImages(function()
+			{
 				$(this).show();
 				$('article #container #game #loading').hide();
 			});
 
-			function generations() {
+			function handleArtworks(origin, left)
+			{
+				function handleDefault()
+				{
+					var form = url.split('-')[1];
 
+					if (left)
+					{
+						if (form > 0)
+							form--;
+						else
+							form = pklist.mn[pokemon-1]["sprite"] - 1;
+					}
+					else
+					{
+						if (form < pklist.mn[pokemon-1]["sprite"] - 1)
+							form++;
+						else
+							form = 0;
+					}
+	
+					var newUrl = 'pokemon/' + pokemon + '-' + form + '.png';
+					origin.parent().parent().find("img").attr('src', newUrl);
+					handleChangeType(form, pokemon-1)
+				}
+	
+				function handleKanto()
+				{
+					var KantoForm = '';
+					for (var i = 0; i < originalUrl.length; i++)
+					{
+						if (originalUrl[i].match(/[A-Z]/))
+							KantoForm += originalUrl[i];
+					}
+
+					if (left)
+					{
+						if (KantoForm == "RG")
+							KantoForm = "RB"
+						else if (KantoForm == "RB")
+							KantoForm = "";
+						else
+							KantoForm = "RG";
+					}
+					else
+					{
+						if (KantoForm == "RB")
+							KantoForm = "RG"
+						else if (KantoForm == "RG")
+							KantoForm = "";
+						else
+							KantoForm = "RB";
+					}
+
+					var newUrl = 'pokemon/' + pokemon + KantoForm + '.png';
+					origin.parent().parent().find("img").attr('src', newUrl);
+				}
+	
+				function handleException()
+				{
+					var form = url.split('-')[1];
+					if (form == 0)
+						form = 1;
+					else
+						form = 0;
+
+					var newUrl = 'pokemon/' + pokemonUrl + '-' + form + '.png';
+					origin.parent().parent().find("img").attr('src', newUrl);
+					handleChangeType(form, EXCEPTION-1)
+				}
+
+				function handleChangeType(form, num)
+				{
+					if (form != 0)
+					{
+						if (pklist.mn[num]["type"+form])
+							origin.parent().parent().find(".types").empty().append(getFormattedTypes(pklist.mn[num], form));
+					}
+					else
+						origin.parent().parent().find(".types").empty().append(getFormattedTypes(pklist.mn[num], ''));
+				}
+
+				var url = origin.parent().parent().find("img").attr('src');
+				var originalUrl = url;
+				url = url.split('/')[1];
+				url = url.split('.')[0];
+
+				var pokemonUrl = url.split('-')[0];
+				var pokemon = '';
+				for (var i = 0; i < pokemonUrl.length; i++)
+				{
+					if (pokemonUrl[i].match(/[0-9]/))
+					pokemon += pokemonUrl[i];
+				}
+
+				if (pokemonUrl == "G892")
+					handleException();
+				else if (pklist.mn[pokemon-1]["origin"] == "Kanto" && !pklist.mn[pokemon-1]["sprite"])
+					handleKanto();
+				else if (pklist.mn[pokemon-1]["sprite"])
+					handleDefault();
+			}
+
+			$('.left-arrow').click(function(e)
+			{
+				handleArtworks($(this), true);
+			});
+
+			$('.right-arrow').click(function(e)
+			{
+				handleArtworks($(this), false);
+			});
+
+			function generations()
+			{
 				// create the list of the different generations
-				function createGenerationList(name) {
+				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 generatePokemonList()
-
+				{
-					function evaluateByGeneration(index, name, variable) {
+					function evaluateByGeneration(index, name, variable)
-						if (gen_list[index] == name) {
+					{
+						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) {
+					if (gen_list.length > 0)
-						for (i in gen_list) {
+					{
+						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);
@@ -146,44 +301,15 @@ $(document).ready(function() {
 				generatePokemonList();
 			}
 
-
-
 			// multiple artworks
-			function imageType(result) {
+			function imageType(num)
-				var four_types 	=	[351, 386, 585, 586, 676, 741, 800];
+			{
-				var three_types = 	[249, 250, 384, 412, 413, 718, 745, 898];
+				//if (num["origin"] == "Kanto")
-				var two_types 	=	[251, 252, 255, 258, 374, 387, 390, 393, 421, 422, 423, 487, 492, 495, 498, 501, 521, 550, 555,
+				//	return num["num"] + "RB";
-									  592, 593, 641, 642, 643, 644, 645, 647, 648, 668, 678, 681, 720, 746, 774, 791, 792, 802, 849,
+				if (num["sprite"])
-									  876, 877, 888, 889, 892, 905, "G892"];
+					return num["num"] + "-0";
-
+				return num["num"];
-				function no_randomizer() {
-					if (result === 25)
-						return (result+'-9');
-					if (result === 666)
-						return (result+'-0');
-					if (result === 646)
-						return (result+'-0');
-					if (result === 479)
-						return (result+'-0');
-					for (a in four_types) {
-						if (four_types[a] == result)
-							return (result+'-0');
-					}
-					for (a in three_types) {
-						if (three_types[a] == result)
-							return (result+'-0');
-					}
-					for (a in two_types) {
-						if (two_types[a] == result)
-							return (result+'-0');
-					}
-					return result;
-				}
-				
-				return no_randomizer(result);
 			}
-
 		});
-
 	});
 });

index.html

@@ -141,7 +141,7 @@
 				</div>
 			</article>
 			<footer>
-				<p>© 2012 - 2022 Pokétest 2.7</p>
+				<p>© 2012 - 2022 Pokétest 2.8</p>
 			</footer>
 		</div>
 		<script>

poketest.js

@@ -170,36 +170,26 @@ $(document).ready(function() {
 		// multiple artworks
 		function imageType(result)
 		{
-			// TODO
+			function randomizer(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 (pk.mn[result]["sprite"])
-				if (result === 25) 					return (result+'-'+random(0, 16));
+					return pklist.mn[result]["num"] + '-' + random(0, pk.mn[result]["sprite"] - 1);
-				if (result === 666)					return (result+'-'+random(0, 20));
+				else
-				if (result === 646)					return (result+'-'+random(0, 6));
+				{
-				if (result === 479)					return (result+'-'+random(0, 5));
+					if (pk.mn[result]["origin"] == "Kanto")
-				for (i in four_types) {
+					{
-					if (four_types[i] == result) 	return (result+'-'+random(0, 3));
+						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"];
 				}
-				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_name = randomizer(result);
 			image_memory = new Image();
 			image_memory.src = 'pokemon/' + image_name + '.png';
 			return image_name;
@@ -239,7 +229,7 @@ $(document).ready(function() {
 
 			answer = pklist.mn[result][lang];
 			chooseOptions(result, lang);
-			imageType(result + 1);
+			imageType(result);
 		}
 
 		function game()

style.css

@@ -353,7 +353,7 @@ article #container.diploma #score {
 }
 
 #container #game #flashdex .pokedex {
-	width: 250px; height: 285px;
+	width: 250px;
 	border: 1px solid white;
 	padding: 10px;
 	margin: 10px;
@@ -368,32 +368,79 @@ article #container.diploma #score {
 	height: 250px;
 	display: block;
 	margin: auto;
+	margin: 12px auto;
 }
 
-#game #flashdex .pokedex span.name {
+#game #flashdex .pokedex .button {
-	text-align: center;
+	position: absolute;
-	font-size: 1em;
+	bottom: 0;
-	display: block;
+	left: 0;
-	margin: auto; margin-top: 15px;
+	margin: 8px;
+	background: white;
+	padding: 1.5px;
+	border-radius: 5px;
+	color: dimgray;
 }
 
-span.form {
+#game #flashdex .pokedex .left-arrow, #game #flashdex .pokedex .right-arrow {
+	cursor: pointer;
+	user-select: none;
+}
+
+#game #flashdex .pokedex span.form {
 	display: block;
 	float: right;
 	width: 25px; height: 25px;
 	background-size: 25px 25px;
-	position: absolute;
 	right: 10px;
 }
 
-span.form.mega { background-image: url('img/icon_mega.png'); }
+#game #flashdex .pokedex span.form.mega { background-image: url('img/icon_mega.png'); }
-span.form.giga { 
+#game #flashdex .pokedex span.form.giga { 
 	background-image: url('img/icon_giga.png'); background-color: white;
 	background-position: center; background-size:20px;
 	border-radius: 50%; border: 1px solid white;
 }
 
+#game #flashdex .pokedex span.types {
+	display: flex;
+	float: left;
+	margin-bottom: 12px;
+}
 
+#game #flashdex .pokedex span.types:after {
+	clear: both;
+}
+
+#game #flashdex .pokedex span.types span {
+	margin: 0px;
+	margin-right: 5px;
+	padding: 5px;
+	border-radius: 2px;
+	font-family: Sans-Serif;
+	font-weight: bold;
+	color: #fff;
+	font-size: 0.8rem;
+}
+
+#game #flashdex .pokedex span.types .Grass { background: #78C850; }
+#game #flashdex .pokedex span.types .Poison { background: #A040A0; }
+#game #flashdex .pokedex span.types .Fire { background: #F08030; }
+#game #flashdex .pokedex span.types .Dragon { background: #7038F8; }
+#game #flashdex .pokedex span.types .Flying { background: #A890F0; }
+#game #flashdex .pokedex span.types .Water { background: #6890F0; }
+#game #flashdex .pokedex span.types .Bug { background: #A8B820; }
+#game #flashdex .pokedex span.types .Normal { background: #A8A878; }
+#game #flashdex .pokedex span.types .Dark { background: #705848; }
+#game #flashdex .pokedex span.types .Electric { background: #F8D030; }
+#game #flashdex .pokedex span.types .Ground { background: #E0C068; }
+#game #flashdex .pokedex span.types .Psychic { background: #F85888; }
+#game #flashdex .pokedex span.types .Ice { background: #98D8D8; }
+#game #flashdex .pokedex span.types .Steel { background: #B8B8D0; }
+#game #flashdex .pokedex span.types .Fairy { background: #EE99AC; }
+#game #flashdex .pokedex span.types .Fighting { background: #C03028; }
+#game #flashdex .pokedex span.types .Rock { background: #B8A038; }
+#game #flashdex .pokedex span.types .Ghost { background: #705898; }
 
 
 /*** MOBILE ***/
@@ -527,8 +574,7 @@ span.form.giga {
 
 	/* flashdex */
 
-	#container #game #flashdex .pokedex { width: 230px; height: 260px; }
+	#container #game #flashdex .pokedex { width: 230px; }
-	#game #flashdex .pokedex img { height: 225px; }
 
 	#game #flashdex_config p { text-align: left; }
 
@@ -540,6 +586,10 @@ span.form.giga {
 		flex-wrap: wrap;
 	}
 
+	#game #flashdex .pokedex img {
+		height: 230px;
+	}
+
 	#game #flashdex_config .generation .gen {
 		display: block;
 		position: relative;