5.23.2

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.23.0",
+	"version": "5.23.2",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.23.0",
+			"version": "5.23.2",
 			"license": "MIT",
 			"dependencies": {
 				"dotenv": "^16.5.0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.23.0",
+	"version": "5.23.2",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",

server/scripts/modules/currentweatherscroll.mjs

@@ -99,6 +99,12 @@ const drawScreen = async () => {
 				break;
 			default: drawCondition(thisScreen);
 		}
+		// add the header if available
+		if (thisScreen.header) {
+			setHeader(thisScreen.header);
+		} else {
+			setHeader('');
+		}
 	} else {
 		// can't identify screen, get another one
 		incrementInterval(true);
@@ -115,6 +121,7 @@ const hazards = (data) => {
 		text: hazard,
 		type: 'scroll',
 		classes: ['hazard'],
+		header: data.hazards[0].properties.event,
 	};
 };
 
@@ -167,6 +174,13 @@ const drawCondition = (text) => {
 	elemForEach('.weather-display .scroll .fixed', (elem) => {
 		elem.innerHTML = text;
 	});
+	setHeader('');
+};
+
+const setHeader = (text) => {
+	elemForEach('.weather-display .scroll .scroll-header', (elem) => {
+		elem.innerHTML = text ?? '';
+	});
 };
 
 // store the original number of screens

server/styles/scss/_current-weather.scss

@@ -22,9 +22,10 @@
 
 			&.right {
 				right: 0px;
-				font-family: 'Star4000 Large';
+				font-family: "Star4000 Large";
-				font-size: 16pt;
+				font-size: 20px;
 				font-weight: bold;
+				line-height: 24px;
 
 				.row {
 					margin-bottom: 12px;

server/styles/scss/_weather-display.scss

@@ -117,18 +117,28 @@
 		height: 70px;
 		overflow: hidden;
 		margin-top: 3px;
-		padding-top: 7px;
 
 		&.hazard {
 			background-color: rgb(112, 35, 35);
 		}
 
-		.fixed {
+		.fixed,
-			font-family: 'Star4000';
+		.scroll-header {
-			font-size: 24pt;
 			margin-left: 55px;
 			margin-right: 55px;
 			overflow: hidden;
+		}
+
+		.scroll-header {
+			height: 26px;
+			font-family: "Star4000 Small";
+			font-size: 20pt;
+			margin-top: -10px;
+		}
+
+		.fixed {
+			font-family: 'Star4000';
+			font-size: 24pt;
 
 			.scroll-area {
 				text-wrap: nowrap;

views/partials/scroll.ejs

@@ -1,4 +1,5 @@
 <div class="scroll">
 	<div class="scrolling template"></div>
+	<div class="scroll-header"></div>
 	<div class="fixed"></div>
 </div>