+
+ );
+}
diff --git a/frontend/src/components/HUD/HUD.css b/frontend/src/components/HUD/HUD.css
index 3bf89de..5f41f18 100644
--- a/frontend/src/components/HUD/HUD.css
+++ b/frontend/src/components/HUD/HUD.css
@@ -26,6 +26,7 @@
color: white;
font-family: monospace;
+ font-size: 1.2rem;
}
.hud-left h3 {
diff --git a/frontend/src/components/Projection.css b/frontend/src/components/Projection.css
new file mode 100644
index 0000000..168178e
--- /dev/null
+++ b/frontend/src/components/Projection.css
@@ -0,0 +1,104 @@
+@font-face {
+ font-family: 'Upheavel';
+ src: url('../assets/fonts/upheavtt.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+/* Full-screen overlay */
+.overlay {
+ position: fixed;
+ inset: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(200, 180, 150, 0.5); /* soft beige semi-transparent */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 99999;
+ font-family: 'Upheavel', sans-serif;
+}
+
+/* Popup box */
+.overlay-box {
+ position: relative;
+ width: 420px;
+ background: #fff4e6; /* cream/beige */
+ border: 4px solid #d2b48c; /* soft brown border */
+ border-radius: 16px;
+ box-shadow: 0 8px 20px rgba(100, 60, 20, 0.25);
+ padding: 2rem 3rem;
+ text-align: center;
+ overflow: hidden;
+ transform: scale(0.95);
+ animation: popIn 0.2s ease-out forwards;
+ color: #5b4636; /* muted brown text */
+}
+
+/* Optional top header (if you want a separate background) */
+.overlay-box h1 {
+ font-family: 'Upheavel', sans-serif;
+ font-size: 1.8rem;
+ color: #8b5e3c; /* soft brown heading */
+ margin-bottom: 1.5rem;
+ text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
+}
+
+/* Stats grid (vertical for simple layout) */
+.stats-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ margin-top: 1rem;
+}
+
+/* Individual stat cards */
+.stat-card {
+ background: #fdf2e9; /* lighter beige card */
+ padding: 1rem;
+ border-radius: 14px;
+}
+
+.stat-card label {
+ display: block;
+ font-size: 1.5rem;
+ opacity: 0.85;
+ margin-bottom: 0.25rem;
+}
+
+.stat-card span {
+ font-size: 1.6rem;
+ font-weight: bold;
+ color: #6b4f3c; /* deeper brown */
+}
+
+/* Restart button */
+.btn {
+ margin-top: 2rem;
+ padding: 0.9rem 1.6rem;
+ background-color: #d2b48c; /* light brown */
+ color: #fffaf0; /* cream text */
+ border: none;
+ border-radius: 12px;
+ font-size: 1.5rem;
+ font-family: 'Upheavel', sans-serif;
+ cursor: pointer;
+ transition: transform 0.1s ease, background 0.2s ease;
+}
+
+.btn:hover {
+ transform: scale(1.05);
+ background-color: #a67c52; /* darker brown hover */
+}
+
+/* Pop-in animation */
+@keyframes popIn {
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
diff --git a/frontend/src/components/Projection.tsx b/frontend/src/components/Projection.tsx
new file mode 100644
index 0000000..d298534
--- /dev/null
+++ b/frontend/src/components/Projection.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import type { RoundData } from "../engine/types";
+import "./Projection.css";
+
+export const FinalStatsOverlay: React.FC<{
+ roundData?: RoundData;
+ onRestart: () => void;
+}> = ({ roundData, onRestart }) => {
+ const RETIREMENT_AGE = 60;
+ const AVG_RETURN = 0.04;
+
+ if (!roundData) return (
+
+ ![{event.name}]()
+
+
+
+ {event.name}
+{event.description}
+ +
+
+ );
+
+ const { age, indexTotal } = roundData;
+ const yearsInvested = Math.max(age - 18, 1);
+ const avgContribution = indexTotal / yearsInvested;
+
+ let projectedTotal = indexTotal;
+ for (let futureAge = age + 1; futureAge <= RETIREMENT_AGE; futureAge++) {
+ projectedTotal = (projectedTotal + avgContribution) * (1 + AVG_RETURN);
+ }
+
+ return (
+
+
+ SYSTEM_SUMMARY: LOADING...
+
+
+ );
+};
diff --git a/frontend/src/engine/event.ts b/frontend/src/engine/event.ts
index b119377..02a7a5f 100644
--- a/frontend/src/engine/event.ts
+++ b/frontend/src/engine/event.ts
@@ -1,6 +1,6 @@
import type { RoundData } from './types';
-interface GameEvent {
+export interface GameEvent {
id: string;
name: string;
description: string;
@@ -38,9 +38,9 @@ const eventPool: GameEvent[] = [
description: 'You were distracted and rear-ended a luxury sedan. Your car is a mess, and the other driver is furious.',
effect: (state) => {
let basecost = 4000;
- if (state.insurance >= 10) basecost = 1000;
- if (state.insurance >= 30) basecost = 500;
if (state.insurance >= 40) basecost = 30;
+ else if (state.insurance >= 30) basecost = 500;
+ else if (state.insurance >= 10) basecost = 1000;
state.total -= basecost;
state.sanity -= 10;
@@ -116,23 +116,43 @@ const eventPool: GameEvent[] = [
}
},
];
-export function triggerRandomEvent(state: RoundData): RoundData {
- // 1. Pick a random index
- const randomIndex = Math.floor(Math.random() * eventPool.length);
- const selectedEvent = eventPool[randomIndex];
+// export function triggerRandomEvent(state: RoundData): RoundData {
+// // 1. Pick a random index
+// const randomIndex = Math.floor(Math.random() * eventPool.length);
+// const selectedEvent = eventPool[randomIndex];
- // 2. Log it so the player knows what happened
- console.group(`EVENT: ${selectedEvent.name}`);
- console.log(selectedEvent.description);
+// // 2. Log it so the player knows what happened
+// console.group(`EVENT: ${selectedEvent.name}`);
+// console.log(selectedEvent.description);
- // 3. Apply the specific logic of that event
- const nextState = selectedEvent.effect(state);
+// // 3. Apply the specific logic of that event
+// const nextState = selectedEvent.effect(state);
- if (state.sanity < 0) {
- state.sanity = 0;
- }
+// if (state.sanity < 0) {
+// state.sanity = 0;
+// }
- console.groupEnd();
+// console.groupEnd();
- return nextState;
-}
\ No newline at end of file
+// return nextState;
+// }
+
+export function getRandomEvent(): GameEvent {
+ const randomIndex = Math.floor(Math.random() * eventPool.length);
+ return eventPool[randomIndex];
+}
+
+export function applyEvent(
+ state: RoundData,
+ event: GameEvent
+): RoundData {
+ const next = structuredClone(state);
+ const result = event.effect(next);
+
+ if (result.sanity < 0) {
+ result.sanity = 0;
+ }
+
+ return result;
+}
+
diff --git a/frontend/src/engine/init.ts b/frontend/src/engine/init.ts
index 22ffd37..a0f9317 100644
--- a/frontend/src/engine/init.ts
+++ b/frontend/src/engine/init.ts
@@ -4,11 +4,11 @@ import type { RoundData } from './types';
export function createInitialRound(): RoundData {
return {
name: "Player",
- income: 5000,
+ income: 1200,
total: 0,
sanity: 100,
insurance: 0,
- rent: 700,
+ rent: 800,
careerInvestmentTotal: 0,
indexTotal: 0,
debtTotal: 0,
diff --git a/frontend/src/engine/round.ts b/frontend/src/engine/round.ts
index 77ef777..52c5b19 100644
--- a/frontend/src/engine/round.ts
+++ b/frontend/src/engine/round.ts
@@ -1,51 +1,55 @@
import type { RoundData } from './types';
+import type { GameEvent } from './event';
+import { getRandomEvent } from './event';
+
import { applyIncome } from "./income";
import { applyIndexGrowth } from "./indexLogic";
import { applySanityDecay } from "./sanity";
import { applyFixedExpenses } from "./fixed_expenses";
-import { triggerRandomEvent } from './event';
function checkLives(state: RoundData): RoundData {
const next = { ...state };
- if (next.sanity <= 0 || next.total < 0) {
+ if (next.sanity <= 0 || (next.total < 0 && next.level > 1)) {
next.lives = Math.max(0, next.lives - 1);
if (next.total < 0) next.total = 0;
if (next.sanity <= 0) next.sanity = 50;
-
- console.log(`You lost a life! Lives remaining: ${next.lives}`);
}
return next;
}
-export function advanceRound(state: RoundData): RoundData {
+export function advanceRound(state: RoundData): {
+ state: RoundData;
+ pendingEvent: GameEvent | null;
+} {
let next = structuredClone(state);
next = checkLives(next);
if (next.lives === 0) {
- console.log("GAME OVER! You have no lives left.");
next.gameOver = true;
- return next;
+ return { state: next, pendingEvent: null };
}
- console.group(`🌀 ROUND ${next.level}`);
-
+ // ---- Round simulation ----
next = applyIncome(next);
next = applyFixedExpenses(next);
next = applyIndexGrowth(next);
next = applySanityDecay(next);
+
next.age += 0.25;
next.level += 1;
- if (next.level % 3 === 0) {
- next = triggerRandomEvent(next);
- }
-
- console.log("End of round:", next);
- console.groupEnd();
+ // ---- Event emission (NOT application) ----
+ const pendingEvent =
+ next.level % 3 === 0
+ ? getRandomEvent()
+ : null;
- return next;
+ return {
+ state: next,
+ pendingEvent
+ };
}
diff --git a/frontend/src/state/useGameState.ts b/frontend/src/state/useGameState.ts
index 48f1352..ca5dfe0 100644
--- a/frontend/src/state/useGameState.ts
+++ b/frontend/src/state/useGameState.ts
@@ -1,16 +1,33 @@
import { useState } from "react";
import { createInitialRound } from "../engine/init";
import { advanceRound } from "../engine/round";
-import { investPersonal, investCareer, investIndex, investInsurance } from "../engine/buckets";
-import type { RoundData } from '../engine/types';
+import { applyEvent } from "../engine/event"; // ⬅️ ADD
+import {
+ investPersonal,
+ investCareer,
+ investIndex,
+ investInsurance
+} from "../engine/buckets";
+
+import type { RoundData } from "../engine/types";
+import type { GameEvent } from "../engine/event"; // ⬅️ ADD
+
export function useGameState() {
const [state, setState] = useState
+
+ Current age: {age}
+
+
+
+
+
+ ${indexTotal.toLocaleString()}
+
+
+
+ ${projectedTotal.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+
+