Implement basic calendar display

gen_calendar.py

@@ -83,7 +83,7 @@ def main():
         'start_year': fr_year(int(equinoxes[0].ut1_calendar()[0])),
         'leap': [int(paris_jdn(b) - paris_jdn(a) == 366) for a, b in zip(equinoxes, equinoxes[1:])]
     }
-    with open('cal.json', 'w') as f:
+    with open('src/cal.json', 'w') as f:
         json.dump(result, f, separators=(',', ':'))
 
 

src/App.tsx

@@ -1,25 +1,10 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import {Calendar} from './Calendar';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Calendar year={230} month={5} day={24}/>
   );
 }
 

src/Calendar.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {Day, decadeNames, frJDN, Month} from './dates';
+
+type MonthProps = {
+    year: number;
+    month: Month;
+};
+
+type DateProps = MonthProps & {
+    day: Day;
+};
+
+export type CalendarProps = DateProps & {
+    year: number;
+    month: Month;
+    onSwitch?: (year: number, month: Month, day: Day) => void,
+};
+
+type CalendarState = {};
+
+function DecadeName({name}: { name: string }): JSX.Element {
+    return <th className="DecadeName">{name}</th>;
+}
+
+function DayDetail({jdn}: { jdn: number }): JSX.Element {
+    return <div className="DayDetail">
+        <div className="DayDetail-gregorian">{}</div>
+    </div>;
+}
+
+function NormalDay({year, month, day, isToday}: DateProps & { isToday: boolean }): JSX.Element {
+    return <td className={`Day NormalDay ${isToday ? 'Day-today' : ''}`}>
+        <div className="Day-name">{day}</div>
+        <DayDetail jdn={frJDN(year, month, day)}/>
+    </td>;
+}
+
+function NormalMonth({year, month}: MonthProps): JSX.Element {
+    const decadeHeads = decadeNames.map(name => <DecadeName name={name}/>);
+    return <table>
+        <thead>
+        <tr className="Month-decadeHead">{decadeHeads}</tr>
+        </thead>
+        <tbody>{
+            Array.from(Array(3).keys()).map(i => <tr className="Month-decade">{
+                Array.from(Array(10).keys()).map(j =>
+                    <NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} isToday={false}/>)
+            }</tr>)
+        }</tbody>
+    </table>;
+}
+
+export class Calendar extends React.Component<CalendarProps, CalendarState> {
+    render(): JSX.Element {
+        return <NormalMonth year={this.props.year} month={this.props.month}/>;
+    }
+}

src/dates.ts

@@ -1,4 +1,4 @@
-import data from '../cal.json';
+import data from './cal.json';
 
 // Month 13 is for the complementary days
 export type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
@@ -52,6 +52,10 @@ const monthNames: {
     13: 'Jours Complémentaires',
 };
 
+export const decadeNames = [
+    'primidi', 'duodi', 'tridi', 'quartidi', 'quintidi', 'sextidi', 'septidi', 'octidi', 'nonidi', 'décadi',
+];
+
 const startJD = data.start_jd;
 const startYear = data.start_year;
 const leaps: Array<number> = [0];
@@ -84,13 +88,20 @@ export function monthName(month: Month): string {
 export function dateName(month: Month, day: Day): string | null {
     if (month === 13) {
         switch (day) {
-            case 1: return 'La Fête de la Vertu';
-            case 2: return 'La Fête du Génie';
-            case 3: return 'La Fête du Travail';
-            case 4: return "La Fête de l'Opinion";
-            case 5: return 'La Fête des Récompenses';
-            case 6: return 'La Fête de la Révolution';
-            default: return null;
+            case 1:
+                return 'La Fête de la Vertu';
+            case 2:
+                return 'La Fête du Génie';
+            case 3:
+                return 'La Fête du Travail';
+            case 4:
+                return "La Fête de l'Opinion";
+            case 5:
+                return 'La Fête des Récompenses';
+            case 6:
+                return 'La Fête de la Révolution';
+            default:
+                return null;
         }
     }
     return `${day} ${monthNames[month]}`;