some marine forecast updates

.eslintrc.js

@@ -6,10 +6,7 @@ module.exports = {
 		node: true,
 		jquery: true,
 	},
-	extends: [
+	extends: 'airbnb-base',
-		'airbnb-base',
-		'plugin:sonarjs/recommended',
-	],
 	globals: {
 		Atomics: 'readonly',
 		SharedArrayBuffer: 'readonly',
@@ -24,10 +21,6 @@ module.exports = {
 	parserOptions: {
 		ecmaVersion: 2021,
 	},
-	plugins: [
-		'unicorn',
-		'sonarjs',
-	],
 	rules: {
 		indent: [
 			'error',
@@ -67,24 +60,6 @@ module.exports = {
 				json: 'always',
 			},
 		],
-		// unicorn
-		'unicorn/numeric-separators-style': 'error',
-		'unicorn/prefer-query-selector': 'error',
-		'unicorn/catch-error-name': 'error',
-		'unicorn/no-negated-condition': 'error',
-		'unicorn/better-regex': 'error',
-		'unicorn/consistent-function-scoping': 'error',
-		'unicorn/prefer-array-flat-map': 'error',
-		'unicorn/prefer-array-find': 'error',
-		'unicorn/prefer-regexp-test': 'error',
-		'unicorn/consistent-destructuring': 'error',
-		'unicorn/prefer-date-now': 'error',
-		'unicorn/prefer-ternary': 'error',
-		'unicorn/prefer-dom-node-append': 'error',
-		'unicorn/explicit-length-check': 'error',
-		'unicorn/prefer-at': 'error',
-		// sonarjs
-		'sonarjs/cognitive-complexity': 0,
 	},
 	ignorePatterns: [
 		'*.min.js',

.vscode/launch.json

@@ -63,17 +63,7 @@
 			"env": {
 				"DIST": "1"
 			}
-		},
+		}
-		{
-			"name": "Test",
-			"program": "${workspaceFolder}/tests/index.js",
-			"request": "launch",
-			"skipFiles": [
-				"<node_internals>/**"
-			],
-			"type": "node",
-			"outputCapture": "std"
-		},
 	],
 	"compounds": [
 		{

.vscode/tasks.json

@@ -1,14 +0,0 @@
-{
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "lint",
-			"problemMatcher": [
-				"$eslint-stylish"
-			],
-			"label": "npm: lint",
-			"detail": "eslint ./server/scripts/**"
-		}
-	]
-}

cors/outlook.js

@@ -11,7 +11,7 @@ module.exports = (req, res) => {
 	// add out-going headers
 	const headers = {};
 	headers['user-agent'] = '(WeatherStar 4000+, ws4000@netbymatt.com)';
-	headers.accept = req.headers.accept;
+	headers['accept'] = req.headers.accept;
 
 	// get query paramaters if the exist
 	const queryParams = Object.keys(req.query).reduce((acc, key) => {
@@ -20,16 +20,16 @@ module.exports = (req, res) => {
 		// add the paramter to the resulting object
 		acc[key] = req.query[key];
 		return acc;
-	}, {});
+	},{});
 	let query = queryString.encode(queryParams);
-	if (query.length > 0) query = `?${query}`;
+	if (query.length > 0) query = '?' + query;
 
 	// get the page
-	https.get(`https://www.cpc.ncep.noaa.gov/${req.path}${query}`, {
+	https.get('https://www.cpc.ncep.noaa.gov/' + req.path + query, {
 		headers,
-	}, (getRes) => {
+	}, getRes => {
 		// pull some info
-		const { statusCode } = getRes;
+		const {statusCode} = getRes;
 		// pass the status code through
 		res.status(statusCode);
 
@@ -38,7 +38,8 @@ module.exports = (req, res) => {
 		res.header('last-modified', getRes.headers['last-modified']);
 		// pipe to response
 		getRes.pipe(res);
-	}).on('error', (e) => {
+
+	}).on('error', e=>{
 		console.error(e);
 	});
-};
+};

cors/radar.js

@@ -11,7 +11,7 @@ module.exports = (req, res) => {
 	// add out-going headers
 	const headers = {};
 	headers['user-agent'] = '(WeatherStar 4000+, ws4000@netbymatt.com)';
-	headers.accept = req.headers.accept;
+	headers['accept'] = req.headers.accept;
 
 	// get query paramaters if the exist
 	const queryParams = Object.keys(req.query).reduce((acc, key) => {
@@ -20,16 +20,16 @@ module.exports = (req, res) => {
 		// add the paramter to the resulting object
 		acc[key] = req.query[key];
 		return acc;
-	}, {});
+	},{});
 	let query = queryString.encode(queryParams);
-	if (query.length > 0) query = `?${query}`;
+	if (query.length > 0) query = '?' + query;
 
 	// get the page
-	https.get(`https://radar.weather.gov${req.path}${query}`, {
+	https.get('https://radar.weather.gov' + req.path + query, {
 		headers,
-	}, (getRes) => {
+	}, getRes => {
 		// pull some info
-		const { statusCode } = getRes;
+		const {statusCode} = getRes;
 		// pass the status code through
 		res.status(statusCode);
 
@@ -38,7 +38,8 @@ module.exports = (req, res) => {
 		res.header('last-modified', getRes.headers['last-modified']);
 		// pipe to response
 		getRes.pipe(res);
-	}).on('error', (e) => {
+
+	}).on('error', e=>{
 		console.error(e);
 	});
-};
+};

index.js

@@ -31,17 +31,17 @@ const index = (req, res) => {
 };
 
 // debugging
-if (process.env?.DIST === '1') {
+if (process.env?.DIST !== '1') {
+	// debugging
+	app.get('/index.html', index);
+	app.get('/', index);
+	app.get('*', express.static(path.join(__dirname, './server')));
+} else {
 	// distribution
 	app.use('/images', express.static(path.join(__dirname, './server/images')));
 	app.use('/fonts', express.static(path.join(__dirname, './server/fonts')));
 	app.use('/scripts', express.static(path.join(__dirname, './server/scripts')));
 	app.use('/', express.static(path.join(__dirname, './dist')));
-} else {
-	// debugging
-	app.get('/index.html', index);
-	app.get('/', index);
-	app.get('*', express.static(path.join(__dirname, './server')));
 }
 
 const server = app.listen(port, () => {

package.json

@@ -1,13 +1,13 @@
 {
 	"name": "ws4kp",
-	"version": "5.9.8",
+	"version": "5.9.1",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"build:css": "sass ./server/styles/scss/style.scss ./server/styles/compiled.css",
-		"lint": "eslint ./server/scripts/**/*.mjs",
+		"lint": "eslint ./server/scripts/**",
-		"lint:fix": "eslint --fix ./server/scripts/**/*.mjs"
+		"lint:fix": "eslint --fix ./server/scripts/**"
 	},
 	"repository": {
 		"type": "git",
@@ -22,11 +22,7 @@
 	"devDependencies": {
 		"del": "^6.0.0",
 		"ejs": "^3.1.5",
-		"eslint": "^8.21.0",
 		"eslint-config-airbnb-base": "^15.0.0",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-sonarjs": "^0.19.0",
-		"eslint-plugin-unicorn": "^46.0.0",
 		"express": "^4.17.1",
 		"gulp": "^4.0.2",
 		"gulp-concat": "^2.6.1",
@@ -44,6 +40,9 @@
 		"suncalc": "^1.8.0",
 		"swiped-events": "^1.1.4",
 		"terser-webpack-plugin": "^5.3.6",
-		"webpack-stream": "^7.0.0"
+		"webpack-stream": "^7.0.0",
-	}
+		"eslint": "^8.21.0",
+		"eslint-plugin-import": "^2.26.0"
+	},
+	"dependencies": {}
 }

server/scripts/data/.eslintrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-	rules: {
-		// unicorn
-		'unicorn/numeric-separators-style': 0,
-	},
-};

server/scripts/index.mjs

@@ -22,38 +22,32 @@ const categories = [
 	'Postal', 'Populated Place',
 ];
 const category = categories.join(',');
-const TXT_ADDRESS_SELECTOR = '#txtAddress';
-const TOGGLE_FULL_SCREEN_SELECTOR = '#ToggleFullScreen';
-const BNT_GET_GPS_SELECTOR = '#btnGetGps';
 
 const init = () => {
-	document.querySelector(TXT_ADDRESS_SELECTOR).addEventListener('focus', (e) => {
+	document.getElementById('txtAddress').addEventListener('focus', (e) => {
 		e.target.select();
 	});
 
 	registerRefreshData(loadData);
 
-	document.querySelector('#NavigateMenu').addEventListener('click', btnNavigateMenuClick);
+	document.getElementById('NavigateMenu').addEventListener('click', btnNavigateMenuClick);
-	document.querySelector('#NavigateRefresh').addEventListener('click', btnNavigateRefreshClick);
+	document.getElementById('NavigateRefresh').addEventListener('click', btnNavigateRefreshClick);
-	document.querySelector('#NavigateNext').addEventListener('click', btnNavigateNextClick);
+	document.getElementById('NavigateNext').addEventListener('click', btnNavigateNextClick);
-	document.querySelector('#NavigatePrevious').addEventListener('click', btnNavigatePreviousClick);
+	document.getElementById('NavigatePrevious').addEventListener('click', btnNavigatePreviousClick);
-	document.querySelector('#NavigatePlay').addEventListener('click', btnNavigatePlayClick);
+	document.getElementById('NavigatePlay').addEventListener('click', btnNavigatePlayClick);
-	document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR).addEventListener('click', btnFullScreenClick);
+	document.getElementById('ToggleFullScreen').addEventListener('click', btnFullScreenClick);
-	const btnGetGps = document.querySelector(BNT_GET_GPS_SELECTOR);
+	const btnGetGps = document.getElementById('btnGetGps');
 	btnGetGps.addEventListener('click', btnGetGpsClick);
 	if (!navigator.geolocation) btnGetGps.style.display = 'none';
 
-	document.querySelector('#divTwc').addEventListener('click', () => {
+	document.getElementById('divTwc').addEventListener('click', () => {
 		if (document.fullscreenElement) updateFullScreenNavigate();
 	});
 
-	document.querySelector(TXT_ADDRESS_SELECTOR).addEventListener('keydown', (key) => { if (key.code === 'Enter') formSubmit(); });
-	document.querySelector('#btnGetLatLng').addEventListener('click', () => formSubmit());
-
 	document.addEventListener('keydown', documentKeydown);
 	document.addEventListener('touchmove', (e) => { if (fullScreenOverride) e.preventDefault(); });
 
-	$(TXT_ADDRESS_SELECTOR).devbridgeAutocomplete({
+	$('#frmGetLatLng #txtAddress').devbridgeAutocomplete({
 		serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
 		deferRequestBy: 300,
 		paramName: 'text',
@@ -77,18 +71,18 @@ const init = () => {
 		width: 490,
 	});
 
-	const formSubmit = () => {
+	$('#frmGetLatLng').on('submit', () => {
-		const ac = $(TXT_ADDRESS_SELECTOR).devbridgeAutocomplete();
+		const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
 		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).trigger('click');
 		return false;
-	};
+	});
 
 	// Auto load the previous query
 	const query = localStorage.getItem('latLonQuery');
 	const latLon = localStorage.getItem('latLon');
 	const fromGPS = localStorage.getItem('latLonFromGPS');
 	if (query && latLon && !fromGPS) {
-		const txtAddress = document.querySelector(TXT_ADDRESS_SELECTOR);
+		const txtAddress = document.getElementById('txtAddress');
 		txtAddress.value = query;
 		loadData(JSON.parse(latLon));
 	}
@@ -99,14 +93,14 @@ const init = () => {
 	const play = localStorage.getItem('play');
 	if (play === null || play === 'true') postMessage('navButton', 'play');
 
-	document.querySelector('#btnClearQuery').addEventListener('click', () => {
+	document.getElementById('btnClearQuery').addEventListener('click', () => {
-		document.querySelector('#spanCity').innerHTML = '';
+		document.getElementById('spanCity').innerHTML = '';
-		document.querySelector('#spanState').innerHTML = '';
+		document.getElementById('spanState').innerHTML = '';
-		document.querySelector('#spanStationId').innerHTML = '';
+		document.getElementById('spanStationId').innerHTML = '';
-		document.querySelector('#spanRadarId').innerHTML = '';
+		document.getElementById('spanRadarId').innerHTML = '';
-		document.querySelector('#spanZoneId').innerHTML = '';
+		document.getElementById('spanZoneId').innerHTML = '';
 
-		document.querySelector('#chkAutoRefresh').checked = true;
+		document.getElementById('chkAutoRefresh').checked = true;
 		localStorage.removeItem('autoRefresh');
 
 		localStorage.removeItem('play');
@@ -115,12 +109,12 @@ const init = () => {
 		localStorage.removeItem('latLonQuery');
 		localStorage.removeItem('latLon');
 		localStorage.removeItem('latLonFromGPS');
-		document.querySelector(BNT_GET_GPS_SELECTOR).classList.remove('active');
+		document.getElementById('btnGetGps').classList.remove('active');
 	});
 
 	// swipe functionality
-	document.querySelector('#container').addEventListener('swiped-left', () => swipeCallBack('left'));
+	document.getElementById('container').addEventListener('swiped-left', () => swipeCallBack('left'));
-	document.querySelector('#container').addEventListener('swiped-right', () => swipeCallBack('right'));
+	document.getElementById('container').addEventListener('swiped-right', () => swipeCallBack('right'));
 };
 
 const autocompleteOnSelect = async (suggestion, elem) => {
@@ -138,7 +132,7 @@ const autocompleteOnSelect = async (suggestion, elem) => {
 	const loc = data.locations[0];
 	if (loc) {
 		localStorage.removeItem('latLonFromGPS');
-		document.querySelector(BNT_GET_GPS_SELECTOR).classList.remove('active');
+		document.getElementById('btnGetGps').classList.remove('active');
 		doRedirectToGeometry(loc.feature.geometry);
 	} else {
 		console.error('An unexpected error occurred. Please try a different search string.');
@@ -148,7 +142,7 @@ const autocompleteOnSelect = async (suggestion, elem) => {
 const doRedirectToGeometry = (geom, haveDataCallback) => {
 	const latLon = { lat: round2(geom.y, 4), lon: round2(geom.x, 4) };
 	// Save the query
-	localStorage.setItem('latLonQuery', document.querySelector(TXT_ADDRESS_SELECTOR).value);
+	localStorage.setItem('latLonQuery', document.getElementById('txtAddress').value);
 	localStorage.setItem('latLon', JSON.stringify(latLon));
 
 	// get the data
@@ -156,10 +150,10 @@ const doRedirectToGeometry = (geom, haveDataCallback) => {
 };
 
 const btnFullScreenClick = () => {
-	if (document.fullscreenElement) {
+	if (!document.fullscreenElement) {
-		exitFullscreen();
-	} else {
 		enterFullScreen();
+	} else {
+		exitFullscreen();
 	}
 
 	if (isPlaying()) {
@@ -174,7 +168,7 @@ const btnFullScreenClick = () => {
 };
 
 const enterFullScreen = () => {
-	const element = document.querySelector('#divTwc');
+	const element = document.getElementById('divTwc');
 
 	// Supports most browsers and their versions.
 	const requestMethod = element.requestFullScreen || element.webkitRequestFullScreen
@@ -192,7 +186,7 @@ const enterFullScreen = () => {
 	updateFullScreenNavigate();
 
 	// change hover text and image
-	const img = document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR);
+	const img = document.getElementById('ToggleFullScreen');
 	img.src = 'images/nav/ic_fullscreen_exit_white_24dp_2x.png';
 	img.title = 'Exit fullscreen';
 };
@@ -216,7 +210,7 @@ const exitFullscreen = () => {
 	}
 	resize();
 	// change hover text and image
-	const img = document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR);
+	const img = document.getElementById('ToggleFullScreen');
 	img.src = 'images/nav/ic_fullscreen_white_24dp_2x.png';
 	img.title = 'Enter fullscreen';
 };
@@ -235,7 +229,7 @@ const loadData = (_latLon, haveDataCallback) => {
 	// if there's no data stop
 	if (!latLon) return;
 
-	document.querySelector(TXT_ADDRESS_SELECTOR).blur();
+	document.getElementById('txtAddress').blur();
 	stopAutoRefreshTimer();
 	latLonReceived(latLon, haveDataCallback);
 };
@@ -279,9 +273,8 @@ let navigateFadeIntervalId = null;
 
 const updateFullScreenNavigate = () => {
 	document.activeElement.blur();
-	const divTwcBottom = document.querySelector('#divTwcBottom');
+	document.getElementById('divTwcBottom').classList.remove('hidden');
-	divTwcBottom.classList.remove('hidden');
+	document.getElementById('divTwcBottom').classList.add('visible');
-	divTwcBottom.classList.add('visible');
 
 	if (navigateFadeIntervalId) {
 		clearTimeout(navigateFadeIntervalId);
@@ -290,8 +283,8 @@ const updateFullScreenNavigate = () => {
 
 	navigateFadeIntervalId = setTimeout(() => {
 		if (document.fullscreenElement) {
-			divTwcBottom.classList.remove('visible');
+			document.getElementById('divTwcBottom').classList.remove('visible');
-			divTwcBottom.classList.add('hidden');
+			document.getElementById('divTwcBottom').classList.add('hidden');
 		}
 	}, 2000);
 };
@@ -359,7 +352,7 @@ const getPosition = async () => new Promise((resolve) => {
 
 const btnGetGpsClick = async () => {
 	if (!navigator.geolocation) return;
-	const btn = document.querySelector(BNT_GET_GPS_SELECTOR);
+	const btn = document.getElementById('btnGetGps');
 
 	// toggle first
 	if (btn.classList.contains('active')) {
@@ -375,7 +368,7 @@ const btnGetGpsClick = async () => {
 	const position = await getPosition();
 	const { latitude, longitude } = position.coords;
 
-	const txtAddress = document.querySelector(TXT_ADDRESS_SELECTOR);
+	const txtAddress = document.getElementById('txtAddress');
 	txtAddress.value = `${round2(latitude, 4)}, ${round2(longitude, 4)}`;
 
 	doRedirectToGeometry({ y: latitude, x: longitude }, (point) => {

server/scripts/modules/currentweather.mjs

@@ -30,9 +30,8 @@ class CurrentWeather extends WeatherDisplay {
 		const filteredStations = weatherParameters.stations.filter((station) => station?.properties?.stationIdentifier?.length === 4 && !skipStations.includes(station.properties.stationIdentifier.slice(0, 1)));
 
 		// Load the observations
-		let observations;
+		let observations; let
-		let station;
+			station;
-
 		// station number counter
 		let stationNum = 0;
 		while (!observations && stationNum < filteredStations.length) {
@@ -54,14 +53,12 @@ class CurrentWeather extends WeatherDisplay {
 				// test data quality
 				if (observations.features[0].properties.temperature.value === null
 					|| observations.features[0].properties.windSpeed.value === null
-					|| observations.features[0].properties.textDescription === null
+					|| observations.features[0].properties.textDescription === null) {
-					|| observations.features[0].properties.textDescription === ''
-					|| observations.features[0].properties.icon === null) {
 					observations = undefined;
 					throw new Error(`Unable to get observations: ${station.properties.stationIdentifier}, trying next station`);
 				}
-			} catch (error) {
+			} catch (e) {
-				console.error(error);
+				console.error(e);
 			}
 		}
 		// test for data received
@@ -74,7 +71,7 @@ class CurrentWeather extends WeatherDisplay {
 		}
 
 		// we only get here if there was no error above
-		this.data = parseData({ ...observations, station });
+		this.data = { ...observations, station };
 		this.getDataCallback();
 
 		// stop here if we're disabled
@@ -85,37 +82,89 @@ class CurrentWeather extends WeatherDisplay {
 		this.setStatus(STATUS.loaded);
 	}
 
+	// format the data for use outside this function
+	parseData() {
+		if (!this.data) return false;
+		const data = {};
+		const observations = this.data.features[0].properties;
+		// values from api are provided in metric
+		data.observations = observations;
+		data.Temperature = Math.round(observations.temperature.value);
+		data.TemperatureUnit = 'C';
+		data.DewPoint = Math.round(observations.dewpoint.value);
+		data.Ceiling = Math.round(observations.cloudLayers[0]?.base?.value ?? 0);
+		data.CeilingUnit = 'm.';
+		data.Visibility = Math.round(observations.visibility.value / 1000);
+		data.VisibilityUnit = ' km.';
+		data.WindSpeed = Math.round(observations.windSpeed.value);
+		data.WindDirection = directionToNSEW(observations.windDirection.value);
+		data.Pressure = Math.round(observations.barometricPressure.value);
+		data.HeatIndex = Math.round(observations.heatIndex.value);
+		data.WindChill = Math.round(observations.windChill.value);
+		data.WindGust = Math.round(observations.windGust.value);
+		data.WindUnit = 'KPH';
+		data.Humidity = Math.round(observations.relativeHumidity.value);
+		data.Icon = getWeatherIconFromIconLink(observations.icon);
+		data.PressureDirection = '';
+		data.TextConditions = observations.textDescription;
+		data.station = this.data.station;
+
+		// difference since last measurement (pascals, looking for difference of more than 150)
+		const pressureDiff = (observations.barometricPressure.value - this.data.features[1].properties.barometricPressure.value);
+		if (pressureDiff > 150) data.PressureDirection = 'R';
+		if (pressureDiff < -150) data.PressureDirection = 'F';
+
+		data.Temperature = celsiusToFahrenheit(data.Temperature);
+		data.TemperatureUnit = 'F';
+		data.DewPoint = celsiusToFahrenheit(data.DewPoint);
+		data.Ceiling = Math.round(metersToFeet(data.Ceiling) / 100) * 100;
+		data.CeilingUnit = 'ft.';
+		data.Visibility = kilometersToMiles(observations.visibility.value / 1000);
+		data.VisibilityUnit = ' mi.';
+		data.WindSpeed = kphToMph(data.WindSpeed);
+		data.WindUnit = 'MPH';
+		data.Pressure = pascalToInHg(data.Pressure).toFixed(2);
+		data.HeatIndex = celsiusToFahrenheit(data.HeatIndex);
+		data.WindChill = celsiusToFahrenheit(data.WindChill);
+		data.WindGust = kphToMph(data.WindGust);
+		return data;
+	}
+
 	async drawCanvas() {
 		super.drawCanvas();
+		const fill = {};
+		// parse each time to deal with a change in units if necessary
+		const data = this.parseData();
 
-		let condition = this.data.observations.textDescription;
+		fill.temp = data.Temperature + String.fromCharCode(176);
-		if (condition.length > 15) {
+
-			condition = shortConditions(condition);
+		let Conditions = data.observations.textDescription;
+		if (Conditions.length > 15) {
+			Conditions = shortConditions(Conditions);
 		}
+		fill.condition = Conditions;
 
-		const fill = {
+		fill.wind = data.WindDirection.padEnd(3, '') + data.WindSpeed.toString().padStart(3, ' ');
-			temp: this.data.Temperature + String.fromCharCode(176),
+		if (data.WindGust) fill['wind-gusts'] = `Gusts to ${data.WindGust}`;
-			condition,
-			wind: this.data.WindDirection.padEnd(3, '') + this.data.WindSpeed.toString().padStart(3, ' '),
-			location: locationCleanup(this.data.station.properties.name).substr(0, 20),
-			humidity: `${this.data.Humidity}%`,
-			dewpoint: this.data.DewPoint + String.fromCharCode(176),
-			ceiling: (this.data.Ceiling === 0 ? 'Unlimited' : this.data.Ceiling + this.data.CeilingUnit),
-			visibility: this.data.Visibility + this.data.VisibilityUnit,
-			pressure: `${this.data.Pressure} ${this.data.PressureDirection}`,
-			icon: { type: 'img', src: this.data.Icon },
-		};
 
-		if (this.data.WindGust) fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
+		fill.location = locationCleanup(this.data.station.properties.name).substr(0, 20);
 
-		if (this.data.observations.heatIndex.value && this.data.HeatIndex !== this.data.Temperature) {
+		fill.humidity = `${data.Humidity}%`;
+		fill.dewpoint = data.DewPoint + String.fromCharCode(176);
+		fill.ceiling = (data.Ceiling === 0 ? 'Unlimited' : data.Ceiling + data.CeilingUnit);
+		fill.visibility = data.Visibility + data.VisibilityUnit;
+		fill.pressure = `${data.Pressure} ${data.PressureDirection}`;
+
+		if (data.observations.heatIndex.value && data.HeatIndex !== data.Temperature) {
 			fill['heat-index-label'] = 'Heat Index:';
-			fill['heat-index'] = this.data.HeatIndex + String.fromCharCode(176);
+			fill['heat-index'] = data.HeatIndex + String.fromCharCode(176);
-		} else if (this.data.observations.windChill.value && this.data.WindChill !== '' && this.data.WindChill < this.data.Temperature) {
+		} else if (data.observations.windChill.value && data.WindChill !== '' && data.WindChill < data.Temperature) {
 			fill['heat-index-label'] = 'Wind Chill:';
-			fill['heat-index'] = this.data.WindChill + String.fromCharCode(176);
+			fill['heat-index'] = data.WindChill + String.fromCharCode(176);
 		}
 
+		fill.icon = { type: 'img', src: data.Icon };
+
 		const area = this.elem.querySelector('.main');
 
 		area.innerHTML = '';
@@ -129,9 +178,9 @@ class CurrentWeather extends WeatherDisplay {
 	async getCurrentWeather(stillWaiting) {
 		if (stillWaiting) this.stillWaitingCallbacks.push(stillWaiting);
 		return new Promise((resolve) => {
-			if (this.data) resolve(this.data);
+			if (this.data) resolve(this.parseData());
 			// data not available, put it into the data callback queue
-			this.getDataCallbacks.push(() => resolve(this.data));
+			this.getDataCallbacks.push(() => resolve(this.parseData()));
 		});
 	}
 }
@@ -155,52 +204,6 @@ const shortConditions = (_condition) => {
 	return condition;
 };
 
-// format the received data
-const parseData = (data) => {
-	const observations = data.features[0].properties;
-	// values from api are provided in metric
-	data.observations = observations;
-	data.Temperature = Math.round(observations.temperature.value);
-	data.TemperatureUnit = 'C';
-	data.DewPoint = Math.round(observations.dewpoint.value);
-	data.Ceiling = Math.round(observations.cloudLayers[0]?.base?.value ?? 0);
-	data.CeilingUnit = 'm.';
-	data.Visibility = Math.round(observations.visibility.value / 1000);
-	data.VisibilityUnit = ' km.';
-	data.WindSpeed = Math.round(observations.windSpeed.value);
-	data.WindDirection = directionToNSEW(observations.windDirection.value);
-	data.Pressure = Math.round(observations.barometricPressure.value);
-	data.HeatIndex = Math.round(observations.heatIndex.value);
-	data.WindChill = Math.round(observations.windChill.value);
-	data.WindGust = Math.round(observations.windGust.value);
-	data.WindUnit = 'KPH';
-	data.Humidity = Math.round(observations.relativeHumidity.value);
-	data.Icon = getWeatherIconFromIconLink(observations.icon);
-	data.PressureDirection = '';
-	data.TextConditions = observations.textDescription;
-
-	// difference since last measurement (pascals, looking for difference of more than 150)
-	const pressureDiff = (observations.barometricPressure.value - data.features[1].properties.barometricPressure.value);
-	if (pressureDiff > 150) data.PressureDirection = 'R';
-	if (pressureDiff < -150) data.PressureDirection = 'F';
-
-	// convert to us units
-	data.Temperature = celsiusToFahrenheit(data.Temperature);
-	data.TemperatureUnit = 'F';
-	data.DewPoint = celsiusToFahrenheit(data.DewPoint);
-	data.Ceiling = Math.round(metersToFeet(data.Ceiling) / 100) * 100;
-	data.CeilingUnit = 'ft.';
-	data.Visibility = kilometersToMiles(observations.visibility.value / 1000);
-	data.VisibilityUnit = ' mi.';
-	data.WindSpeed = kphToMph(data.WindSpeed);
-	data.WindUnit = 'MPH';
-	data.Pressure = pascalToInHg(data.Pressure).toFixed(2);
-	data.HeatIndex = celsiusToFahrenheit(data.HeatIndex);
-	data.WindChill = celsiusToFahrenheit(data.WindChill);
-	data.WindGust = kphToMph(data.WindGust);
-	return data;
-};
-
 const display = new CurrentWeather(1, 'current-weather');
 registerDisplay(display);
 

server/scripts/modules/currentweatherscroll.mjs

@@ -43,7 +43,7 @@ const incrementInterval = () => {
 
 const drawScreen = async () => {
 	// get the conditions
-	const data = await getCurrentWeather();
+	const data = await getCurrentWeather(() => this.stillWaiting());
 
 	// nothing to do if there's no data yet
 	if (!data) return;
@@ -75,10 +75,12 @@ const screens = [
 
 	// wind
 	(data) => {
-		let text = data.WindSpeed > 0
+		let text = '';
-			? `Wind: ${data.WindDirection} ${data.WindSpeed} ${data.WindUnit}`
+		if (data.WindSpeed > 0) {
-			: 'Wind: Calm';
+			text = `Wind: ${data.WindDirection} ${data.WindSpeed} ${data.WindUnit}`;
-
+		} else {
+			text = 'Wind: Calm';
+		}
 		if (data.WindGust > 0) {
 			text += `  Gusts to ${data.WindGust}`;
 		}
@@ -86,10 +88,7 @@ const screens = [
 	},
 
 	// visibility
-	(data) => {
+	(data) => `Visib: ${data.Visibility} ${data.VisibilityUnit}  Ceiling: ${data.Ceiling === 0 ? 'Unlimited' : `${data.Ceiling} ${data.CeilingUnit}`}`,
-		const distance = `${data.Ceiling} ${data.CeilingUnit}`;
-		return `Visib: ${data.Visibility} ${data.VisibilityUnit}  Ceiling: ${data.Ceiling === 0 ? 'Unlimited' : distance}`;
-	},
 ];
 
 // internal draw function with preset parameters

server/scripts/modules/extendedforecast.mjs

@@ -31,9 +31,9 @@ class ExtendedForecast extends WeatherDisplay {
 				retryCount: 3,
 				stillWaiting: () => this.stillWaiting(),
 			});
-		} catch (error) {
+		} catch (e) {
 			console.error('Unable to get extended forecast');
-			console.error(error.status, error.responseJSON);
+			console.error(e.status, e.responseJSON);
 			this.setStatus(STATUS.failed);
 			return;
 		}
@@ -52,11 +52,8 @@ class ExtendedForecast extends WeatherDisplay {
 
 		// create each day template
 		const days = forecast.map((Day) => {
-			const fill = {
+			const fill = {};
-				icon: { type: 'img', src: Day.icon },
+			fill.date = Day.dayName;
-				condition: Day.text,
-				date: Day.dayName,
-			};
 
 			const { low } = Day;
 			if (low !== undefined) {
@@ -64,6 +61,10 @@ class ExtendedForecast extends WeatherDisplay {
 			}
 			const { high } = Day;
 			fill['value-hi'] = Math.round(high);
+			fill.condition = Day.text;
+
+			// draw the icon
+			fill.icon = { type: 'img', src: Day.icon };
 
 			// return the filled template
 			return this.fillTemplate('day', fill);
@@ -122,13 +123,13 @@ const parse = (fullForecast) => {
 
 const shortenExtendedForecastText = (long) => {
 	const regexList = [
-		[/ and /gi, ' '],
+		[/ and /ig, ' '],
-		[/slight /gi, ''],
+		[/Slight /ig, ''],
-		[/chance /gi, ''],
+		[/Chance /ig, ''],
-		[/very /gi, ''],
+		[/Very /ig, ''],
-		[/patchy /gi, ''],
+		[/Patchy /ig, ''],
-		[/areas /gi, ''],
+		[/Areas /ig, ''],
-		[/dense /gi, ''],
+		[/Dense /ig, ''],
 		[/Thunderstorm/g, 'T\'Storm'],
 	];
 		// run all regexes
@@ -143,10 +144,10 @@ const shortenExtendedForecastText = (long) => {
 	let short1 = conditions[0].substr(0, 10);
 	let short2 = '';
 	if (conditions[1]) {
-		if (short1.endsWith('.')) {
+		if (!short1.endsWith('.')) {
-			short1 = short1.replace(/\./, '');
-		} else {
 			short2 = conditions[1].substr(0, 10);
+		} else {
+			short1 = short1.replace(/\./, '');
 		}
 
 		if (short2 === 'Blowing') {

server/scripts/modules/hazards.mjs

@@ -40,9 +40,9 @@ class Hazards extends WeatherDisplay {
 
 			// show alert indicator
 			if (this.data.length > 0) alert.classList.add('show');
-		} catch (error) {
+		} catch (e) {
 			console.error('Get hourly forecast failed');
-			console.error(error.status, error.responseJSON);
+			console.error(e.status, e.responseJSON);
 			if (this.isEnabled) this.setStatus(STATUS.failed);
 			// return undefined to other subscribers
 			this.getDataCallback(undefined);
@@ -85,15 +85,15 @@ class Hazards extends WeatherDisplay {
 		// set up the timing
 		this.timing.baseDelay = 20;
 		// 24 hours = 6 pages
-		const pages = Math.max(Math.ceil(list.scrollHeight / 400) - 3, 1);
+		const pages = Math.ceil(list.scrollHeight / 390); // first page is already displayed, last page doesn't happen
-		const timingStep = 400;
+		const timingStep = 75 * 4;
 		this.timing.delay = [150 + timingStep];
 		// add additional pages
 		for (let i = 0; i < pages; i += 1) this.timing.delay.push(timingStep);
 		// add the final 3 second delay
-		this.timing.delay.push(250);
+		this.timing.delay.push(150);
-		this.calcNavTiming();
 		this.setStatus(STATUS.loaded);
+		this.calcNavTiming();
 	}
 
 	drawCanvas() {

server/scripts/modules/hourly-graph.mjs

@@ -8,6 +8,7 @@ import { DateTime } from '../vendor/auto/luxon.mjs';
 
 class HourlyGraph extends WeatherDisplay {
 	constructor(navId, elemId, defaultActive) {
+		// special height and width for scrolling
 		super(navId, elemId, 'Hourly Graph', defaultActive);
 
 		// move the top right data into the correct location on load

server/scripts/modules/hourly.mjs

@@ -34,9 +34,9 @@ class Hourly extends WeatherDisplay {
 		try {
 			// get the forecast
 			forecast = await json(weatherParameters.forecastGridData, { retryCount: 3, stillWaiting: () => this.stillWaiting() });
-		} catch (error) {
+		} catch (e) {
 			console.error('Get hourly forecast failed');
-			console.error(error.status, error.responseJSON);
+			console.error(e.status, e.responseJSON);
 			if (this.isEnabled) this.setStatus(STATUS.failed);
 			// return undefined to other subscribers
 			this.getDataCallback(undefined);
@@ -141,6 +141,7 @@ const parseForecast = async (data) => {
 	const iceAccumulation = expand(data.iceAccumulation.values); 	// ice icon
 	const probabilityOfPrecipitation = expand(data.probabilityOfPrecipitation.values);	// rain icon
 	const snowfallAmount = expand(data.snowfallAmount.values);	// snow icon
+	const waveHeight = expand(data.waveHeight.values);
 
 	const icons = await determineIcon(skyCover, weather, iceAccumulation, probabilityOfPrecipitation, snowfallAmount, windSpeed);
 
@@ -152,6 +153,7 @@ const parseForecast = async (data) => {
 		probabilityOfPrecipitation: probabilityOfPrecipitation[idx],
 		skyCover: skyCover[idx],
 		icon: icons[idx],
+		waveHeight: waveHeight[idx],
 	}));
 };
 
@@ -183,7 +185,7 @@ const expand = (data) => {
 				result.push(item.value); // push data array
 			} // timestamp is after now
 			// increment start time by 1 hour
-			startTime += 3_600_000;
+			startTime += 3600000;
 		} while (startTime < endTime && result.length < 24);
 	}); // for each value
 

server/scripts/modules/icons.mjs

@@ -1,4 +1,3 @@
-/* eslint-disable unicorn/consistent-function-scoping */
 /* spell-checker: disable */
 
 const getWeatherRegionalIconFromIconLink = (link, _isNightTime) => {
@@ -9,7 +8,7 @@ const getWeatherRegionalIconFromIconLink = (link, _isNightTime) => {
 
 	// grab everything after the last slash ending at any of these: ?&,
 	const afterLastSlash = link.toLowerCase().match(/[^/]+$/)[0];
-	let conditionName = afterLastSlash.match(/(.*?)[&,.?]/)[1];
+	let conditionName = afterLastSlash.match(/(.*?)[,?&.]/)[1];
 	// using probability as a crude heavy/light indication where possible
 	const value = +(link.match(/,(\d{2,3})/) ?? [0, 100])[1];
 
@@ -88,7 +87,6 @@ const getWeatherRegionalIconFromIconLink = (link, _isNightTime) => {
 		return addPath('Light-Snow.gif');
 
 	case 'rain_snow':
-	case 'rain_snow-n':
 		return addPath('Rain-Snow-1992.gif');
 
 	case 'snow_fzra':
@@ -97,8 +95,6 @@ const getWeatherRegionalIconFromIconLink = (link, _isNightTime) => {
 
 	case 'fzra':
 	case 'fzra-n':
-	case 'rain_fzra':
-	case 'rain_fzra-n':
 		return addPath('Freezing-Rain-1992.gif');
 
 	case 'snow_sleet':
@@ -123,15 +119,10 @@ const getWeatherRegionalIconFromIconLink = (link, _isNightTime) => {
 	case 'tropical_storm':
 		return addPath('Thunderstorm.gif');
 
-	case 'wind':
 	case 'wind_few':
 	case 'wind_sct':
 	case 'wind_bkn':
 	case 'wind_ovc':
-	case 'wind-n':
-	case 'wind_few-n':
-	case 'wind_bkn-n':
-	case 'wind_ovc-n':
 		return addPath('Wind.gif');
 
 	case 'wind_skc':
@@ -164,7 +155,7 @@ const getWeatherIconFromIconLink = (link, _isNightTime) => {
 
 	// grab everything after the last slash ending at any of these: ?&,
 	const afterLastSlash = link.toLowerCase().match(/[^/]+$/)[0];
-	let conditionName = afterLastSlash.match(/(.*?)[&,.?]/)[1];
+	let conditionName = afterLastSlash.match(/(.*?)[,?&.]/)[1];
 	// using probability as a crude heavy/light indication where possible
 	const value = +(link.match(/,(\d{2,3})/) ?? [0, 100])[1];
 
@@ -212,9 +203,6 @@ const getWeatherIconFromIconLink = (link, _isNightTime) => {
 		return addPath('CC_Fog.gif');
 
 	case 'rain_sleet':
-	case 'rain_sleet-n':
-	case 'sleet':
-	case 'sleet-n':
 		return addPath('Sleet.gif');
 
 	case 'rain_showers':
@@ -250,8 +238,6 @@ const getWeatherIconFromIconLink = (link, _isNightTime) => {
 	case 'snow_fzra-n':
 	case 'fzra':
 	case 'fzra-n':
-	case 'rain_fzra':
-	case 'rain_fzra-n':
 		return addPath('CC_FreezingRain.gif');
 
 	case 'snow_sleet':
@@ -275,10 +261,9 @@ const getWeatherIconFromIconLink = (link, _isNightTime) => {
 	case 'wind_sct':
 	case 'wind_bkn':
 	case 'wind_ovc':
+		return addPath('CC_Windy.gif');
+
 	case 'wind_skc':
-	case 'wind_few-n':
-	case 'wind_bkn-n':
-	case 'wind_ovc-n':
 	case 'wind_skc-n':
 	case 'wind_sct-n':
 		return addPath('CC_Windy.gif');

server/scripts/modules/latestobservations.mjs

@@ -32,25 +32,31 @@ class LatestObservations extends WeatherDisplay {
 		const regionalStations = sortedStations.slice(0, 30);
 
 		// get data for regional stations
-		// get first 7 stations
+		const allConditions = await Promise.all(regionalStations.map(async (station) => {
-		const actualConditions = [];
+			try {
-		let lastStation = Math.min(regionalStations.length, 7);
+				const data = await json(`https://api.weather.gov/stations/${station.id}/observations/latest`, { retryCount: 3, stillWaiting: () => this.stillWaiting() });
-		let firstStation = 0;
+				// test for temperature, weather and wind values present
-		while (actualConditions.length < 7 && (lastStation) <= regionalStations.length) {
+				if (data.properties.temperature.value === null
-			// eslint-disable-next-line no-await-in-loop
+					|| data.properties.textDescription === ''
-			const someStations = await getStations(regionalStations.slice(firstStation, lastStation));
+					|| data.properties.windSpeed.value === null) return false;
-
+				// format the return values
-			actualConditions.push(...someStations);
+				return {
-			// update counters
+					...data.properties,
-			firstStation += lastStation;
+					StationId: station.id,
-			lastStation = Math.min(regionalStations.length + 1, firstStation + 7 - actualConditions.length);
+					city: station.city,
-		}
+				};
-
+			} catch (e) {
+				console.log(`Unable to get latest observations for ${station.id}`);
+				return false;
+			}
+		}));
+		// remove and stations that did not return data
+		const actualConditions = allConditions.filter((condition) => condition);
 		// cut down to the maximum of 7
 		this.data = actualConditions.slice(0, this.MaximumRegionalStations);
 
 		// test for at least one station
-		if (this.data.length === 0) {
+		if (this.data.length < 1) {
 			this.setStatus(STATUS.noData);
 			return;
 		}
@@ -73,12 +79,10 @@ class LatestObservations extends WeatherDisplay {
 			const	Temperature = Math.round(celsiusToFahrenheit(condition.temperature.value));
 			const WindSpeed = Math.round(kphToMph(condition.windSpeed.value));
 
-			const fill = {
+			const fill = {};
-				location: locationCleanup(condition.city).substr(0, 14),
+			fill.location = locationCleanup(condition.city).substr(0, 14);
-				temp: Temperature,
+			fill.temp = Temperature;
-				weather: shortenCurrentConditions(condition.textDescription).substr(0, 9),
+			fill.weather = shortenCurrentConditions(condition.textDescription).substr(0, 9);
-			};
-
 			if (WindSpeed > 0) {
 				fill.wind = windDirection + (Array(6 - windDirection.length - WindSpeed.toString().length).join(' ')) + WindSpeed.toString();
 			} else if (WindSpeed === 'NA') {
@@ -115,28 +119,5 @@ const shortenCurrentConditions = (_condition) => {
 	condition = condition.replace(/ with /, '/');
 	return condition;
 };
-
-const getStations = async (stations) => {
-	const stationData = await Promise.all(stations.map(async (station) => {
-		try {
-			const data = await json(`https://api.weather.gov/stations/${station.id}/observations/latest`, { retryCount: 1, stillWaiting: () => this.stillWaiting() });
-			// test for temperature, weather and wind values present
-			if (data.properties.temperature.value === null
-			|| data.properties.textDescription === ''
-			|| data.properties.windSpeed.value === null) return false;
-			// format the return values
-			return {
-				...data.properties,
-				StationId: station.id,
-				city: station.city,
-			};
-		} catch (error) {
-			console.log(`Unable to get latest observations for ${station.id}`);
-			return false;
-		}
-	}));
-	// filter false (no data or other error)
-	return stationData.filter((d) => d);
-};
 // register display
 registerDisplay(new LatestObservations(2, 'latest-observations'));

server/scripts/modules/localforecast.mjs

@@ -66,9 +66,9 @@ class LocalForecast extends WeatherDisplay {
 				retryCount: 3,
 				stillWaiting: () => this.stillWaiting(),
 			});
-		} catch (error) {
+		} catch (e) {
 			console.error(`GetWeatherForecast failed: ${weatherParameters.forecast}`);
-			console.error(error.status, error.responseJSON);
+			console.error(e.status, e.responseJSON);
 			this.setStatus(STATUS.failed);
 			return false;
 		}

server/scripts/modules/marineforecast.mjs

@@ -0,0 +1,139 @@
+// display extended forecast graphically
+// technically uses the same data as the local forecast, we'll let the browser do the caching of that
+
+import STATUS from './status.mjs';
+import WeatherDisplay from './weatherdisplay.mjs';
+import { registerDisplay } from './navigation.mjs';
+import getHourlyForecast from './hourly.mjs';
+
+class MarineForecast extends WeatherDisplay {
+	constructor(navId, elemId) {
+		super(navId, elemId, 'Marine Forecast', false);
+		// this.showOnProgress = false;
+
+		// set timings
+		this.timing.totalScreens = 1;
+	}
+
+	async getData() {
+		if (!super.getData()) return;
+
+		const hourlyForecast = await getHourlyForecast(() => this.stillWaiting());
+		if (hourlyForecast === undefined) {
+			this.setStatus(STATUS.failed);
+			return;
+		}
+
+		// test for all wave heights = 0, no data for wave heights
+		if (hourlyForecast.every((value) => !value.waveHeight)) {
+			// total screens = 0 to skip this display
+			this.totalScreens = 0;
+			this.setStatus(STATUS.noData);
+			return;
+		}
+
+		this.data =	hourlyForecast;
+		this.screenIndex = 0;
+		this.setStatus(STATUS.loaded);
+	}
+
+	async drawCanvas() {
+		super.drawCanvas();
+
+		// determine bounds
+		// grab the first three or second set of three array elements
+		const forecast = this.data.slice(0, 2);
+
+		// create each day template
+		const days = forecast.map((Day) => {
+			const fill = {};
+			const waveHeight = Math.round(Day.waveHeight * 3.281);
+			fill.date = Day.dayName;
+			fill['wind-dir'] = Day.windDirection;
+			fill['wind-speed'] = '10 - 15kts';
+			fill['wave-height'] = `${waveHeight}'`;
+			fill['wave-desc'] = waveDesc(waveHeight);
+
+			const { low } = Day;
+			if (low !== undefined) {
+				fill['value-lo'] = Math.round(low);
+			}
+			const { high } = Day;
+			fill['value-hi'] = Math.round(high);
+			fill.condition = Day.text;
+
+			// draw the icon
+			fill['wave-icon'] = { type: 'img', src: waveImage('') };
+
+			// return the filled template
+			return this.fillTemplate('day', fill);
+		});
+
+		// empty and update the container
+		const dayContainer = this.elem.querySelector('.day-container');
+		dayContainer.innerHTML = '';
+		dayContainer.append(...days);
+		this.finishDraw();
+	}
+}
+
+const waveImage = (conditions) => {
+	const color = 'rgb(172, 165, 251)';
+	const canvas = document.createElement('canvas');
+	canvas.width = 150;
+	canvas.height = 20;
+	const context = canvas.getContext('2d');
+	context.imageSmoothingEnabled = false;
+
+	let y = 0;
+	let r = 35;
+	let arc1 = Math.PI * 0.3;
+	let arc2 = Math.PI * 0.7;
+
+	switch (conditions) {
+	case 'CHOPPY':
+		y = -10;
+		arc1 = Math.PI * 0.2;
+		arc2 = Math.PI * 0.8;
+		r = 25;
+		break;
+
+	case 'ROUGH':
+		y = -5;
+		arc1 = Math.PI * 0.1;
+		arc2 = Math.PI * 0.9;
+		r = 20;
+		break;
+
+	case 'LIGHT':
+	default:
+		y = -20;
+		arc1 = Math.PI * 0.3;
+		arc2 = Math.PI * 0.7;
+		r = 35;
+		break;
+	}
+
+	context.beginPath();
+	context.arc(35, y, r, arc1, arc2);
+	context.strokeStyle = color;
+	context.lineWidth = 4;
+	context.stroke();
+	context.beginPath();
+	context.arc(75, y, r, arc1, arc2);
+	context.stroke();
+	context.beginPath();
+	context.arc(115, y, r, arc1, arc2);
+	context.stroke();
+
+	return canvas.toDataURL();
+};
+
+const waveDesc = (waveHeight) => {
+	if (waveHeight > 7) return 'ROUGH';
+	if (waveHeight > 4) return 'CHOPPY';
+	return 'LIGHT';
+};
+
+// register display
+registerDisplay(new MarineForecast(11, 'marine-forecast'));

server/scripts/modules/navigation.mjs

@@ -16,8 +16,7 @@ const weatherParameters = {};
 
 // auto refresh
 const AUTO_REFRESH_INTERVAL_MS = 500;
-const AUTO_REFRESH_TIME_MS = 600_000; // 10 min.
+const AUTO_REFRESH_TIME_MS = 600000; // 10 min.
-const CHK_AUTO_REFRESH_SELECTOR = '#chkAutoRefresh';
 let AutoRefreshIntervalId = null;
 let AutoRefreshCountMs = 0;
 
@@ -29,19 +28,25 @@ const init = async () => {
 	// auto refresh
 	const autoRefresh = localStorage.getItem('autoRefresh');
 	if (!autoRefresh || autoRefresh === 'true') {
-		document.querySelector(CHK_AUTO_REFRESH_SELECTOR).checked = true;
+		document.getElementById('chkAutoRefresh').checked = true;
 	} else {
-		document.querySelector(CHK_AUTO_REFRESH_SELECTOR).checked = false;
+		document.getElementById('chkAutoRefresh').checked = false;
 	}
-	document.querySelector(CHK_AUTO_REFRESH_SELECTOR).addEventListener('change', autoRefreshChange);
+	document.getElementById('chkAutoRefresh').addEventListener('change', autoRefreshChange);
 	generateCheckboxes();
 };
 
 const message = (data) => {
 	// dispatch event
-	if (!data.type) return false;
+	if (!data.type) return;
-	if (data.type === 'navButton') return handleNavButton(data.message);
+	switch (data.type) {
-	return console.error(`Unknown event ${data.type}`);
+	case 'navButton':
+		handleNavButton(data.message);
+		break;
+
+	default:
+		console.error(`Unknown event ${data.type}`);
+	}
 };
 
 const getWeather = async (latLon, haveDataCallback) => {
@@ -56,7 +61,6 @@ const getWeather = async (latLon, haveDataCallback) => {
 	const StationId = stations.features[0].properties.stationIdentifier;
 
 	let { city } = point.properties.relativeLocation.properties;
-	const { state } = point.properties.relativeLocation.properties;
 
 	if (StationId in StationInfo) {
 		city = StationInfo[StationId].city;
@@ -72,8 +76,8 @@ const getWeather = async (latLon, haveDataCallback) => {
 	weatherParameters.stationId = StationId;
 	weatherParameters.weatherOffice = point.properties.cwa;
 	weatherParameters.city = city;
-	weatherParameters.state = state;
+	weatherParameters.state = point.properties.relativeLocation.properties.state;
-	weatherParameters.timeZone = point.properties.timeZone;
+	weatherParameters.timeZone = point.properties.relativeLocation.properties.timeZone;
 	weatherParameters.forecast = point.properties.forecast;
 	weatherParameters.forecastGridData = point.properties.forecastGridData;
 	weatherParameters.stations = stations.features;
@@ -83,7 +87,7 @@ const getWeather = async (latLon, haveDataCallback) => {
 
 	// draw the progress canvas and hide others
 	hideAllCanvases();
-	document.querySelector('#loading').style.display = 'none';
+	document.getElementById('loading').style.display = 'none';
 	if (progress) {
 		await progress.drawCanvas();
 		progress.showCanvas();
@@ -105,19 +109,6 @@ const updateStatus = (value) => {
 	// calculate first enabled display
 	const firstDisplayIndex = displays.findIndex((display) => display.enabled && display.timing.totalScreens > 0);
 
-	// value.id = 0 is hazards, if they fail to load hot-wire a new value.id to the current display to see if it needs to be loaded
-	// typically this plays out as current conditions loads, then hazards fails.
-	if (value.id === 0 && (value.status === STATUS.failed || value.status === STATUS.retrying)) {
-		value.id = firstDisplayIndex;
-		value.status = displays[firstDisplayIndex].status;
-	}
-
-	// if hazards data arrives after the firstDisplayIndex loads, then we need to hot wire this to the first display
-	if (value.id === 0 && value.status === STATUS.loaded && displays[0].timing.totalScreens === 0) {
-		value.id = firstDisplayIndex;
-		value.status = displays[firstDisplayIndex].status;
-	}
-
 	// if this is the first display and we're playing, load it up so it starts playing
 	if (isPlaying() && value.id === firstDisplayIndex && value.status === STATUS.loaded) {
 		navTo(msg.command.firstFrame);
@@ -202,7 +193,9 @@ const loadDisplay = (direction) => {
 		if (displays[idx].status === STATUS.loaded && displays[idx].timing.totalScreens > 0) break;
 	}
 	// if new display index is less than current display a wrap occurred, test for reload timeout
-	if (idx <= curIdx && refreshCheck()) return;
+	if (idx <= curIdx) {
+		if (refreshCheck()) return;
+	}
 	const newDisplay = displays[idx];
 	// hide all displays
 	hideAllCanvases();
@@ -212,12 +205,15 @@ const loadDisplay = (direction) => {
 };
 
 // get the current display index or value
-const currentDisplayIndex = () => displays.findIndex((display) => display.active);
+const currentDisplayIndex = () => {
+	const index = displays.findIndex((display) => display.active);
+	return index;
+};
 const currentDisplay = () => displays[currentDisplayIndex()];
 
 const setPlaying = (newValue) => {
 	playing = newValue;
-	const playButton = document.querySelector('#NavigatePlay');
+	const playButton = document.getElementById('NavigatePlay');
 	localStorage.setItem('play', playing);
 
 	if (playing) {
@@ -269,14 +265,14 @@ const getDisplay = (index) => displays[index];
 
 // resize the container on a page resize
 const resize = () => {
-	const widthZoomPercent = (document.querySelector('#divTwcBottom').getBoundingClientRect().width) / 640;
+	const widthZoomPercent = (document.getElementById('divTwcBottom').getBoundingClientRect().width) / 640;
 	const heightZoomPercent = (window.innerHeight) / 480;
 
 	const scale = Math.min(widthZoomPercent, heightZoomPercent);
 	if (scale < 1.0 || document.fullscreenElement) {
-		document.querySelector('#container').style.zoom = scale;
+		document.getElementById('container').style.zoom = scale;
 	} else {
-		document.querySelector('#container').style.zoom = 1;
+		document.getElementById('container').style.zoom = 1;
 	}
 };
 
@@ -294,7 +290,7 @@ const registerDisplay = (display) => {
 };
 
 const generateCheckboxes = () => {
-	const availableDisplays = document.querySelector('#enabledDisplays');
+	const availableDisplays = document.getElementById('enabledDisplays');
 
 	if (!availableDisplays) return;
 	// generate checkboxes
@@ -311,11 +307,11 @@ const registerProgress = (_progress) => {
 };
 
 const populateWeatherParameters = (params) => {
-	document.querySelector('#spanCity').innerHTML = `${params.city}, `;
+	document.getElementById('spanCity').innerHTML = `${params.city}, `;
-	document.querySelector('#spanState').innerHTML = params.state;
+	document.getElementById('spanState').innerHTML = params.state;
-	document.querySelector('#spanStationId').innerHTML = params.stationId;
+	document.getElementById('spanStationId').innerHTML = params.stationId;
-	document.querySelector('#spanRadarId').innerHTML = params.radarId;
+	document.getElementById('spanRadarId').innerHTML = params.radarId;
-	document.querySelector('#spanZoneId').innerHTML = params.zoneId;
+	document.getElementById('spanZoneId').innerHTML = params.zoneId;
 };
 
 const autoRefreshChange = (e) => {
@@ -332,12 +328,12 @@ const autoRefreshChange = (e) => {
 
 const AssignLastUpdate = (date) => {
 	if (date) {
-		document.querySelector('#spanLastRefresh').innerHTML = date.toLocaleString('en-US', {
+		document.getElementById('spanLastRefresh').innerHTML = date.toLocaleString('en-US', {
 			weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short',
 		});
-		if (document.querySelector(CHK_AUTO_REFRESH_SELECTOR).checked) startAutoRefreshTimer();
+		if (document.getElementById('chkAutoRefresh').checked) startAutoRefreshTimer();
 	} else {
-		document.querySelector('#spanLastRefresh').innerHTML = '(none)';
+		document.getElementById('spanLastRefresh').innerHTML = '(none)';
 	}
 };
 
@@ -364,7 +360,7 @@ const startAutoRefreshTimer = () => {
 			RemainingMs = 0;
 		}
 		const dt = new Date(RemainingMs);
-		document.querySelector('#spanRefreshCountDown').innerHTML = `${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}`;
+		document.getElementById('spanRefreshCountDown').innerHTML = `${dt.getMinutes() < 10 ? `0${dt.getMinutes()}` : dt.getMinutes()}:${dt.getSeconds() < 10 ? `0${dt.getSeconds()}` : dt.getSeconds()}`;
 
 		// Time has elapsed.
 		if (AutoRefreshCountMs >= AUTO_REFRESH_TIME_MS && !isPlaying()) loadTwcData();
@@ -375,7 +371,7 @@ const startAutoRefreshTimer = () => {
 const stopAutoRefreshTimer = () => {
 	if (AutoRefreshIntervalId) {
 		window.clearInterval(AutoRefreshIntervalId);
-		document.querySelector('#spanRefreshCountDown').innerHTML = '--:--';
+		document.getElementById('spanRefreshCountDown').innerHTML = '--:--';
 		AutoRefreshIntervalId = null;
 	}
 };
@@ -397,8 +393,6 @@ const registerRefreshData = (callback) => {
 	loadTwcData.callback = callback;
 };
 
-const timeZone = () => weatherParameters.timeZone;
-
 export {
 	updateStatus,
 	displayNavMessage,
@@ -414,5 +408,4 @@ export {
 	latLonReceived,
 	stopAutoRefreshTimer,
 	registerRefreshData,
-	timeZone,
 };

server/scripts/modules/progress.mjs

@@ -18,7 +18,7 @@ class Progress extends WeatherDisplay {
 
 		// setup event listener for dom-required initialization
 		document.addEventListener('DOMContentLoaded', () => {
-			this.version = document.querySelector('#version').innerHTML;
+			this.version = document.getElementById('version').innerHTML;
 			this.elem.querySelector('.container').addEventListener('click', this.lineClick.bind(this));
 		});
 
@@ -36,9 +36,9 @@ class Progress extends WeatherDisplay {
 		if (!displays) return;
 		const lines = displays.map((display, index) => {
 			if (display.showOnProgress === false) return false;
-			const fill = {
+			const fill = {};
-				name: display.name,
+
-			};
+			fill.name = display.name;
 
 			const statusClass = calcStatusClass(display.status);
 

server/scripts/modules/radar.mjs

@@ -5,7 +5,7 @@ import { loadImg } from './utils/image.mjs';
 import { text } from './utils/fetch.mjs';
 import { rewriteUrl } from './utils/cors.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
-import { registerDisplay, timeZone } from './navigation.mjs';
+import { registerDisplay } from './navigation.mjs';
 import * as utils from './radar-utils.mjs';
 
 class Radar extends WeatherDisplay {
@@ -71,24 +71,25 @@ class Radar extends WeatherDisplay {
 		const lists = (await Promise.all(baseUrls.map(async (url) => {
 			try {
 			// get a list of available radars
-				return text(url, { cors: true });
+				const radarHtml = await text(url, { cors: true });
-			} catch (error) {
+				return radarHtml;
+			} catch (e) {
 				console.log('Unable to get list of radars');
-				console.error(error);
+				console.error(e);
 				this.setStatus(STATUS.failed);
 				return false;
 			}
 		}))).filter((d) => d);
 
 		// convert to an array of gif urls
-		const pngs = lists.flatMap((html, htmlIdx) => {
+		const pngs = lists.map((html, htmlIdx) => {
 			const parser = new DOMParser();
 			const xmlDoc = parser.parseFromString(html, 'text/html');
 			// add the base url
 			const base = xmlDoc.createElement('base');
 			base.href = baseUrls[htmlIdx];
 			xmlDoc.head.append(base);
-			const anchors = xmlDoc.querySelectorAll('a');
+			const anchors = xmlDoc.getElementsByTagName('a');
 			const urls = [];
 			Array.from(anchors).forEach((elem) => {
 				if (elem.innerHTML?.includes('.png') && elem.innerHTML?.includes('n0r_'))	{
@@ -96,7 +97,7 @@ class Radar extends WeatherDisplay {
 				}
 			});
 			return urls;
-		});
+		}).flat();
 
 		// get the last few images
 		const sortedPngs = pngs.sort((a, b) => (Date(a) < Date(b) ? -1 : 1));
@@ -158,7 +159,7 @@ class Radar extends WeatherDisplay {
 					zone: 'UTC',
 				}).setZone();
 			} else {
-				time = DateTime.fromHTTP(response.headers.get('last-modified')).setZone(timeZone());
+				time = DateTime.fromHTTP(response.headers.get('last-modified')).setZone();
 			}
 
 			// assign to an html image element
@@ -213,12 +214,8 @@ class Radar extends WeatherDisplay {
 		const timePadded = time.length >= 8 ? time : `&nbsp;${time}`;
 		this.elem.querySelector('.header .right .time').innerHTML = timePadded;
 
-		// get image offset calculation
-		// is slides slightly because of scaling so we have to take a measurement from the rendered page
-		const actualFrameHeight = this.elem.querySelector('.frame').getBoundingClientRect().height;
-
 		// scroll to image
-		this.elem.querySelector('.scroll-area').style.top = `${-this.screenIndex * actualFrameHeight}px`;
+		this.elem.querySelector('.scroll-area').style.top = `${-this.screenIndex * 371}px`;
 
 		this.finishDraw();
 	}

server/scripts/modules/regionalforecast-utils.mjs

@@ -23,14 +23,12 @@ const getRegionalObservation = async (point, city) => {
 		const observation = await json(`${station}/observations/latest`);
 		// preload the image
 		if (!observation.properties.icon) return false;
-		const icon = getWeatherRegionalIconFromIconLink(observation.properties.icon, !observation.properties.daytime);
+		preloadImg(getWeatherRegionalIconFromIconLink(observation.properties.icon, !observation.properties.daytime));
-		if (!icon) return false;
-		preloadImg(icon);
 		// return the observation
 		return observation.properties;
-	} catch (error) {
+	} catch (e) {
 		console.log(`Unable to get regional observations for ${city.Name ?? city.city}`);
-		console.error(error.status, error.responseJSON);
+		console.error(e.status, e.responseJSON);
 		return false;
 	}
 };
@@ -195,7 +193,7 @@ const getXYForCityHI = (City, MaxLatitude, MinLongitude) => {
 };
 
 // to fit on the map, remove anything after punctuation and then limit to 15 characters
-const formatCity = (city) => city.match(/[^,/;\\-]*/)[0].substr(0, 12);
+const formatCity = (city) => city.match(/[^-;/\\,]*/)[0].substr(0, 12);
 
 export {
 	buildForecast,

server/scripts/modules/regionalforecast.mjs

@@ -87,12 +87,9 @@ class RegionalForecast extends WeatherDisplay {
 
 				// wait for the regional observation if it's not done yet
 				const observation = await observationPromise;
-
-				if (!observation) return false;
-
 				// format the observation the same as the forecast
 				const regionalObservation = {
-					daytime: !!/\/day\//.test(observation.icon),
+					daytime: !!observation.icon.match(/\/day\//),
 					temperature: celsiusToFahrenheit(observation.temperature.value),
 					name: utils.formatCity(city.city),
 					icon: observation.icon,
@@ -113,9 +110,9 @@ class RegionalForecast extends WeatherDisplay {
 					utils.buildForecast(forecast.properties.periods[1], city, cityXY),
 					utils.buildForecast(forecast.properties.periods[2], city, cityXY),
 				];
-			} catch (error) {
+			} catch (e) {
 				console.log(`No regional forecast data for '${city.name ?? city.city}'`);
-				console.log(error);
+				console.log(e);
 				return false;
 			}
 		}));
@@ -159,9 +156,11 @@ class RegionalForecast extends WeatherDisplay {
 			const dayName = forecastDate.toLocaleString({ weekday: 'long' });
 			titleTop.innerHTML = 'Forecast for';
 			// draw the title
-			titleBottom.innerHTML = data[0][this.screenIndex].daytime
+			if (data[0][this.screenIndex].daytime) {
-				? dayName
+				titleBottom.innerHTML = dayName;
-				: `${dayName} Night`;
+			} else {
+				titleBottom.innerHTML = `${dayName} Night`;
+			}
 		}
 
 		// draw the map
@@ -180,11 +179,9 @@ class RegionalForecast extends WeatherDisplay {
 			const { temperature } = period;
 			fill.temp = temperature;
 
-			const { x, y } = period;
-
 			const elem = this.fillTemplate('location', fill);
-			elem.style.left = `${x}px`;
+			elem.style.left = `${period.x}px`;
-			elem.style.top = `${y}px`;
+			elem.style.top = `${period.y}px`;
 
 			return elem;
 		});

server/scripts/modules/travelforecast.mjs

@@ -45,9 +45,9 @@ class TravelForecast extends WeatherDisplay {
 					name: city.Name,
 					icon: getWeatherRegionalIconFromIconLink(forecast.properties.periods[todayShift].icon),
 				};
-			} catch (error) {
+			} catch (e) {
 				console.error(`GetTravelWeather for ${city.Name} failed`);
-				console.error(error.status, error.responseJSON);
+				console.error(e.status, e.responseJSON);
 				return { name: city.Name, error: true };
 			}
 		});
@@ -57,7 +57,7 @@ class TravelForecast extends WeatherDisplay {
 		this.data = forecasts;
 
 		// test for some data available in at least one forecast
-		const hasData = this.data.some((forecast) => forecast.high);
+		const hasData = this.data.reduce((acc, forecast) => acc || forecast.high, false);
 		if (!hasData) {
 			this.setStatus(STATUS.noData);
 			return;
@@ -77,9 +77,10 @@ class TravelForecast extends WeatherDisplay {
 
 		const lines = cities.map((city) => {
 			if (city.error) return false;
-			const fillValues = {
+			const fillValues = {};
-				city,
+
-			};
+			// city name
+			fillValues.city = city;
 
 			// check for forecast data
 			if (city.icon) {
@@ -93,9 +94,8 @@ class TravelForecast extends WeatherDisplay {
 
 				fillValues.low = lowString;
 				fillValues.high = highString;
-				const { icon } = city;
 
-				fillValues.icon = { type: 'img', src: icon };
+				fillValues.icon = { type: 'img', src: city.icon };
 			} else {
 				fillValues.error = 'NO TRAVEL DATA AVAILABLE';
 			}

server/scripts/modules/utils/fetch.mjs

@@ -21,7 +21,7 @@ const fetchAsync = async (_url, responseType, _params = {}) => {
 	if (params.cors === true) corsUrl = rewriteUrl(_url);
 	const url = new URL(corsUrl, `${window.location.origin}/`);
 	// match the security protocol when not on localhost
-	url.protocol = window.location.hostname === 'localhost' ? url.protocol : window.location.protocol;
+	url.protocol = window.location.hostname !== 'localhost' ? window.location.protocol : url.protocol;
 	// add parameters if necessary
 	if (params.data) {
 		Object.keys(params.data).forEach((key) => {
@@ -73,7 +73,7 @@ const doFetch = (url, params) => new Promise((resolve, reject) => {
 		// out of retries
 		return resolve(response);
 	})
-		.catch((error) => reject(error));
+		.catch((e) => reject(e));
 });
 
 const delay = (time, func, ...args) => new Promise((resolve) => {
@@ -87,8 +87,8 @@ const retryDelay = (retryNumber) => {
 	case 1: return 1000;
 	case 2: return 2000;
 	case 3: return 5000;
-	case 4: return 10_000;
+	case 4: return 10000;
-	default: return 30_000;
+	default: return 30000;
 	}
 };
 

server/scripts/modules/utils/string.mjs

@@ -2,11 +2,11 @@ const locationCleanup = (input) => {
 	// regexes to run
 	const regexes = [
 		// "Chicago / West Chicago", removes before slash
-		/^[ A-Za-z]+ \/ /,
+		/^[A-Za-z ]+ \/ /,
 		// "Chicago/Waukegan" removes before slash
-		/^[ A-Za-z]+\//,
+		/^[A-Za-z ]+\//,
 		// "Chicago, Chicago O'hare" removes before comma
-		/^[ A-Za-z]+, /,
+		/^[A-Za-z ]+, /,
 	];
 
 	// run all regexes

server/scripts/modules/utils/units.mjs

@@ -2,11 +2,11 @@
 
 const round2 = (value, decimals) => Math.trunc(value * 10 ** decimals) / 10 ** decimals;
 
-const kphToMph = (Kph) => Math.round(Kph / 1.609_34);
+const kphToMph = (Kph) => Math.round(Kph / 1.60934);
 const celsiusToFahrenheit = (Celsius) => Math.round((Celsius * 9) / 5 + 32);
-const kilometersToMiles = (Kilometers) => Math.round(Kilometers / 1.609_34);
+const kilometersToMiles = (Kilometers) => Math.round(Kilometers / 1.60934);
 const metersToFeet = (Meters) => Math.round(Meters / 0.3048);
-const pascalToInHg = (Pascal) => round2(Pascal * 0.000_295_3, 2);
+const pascalToInHg = (Pascal) => round2(Pascal * 0.0002953, 2);
 
 export {
 	kphToMph,

server/scripts/modules/utils/weather.mjs

@@ -3,9 +3,9 @@ import { json } from './fetch.mjs';
 const getPoint = async (lat, lon) => {
 	try {
 		return await json(`https://api.weather.gov/points/${lat},${lon}`);
-	} catch (error) {
+	} catch (e) {
 		console.log(`Unable to get point ${lat}, ${lon}`);
-		console.error(error);
+		console.error(e);
 		return false;
 	}
 };

server/scripts/modules/weatherdisplay.mjs

@@ -2,8 +2,9 @@
 
 import STATUS, { calcStatusClass, statusClasses } from './status.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
+import { elemForEach } from './utils/elem.mjs';
 import {
-	msg, displayNavMessage, isPlaying, updateStatus, timeZone,
+	msg, displayNavMessage, isPlaying, updateStatus,
 } from './navigation.mjs';
 
 class WeatherDisplay {
@@ -53,7 +54,11 @@ class WeatherDisplay {
 		// get the saved status of the checkbox
 		let savedStatus = window.localStorage.getItem(`display-enabled: ${this.elemId}`);
 		if (savedStatus === null) savedStatus = defaultEnabled;
-		this.isEnabled = !!((savedStatus === 'true' || savedStatus === true));
+		if (savedStatus === 'true' || savedStatus === true) {
+			this.isEnabled = true;
+		} else {
+			this.isEnabled = false;
+		}
 
 		// refresh (or initially store the state of the checkbox)
 		window.localStorage.setItem(`display-enabled: ${this.elemId}`, this.isEnabled);
@@ -168,22 +173,20 @@ class WeatherDisplay {
 		// only draw if canvas is active to conserve battery
 		if (!this.active) return;
 		// Get the current date and time.
-		const now = DateTime.local().setZone(timeZone());
+		const now = DateTime.local();
 
 		// time = "11:35:08 PM";
 		const time = now.toLocaleString(DateTime.TIME_WITH_SECONDS).padStart(11, ' ');
-		const date = now.toFormat(' ccc LLL ') + now.day.toString().padStart(2, ' ');
 
-		const dateElem = this.elem.querySelector('.date-time.date');
+		if (this.lastTime !== time) {
-		const timeElem = this.elem.querySelector('.date-time.time');
+			elemForEach('.date-time.time', (elem) => { elem.innerHTML = time.toUpperCase(); });
-
-		if (timeElem && this.lastTime !== time) {
-			timeElem.innerHTML = time.toUpperCase();
 		}
 		this.lastTime = time;
 
-		if (dateElem && this.lastDate !== date) {
+		const date = now.toFormat(' ccc LLL ') + now.day.toString().padStart(2, ' ');
-			dateElem.innerHTML = date.toUpperCase();
+
+		if (this.lastDate !== date) {
+			elemForEach('.date-time.date', (elem) => { elem.innerHTML = date.toUpperCase(); });
 		}
 		this.lastDate = date;
 	}
@@ -249,13 +252,17 @@ class WeatherDisplay {
 		if (nextScreenIndex === this.screenIndex) return;
 
 		// test for -1 (no screen displayed yet)
-		this.screenIndex = nextScreenIndex === -1 ? 0 : nextScreenIndex;
+		if (nextScreenIndex === -1) {
+			this.screenIndex = 0;
+		} else {
+			this.screenIndex = nextScreenIndex;
+		}
 
 		// call the appropriate screen index change method
-		if (this.screenIndexChange) {
+		if (!this.screenIndexChange) {
-			this.screenIndexChange(this.screenIndex);
-		} else {
 			await this.drawCanvas();
+		} else {
+			this.screenIndexChange(this.screenIndex);
 		}
 		this.showCanvas();
 	}
@@ -369,7 +376,7 @@ class WeatherDisplay {
 
 	loadTemplates() {
 		this.templates = {};
-		this.elem = document.querySelector(`#${this.elemId}-html`);
+		this.elem = document.getElementById(`${this.elemId}-html`);
 		if (!this.elem) return;
 		const templates = this.elem.querySelectorAll('.template');
 		templates.forEach((template) => {

server/styles/scss/_marine-forecast.scss

@@ -0,0 +1,98 @@
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+
+#marine-forecast-html.weather-display {
+	background-image: url('../images/BackGround8_1.png');
+}
+
+.weather-display .main.marine-forecast {
+	font-family: 'Star4000';
+	font-size: 24pt;
+	@include u.text-shadow();
+
+	.advisory {
+		width: 100%;
+		height: 90px;
+		overflow: hidden;
+
+		.advisory-text {
+			border: 4px solid black;
+			width: 75%;
+			margin-left: auto;
+			margin-right: auto;
+			text-align: center;
+			margin-top: 40px;
+			;
+		}
+	}
+
+	.headers {
+		display: inline-block;
+		vertical-align: top;
+
+		.winds {
+			text-align: right;
+			width: 150px;
+			margin-top: 42px;
+			margin-bottom: 60px;
+		}
+	}
+
+	.day-container {
+		display: inline-block;
+	}
+
+	.day {
+		padding: 5px;
+		width: 165px;
+		display: inline-block;
+		margin: 0px 15px;
+		text-align: center;
+
+		.date {
+			color: c.$title-color;
+		}
+
+		.wave {
+			border: 4px solid #b09ffb;
+
+			.wave-icon {
+				height: 20px;
+
+				img {
+					display: block;
+					margin-left: auto;
+					margin-right: auto;
+				}
+			}
+		}
+
+		.temperatures {
+			width: 100%;
+			margin-top: 5px;
+
+			.temperature-block {
+				display: inline-block;
+				width: 44%;
+				vertical-align: top;
+
+				>div {
+					text-align: center;
+				}
+
+				.value {
+					font-family: 'Star4000 Large';
+					margin-top: 4px;
+				}
+
+				&.lo .label {
+					color: c.$extended-low;
+				}
+
+				&.hi .label {
+					color: c.$title-color;
+				}
+			}
+		}
+	}
+}

server/styles/scss/_page.scss

@@ -20,83 +20,72 @@ body {
 	}
 }
 
-#divQuery {
+input,
-	max-width: 640px;
+button {
+	font-family: "Star4000";
+}
 
-	.buttons {
+#imgGetGps {
-		display: inline-block;
+	height: 13px;
-		width: 150px;
+	vertical-align: middle;
-		text-align: right;
+}
 
-		#imgGetGps {
+#txtAddress {
-			height: 13px;
+	width: 490px;
-			vertical-align: middle;
+	font-size: 16pt;
-		}
+	max-width: calc(100% - 8px);
 
-		button {
+	@media (prefers-color-scheme: dark) {
-			font-size: 16pt;
+		background-color: #000000;
+		color: white;
+		border: 1px solid darkgray;
+	}
+}
+
+#btnGetGps,
+#btnGetLatLng,
+#btnClearQuery {
+	font-size: 16pt;
+
+	@media (prefers-color-scheme: dark) {
+		background-color: #000000;
+		color: white;
+	}
+
+	border: 1px solid darkgray;
+}
+
+#btnGetGps {
+	img {
+
+		&.dark {
+			display: none;
 
 			@media (prefers-color-scheme: dark) {
-				background-color: #000000;
+				display: inline-block;
-				color: white;
 			}
-
-			border: 1px solid darkgray;
 		}
 
-		#btnGetGps {
+		&.light {
-			img {
+			@media (prefers-color-scheme: dark) {
-
+				display: none;
-				&.dark {
-					display: none;
-
-					@media (prefers-color-scheme: dark) {
-						display: inline-block;
-					}
-				}
-
-				&.light {
-					@media (prefers-color-scheme: dark) {
-						display: none;
-					}
-				}
-			}
-
-			&.active {
-				background-color: black;
-
-				@media (prefers-color-scheme: dark) {
-					background-color: white;
-				}
-
-				img {
-					filter: invert(1);
-				}
 			}
 		}
 	}
 
-	input,
+	&.active {
-	button {
+		background-color: black;
-		font-family: "Star4000";
-	}
-
-	#txtAddress {
-		width: calc(100% - 170px);
-		max-width: 490px;
-		font-size: 16pt;
-		min-width: 200px;
-		display: inline-block;
 
 		@media (prefers-color-scheme: dark) {
-			background-color: #000000;
+			background-color: white;
-			color: white;
+		}
-			border: 1px solid darkgray;
+
+		img {
+			filter: invert(1);
 		}
 	}
-
-	
 }
+
 .autocomplete-suggestions {
 	background-color: #ffffff;
 	border: 1px solid #000000;
@@ -104,19 +93,19 @@ body {
 	@media (prefers-color-scheme: dark) {
 		background-color: #000000;
 	}
+}
 
-	.autocomplete-suggestion {
+.autocomplete-suggestion {
-		/*padding: 2px 5px;*/
+	/*padding: 2px 5px;*/
-		white-space: nowrap;
+	white-space: nowrap;
-		overflow: hidden;
+	overflow: hidden;
-		text-overflow: ellipsis;
+	text-overflow: ellipsis;
-		font-size: 16pt;
+	font-size: 16pt;
-	}
+}
 
-	.autocomplete-selected {
+.autocomplete-selected {
-		background-color: #0000ff;
+	background-color: #0000ff;
-		color: #ffffff;
+	color: #ffffff;
-	}
 }
 
 #divTwc {

server/styles/scss/main.scss

@@ -11,4 +11,5 @@
 @import 'radar';
 @import 'regional-forecast';
 @import 'almanac';
-@import 'hazards';
+@import 'hazards';
+@import 'marine-forecast';

tests/README.md

@@ -1 +0,0 @@
-Currently, tests take a different approach from typical unit testing. The test methodology loads several forecasts for different locations and logs them all to one logger so errors can be found such as missing icons, locations that do not have all of the necessary data or other changes that may occur between geographical locations.

tests/index.js

@@ -1,42 +0,0 @@
-const puppeteer = require('puppeteer');
-const { setTimeout } = require('node:timers/promises');
-const { readFile } = require('fs/promises');
-const messageFormatter = require('./messageformatter');
-
-(async () => {
-	const browser = await puppeteer.launch({
-		// headless: false,
-		slowMo: 10,
-		timeout: 10_000,
-		dumpio: true,
-	});
-
-	// get the list of locations
-	const LOCATIONS = JSON.parse(await readFile('./tests/locations.json'));
-
-	// get the page
-	const page = (await browser.pages())[0];
-	await page.goto('http://localhost:8080');
-
-	page.on('console', messageFormatter);
-
-	// run all the locations
-	for (let i = 0; i < LOCATIONS.length; i += 1) {
-		const location = LOCATIONS[i];
-		console.log(location);
-		// eslint-disable-next-line no-await-in-loop
-		await tester(location, page);
-	}
-
-	browser.close();
-})();
-
-const tester = async (location, page) => {
-	// Set the address
-	await page.type('#txtAddress', location);
-	await setTimeout(500);
-	// get the page
-	await page.click('#btnGetLatLng');
-	// wait for errors
-	await setTimeout(5000);
-};

tests/locations.json

@@ -1,52 +0,0 @@
-[
-	"New York, New York",
-	"Los Angeles, California",
-	"Chicago, Illinois",
-	"Houston, Texas",
-	"Phoenix, Arizona",
-	"Philadelphia, Pennsylvania",
-	"San Antonio, Texas",
-	"San Diego, California",
-	"Dallas, Texas",
-	"San Jose, California",
-	"Austin, Texas",
-	"Jacksonville, Florida",
-	"Fort Worth, Texas",
-	"Columbus, Ohio",
-	"Charlotte, North Carolina",
-	"Indianapolis, Indiana",
-	"San Francisco, California",
-	"Seattle, Washington",
-	"Denver, Colorado",
-	"Nashville, Tennessee",
-	"Washington, District of Columbia",
-	"Oklahoma City, Oklahoma",
-	"Boston, Massachusetts",
-	"El Paso, Texas",
-	"Portland, Oregon",
-	"Las Vegas, Nevada",
-	"Memphis, Tennessee",
-	"Detroit, Michigan",
-	"Baltimore, Maryland",
-	"Milwaukee, Wisconsin",
-	"Albuquerque, New Mexico",
-	"Fresno, California",
-	"Tucson, Arizona",
-	"Sacramento, California",
-	"Mesa, Arizona",
-	"Kansas City, Missouri",
-	"Atlanta, Georgia",
-	"Omaha, Nebraska",
-	"Colorado Springs, Colorado",
-	"Raleigh, North Carolina",
-	"Long Beach, California",
-	"Virginia Beach, Virginia",
-	"Oakland, California",
-	"Miami, Florida",
-	"Minneapolis, Minnesota",
-	"Bakersfield, California",
-	"Tulsa, Oklahoma",
-	"Aurora, Colorado",
-	"Arlington, Texas",
-	"Wichita, Kansas"
-]

tests/messageformatter.js

@@ -1,28 +0,0 @@
-const chalk = require('chalk');
-
-const describe = (jsHandle) => jsHandle.executionContext().evaluate(
-	// serialize |obj| however you want
-	(obj) => `OBJ: ${typeof obj}, ${obj}`,
-	jsHandle,
-);
-
-const colors = {
-	LOG: chalk.grey,
-	ERR: chalk.red,
-	WAR: chalk.yellow,
-	INF: chalk.cyan,
-};
-
-const formatter = async (message) => {
-	const args = await Promise.all(message.args().map((arg) => describe(arg)));
-	// make ability to paint different console[types]
-	const type = message.type().substr(0, 3).toUpperCase();
-	const color = colors[type] || chalk.blue;
-	let text = '';
-	for (let i = 0; i < args.length; i += 1) {
-		text += `[${i}] ${args[i]} `;
-	}
-	console.log(color(`CONSOLE.${type}: ${message.text()}\n${text} `));
-};
-
-module.exports = formatter;

tests/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "ws4kp-tests",
-  "version": "1.0.0",
-  "description": "Currently, tests take a different approach from typical unit testing. The test methodology loads several forecasts for different locations and logs them all to one logger so errors can be found such as missing icons, locations that do not have all of the necessary data or other changes that may occur between geographical locations.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "chalk": "^4.0.0",
-    "puppeteer": "^19.5.2"
-  }
-}

views/index.ejs

@@ -42,7 +42,7 @@
   <script type="module" src="scripts/modules/regionalforecast.mjs"></script>
   <script type="module" src="scripts/modules/travelforecast.mjs"></script>
   <script type="module" src="scripts/modules/progress.mjs"></script>
-  <script type="module" src="scripts/modules/radar.mjs"></script>
+  <script type="module" src="scripts/modules/marineforecast.mjs"></script>
 	<script type="module" src="scripts/index.mjs"></script>
 
   <!-- data -->
@@ -60,14 +60,13 @@
 
 
   <div id="divQuery">
-		<input id="txtAddress" type="text" value="" placeholder="Zip or City, State" />
+    <form id="frmGetLatLng">
-		<div class="buttons">
+      <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/><img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/></button>
-			<button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/>
+      <input id="btnGetLatLng" type="submit" value="GO" />
-				<img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/>
+      <input id="btnClearQuery" type="reset" value="Reset" />
-			</button>
+    </form>
-			<button id="btnGetLatLng" type="submit">GO</button>
+    <div id="divLat"></div>
-			<button id="btnClearQuery" type="reset">Reset</button>
+    <div id="divLng"></div>
-		</div>
   </div>
   <div id="version" style="display:none">
     <%- version %>
@@ -108,6 +107,9 @@
       </div>
       <div id="almanac-html" class="weather-display">
         <%- include('partials/almanac.ejs') %>
+      </div>
+			<div id="marine-forecast-html" class="weather-display">
+        <%- include('partials/marine-forecast.ejs') %>
       </div>
       <div id="extended-forecast-html" class="weather-display">
         <%- include('partials/extended-forecast.ejs') %>

views/partials/current-weather.ejs

@@ -1,4 +1,4 @@
-<%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true, hasTime: true}) %>
+<%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true}) %>
 	<div class="main has-scroll has-box current-weather">
 		<div class="weather template">
 			<div class="left col">

views/partials/latest-observations.ejs

@@ -1,4 +1,4 @@
-<%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true, hasTime: true }) %>
+<%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true }) %>
 	<div class="main has-scroll latest-observations has-box">
 		<div class="container">
 			<div class="column-headers">

views/partials/marine-forecast.ejs

@@ -0,0 +1,23 @@
+<%- include('header.ejs', { title: 'Marine Forecast' , hasTime: true }) %>
+<div class="main has-scroll marine-forecast">
+	<div class="advisory">
+		<div class="advisory-text">Small Craft Advisory</div>
+	</div>
+	<div class="headers">
+		<div class="winds">WINDS:</div>
+		<div class="winds">WAVES:</div>
+	</div>
+  <div class="day-container">
+    <div class="day template">
+      <div class="date"></div>
+			<div class="wind-dir"></div>
+			<div class="wind-speed"></div>
+			<div class="wave">
+				<div class="wave-height"></div>
+				<div class="wave-icon"><img src="" /></div>
+				<div class="wave-desc"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<%- include('scroll.ejs') %>

ws4kp.code-workspace

@@ -27,7 +27,6 @@
 			"Pngs",
 			"PRECIP",
 			"rtrim",
-			"sonarjs",
 			"T",
 			"T'storm",
 			"uscomp",
@@ -52,5 +51,9 @@
 			"editor.defaultFormatter": "j69.ejs-beautify"
 		},
 		"files.exclude": {},
+		"editor.formatOnSave": true,
+		"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": "explicit"
+		}
 	},
 }