scroll triggers properly on red background

server/scripts/modules/currentweatherscroll.mjs

@@ -19,8 +19,6 @@ let hazardData;
 // start drawing conditions
 // reset starts from the first item in the text scroll list
 const start = () => {
-	// store see if the context is new
-
 	// set up the interval if needed
 	if (!interval) {
 		interval = setInterval(incrementInterval, 500);
@@ -74,8 +72,10 @@ const drawScreen = async () => {
 	const thisScreen = screens[screenIndex](data);
 
 	// update classes on the scroll area
-	elemForEach('.weather-display .scroll .fixed', (elem) => {
-		elem.classList.forEach((cls) => { if (cls !== 'fixed') elem.classList.remove(cls); });
+	elemForEach('.weather-display .scroll', (elem) => {
+		elem.classList.forEach((cls) => { if (cls !== 'scroll') elem.classList.remove(cls); });
+		// no scroll on progress
+		if (elem.parentElement.id === 'progress-html') return;
 		thisScreen?.classes?.forEach((cls) => elem.classList.add(cls));
 	});
 
@@ -159,9 +159,6 @@ const drawCondition = (text) => {
 		elem.innerHTML = text;
 	});
 };
-document.addEventListener('DOMContentLoaded', () => {
-	start();
-});
 
 // store the original number of screens
 const originalScreens = screens.length;
@@ -211,7 +208,23 @@ const drawScrollCondition = (screen) => {
 	}, 1000);
 };
 
+const parseMessage = (event) => {
+	if (event?.data?.type === 'current-weather-scroll') {
+		if (event.data?.method === 'start') start();
+	}
+};
+
+// add event listener for start message
+window.addEventListener('message', parseMessage);
+
 window.CurrentWeatherScroll = {
 	addScreen,
 	reset,
+	start,
+};
+
+export {
+	addScreen,
+	reset,
+	start,
 };

server/scripts/modules/weatherdisplay.mjs

@@ -170,6 +170,7 @@ 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' });
 	}
 
 	finishDraw() {

server/styles/scss/_weather-display.scss

@@ -116,7 +116,8 @@
 		width: 640px;
 		height: 70px;
 		overflow: hidden;
-		margin-top: 10px;
+		margin-top: 3px;
+		padding-top: 7px;
 
 		&.hazard {
 			background-color: rgb(112, 35, 35);