From 55cd03576f1ecb06c3620496d7924a915ec914e0 Mon Sep 17 00:00:00 2001
From: Ben Nitkin <ben@nitkin.net>
Date: Wed, 13 Dec 2023 03:43:07 -0500
Subject: [PATCH] Show moon phase in clock module (#3284)

This change replaces the font-awesome moon icon and percent-lit with an
icon showing the current lunar phase.

It uses emoji, which may not be installed on all machines. The fallback
text version is backwards (the dark part of the moon is text-color,
which is normally black but white in MagicMirror).

---------

Co-authored-by: veeck <michael.veeck@nebenan.de>
---
 CHANGELOG.md                   | 1 +
 modules/default/clock/clock.js | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2db63b8e3..0c357bf41f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ _This release is scheduled to be released on 2024-01-01._
 - Update newsfeed: Use `html-to-text` instead of regex for transform description
 - Review ESLint config (#3269)
 - Updated dependencies
+- Clock module: optionally display current moon phase in addition to rise/set times
 
 ### Fixed
 
diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js
index c063d4dc88..b2c94fbfc5 100644
--- a/modules/default/clock/clock.js
+++ b/modules/default/clock/clock.js
@@ -32,7 +32,7 @@ Module.register("clock", {
 		secondsColor: "#888888",
 
 		showSunTimes: false,
-		showMoonTimes: false,
+		showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase)
 		lat: 47.630539,
 		lon: -122.344147
 	},
@@ -208,9 +208,13 @@ Module.register("clock", {
 				moonSet = nextMoonTimes.set;
 			}
 			const isVisible = now.isBetween(moonRise, moonSet) || moonTimes.alwaysUp === true;
+			const showFraction = ["both", "percent"].includes(this.config.showMoonTimes);
+			const showUnicode = ["both", "phase"].includes(this.config.showMoonTimes);
 			const illuminatedFractionString = `${Math.round(moonIllumination.fraction * 100)}%`;
+			const image = showUnicode ? [..."🌑🌒🌓🌔🌕🌖🌗🌘"][Math.floor(moonIllumination.phase * 8)] : '<i class="fas fa-moon" aria-hidden="true"></i>';
+
 			moonWrapper.innerHTML =
-				`<span class="${isVisible ? "bright" : ""}"><i class="fas fa-moon" aria-hidden="true"></i> ${illuminatedFractionString}</span>` +
+				`<span class="${isVisible ? "bright" : ""}">${image} ${showFraction ? illuminatedFractionString : ""}</span>` +
 				`<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${moonRise ? formatTime(this.config, moonRise) : "..."}</span>` +
 				`<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${moonSet ? formatTime(this.config, moonSet) : "..."}</span>`;
 			digitalWrapper.appendChild(moonWrapper);