Flashdex: added parameters in URL for sharing

README.md

@@ -8,7 +8,6 @@ Now that there are now more than a thousand of them, and it's as useful as ever!
 
 ### Planned updates
 
-- Modify URL in the Flashdex for sharing options
 - Make answer choices closer by type
 - Type weakness calculator
 
@@ -26,7 +25,7 @@ And this one allows to resize to 700x700px, but putting the image at the center
 
 This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library. It uses the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>. All of those components are licensed under the MIT license, as is this website's source code. This website is <strong>HTML5</strong> and <strong>CSS3</strong> compliant.
 
-The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2023.
+The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2024.
 
 All the Pokémon artworks were taken from <a href="https://bulbapedia.bulbagarden.net/wiki/Main_Page">Bulbapedia</a>, that I'd like to thank for their huge work for the Pokémon community.
 

about.html

@@ -52,6 +52,7 @@
 
 					<h3 id="2">How to use: Flashdex</h3>
 					<p>The Flashdex is a very simple Pokédex, useful to see the Pokémons in a good resolution. It is filtered by generation and alternate forms. You can chose the language in which it is displayed.</p>
+					<p>When a deck is generated, the URL is changed with the parameters that were selected. This way, you can easily share it to whoever you want.</p>
 					<p>Types are displayed in the top-left corner, and generations on the top-right corner. If there are different artworks available for the Pokémon, arrows are displayed on the bottom-left corner. You can use them to switch between artworks. Please note that those are not always alternate forms, they are alternate artworks. For example:</p>
 					<ul>
 						<li>The first generation has at least three artworks available by Pokémon.</li>
@@ -82,7 +83,7 @@
 			</article>
 		</div>
 		<footer>
-			<p>© 2012 - 2024 Pokétest 2.9</p>
+			<p>© 2012 - 2024 Pokétest 2.10</p>
 		</footer>
 	</body>
 </html>

flashdex.html

@@ -87,7 +87,7 @@
 				</div>
 			</article>
 			<footer>
-				<p>© 2012 - 2024 Pokétest 2.9</p>
+				<p>© 2012 - 2024 Pokétest 2.10</p>
 			</footer>
 		</div>
 	</body>

flashdex.js

@@ -13,6 +13,8 @@ $(document).ready(function()
 	var MEGA 	= [1011, 1060]; 
 	var GIGA	= [1061, 1092];
 	var REG		= [1093, 1147];
+	var gen_number = 9;
+	var extra_number = 3; // mega, giga, reg
 
 	/************ GAME *************/
 	/*******************************/
@@ -58,9 +60,25 @@ $(document).ready(function()
 			if (gen_list.length == 0)
 				return;
 
+			setUrlSearch();
+
 			$('article #container #game #loading').show();
 			$('article #container #game #flashdex').empty().hide();
 
+			function setUrlSearch()
+			{
+				gen = '';
+				if (gen_list.length < (gen_number + extra_number))
+				{
+					for (i in gen_list)
+						gen += gen_list[i].substring(0,1);
+				}
+				else gen += "all";
+	
+				window.history.replaceState(null, null, "?gen=" + gen + "&lang=" + lang);
+				localStorage.setItem('lang', lang);
+			}
+
 			function getFormText(pkmn)
 			{
 				if (pkmn["origin"] == "Kanto")

index.html

@@ -150,7 +150,7 @@
 				</div>
 			</article>
 			<footer>
-				<p>© 2012 - 2024 Pokétest 2.9</p>
+				<p>© 2012 - 2024 Pokétest 2.10</p>
 			</footer>
 		</div>
 	</body>

interface.js

@@ -8,6 +8,23 @@ $(document).ready(function()
 	// have a nice little background
 	//$.backstretch("artwork/artwork"+random(1, 10)+".jpg");
 
+	// hamburger mobile
+	$("#hamburger .container").click(function()
+	{
+		if ($("nav").hasClass("active"))
+		{
+			$("nav ul").slideUp(200, function()
+			{
+				$("nav").removeClass("active");
+			});
+		}
+		else
+		{
+			$("nav").addClass("active");
+			$("nav ul").slideDown(200);
+		}
+	});
+
 	// splice url arguments
 	function gup(name, url)
 	{
@@ -19,8 +36,11 @@ $(document).ready(function()
 		return results == null ? null : results[1];
 	}
 
+	// index.html
+	if (location.pathname.includes("index.html"))
+	{
 		// read url
-	local_gen = gup('gen', window.location.href);
+		local_gen = gup('gen', location.href);
 		if (local_gen != null)
 		{
 			if (local_gen == "all")
@@ -108,21 +128,46 @@ $(document).ready(function()
 		{
 			$('#selected_options').slideDown();
 		});
+	}
 
-	// hamburger mobile
+	// flashdex.html
-	$("#hamburger .container").click(function()
+	if (location.pathname.includes("flashdex.html"))
 	{
-		if ($("nav").hasClass("active"))
+		// read url
+		local_gen = gup('gen', location.href);
+		if (local_gen != null)
 		{
-			$("nav ul").slideUp(200, function()
+			if (local_gen == "all")
 			{
-				$("nav").removeClass("active");
+				for (i = 0; i < 10; i++)
-			});
+					$('article #container #game #flashdex_config input#' + i + 'g').attr('checked', true);
+				$('article #container #game #flashdex_config input#mega').attr('checked', true);
+				$('article #container #game #flashdex_config input#regional').attr('checked', true);
+				$('article #container #game #flashdex_config input#gigantamax').attr('checked', true);
 			}
 			else
 			{
-			$("nav").addClass("active");
+				for (i = 0; i < local_gen.length; i++)
-			$("nav ul").slideDown(200);
+				{
+					if (local_gen.charAt(i)) {
+						if (local_gen.charAt(i) == "m")
+							$('article #container #game #flashdex_config input#mega').attr('checked', true);
+						else if (local_gen.charAt(i) == "r")
+							$('article #container #game #flashdex_config input#regional').attr('checked', true);
+						else if (local_gen.charAt(i) == "g")
+							$('article #container #game #flashdex_config input#gigantamax').attr('checked', true);
+						else
+							$('article #container #game #flashdex_config input#' + local_gen.charAt(i) + 'g').attr('checked', true);
+					}
+				}
+			}
+
+			$('article #container #game #flashdex_config select.lang').val(gup('lang', window.location.href));
+		}
+		else
+		{
+			if (localStorage.getItem('lang') != null)
+				$('article #container #game #flashdex_config select.lang').val(localStorage.getItem('lang'));
+		}
 	}
-	});
 });