Add map-specific player overview breakdown details

.gitignore

@@ -7,4 +7,5 @@ builds
 buildmeta.*
 *.swp
 *.tsbuildinfo
+src/e2e/artifacts/
 scripts/seed_map_ratings_from_csv.js

src/client/game/player_expanded_row.module.css

@@ -132,6 +132,18 @@
   color: #d1d5db;
 }
 
+.panelSubsectionTitle {
+  font-weight: 600;
+  font-size: 13px;
+  color: #6b7280;
+  margin-top: 8px;
+  margin-bottom: 6px;
+}
+
+:global(.dark-mode) .panelSubsectionTitle {
+  color: #9ca3af;
+}
+
 .panelCard {
   background: white;
   padding: 12px 16px;
@@ -371,6 +383,69 @@
   margin-top: 4px;
 }
 
+/* Monsoon scenarios */
+.monsoonScenariosGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.monsoonScenario {
+  text-align: center;
+  padding: 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+}
+
+:global(.dark-mode) .monsoonScenario {
+  border-color: #555;
+}
+
+.monsoonLabel {
+  font-size: 12px;
+  color: #6b7280;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+:global(.dark-mode) .monsoonLabel {
+  color: #9ca3af;
+}
+
+.monsoonValue {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.monsoonCost {
+  font-size: 11px;
+  color: #6b7280;
+  margin-bottom: 2px;
+}
+
+:global(.dark-mode) .monsoonCost {
+  color: #9ca3af;
+}
+
+.monsoonProbability {
+  font-size: 11px;
+  color: #6b7280;
+  font-style: italic;
+}
+
+:global(.dark-mode) .monsoonProbability {
+  color: #9ca3af;
+}
+
+.monsoonNeeds {
+  font-size: 11px;
+  color: #dc2626;
+  margin-top: 4px;
+  font-weight: 500;
+}
+
 /* Eliminated player expanded */
 .eliminatedMessage {
   padding: 48px 24px;

src/client/game/player_expanded_row.tsx

@@ -9,6 +9,7 @@ import {
   useInjected,
   useInjectedState,
   usePhaseState,
+  useViewSettings,
 } from "../utils/injection_context";
 import { Icon } from "semantic-ui-react";
 
@@ -165,14 +166,17 @@ function WarningBanners({ player }: { player: PlayerData }) {
 
 function FinancialDetailsPanel({ player }: { player: PlayerData }) {
   const profitHelper = useInjected(ProfitHelper);
+  const viewSettings = useViewSettings();
   const income = profitHelper.getIncome(player);
   const expenses = profitHelper.getExpenses(player);
   const profit = profitHelper.getProfit(player);
   const endOfTurnMoney = player.money + profit;
   const warning = getPlayerWarning(player);
-
   const netIncomeHighlight =
     warning.hasIncomeLoss || warning.hasEliminationRisk;
+  const customExpenseItems =
+    viewSettings.useExpenseBreakdownItems?.(player) ?? [];
+  const monsoonScenarios = viewSettings.useMonsoonScenarios?.(player) ?? [];
 
   return (
     <div className={styles.panelSection}>
@@ -194,6 +198,7 @@ function FinancialDetailsPanel({ player }: { player: PlayerData }) {
             -{formatMoney(expenses)}
           </span>
         </div>
+        {/* TODO: Maps with zero expenses (Denmark) might benefit from an explanatory note instead of showing $0 items. Consider adding useExpenseBreakdownNote hook in future. */}
         <div className={styles.panelSubrow}>
           <span>• Locomotive maintenance:</span>
           <span>-{formatMoney(player.locomotive)}</span>
@@ -202,6 +207,12 @@ function FinancialDetailsPanel({ player }: { player: PlayerData }) {
           <span>• Share interest:</span>
           <span>-{formatMoney(player.shares)}</span>
         </div>
+        {customExpenseItems.map((item, index) => (
+          <div key={index} className={styles.panelSubrow}>
+            <span>• {item.label}</span>
+            <span>-{formatMoney(item.value)}</span>
+          </div>
+        ))}
         <div
           className={`${styles.panelRow} ${styles.panelDivider} ${netIncomeHighlight ? styles.panelHighlight : ""}`}
         >
@@ -222,6 +233,44 @@ function FinancialDetailsPanel({ player }: { player: PlayerData }) {
               : `${formatMoney(endOfTurnMoney)} (needs ${formatMoney(Math.abs(endOfTurnMoney))})`}
           </span>
         </div>
+        {monsoonScenarios.length > 0 && (
+          <>
+            <div className={styles.panelDivider} />
+            <div className={styles.panelSubsectionTitle}>
+              Monsoon Scenarios (next income phase):
+            </div>
+            <div className={styles.monsoonScenariosGrid}>
+              {monsoonScenarios.map((scenario, index) => {
+                const resultingMoney = endOfTurnMoney - scenario.cost;
+                return (
+                  <div key={index} className={styles.monsoonScenario}>
+                    <div className={styles.monsoonLabel}>
+                      {scenario.description}
+                    </div>
+                    <div
+                      className={`${styles.monsoonValue} ${resultingMoney >= 0 ? styles.valuePositive : styles.valueNegative}`}
+                    >
+                      {formatMoney(resultingMoney)}
+                    </div>
+                    <div className={styles.monsoonCost}>
+                      {scenario.cost === 0
+                        ? "No cost"
+                        : `Cost: ${formatMoney(scenario.cost)}`}
+                    </div>
+                    <div className={styles.monsoonProbability}>
+                      {scenario.probability}
+                    </div>
+                    {resultingMoney < 0 && (
+                      <div className={styles.monsoonNeeds}>
+                        Needs {formatMoney(Math.abs(resultingMoney))}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
       </div>
     </div>
   );
@@ -319,27 +368,39 @@ function LocoUpgradeImpactPanel({ player }: { player: PlayerData }) {
 
 function ScoreBreakdownPanel({ player }: { player: PlayerData }) {
   const playerHelper = useInjected(PlayerHelper);
+  const viewSettings = useViewSettings();
   const incomePoints = playerHelper.getScoreFromIncome(player);
   const sharePoints = playerHelper.getScoreFromShares(player);
   const trackPoints = playerHelper.getScoreFromTrack(player);
   const trackCount = playerHelper.countTrack(player.color);
   const totalScore = playerHelper.getScore(player)[0];
 
+  // Get multipliers from helper (handles maps with custom multipliers)
+  const incomeMultiplier = playerHelper.getIncomeMultiplier();
+  const sharesMultiplier = playerHelper.getSharesMultiplier();
+
+  const customScoreItems = viewSettings.useScoreBreakdownItems?.(player) ?? [];
+
+  // Hide score breakdown for maps with non-VP scoring (e.g., Detroit, Barbados)
+  if (viewSettings.hideScoreBreakdown) {
+    return null;
+  }
+
   return (
     <div className={styles.panelSection}>
       <div className={styles.panelTitle}>Score Breakdown</div>
       <div className={styles.panelCard}>
         <div className={styles.panelRow}>
           <span className={styles.panelLabel}>
-            Income points ({player.income} × 3):
+            Income points ({player.income} × {incomeMultiplier}):
           </span>
           <span className={`${styles.panelValue} ${styles.valuePositive}`}>
             +{incomePoints}
           </span>
         </div>
         <div className={styles.panelRow}>
           <span className={styles.panelLabel}>
-            Share penalty ({player.shares} × -3):
+            Share penalty ({player.shares} × {sharesMultiplier}):
           </span>
           <span className={`${styles.panelValue} ${styles.valueNegative}`}>
             {sharePoints}
@@ -353,6 +414,20 @@ function ScoreBreakdownPanel({ player }: { player: PlayerData }) {
             +{trackPoints}
           </span>
         </div>
+        {/* TODO: Maps with complex formulas (Puerto Rico) could add breakdown items explaining adjustments (e.g., black cube income penalty). */}
+        {customScoreItems.map((item, index) => (
+          <div key={index} className={styles.panelRow}>
+            <span className={styles.panelLabel}>{item.label}</span>
+            <span
+              className={`${styles.panelValue} ${
+                item.value >= 0 ? styles.valuePositive : styles.valueNegative
+              }`}
+            >
+              {item.value >= 0 ? "+" : ""}
+              {item.value}
+            </span>
+          </div>
+        ))}
         <div className={`${styles.panelRow} ${styles.panelDivider}`}>
           <span className={`${styles.panelLabel} ${styles.panelBold}`}>
             Total Score:
@@ -473,28 +548,39 @@ interface ScoreTooltipContentProps {
 
 export function ScoreTooltipContent({ player }: ScoreTooltipContentProps) {
   const playerHelper = useInjected(PlayerHelper);
+  const viewSettings = useViewSettings();
   const incomePoints = playerHelper.getScoreFromIncome(player);
   const sharePoints = playerHelper.getScoreFromShares(player);
   const trackPoints = playerHelper.getScoreFromTrack(player);
   const trackCount = playerHelper.countTrack(player.color);
   const totalScore = playerHelper.getScore(player)[0];
 
+  // Get multipliers from helper (handles maps with custom multipliers)
+  const incomeMultiplier = playerHelper.getIncomeMultiplier();
+  const sharesMultiplier = playerHelper.getSharesMultiplier();
+
+  if (viewSettings.hideScoreBreakdown) {
+    return null;
+  }
+
+  const customScoreItems = viewSettings.useScoreBreakdownItems?.(player) ?? [];
+
   return (
     <div className={styles.tooltipContent}>
       <div className={styles.tooltipTitle}>Score Breakdown</div>
       <table className={styles.tooltipTable}>
         <tbody>
           <tr>
             <td className={styles.tooltipLabel}>
-              Income points ({player.income} × 3):
+              Income points ({player.income} × {incomeMultiplier}):
             </td>
             <td className={`${styles.tooltipValue} ${styles.valuePositive}`}>
               +{incomePoints}
             </td>
           </tr>
           <tr>
             <td className={styles.tooltipLabel}>
-              Share penalty ({player.shares} × -3):
+              Share penalty ({player.shares} × {sharesMultiplier}):
             </td>
             <td className={`${styles.tooltipValue} ${styles.valueNegative}`}>
               {sharePoints}
@@ -508,6 +594,19 @@ export function ScoreTooltipContent({ player }: ScoreTooltipContentProps) {
               +{trackPoints}
             </td>
           </tr>
+          {customScoreItems.map((item, index) => (
+            <tr key={index}>
+              <td className={styles.tooltipLabel}>{item.label}</td>
+              <td
+                className={`${styles.tooltipValue} ${
+                  item.value >= 0 ? styles.valuePositive : styles.valueNegative
+                }`}
+              >
+                {item.value >= 0 ? "+" : ""}
+                {item.value}
+              </td>
+            </tr>
+          ))}
           <tr className={styles.tooltipTotalRow}>
             <td className={styles.tooltipLabel}>Total:</td>
             <td className={styles.tooltipValue}>{totalScore}</td>

src/e2e/e2e_test.ts

@@ -1,5 +1,6 @@
 import { buildingTrack } from "./build_track_test";
 import { creatingGame } from "./create_game_test";
+import { playerOverviewBreakdowns } from "./player_overview_breakdowns_test";
 import { setUpServer } from "./util/server";
 import { setTestTimeout } from "./util/timeout";
 import { Driver, setUpWebDriver } from "./util/webdriver";
@@ -19,4 +20,6 @@ describe("e2e tests", () => {
 
   describe("Building track", () => buildingTrack(driver));
   describe("creating game", () => creatingGame(driver));
+  describe("player overview breakdowns", () =>
+    playerOverviewBreakdowns(driver));
 });