Add more terms (#465)

* Add many new terms * Simplify the full list of wars * Add full list of families to the senator term * Fix invalid HTML chars in frontend
iamlogand · Apr 3, 2024 · 39c9c8d · 39c9c8d
1 parent 00a6f23
commit 39c9c8d
Show file tree

Hide file tree

Showing 57 changed files with 1,037 additions and 147 deletions.
diff --git a/frontend/classes/War.ts b/frontend/classes/War.ts
@@ -1,3 +1,5 @@
+import getNumberSuffix from "@/functions/numberSuffix"
+
 interface IWar {
   id: number
   name: string
@@ -45,16 +47,10 @@ class War {
     this.famine = data.famine
   }
 
+  // Unformatted name of the war
   getName() {
     if (this.index === 0) return `${this.name} War`
-    return `${this.index}${this.getSuffix(this.index)} ${this.name} War`
-  }
-
-  getSuffix(number: number) {
-    if (number === 1) return "st"
-    if (number === 2) return "nd"
-    if (number === 3) return "rd"
-    return "th"
+    return `${this.index}${getNumberSuffix(this.index)} ${this.name} War`
   }
 }
 

diff --git a/frontend/componentTables/termComponents.tsx b/frontend/componentTables/termComponents.tsx
@@ -14,18 +14,37 @@ import FactionPhaseTerm from "@/components/terms/Term_FactionPhase"
 import FinalForumPhaseTerm from "@/components/terms/Term_FinalForumPhase"
 import RomeConsulTerm from "@/components/terms/Term_RomeConsul"
 import HraoTerm from "@/components/terms/Term_Hrao"
+import WarTerm from "@/components/terms/Term_War"
+import ActiveWarTerm from "@/components/terms/Term_ActiveWar"
+import FactionLeaderTerm from "@/components/terms/Term_FactionLeader"
+import AlignedSenatorTerm from "@/components/terms/Term_AlignedSenator"
+import UnalignedSenatorTerm from "@/components/terms/Term_UnalignedSenator"
+import FamilyTerm from "@/components/terms/Term_Family"
+import StatesmanTerm from "@/components/terms/Term_Statesman"
+import ImminentWarTerm from "@/components/terms/Term_ImminentWar"
+import InactiveWarTerm from "@/components/terms/Term_InactiveWar"
+import EnemyLeaderTerm from "@/components/terms/Term_EnemyLeader"
+import MatchingWarsAndEnemyLeadersTerm from "@/components/terms/Term_MatchingWarsAndEnemyLeadersTerm"
 
 interface TermComponents {
   [key: string]: JSX.Element
 }
 
 const termComponents: TermComponents = {
+  "Active War": <ActiveWarTerm />,
+  "Aligned Senator": <AlignedSenatorTerm />,
   "Combat Phase": <CombatPhaseTerm />,
+  "Enemy Leader": <EnemyLeaderTerm />,
   Faction: <FactionTerm />,
+  "Faction Leader": <FactionLeaderTerm />,
   "Faction Phase": <FactionPhaseTerm />,
+  Family: <FamilyTerm />,
   "Final Forum Phase": <FinalForumPhaseTerm />,
   "Forum Phase": <ForumPhaseTerm />,
   HRAO: <HraoTerm />,
+  "Imminent War": <ImminentWarTerm />,
+  "Inactive War": <InactiveWarTerm />,
+  "Matching Wars and Enemy Leaders": <MatchingWarsAndEnemyLeadersTerm />,
   "Mortality Phase": <MortalityPhaseTerm />,
   "Population Phase": <PopulationPhaseTerm />,
   "Prior Consul": <PriorConsulTerm />,
@@ -35,7 +54,10 @@ const termComponents: TermComponents = {
   Secret: <SecretTerm />,
   "Senate Phase": <SenatePhaseTerm />,
   Senator: <SenatorTerm />,
+  Statesman: <StatesmanTerm />,
   Turn: <TurnTerm />,
+  "Unaligned Senator": <UnalignedSenatorTerm />,
+  War: <WarTerm />,
 }
 
 export default termComponents
diff --git a/frontend/components/DetailSection.tsx b/frontend/components/DetailSection.tsx
@@ -61,6 +61,13 @@ const DetailSection = () => {
     setBrowsingHistory((currentHistory) => currentHistory.slice(0, -2))
   }, [browsingHistory, setSelectedDetail, setBrowsingHistory])
 
+  // Scroll to the top of the detail section when a new item is selected
+  useEffect(() => {
+    if (detailSectionRef.current) {
+      detailSectionRef.current.scrollTop = 0
+    }
+  }, [selectedDetail])
+
   if (!selectedDetail)
     return (
       <div className="h-full">
@@ -101,7 +108,7 @@ const DetailSection = () => {
       </div>
       <div
         ref={detailSectionRef}
-        className={`box-border h-full flex-1 overflow-y-auto bg-white dark:bg-neutral-600 rounded-b`}
+        className="box-border h-full flex-1 overflow-y-auto bg-white dark:bg-neutral-600 rounded-b"
       >
         {selectedDetail.type === "Senator" && (
           <SenatorDetailSection detailSectionRef={detailSectionRef} />

diff --git a/frontend/components/FactionIcon.tsx b/frontend/components/FactionIcon.tsx
@@ -45,7 +45,7 @@ const FactionIcon = ({
             ? muted
               ? faction.getColor(300)
               : faction.getColor(500)
-            : "#ff0000"
+            : "#a3a3a3"
         }
         style={
           faction
@@ -58,11 +58,6 @@ const FactionIcon = ({
         strokeWidth="2"
         vectorEffect="non-scaling-stroke"
       />
-      <style>
-        {
-          "@keyframes allColorsAnimation { 0% { fill: #ef4444 } 17% { fill: #eab308 } 33% { fill: #22c55e } 50% { fill: #06b6d4 } 67% { fill: #3b82f6 } 83% { fill: #a855f7 } }"
-        }
-      </style>
     </svg>
   )
 

diff --git a/frontend/components/FormattedWarName.tsx b/frontend/components/FormattedWarName.tsx
@@ -0,0 +1,21 @@
+import War from "@/classes/War"
+import getNumberSuffix from "@/functions/numberSuffix"
+
+interface FormattedWarNameProps {
+  war: War
+}
+
+// Display the formatted name of a war with its index superscripted
+const FormattedWarName = ({ war }: FormattedWarNameProps) => (
+  <span>
+    {war.index > 0 && (
+      <span>
+        {war.index}
+        <sup>{getNumberSuffix(war.index)}</sup>{" "}
+      </span>
+    )}
+    {war.name} War
+  </span>
+)
+
+export default FormattedWarName
diff --git a/frontend/components/FullListOfFamilies.tsx b/frontend/components/FullListOfFamilies.tsx
@@ -0,0 +1,176 @@
+import { Tooltip } from "@mui/material"
+import ScenarioListItem from "@/components/ScenarioListItem"
+
+const FullListOfFamilies = () => (
+  <div className="flex flex-col gap-4">
+    <h5 className="mt-4 font-bold">List of Families and Statesmen</h5>
+    <ul className="flex flex-col gap-0.5">
+      <ScenarioListItem scenario="E">Acilius</ScenarioListItem>
+      <li className="text-red-600 dark:text-red-300">
+        Aemilius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">E</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="E">
+            L. Aemilius Paullus Macedonicus
+          </ScenarioListItem>
+        </ul>
+      </li>
+      <ScenarioListItem scenario="E">Aelius</ScenarioListItem>
+      <ScenarioListItem scenario="E">Aurelius</ScenarioListItem>
+      <ScenarioListItem scenario="E">Calpurnius</ScenarioListItem>
+      <ScenarioListItem scenario="E">Claudius</ScenarioListItem>
+      <li className="text-red-600 dark:text-red-300">
+        Cornelius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">E</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="E">
+            P. Cornelius Scipio Africanus
+          </ScenarioListItem>
+          <ScenarioListItem scenario="M">
+            P. Cornelius Scipio Aemilianus Africanus
+          </ScenarioListItem>
+          <ScenarioListItem scenario="M">P. Cornelius Sulla</ScenarioListItem>
+        </ul>
+      </li>
+      <li className="text-red-600 dark:text-red-300">
+        Fabius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">E</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="E">
+            Q. Fabius Maximus Verrucosus Cunctator
+          </ScenarioListItem>
+        </ul>
+      </li>
+      <ScenarioListItem scenario="E">Flaminius</ScenarioListItem>
+      <li className="text-red-600 dark:text-red-300">
+        Fulvius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">E</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="M">M. Fulvius Flaccus</ScenarioListItem>
+        </ul>
+      </li>
+      <ScenarioListItem scenario="E">Furius</ScenarioListItem>
+      <li className="text-red-600 dark:text-red-300">
+        Julius{" "}
+        <Tooltip title="Early Republic Scenario" arrow>
+          <span className="text-xs cursor-default">E</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="L">C. Julius Caesar</ScenarioListItem>
+        </ul>
+      </li>
+      <ScenarioListItem scenario="E">Manlius</ScenarioListItem>
+      <ScenarioListItem scenario="E">Papirius</ScenarioListItem>
+      <ScenarioListItem scenario="E">Plautius</ScenarioListItem>
+      <li className="text-red-600 dark:text-red-300">
+        Quinctius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">E</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="E">
+            T. Quinctius Flamininus
+          </ScenarioListItem>
+        </ul>
+      </li>
+      <ScenarioListItem scenario="E">Sulpicius</ScenarioListItem>
+      <ScenarioListItem scenario="E">Terentius</ScenarioListItem>
+      <ScenarioListItem scenario="E">Valerius</ScenarioListItem>
+      <ScenarioListItem scenario="M">Cassius</ScenarioListItem>
+      <li className="text-green-600 dark:text-green-300">
+        Porcius{" "}
+        <Tooltip title="Middle Republic Scenario" arrow>
+          <span className="text-xs cursor-default">M</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="E">
+            M. Porcius Cato the Elder
+          </ScenarioListItem>
+          <ScenarioListItem scenario="L">
+            M. Porcius Cato the Younger
+          </ScenarioListItem>
+        </ul>
+      </li>
+      <li className="text-green-600 dark:text-green-300">
+        Popillius{" "}
+        <Tooltip title="Middle Republic Scenario" arrow>
+          <span className="text-xs cursor-default">M</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="M">P. Popillius Laenas</ScenarioListItem>
+        </ul>
+      </li>
+      <li className="text-green-600 dark:text-green-300">
+        Sempronius{" "}
+        <Tooltip title="Middle Republic Scenario" arrow>
+          <span className="text-xs cursor-default">M</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="M">
+            T. Sempronius Gracchus
+          </ScenarioListItem>
+          <ScenarioListItem scenario="M">
+            C. Sempronius Gracchus
+          </ScenarioListItem>
+        </ul>
+      </li>
+      <li className="text-green-600 dark:text-green-300">
+        Servilius{" "}
+        <Tooltip title="Middle Republic Scenario" arrow>
+          <span className="text-xs cursor-default">M</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="M">C. Servilius Glaucia</ScenarioListItem>
+        </ul>
+      </li>
+      <li className="text-blue-600 dark:text-blue-300">
+        Licinius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">L</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="L">M. Licinius Crassus</ScenarioListItem>
+          <ScenarioListItem scenario="L">L. Licinius Lucullus</ScenarioListItem>
+        </ul>
+      </li>
+      <li className="text-blue-600 dark:text-blue-300">
+        Marius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">L</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="M">C. Marius</ScenarioListItem>
+        </ul>
+      </li>
+      <ScenarioListItem scenario="L">Octavius</ScenarioListItem>
+      <li className="text-blue-600 dark:text-blue-300">
+        Pompeius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">L</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="L">Cn. Pompeius Magnus</ScenarioListItem>
+        </ul>
+      </li>
+      <li className="text-blue-600 dark:text-blue-300">
+        Tullius{" "}
+        <Tooltip title="Late Republic Scenario" arrow>
+          <span className="text-xs cursor-default">L</span>
+        </Tooltip>
+        <ul>
+          <ScenarioListItem scenario="L">M. Tullius Cicero</ScenarioListItem>
+        </ul>
+      </li>
+    </ul>
+  </div>
+)
+
+export default FullListOfFamilies