From 2b07c2ca670b8f0afddf542787391e3c6a63ed97 Mon Sep 17 00:00:00 2001
From: William Jackson <will-jj@users.noreply.github.com>
Date: Mon, 27 Jan 2025 23:15:15 +0000
Subject: [PATCH] Add sticky weather (#680)

---
 .eslintrc                 |  1 +
 src/css/dark-theme.css    |  8 ++++++++
 src/css/main.css          |  4 ++++
 src/index.template.html   | 26 +++++++++++++-------------
 src/js/shared_controls.js | 25 +++++++++++++++++++++++++
 5 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 5d34d71cc..c2633967a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -48,6 +48,7 @@
         "GEN9BABYRANDOMBATTLE": false,
         "getSelectedTiers": false,
         "stickyMoves": false,
+        "stickyWeather": false,
         "allPokemon": false,
         "loadCustomList": false,
         "loadDefaultLists": false,
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
index 3d5d51a51..4d1b1d1d7 100644
--- a/src/css/dark-theme.css
+++ b/src/css/dark-theme.css
@@ -164,3 +164,11 @@ input.select2-input {
     */
     background: url('../js/vendor/select2/select2.png') no-repeat 100% -22px, var(--background);
 }
+
+.locked-move:checked + .btn {
+    background: #00867b;
+}
+
+.locked-weather:checked + .btn {
+    background: #00867b;
+}
\ No newline at end of file
diff --git a/src/css/main.css b/src/css/main.css
index 78d455116..d146c8a06 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -319,6 +319,10 @@ th {
     background: #ffff99;
 }
 
+.locked-weather:checked + .btn {
+    background: #ffff99;
+}
+
 .genSelection, .notationSelection, .modeSelection {
     display: inline-block;
     position: relative;
diff --git a/src/index.template.html b/src/index.template.html
index 50a4e1394..7c8fca0eb 100644
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -739,41 +739,41 @@
                 <div aria-labelledby="selectWeatherInstruction" role="radiogroup">
                     <span class="visually-hidden" id="selectWeatherInstruction">Select the current weather condition.</span>
                     <div class="gen-specific g3 g4 g5 g6 g7 g8 g9" style="width: 22.2em; margin: 5px auto;" title="Select the current weather condition.">
-                        <input class="visually-hidden calc-trigger" type="radio" name="weather" value="" id="clear" checked="checked" />
+                        <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="" id="clear" checked="checked" />
                         <label class="btn btn-small btn-left" for="clear">None</label>
-                        <input class="visually-hidden calc-trigger" type="radio" name="weather" value="Sun" id="sun" />
+                        <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="Sun" id="sun" />
                         <label class="btn btn-small btn-mid" for="sun">Sun</label>
-                        <input class="visually-hidden calc-trigger" type="radio" name="weather" value="Rain" id="rain" />
+                        <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="Rain" id="rain" />
                         <label class="btn btn-small btn-mid" for="rain">Rain</label>
-                        <input class="visually-hidden calc-trigger" type="radio" name="weather" value="Sand" id="sand" />
+                        <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="Sand" id="sand" />
                         <label class="btn btn-small btn-mid" for="sand">Sand</label>
                         <span class="gen-specific g3 g4 g5 g6 g7 g8">
-                            <input class="visually-hidden calc-trigger" type="radio" name="weather" value="Hail" id="hail" />
+                            <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="Hail" id="hail" />
                             <label class="btn btn-small btn-right" for="hail">Hail</label>
                         </span>
                         <span class="gen-specific g9">
-                            <input class="visually-hidden calc-trigger" type="radio" name="weather" value="Snow" id="snow" />
+                            <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="Snow" id="snow" />
                             <label class="btn btn-small btn-right" for="snow">Snow</label>
                         </span>
                     </div>
                     <div class="gen-specific g6 g7 g8 g9" title="Select the current weather condition.">
-                        <input class="visually-hidden calc-trigger" type="radio" name="weather" value="Harsh Sunshine" id="harsh-sunshine" />
+                        <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="Harsh Sunshine" id="harsh-sunshine" />
                         <label class="btn btn-xxxwide btn-left" for="harsh-sunshine">Harsh Sunshine</label>
-                        <input class="visually-hidden calc-trigger" type="radio" name="weather" value="Heavy Rain" id="heavy-rain" />
+                        <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="Heavy Rain" id="heavy-rain" />
                         <label class="btn btn-xxxwide btn-mid" for="heavy-rain">Heavy Rain</label>
-                        <input class="visually-hidden calc-trigger" type="radio" name="weather" value="Strong Winds" id="strong-winds" />
+                        <input class="weather visually-hidden calc-trigger" type="radio" name="weather" value="Strong Winds" id="strong-winds" />
                         <label class="btn btn-xxxwide btn-right" for="strong-winds">Strong Winds</label>
                     </div>
                   </div>
                 <div aria-labelledby="selectGscWeatherInstruction" class="gen-specific g2 hide" role="radiogroup" style="width: 17.8em; margin: 0 auto 5px;" title="Select the current weather condition.">
                     <span class="visually-hidden" id="selectGscWeatherInstruction">Select the current weather condition.</span>
-                    <input class="visually-hidden calc-trigger" type="radio" name="gscWeather" value="" id="gscClear" checked="checked" />
+                    <input class="weather visually-hidden calc-trigger" type="radio" name="gscWeather" value="" id="gscClear" checked="checked" />
                     <label class="btn btn-small btn-left" for="gscClear">None</label>
-                    <input class="visually-hidden calc-trigger" type="radio" name="gscWeather" value="Sun" id="gscSun" />
+                    <input class="weather visually-hidden calc-trigger" type="radio" name="gscWeather" value="Sun" id="gscSun" />
                     <label class="btn btn-small btn-mid" for="gscSun">Sun</label>
-                    <input class="visually-hidden calc-trigger" type="radio" name="gscWeather" value="Rain" id="gscRain" />
+                    <input class="weather visually-hidden calc-trigger" type="radio" name="gscWeather" value="Rain" id="gscRain" />
                     <label class="btn btn-small btn-mid" for="gscRain">Rain</label>
-                    <input class="visually-hidden calc-trigger" type="radio" name="gscWeather" value="Sand" id="gscSand" />
+                    <input class="weather visually-hidden calc-trigger" type="radio" name="gscWeather" value="Sand" id="gscSand" />
                     <label class="btn btn-small btn-right" for="gscSand">Sand</label>
                 </div>
                 <div class="gen-specific g5 g6 g7 g8 g9" style="width: 22.2em; margin: 5px auto; display: inline-block;">
diff --git a/src/js/shared_controls.js b/src/js/shared_controls.js
index 0a3db8658..98deabb63 100644
--- a/src/js/shared_controls.js
+++ b/src/js/shared_controls.js
@@ -334,6 +334,11 @@ $("input[name='weather']").change(function () {
 var lastManualWeather = "";
 var lastAutoWeather = ["", ""];
 function autosetWeather(ability, i) {
+
+	if ($('.locked-weather').length) {
+		return;
+	}
+
 	var currentWeather = $("input:radio[name='weather']:checked").val();
 	if (lastAutoWeather.indexOf(currentWeather) === -1) {
 		lastManualWeather = currentWeather;
@@ -1576,6 +1581,26 @@ function getSelectOptions(arr, sort, defaultOption) {
 	}
 	return r;
 }
+
+var stickyWeather = (function () {
+	var lastClicked = '';
+	$(".weather").click(function () {
+		if (this.id === lastClicked) {
+			$(this).toggleClass("locked-weather");
+		} else {
+			$('.locked-weather').removeClass('locked-weather');
+		}
+		lastClicked = this.id;
+	});
+
+	return {
+		clearStickyWeather: function () {
+			lastClicked = null;
+			$('.locked-weather').removeClass('locked-weather');
+		}
+	};
+})();
+
 var stickyMoves = (function () {
 	var lastClicked = 'resultMoveL1';
 	$(".result-move").click(function () {