Feature

frontend/src/components/HUD/HUD.tsx

@@ -1,57 +1,50 @@
-import './HUD.css';
+import "./HUD.css";
 import Heart from "../../assets/HEART.png";
 import SanityBar from "../../assets/level.png";
 
 function HUD({ state }: { state: any }) {
-    return (
-        <div className="hud">
+  return (
+    <div className="hud">
+      {/* Top-left panel: Money & age */}
+      <div className="hud-left">
+        <div className="money-age">
+          {/* Money display: always integer, formatted with commas */}
+          <div className="money">${Math.floor(state.total).toLocaleString()}</div>
 
-            {/* Top-left panel: Money & age */}
-            <div className="hud-left">
-                <div className="money-age">
-                {/* Money display: always integer, formatted with commas */}
-                <div className="money">${Math.floor(state.total).toLocaleString()}</div>
-
-                {/* Age display: always integer */}
-                <div className="age">Age: {Math.floor(state.age)}</div>
-            </div>
+          {/* Age display: always integer */}
+          <div className="age">Age: {Math.floor(state.age)}</div>
+        </div>
 
-                <ul className="stats-list">
-                    <li>Income: ${Math.floor(state.income)}</li>
-                    <li>Rent: ${Math.floor(state.rent)}</li>
-                    <li>Food: ${state.food}</li>
-                    <li>Insurance: ${state.insurance}</li>
-                    <li>House Level: {state.houseLevel}</li>
-                    
-                </ul>
-                <div></div>
-                <ul className="stats-list">
-                    <li>Index Investment: ${state.indexTotal}</li>
-                    <li>Index Returns: ${state.moneyMadeFromIndexFunds}</li>
-                </ul>
-            </div>
+        <ul className="stats-list">
+          <li>Income: ${Math.floor(state.income)}</li>
+          <li>Rent: ${Math.floor(state.rent)}</li>
+          <li>Food: ${state.food}</li>
+          <li>Insurance: ${state.insurance}</li>
+          <li>House Level: {state.houseLevel}</li>
+          <li>Sanity: {Math.floor(state.sanity)}</li>
+        </ul>
+        <div>-------------------</div>
+        <ul className="stats-list">
+          <li>Investment Total: ${state.indexTotal}</li>
+          <li>Index Returns: ${state.moneyMadeFromIndexFunds}</li>
+        </ul>
+      </div>
 
-                    {/* Top-right panel: HP & Sanity */}
-        <div className="hud-right">
-        <div className="hud-item">
-            <span className="hud-label">Lives:</span>
-            <div className="hearts">
-            {[...Array(state.lives)].map((_, i) => (
-                <img key={i} src={Heart} alt="heart" />
-            ))}
-            </div>
+      {/* Top-right panel: HP & Sanity */}
+      <div className="hud-right">
+        <div className="hearts">
+          {[...Array(state.lives)].map((_, i) => (
+            <img key={i} src={Heart} alt="heart" />
+          ))}
         </div>
 
-        <div className="hud-item">
-            <span className="hud-label">Sanity:</span>
-            <div className="sanity-bar-wrapper">
-            <div className="sanity-level" style={{ width: `${state.sanity}%` }} />
-            <img src={SanityBar} alt="sanity bar" className="sanity-bar-img" />
-            </div>
+        <div className="sanity-bar-wrapper">
+          <div className="sanity-level" style={{ width: `${state.sanity}%` }} />
+          <img src={SanityBar} alt="sanity bar" className="sanity-bar-img" />
         </div>
+      </div>
     </div>
-</div>    
-)
+  );
 }
 
 export default HUD;

frontend/src/components/Projection.tsx

@@ -7,16 +7,18 @@ export const FinalStatsOverlay: React.FC<{
   onRestart: () => void;
 }> = ({ roundData, onRestart }) => {
   const RETIREMENT_AGE = 60;
-  const AVG_RETURN = 0.04;       // 4% average investment return
-  const INFLATION_RATE = 0.03;   // 3% annual inflation
+  const AVG_RETURN = 0.1; // 4% average investment return
+  const INFLATION_RATE = 0.03; // 3% annual inflation
+  const SAVINGS_RATE = 0.02;
 
-  if (!roundData) return (
-    <div className="overlay">
-      <div className="overlay-box">
-        <h1>SYSTEM_SUMMARY: LOADING...</h1>
+  if (!roundData)
+    return (
+      <div className="overlay">
+        <div className="overlay-box">
+          <h1>SYSTEM_SUMMARY: LOADING...</h1>
+        </div>
       </div>
-    </div>
-  );
+    );
 
   const { age, indexTotal } = roundData;
   const yearsInvested = Math.max(age - 18, 1);
@@ -28,7 +30,11 @@ export const FinalStatsOverlay: React.FC<{
   }
 
   const yearsUntilRetirement = RETIREMENT_AGE - age;
-  const inflationAdjusted = roundData.total / Math.pow(1 + INFLATION_RATE, yearsUntilRetirement);
+
+  // FIX: inflation must be applied to the FUTURE value, not current savings
+  const realSavingsRate = (1 + SAVINGS_RATE) / (1 + INFLATION_RATE) - 1;
+
+  const inflationAdjusted = projectedTotal * Math.pow(1 + realSavingsRate, yearsUntilRetirement);
 
   return (
     <div className="overlay">
@@ -44,11 +50,13 @@ export const FinalStatsOverlay: React.FC<{
             <span>${projectedTotal.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
           </div>
           <div className="stat-card">
-            <label>Worth of your basic savings at retirement age</label>
+            <label>Worth of your basic savings at retirement age after inflation in a savings account</label>
             <span>${inflationAdjusted.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
           </div>
         </div>
-        <button className="btn" onClick={onRestart}>Restart!</button>
+        <button className="btn" onClick={onRestart}>
+          Restart!
+        </button>
       </div>
     </div>
   );

frontend/src/engine/buckets.ts

@@ -20,8 +20,8 @@ export function investPersonal(state: RoundData, amount: number): RoundData {
 export function investInsurance(state: RoundData, amount: number): RoundData {
     const next = structuredClone(state)
 
-    if ((next.insurance += amount) >= 50) {
-        next.insurance = 50;
+    if ((next.insurance + amount) >= 500) {
+        next.insurance = 500;
     } else {
         next.insurance += amount;
     }

frontend/src/engine/getinfo.ts

@@ -0,0 +1,18 @@
+import type { RoundData } from './types';
+
+export function getTotalCareer(state: RoundData): number {
+    const careerInvestmentTotal = state.careerInvestmentTotal;
+
+    return careerInvestmentTotal
+}
+
+export function getTotalIndexFunds(state: RoundData): number {
+  const indexFundsInvestmentTotal = state.indexTotal;
+
+  return indexFundsInvestmentTotal
+}
+export function getTotalInsurance(state: RoundData): number {
+  const insuranceInvestmentTotal = state.insurance;
+
+  return insuranceInvestmentTotal
+}

frontend/src/engine/init.ts

@@ -18,6 +18,7 @@ export function createInitialRound(): RoundData {
     food: 300,
     lives: 3,
     moneyMadeFromIndexFunds: 0,
+    moneyPutIntoIndexFunds: 0,
   }
 }
 

frontend/src/engine/types.ts

@@ -15,6 +15,7 @@ export type RoundData = {
   food: number
   lives: number
   gameOver?: boolean,
+  moneyPutIntoIndexFunds?: number
 
   moneyMadeFromIndexFunds: number
 }