From 4d63acf21d60ed7b041ac73be446108365e3a15a Mon Sep 17 00:00:00 2001
From: Axel Cocat <ax.cocat@gmail.com>
Date: Wed, 12 Jan 2022 19:41:32 +0100
Subject: [PATCH] feat(character/talents): add talent specialization selector

---
 static/character-talents.html    | 31 +++++++++++++++++++++++++++----
 static/css/character-talents.css |  4 ++++
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/static/character-talents.html b/static/character-talents.html
index d372155..2190c6f 100644
--- a/static/character-talents.html
+++ b/static/character-talents.html
@@ -40,22 +40,30 @@
 	</div>
 </div>
 
+<div id="spec-links">
+	<a href="#0" id="link-spec-0">Primary specialization</a>
+	&ensp;|&ensp;
+	<a href="#1" id="link-spec-1">Secondary specialization</a>
+</div>
+
 <div id="talents-spec-0">
 	<div>
 		<h3>Glyphs</h3>
 		<div class="glyphs"></div>
 	</div>
 </div>
-<br>
-<br>
-<br>
-<div id="talents-spec-1">
+<div id="talents-spec-1" style="display: none;">
 	<div>
 		<h3>Glyphs</h3>
 		<div class="glyphs"></div>
 	</div>
 </div>
 
+<div style="display: none;">
+	<!-- Hackfix for aowow's tooltip opening when the page loads -->
+	<a href="{{aowow}}/?spell=10"></a>
+</div>
+
 <script type="application/javascript">
 	const talentsData = JSON.parse(`{{{data}}}`);
 
@@ -91,6 +99,7 @@
 
 		if (nbLearned === 0) {
 			$(`#talents-spec-${spec}`).hide();
+			$("#spec-links").hide();
 			continue;
 		}
 
@@ -218,4 +227,18 @@
 		$arrow.css("background-position", bgPos);
 		$(container).append($arrow);
 	}
+
+	$("#link-spec-0").on("click", () => {
+		$("#talents-spec-0").show();
+		$("#talents-spec-1").hide();
+	});
+
+	$("#link-spec-1").on("click", () => {
+		$("#talents-spec-1").show();
+		$("#talents-spec-0").hide();
+	});
+
+	if (location.hash === "#1") {
+		$("#link-spec-1").click();
+	}
 </script>
diff --git a/static/css/character-talents.css b/static/css/character-talents.css
index eefb293..3b55eed 100644
--- a/static/css/character-talents.css
+++ b/static/css/character-talents.css
@@ -127,3 +127,7 @@
 	flex-direction: column;
 	gap: 14px;
 }
+
+#spec-links {
+	margin-bottom: 32px;
+}