From 2e007500c97e3f7be18627363c7fa7b926fd66ad Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Sun, 13 Jul 2025 15:44:15 -0400
Subject: [PATCH] mcal: display Tzolkin and Haab month names

---
 mcal/src/Calendar.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/mcal/src/Calendar.tsx b/mcal/src/Calendar.tsx
index 00259b6..f8ab84c 100644
--- a/mcal/src/Calendar.tsx
+++ b/mcal/src/Calendar.tsx
@@ -4,7 +4,7 @@ import {jdnDate} from '@common/gregorian';
 import {jdnLongCount} from '@common/longCount';
 import {MonthBasedCalendar} from '@common/ui/MonthBasedCalendar';
 import {
-    formatLordOfNight,
+    formatLordOfNight, formatTzolkin,
     HaabDay,
     haabExtJDN,
     HaabMonth,
@@ -12,7 +12,7 @@ import {
     haabNames,
     HaabYear,
     jdnHaabExt,
-    jdnLordOfNight,
+    jdnLordOfNight, jdnTzolkin,
 } from '@common/mayan';
 
 type MonthProps = {
@@ -24,21 +24,22 @@ type DateProps = MonthProps & {
     day: HaabDay;
 };
 
-function NormalDay({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element {
+function Day({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element {
     const jdn = haabExtJDN({year, month, day});
     return <div className={`Day ${jdn === todayJDN ? 'Day-today' : ''}`}>
-        <div className="Day-name">{day}</div>
-        <div className="DayDetail-lc">{jdnLongCount(jdn)?.join('.')}</div>
+        <div className="Day-name">{day}<span className="Day-haabMonth"> {haabNames[month]}</span></div>
+        <div className="Day-tzolkin">{formatTzolkin(jdnTzolkin(jdn))}</div>
+        <div className="Day-lc">{jdnLongCount(jdn)?.join('.')}</div>
         <div className="Day-lordOfNight">{formatLordOfNight(jdnLordOfNight(jdn))}</div>
-        <div className="DayDetail-gregorian">{jdnDate(jdn).toDateString()}</div>
+        <div className="Day-gregorian">{jdnDate(jdn).toDateString()}</div>
     </div>;
 }
 
 function Month({year, month, todayJDN}: MonthProps & { todayJDN: number }): JSX.Element {
     return <div className="Month">
         <div className="Month-days">{
-            Array.from(Array(haabMonthDays(month)).keys()).map(i => <div key={i} className="DayOuter NormalDay">
-                <NormalDay year={year} month={month} day={i + 1 as HaabDay} todayJDN={todayJDN}/>
+            Array.from(Array(haabMonthDays(month)).keys()).map(i => <div key={i} className="DayOuter">
+                <Day year={year} month={month} day={i + 1 as HaabDay} todayJDN={todayJDN}/>
             </div>)
         }</div>
     </div>;