From 2c352f880cf9ccda1ae4f9ab207b21491b2b7728 Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Mon, 14 Jul 2025 00:19:03 -0400
Subject: [PATCH] mcal: add labels for different information

---
 mcal/src/Calendar.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/mcal/src/Calendar.tsx b/mcal/src/Calendar.tsx
index f8ab84c..81f2553 100644
--- a/mcal/src/Calendar.tsx
+++ b/mcal/src/Calendar.tsx
@@ -14,6 +14,7 @@ import {
     jdnHaabExt,
     jdnLordOfNight, jdnTzolkin,
 } from '@common/mayan';
+import {useMobileTooltipProps} from '@common/ui/MobileTooltip';
 
 type MonthProps = {
     year: HaabYear;
@@ -26,12 +27,21 @@ type DateProps = MonthProps & {
 
 function Day({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element {
     const jdn = haabExtJDN({year, month, day});
+    const mobile = useMobileTooltipProps();
     return <div className={`Day ${jdn === todayJDN ? 'Day-today' : ''}`}>
         <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="Day-gregorian">{jdnDate(jdn).toDateString()}</div>
+        <div className="Day-tzolkin">
+            <abbr title="Tzolkʼin" {...mobile}>T.</abbr> {formatTzolkin(jdnTzolkin(jdn))}
+        </div>
+        <div className="Day-lc">
+            <abbr title="Long count" {...mobile}>L.</abbr> {jdnLongCount(jdn)?.join('.')}
+        </div>
+        <div className="Day-lordOfNight">
+            <abbr title="Lord of the Night" {...mobile}>N.</abbr> {formatLordOfNight(jdnLordOfNight(jdn))
+        }</div>
+        <div className="Day-gregorian">
+            <abbr title="Gregorian date" {...mobile}>G.</abbr> {jdnDate(jdn).toDateString()}
+        </div>
     </div>;
 }