restyle radar observations

server/scripts/modules/currentweather.mjs

@@ -45,11 +45,15 @@ class CurrentWeather extends WeatherDisplay {
 		const wind = this.data.WindSpeed > 0
 			? this.data.WindDirection.padEnd(3, '') + this.data.WindSpeed.toString().padStart(3, ' ')
 			: 'Calm';
+		const isDefaultTheme = (document.documentElement.dataset.theme ?? 'default') === 'default';
+		const windText = !isDefaultTheme && this.data.WindGust > 0
+			? `${wind} - Gusts to ${this.data.WindGust}`
+			: wind;
 
 		const fill = {
 			temp: this.data.Temperature + String.fromCharCode(176),
 			condition,
-			wind,
+			wind: windText,
 			location: this.data.city.substr(0, 20),
 			humidity: `${this.data.Humidity}%`,
 			dewpoint: this.data.DewPoint + String.fromCharCode(176),
@@ -59,7 +63,7 @@ class CurrentWeather extends WeatherDisplay {
 			icon: { type: 'img', src: this.data.Icon },
 		};
 
-		if (this.data.WindGust > 0) fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
+		if (isDefaultTheme && this.data.WindGust > 0) fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
 
 		const area = this.elem.querySelector('.main');
 		area.innerHTML = '';

server/scripts/modules/navigation.mjs

@@ -28,6 +28,38 @@ const getStoredLocationMetadata = () => {
 
 const isUsLocation = (location) => ['US', 'USA'].includes((location?.countryCode ?? '').toUpperCase());
 
+const isWithinBounds = (latLon, bounds) => latLon.lat >= bounds.minLat
+	&& latLon.lat <= bounds.maxLat
+	&& latLon.lon >= bounds.minLon
+	&& latLon.lon <= bounds.maxLon;
+
+const isWithinUsFallbackBounds = (latLon) => [
+	{
+		minLat: 24.0,
+		maxLat: 49.5,
+		minLon: -125.0,
+		maxLon: -66.5,
+	},
+	{
+		minLat: 51.0,
+		maxLat: 71.5,
+		minLon: -179.5,
+		maxLon: -129.5,
+	},
+	{
+		minLat: 18.5,
+		maxLat: 22.5,
+		minLon: -160.5,
+		maxLon: -154.5,
+	},
+].some((bounds) => isWithinBounds(latLon, bounds));
+
+const supportsNoaaLocation = (location, latLon) => {
+	if (isUsLocation(location)) return true;
+	if (!location?.countryCode) return isWithinUsFallbackBounds(latLon);
+	return false;
+};
+
 const getFallbackLocation = (latLon) => {
 	const query = localStorage.getItem('latLonQuery') ?? `${latLon.lat.toFixed(4)}, ${latLon.lon.toFixed(4)}`;
 	const [city = query, state = ''] = query.split(',').map((part) => part.trim());
@@ -94,22 +126,21 @@ const getWeather = async (latLon, haveDataCallback) => {
 	if (typeof haveDataCallback === 'function') haveDataCallback(location);
 
 	try {
-		const supportsNoaaDisplays = isUsLocation(location);
+		const noaaEligibleLocation = supportsNoaaLocation(location, latLon);
-		const shouldTryNoaaPoint = supportsNoaaDisplays || !location.countryCode;
 		let point = null;
 		let stations = null;
 		let stationId = '';
 
-		if (shouldTryNoaaPoint) {
+		if (noaaEligibleLocation) {
 			point = await getPoint(latLon.lat, latLon.lon);
 		}
 
-		if (supportsNoaaDisplays && point?.properties?.observationStations) {
+		if (noaaEligibleLocation && point?.properties?.observationStations) {
 			stations = await safeJson(point.properties.observationStations);
 			stationId = stations?.features?.[0]?.properties?.stationIdentifier ?? '';
 		}
 
-		const supportsNoaaAlerts = !!(isUsLocation(location) || point);
+		const supportsNoaaAlerts = noaaEligibleLocation;
 
 		const state = location.state || point?.properties?.relativeLocation?.properties?.state || '';
 		let city = location.city || point?.properties?.relativeLocation?.properties?.city || localStorage.getItem('latLonQuery') || '';
@@ -129,7 +160,7 @@ const getWeather = async (latLon, haveDataCallback) => {
 		weatherParameters.timeZone = openMeteoForecast.timezone;
 		weatherParameters.forecast = aggregatedForecast;
 		weatherParameters.supportsNoaaAlerts = supportsNoaaAlerts;
-		weatherParameters.supportsNoaaDisplays = !!(supportsNoaaDisplays && point && stations?.features?.length);
+		weatherParameters.supportsNoaaDisplays = !!(noaaEligibleLocation && point && stations?.features?.length);
 		weatherParameters.zoneId = point?.properties?.forecastZone?.substr(-6) ?? '';
 		weatherParameters.radarId = point?.properties?.radarStation?.substr(-3) ?? '';
 		weatherParameters.stationId = stationId;

server/scripts/modules/utils/theme.mjs

@@ -57,6 +57,7 @@ const getThemeAssetUrl = (themeName, assetKey) => {
 const applyTheme = (themeName) => {
 	const selectedTheme = getAvailableThemes().includes(themeName) ? themeName : DEFAULT_THEME;
 	localStorage.setItem(THEME_STORAGE_KEY, selectedTheme);
+	document.documentElement.dataset.theme = selectedTheme;
 
 	document.documentElement.style.setProperty('--theme-background-1', `url('${getThemeAssetUrl(selectedTheme, 'background1')}')`);
 	document.documentElement.style.setProperty('--theme-background-1-chart', `url('${getThemeAssetUrl(selectedTheme, 'background1Chart')}')`);

server/styles/scss/_current-weather.scss

@@ -23,7 +23,7 @@
 			&.right {
 				right: 0px;
 				font-family: "Star4000 Large";
-				font-size: 20px;
+				font-size: 18px;
 				font-weight: bold;
 				line-height: 24px;
 
@@ -93,3 +93,34 @@
 		}
 	}
 }
+
+:root[data-theme]:not([data-theme='default']) {
+	.weather-display .main.current-weather {
+		&.main {
+			.col {
+				&.left {
+					margin-top: 35px;
+				}
+
+				&.right {
+					margin-top: 36px;
+					padding: 21px;
+				}
+			}
+
+			.wind-container {
+				display: block;
+
+				&>div {
+					width: 50%;
+				}
+
+				.wind {
+					text-align: right;
+					font-size: 22px;
+					display: contents;
+				}
+			}
+		}
+	}
+}

server/styles/scss/_local-forecast.scss

@@ -24,3 +24,7 @@
 		line-height: 40px;
 	}
 }
+
+:root[data-theme]:not([data-theme='default']) .weather-display .local-forecast .forecasts {
+	margin-top: 16px;
+}

server/styles/scss/_radar.scss

@@ -49,9 +49,10 @@
 
 				.box {
 					display: block;
-					border: 2px solid black;
+					border: 2.7px solid #000;
-					width: 100%;
+					width: 90%;
-					height: 22px;
+					height: 12px;
+					margin-top: 4px;
 					padding: 0;
 				}
 
@@ -97,7 +98,7 @@
 				top: -20px;
 				font-family: 'Star4000 Small';
 				font-size: 18pt;
-				left: 130px;
+				left: 132px;
 			}
 		}
 	}
@@ -163,14 +164,12 @@
 			border: 0;
 
 			.nearby-weather-marker-inner {
-				display: flex;
+				display: inline-flex;
 				flex-direction: column;
 				align-items: center;
 				min-width: 72px;
 				padding: 2px 4px;
-				background: rgba(18, 34, 61, 0.88);
+				background: rgb(18 34 61 / 0%);
-				border: 1px solid #000;
-				box-shadow: 1px 1px 0 #000;
 				color: #fff;
 				text-align: center;
 			}
@@ -182,6 +181,7 @@
 				white-space: nowrap;
 				margin-bottom: 1px;
 				text-shadow: 1px 1px 0 #000;
+				display: none;
 			}
 
 			.details {

server/styles/scss/_regional-forecast.scss

@@ -53,25 +53,18 @@
 		border: 0;
 
 		.nearby-weather-marker-inner {
-			display: flex;
+			display: inline-flex;
 			flex-direction: column;
 			align-items: center;
 			min-width: 72px;
 			padding: 2px 4px;
-			background: rgba(18, 34, 61, 0.88);
+			background: rgb(255 255 255 / 0%);
-			border: 1px solid #000;
-			box-shadow: 1px 1px 0 #000;
 			color: #fff;
 			text-align: center;
 		}
 
 		.city {
-			font-family: 'Star4000 Small';
+			display: none;
-			font-size: 11pt;
-			line-height: 1;
-			white-space: nowrap;
-			margin-bottom: 1px;
-			@include u.text-shadow();
 		}
 
 		.details {