Skip to content

Skip ahead metrics #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
groffbo merged 2 commits into from
Jan 25, 2026
Merged

Skip ahead metrics #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8081af9
created a component for events, added projection tools
groffbo Jan 25, 2026
36ccf2d
light styling
groffbo Jan 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,17 @@
},
"dependencies": {
"@tailwindcss/postcss": "^4.1.18",
"chart.js": "^4.5.1",
"mongoose": "^9.1.5",
"postcss": "^8.5.6",
"react": "^19.2.0",
"react-chartjs-2": "^5.3.1",
"react-dom": "^19.2.0",
"tailwindcss": "^4.1.18"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@types/chart.js": "^2.9.41",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
Expand Down
44 changes: 43 additions & 1 deletion frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import GameOverScreen from "../src/components/GameOverScreen";
import bigHouse from "../src/assets/Big_House.png";
import smallHouse from "../src/assets/Small_House.png";
import Dorm from "../src/assets/Dorm.png";
import { FinalStatsOverlay } from "../src/components/Projection";
import EventModal from "../src/components/EventModal"


interface InvestmentData {
personal?: number;
Expand All @@ -28,7 +31,8 @@ function App() {
2: bigHouse,
};

const { state, nextRound, resetGame} = useGameState();
const [showFinalStats, setShowFinalStats] = useState(false);


const [personal, setPersonal] = useState('');
const [career, setCareer] = useState('');
Expand All @@ -40,6 +44,14 @@ function App() {

const getGif = () => state.sanity >= 50 ? happy : state.sanity >= 25 ? neutral : sad;

const {
state,
nextRound,
pendingEvent,
continueEvent,
resetGame
} = useGameState();

useEffect(() => {
if (!audioRef.current) return;

Expand Down Expand Up @@ -78,6 +90,25 @@ function App() {

return (
<>
<EventModal
event={pendingEvent}
onContinue={continueEvent}
/>
{showFinalStats && (
<FinalStatsOverlay
roundData={{
...state,
indexTotal: state.indexTotal, // total contributed
moneyMadeFromIndexFunds: state.moneyMadeFromIndexFunds, // optional if needed
}}
onRestart={() => {
console.log("Retire button clicked, closing overlay");
setShowFinalStats(false);
resetGame();
}}
/>
)}

{state.gameOver ? (
<GameOverScreen onRestart={resetGame} />
) : (
Expand Down Expand Up @@ -122,6 +153,17 @@ function App() {
</div>
</div>

<button
className={`px-4 py-2 rounded-lg text-white font-bold mt-4 ${
state.age >= 22 ? "bg-blue-500 hover:bg-blue-600" : "bg-gray-400 cursor-not-allowed"
}`}
disabled={state.age < 22}
onClick={() => state.age >= 22 && setShowFinalStats(true)}
>
Retire!
</button>


<button className="advance-btn" onClick={() => nextRound()}>Advance Round (No Investment)</button>
</div>
)}
Expand Down
95 changes: 95 additions & 0 deletions frontend/src/components/EventModal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
@font-face {
font-family: 'Upheavel';
src: url('../assets/fonts/upheavtt.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/* Event Modal Overlay */
.event-overlay {
position: fixed;
inset: 0;
background: rgba(200, 180, 150, 0.5); /* soft beige semi-transparent */
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

/* Popup box */
.event-popup {
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);
overflow: hidden;
transform: scale(0.95);
animation: popIn 0.2s ease-out forwards;
font-family: 'Upheavel', sans-serif;
}

/* Optional top background (like header) */
.event-bg {
width: 100%;
border-bottom: 2px solid #d2b48c;
border-radius: 16px 16px 0 0;
}

/* Content area */
.event-content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
color: #5b4636; /* muted brown text */
text-align: center;
}

/* Heading */
.event-content h2 {
font-family: 'Upheavel', sans-serif;
font-size: 1.5rem;
color: #8b5e3c; /* soft brown heading */
margin: 0;
text-shadow: 1px 1px 2px rgba(255,255,255,0.6);
}

/* Paragraph text */
.event-content p {
font-family: 'Upheavel', sans-serif;
font-size: 1.1rem;
margin: 0;
line-height: 1.4;
}

/* Button */
.event-content button {
font-family: 'Upheavel', sans-serif;
font-size: 1rem;
background-color: #d2b48c; /* light brown */
color: #fffaf0; /* cream text */
border: none;
border-radius: 12px;
padding: 8px 16px;
cursor: pointer;
transition: transform 0.1s ease, background 0.2s ease;
}

.event-content button: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);
}
}
27 changes: 27 additions & 0 deletions frontend/src/components/EventModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import type { GameEvent } from "../engine/event";
import "./EventModal.css"; // make sure CSS is imported

interface EventModalProps {
event: GameEvent | null;
onContinue: () => void;
}

export default function EventModal({ event, onContinue }: EventModalProps) {
if (!event) return null;

return (
<div className="event-overlay">
<div className="event-popup">
<img
alt={event.name}
className="event-bg"
/>
<div className="event-content">
<h2>{event.name}</h2>
<p>{event.description}</p>
<button onClick={onContinue}>Continue</button>
</div>
</div>
</div>
);
}
1 change: 1 addition & 0 deletions frontend/src/components/HUD/HUD.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@

color: white;
font-family: monospace;
font-size: 1.2rem;
}

.hud-left h3 {
Expand Down
Loading