Implement tools page & Mes. date guards, improve

src/Header.css

@@ -24,3 +24,11 @@
   text-shadow: -1.5px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,
     1px 1px 0 black;
 }
+
+#navbar-container {
+  width: 100%;
+}
+
+#menu-lines {
+  padding: 0 40px;
+}

src/Header.tsx

@@ -4,7 +4,6 @@ import { LinkContainer } from 'react-router-bootstrap'
 import _ from 'lodash'
 
 import User from './auth/User'
-
 import './Header.css'
 import lmuLogo from './LMU_Logo.svg'
 import ExternalLink from 'common/ExternalLink'
@@ -55,24 +54,38 @@ export default function Header(): JSX.Element {
               <EblLogo />
             </Navbar.Brand>
           </LinkContainer>
+          <Navbar.Toggle aria-controls={id} />
           <Navbar.Collapse id={id}>
-            <Nav
-              activeKey={activeKey}
-              onSelect={(key) => setActiveKey(key ?? undefined)}
-              className="mx-auto"
+            <div
+              id="navbar-container"
+              className="d-flex justify-content-between"
             >
-              <NavItem href="/about" title="About" />
-              <NavItem href="/signs" title="Signs" />
-              <NavItem href="/dictionary" title="Dictionary" />
-              <NavItem href="/corpus" title="Corpus" />
-              <NavItem href="/fragmentarium" title="Fragmentarium" />
-              <NavItem href="/bibliography" title="Bibliography" />
-            </Nav>
-            <Navbar.Text>
-              <User />
-            </Navbar.Text>
+              <div id="menu-lines">
+                <Nav
+                  activeKey={activeKey}
+                  onSelect={(key) => setActiveKey(key ?? undefined)}
+                  className="mx-auto"
+                >
+                  <NavItem href="/signs" title="Signs" />
+                  <NavItem href="/dictionary" title="Dictionary" />
+                  <NavItem href="/corpus" title="Corpus" />
+                  <NavItem href="/fragmentarium" title="Fragmentarium" />
+                </Nav>
+                <Nav
+                  activeKey={activeKey}
+                  onSelect={(key) => setActiveKey(key ?? undefined)}
+                  className="mx-auto"
+                >
+                  <NavItem href="/about" title="About" />
+                  <NavItem href="/bibliography" title="Bibliography" />
+                  <NavItem href="/tools" title="Tools" />
+                </Nav>
+              </div>
+              <Navbar.Text id="user">
+                <User />
+              </Navbar.Text>
+            </div>
           </Navbar.Collapse>
-          <Navbar.Toggle aria-controls={id} />
         </Container>
       </Navbar>
     </header>

src/about/ui/__snapshots__/about.test.tsx.snap

@@ -110,17 +110,6 @@ exports[`Snapshot 1`] = `
         >
           Dictionary
         </a>
-        <a
-          aria-controls="about-tabpane-date-converter"
-          aria-selected="false"
-          class="nav-item nav-link"
-          data-rb-event-key="date-converter"
-          href="#"
-          id="about-tab-date-converter"
-          role="tab"
-        >
-          Date converter
-        </a>
         <a
           aria-controls="about-tabpane-bibliography"
           aria-selected="false"
@@ -132,17 +121,6 @@ exports[`Snapshot 1`] = `
         >
           Bibliography
         </a>
-        <a
-          aria-controls="about-tabpane-list-of-kings"
-          aria-selected="false"
-          class="nav-item nav-link"
-          data-rb-event-key="list-of-kings"
-          href="#"
-          id="about-tab-list-of-kings"
-          role="tab"
-        >
-          List of kings
-        </a>
       </nav>
       <div
         class="tab-content"

src/about/ui/about.sass

@@ -1,96 +1,85 @@
-[id^="about-tabpane-"].tab-pane
+[id^="about-tabpane-"], [id^="tools-tabpane-"]
+  &.tab-pane
     padding-top: 30px
 
-.tab-content:has([id^="about-tabpane-"])
+  .tab-content:has(&)
     text-align: justify
     padding: 0em 4em
 
-[id^="about-tabpane-"] .type-abbreviation
-  display: none
-
-[id^="about-tabpane-"] h3
-  padding-top: 10px
-
-[id^="about-tabpane-"] h4
-  padding-top: 10px
-
-[id^="about-tabpane-"] blockquote
-  padding-left: 40%
-
-[id^="about-tabpane-"] .Introduction
-
-  &__200px
-    width: 200px
-    height: auto
-
-  &__250px
-    width: 250px
-    height: auto
-
-  &__300px
-    width: 300px
-    height: auto
-
-  &__350px
-    width: 350px
-    height: auto
-
-  &__400px
-    width: 400px
-    height: auto
-
-  &__450px
-    width: 450px
-    height: auto
-
-  &__caption
-    font-size: 80%
-    padding-top: 0.5em
-    text-align: center
-
-  &__cite
-    border: 1px solid black
-    display: block
-    margin: 10px auto
-    width: 70%
-    padding: 10px
-    text-align: center
-
-  &__creativecommons
-    border-width: 0
-    margin: auto
-    display: block
-    padding: 10px
-
-  &__creativeCommonsLicense
-    text-align: center
-
-  &__fossey
-    float: right
-    width: 300px
-    height: auto
-    padding: 1em 0em 1em 1em
-
-  &__meszlColoredChanges
-    color: #00610F
-
-  &__photoCentered
-    text-align: center
-
-  &__photoLeft
-    text-align: center
-    float: left
-    margin: 0em 0.5em 0em 0em
-
-  &__photoRight
-    text-align: center
-    float: right
-    margin: 0em 0em 0.5em 0.5em
-
-  &__quotation
-    display: block
-    padding: 0 0 1em 1em
-
-  &__secondLineOfParallelism
-    padding-left: 1em
+  .type-abbreviation
+    display: none
 
+  h3, h4
+    padding-top: 10px
+
+  blockquote
+    padding-left: 40%
+
+  .Introduction
+    &__200px, &__250px, &__300px, &__350px, &__400px, &__450px
+      height: auto
+
+    &__200px
+      width: 200px
+
+    &__250px
+      width: 250px
+
+    &__300px
+      width: 300px
+
+    &__350px
+      width: 350px
+
+    &__400px
+      width: 400px
+
+    &__450px
+      width: 450px
+
+    &__caption
+      font-size: 80%
+      padding-top: 0.5em
+      text-align: center
+
+    &__cite
+      border: 1px solid black
+      display: block
+      margin: 10px auto
+      width: 70%
+      padding: 10px
+      text-align: center
+
+    &__creativecommons, &__creativeCommonsLicense
+      border-width: 0
+      margin: auto
+      display: block
+      padding: 10px
+      text-align: center
+
+    &__fossey
+      float: right
+      width: 300px
+      height: auto
+      padding: 1em 0em 1em 1em
+
+    &__meszlColoredChanges
+      color: #00610F
+
+    &__photoCentered, &__photoLeft, &__photoRight
+      text-align: center
+
+    &__photoLeft, &__photoRight
+      float: left
+      margin: 0em 0.5em 0em 0em
+
+    &__photoRight
+      float: right
+      margin: 0em 0em 0.5em 0.5em
+
+    &__quotation
+      display: block
+      padding: 0 0 1em 1em
+
+    &__secondLineOfParallelism
+      padding-left: 1em

src/about/ui/about.tsx

@@ -11,10 +11,6 @@ import AboutCorpus from 'about/ui/corpus'
 import AboutSigns from 'about/ui/signs'
 import AboutDictionary from 'about/ui/dictionary'
 import AboutBibliography from 'about/ui/bibliography'
-import AboutListOfKings from 'about/ui/chronology'
-import DateConverterForm, {
-  AboutDateConverter,
-} from 'chronology/ui/DateConverterForm'
 import _ from 'lodash'
 
 export const tabIds = [
@@ -47,7 +43,7 @@ export default function About({
       title="About"
       crumbs={[
         new TextCrumb('About'),
-        new TextCrumb(_.capitalize(selectedTab).replaceAll('-', ' ')),
+        new TextCrumb(_.capitalize(selectedTab)),
       ]}
     >
       <Tabs
@@ -72,16 +68,9 @@ export default function About({
         <Tab eventKey="dictionary" title="Dictionary">
           {AboutDictionary(markupService)}
         </Tab>
-        <Tab eventKey="date-converter" title="Date converter">
-          {AboutDateConverter(markupService)}
-          <DateConverterForm />
-        </Tab>
         <Tab eventKey="bibliography" title="Bibliography">
           {AboutBibliography(markupService)}
         </Tab>
-        <Tab eventKey="list-of-kings" title="List of kings">
-          {AboutListOfKings()}
-        </Tab>
       </Tabs>
     </AppContent>
   )

src/chronology/domain/DateConverter.ts

@@ -135,6 +135,11 @@ export default class DateConverter extends DateConverterBase {
     mesopotamianMonth: number,
     mesopotamianDay: number
   ): void {
+    mesopotamianMonth = this.shiftMesopotamianMonthIfNoMatchFound(
+      ruler,
+      regnalYear,
+      mesopotamianMonth
+    )
     const rulerIndex = data.rulerName.indexOf(ruler)
     if (rulerIndex === -1) throw new Error('Invalid ruler name.')
     const seBabylonianYear = data.rulerSeYears[rulerIndex] + regnalYear - 1
@@ -150,6 +155,26 @@ export default class DateConverter extends DateConverterBase {
     this.applyDate(this.computeGregorianDateFromCjdn(cjdn), 'gregorian')
     this.updateBabylonianDate(cjdn)
   }
+
+  private shiftMesopotamianMonthIfNoMatchFound(
+    ruler: string,
+    regnalYear: number,
+    mesopotamianMonth: number
+  ): number {
+    if ([13, 14].includes(mesopotamianMonth)) {
+      this.setToMesopotamianDate(ruler, regnalYear, 1, 1)
+      if (
+        !this.checks.isIncomingDateHasCorrespondingIntercalary(
+          mesopotamianMonth,
+          this
+        )
+      ) {
+        mesopotamianMonth =
+          { 13: 6, 14: 12 }[mesopotamianMonth] ?? mesopotamianMonth
+      }
+    }
+    return mesopotamianMonth
+  }
 }
 
 Object.assign(DateConverter.prototype, DateConverterChecks.prototype)