Tweaks to allow hazard display to work on the local radar screen

server/scripts/modules/currentweatherscroll.mjs

@@ -28,6 +28,9 @@ let nextUpdate = DEFAULT_UPDATE;
 let resetFlag;
 let defaultScreensLoaded = true;
 
+const isRadarDisplay = (display) => display?.elemId === 'radar';
+const isHazardsDisplay = (display) => display?.elemId === 'hazards';
+
 // start drawing conditions
 // reset starts from the first item in the text scroll list
 const start = () => {
@@ -70,7 +73,7 @@ const incrementInterval = (force) => {
 
 	// test current screen
 	const display = currentDisplay();
-	if (!display?.okToDrawCurrentConditions) {
+	if (!display || isHazardsDisplay(display) || (!display.okToDrawCurrentConditions && !isRadarDisplay(display))) {
 		stop(display?.elemId === 'progress');
 		hide();
 		return;
@@ -82,14 +85,20 @@ const incrementInterval = (force) => {
 };
 
 const drawScreen = async () => {
+	const display = currentDisplay();
+	if (!display || isHazardsDisplay(display) || (!display.okToDrawCurrentConditions && !isRadarDisplay(display))) {
+		hide();
+		return;
+	}
+
 	// get the conditions
 	const { data, parameters } = await getCurrentWeather();
 
 	// create a data object (empty if no valid current weather conditions)
 	const scrollData = data || {};
 
-	// add the hazards if on screen 0
-	if (screenIndex === 0) {
+	// add the hazards if on screen 0 or for Radar's hazard-only crawl
+	if (screenIndex === 0 || isRadarDisplay(display)) {
 		const hazards = await getHazards();
 		if (hazards && hazards.length > 0) {
 			scrollData.hazards = hazards;
@@ -97,7 +106,24 @@ const drawScreen = async () => {
 	}
 
 	// if we have no current weather and no hazards, there's nothing to display
-	if (!data && (!scrollData.hazards || scrollData.hazards.length === 0)) return;
+	if (!data && (!scrollData.hazards || scrollData.hazards.length === 0)) {
+		hide();
+		return;
+	}
+
+	if (isRadarDisplay(display)) {
+		const radarHazard = hazards(scrollData);
+		if (!radarHazard) {
+			hide();
+			return;
+		}
+		mainScroll.classList.forEach((cls) => { if (cls !== 'scroll') mainScroll.classList.remove(cls); });
+		radarHazard.classes.forEach((cls) => mainScroll.classList.add(cls));
+		setHeader(radarHazard.header);
+		drawScrollCondition(radarHazard);
+		show();
+		return;
+	}
 
 	const thisScreen = workingScreens[screenIndex](scrollData, parameters);
 

server/scripts/modules/weatherdisplay.mjs

@@ -171,9 +171,9 @@ class WeatherDisplay {
 		// clean up the first-run flag in screen index
 		if (this.screenIndex < 0) this.screenIndex = 0;
 		if (this.okToDrawCurrentDateTime) this.drawCurrentDateTime();
-		if (this.okToDrawCurrentConditions) postMessage({ type: 'current-weather-scroll', method: 'start' });
-		if (!this.okToDrawCurrentConditions) postMessage({ type: 'current-weather-scroll', method: 'non-display' });
-		if (this.okToDrawCurrentConditions === false) postMessage({ type: 'current-weather-scroll', method: 'hide' });
+		if (this.okToDrawCurrentConditions || this.elemId === 'radar') postMessage({ type: 'current-weather-scroll', method: 'start' });
+		if (!this.okToDrawCurrentConditions && this.elemId !== 'radar') postMessage({ type: 'current-weather-scroll', method: 'non-display' });
+		if (this.okToDrawCurrentConditions === false && this.elemId !== 'radar') postMessage({ type: 'current-weather-scroll', method: 'hide' });
 	}
 
 	finishDraw() {

server/styles/scss/_weather-display.scss

@@ -167,6 +167,14 @@
 
 }
 
+.radar #container>.scroll {
+	z-index: 100;
+}
+
+.radar #container>.scroll.hazard {
+	z-index: 1000 !important;
+}
+
 .wide #container>.scroll {
 	width: 854px;
 	margin-left: -107px;