From 6b6b6c838fc315aea41306e857dd3231e8986c5b Mon Sep 17 00:00:00 2001
From: Pyro Nicampt <81565698+PyroNicampt@users.noreply.github.com>
Date: Sun, 22 Dec 2024 01:18:14 -0600
Subject: [PATCH] Make legend hiding work

---
 index.html |  2 +-
 legend.js  | 11 +++++++++++
 style.css  | 12 ++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 251a67e..4303aa4 100644
--- a/index.html
+++ b/index.html
@@ -221,7 +221,7 @@
                     <a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a>
                 </div>
             </div>
-            <div id="legendButton" class="panel orange" style="height: fit-content;"><svg height="25" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
+            <div id="legendButton" class="panel orange" style="height: fit-content;"><svg style="transform:rotate(180deg) translateY(-3px)" height="25" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
         </div>
     </div>
     <div id="footer" class="orange">
diff --git a/legend.js b/legend.js
index e461abd..563748c 100644
--- a/legend.js
+++ b/legend.js
@@ -43,6 +43,17 @@ document.addEventListener('DOMContentLoaded', async () => {
     for(let thisSetting of settingEntries){
         addSettingEntry(thisSetting, settingsPanel);
     }
+    const legend = document.getElementById('legend');
+    const legendButton = document.getElementById('legendButton');
+    const legendArrow = legendButton.children[0];
+    let legendState = true;
+    let legendButtonEvent = e => {
+        legendArrow.style.transform = `rotate(${legendState ? 180 : 0}deg) translateY(${legendState ? -3 : 3}px)`;
+        legend.style.transform = `translateX(${legendState ? 0 : legendButton.clientWidth-legend.clientWidth}px)`;
+        legendState = !legendState;
+    };
+    legendButton.addEventListener('click', legendButtonEvent);
+    legendButtonEvent();
 });
 
 function addSettingEntry(thisSetting, parent, indent=0){
diff --git a/style.css b/style.css
index 073a5ab..fa52ea5 100644
--- a/style.css
+++ b/style.css
@@ -52,6 +52,18 @@ a:visited{
     border-radius: 0px 10px 10px 0px;
 }
 
+#legendButton{
+    cursor: pointer;
+    user-select: none;
+}
+
+#legend{
+    transition: transform 400ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
+}
+#legendButton>*{
+    transition: transform 200ms ease;
+}
+
 #footer{
     position: fixed;
     width: fit-content;