Skip to content

added dynamic sanity, UI polishes #30

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 1 commit into from
Jan 25, 2026
Merged

added dynamic sanity, UI polishes #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
205 changes: 174 additions & 31 deletions frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,234 @@
/* Full-screen wrapper */
.fullscreen {
width: 100vw;
height: 100vh;

display: flex;
align-items: center;
justify-content: center;

}

/* Lil guy (centered character) */
.lil-guy-container {
position: fixed;
/* This centers him exactly in the middle of the screen */
top: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);


z-index: -5;
transform: translate(-50%, 20%);
z-index: 5; /* above background/pattern */
pointer-events: none;
}

.lil-guy {
width: 250px; /* Slightly smaller to fit the dorm better */
width: 250px;
height: auto;
}

/* House background */
.house-background {
position: fixed; /* full screen and fixed so it doesn’t scroll */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -5; /* send behind everything */
pointer-events: none; /* make clicks pass through */
z-index: 0; /* behind everything */
pointer-events: none;
}

/* Dotted pattern overlay */
.pattern-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

/* Cutesy Pastel Blue */
background-color: #d3c6b7;

/* White Dotted Pattern */
background-image: radial-gradient(circle, white 2px, transparent 2px);
background-size: 30px 30px; /* Adjust this for dot density */

/* Make it diagonal and slightly transparent so the house peeks through */
background-color: #bdaf95; /* soft cream/beige */
background-image: radial-gradient(circle, rgba(245, 244, 243, 0.5) 2px, transparent 2px);
background-size: 30px 30px;
opacity: 0.6;
z-index: -8; /* Sits between House (-10) and Lil Guy (-5) */
z-index: -10; /* above background but below character */
pointer-events: none;

animation: backgroundMove 3s linear infinite;
}

/* Optional: Make the dots float/move slowly */
@keyframes backgroundMove {
from { background-position: 0 0; }
to { background-position: 30px 30px; }
}

.pattern-overlay {
animation: backgroundMove 3s linear infinite;
}

/* Game container */
.game-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
padding-top: 20px; /* Give the stats some breathing room */
padding-top: 20px;
position: relative;
}

/* Investment modal */
.investment-modal {
background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
background: #fff4e6; /* soft cream */
padding: 20px;
border-radius: 15px;
margin-top: auto; /* Pushes the modal to the bottom */
border-radius: 16px;
margin-top: auto;
margin-bottom: 50px;
z-index: 10;
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
box-shadow: 0 6px 18px rgba(100, 60, 20, 0.25);
font-family: 'Upheavel', sans-serif;
color: #5b4636; /* muted brown text */
}

/* Input labels */
.investment-modal label {
display: flex;
flex-direction: column;
font-weight: 300;
font-size: 1.3rem;
}

/* Input fields */
.investment-modal input {
margin-top: 6px;
padding: 6px 10px;
border-radius: 8px;
border: 2px solid #d2b48c;
font-family: 'Upheavel', sans-serif;
font-size: 1rem;
}

/* Buttons inside modal */
.investment-modal .button-group button,
.upgrade-btn {
background-color: #d2b48c;
color: #fffaf0;
border: none;
border-radius: 12px;
padding: 8px 16px;
font-family: 'Upheavel', sans-serif;
font-size: 1rem;
cursor: pointer;
transition: transform 0.1s ease, background 0.2s ease;
}

.investment-modal .button-group button:hover,
.upgrade-btn:hover {
transform: scale(1.05);
background-color: #a67c52;
}

/* Retire / Advance button base */
.advance-btn,
button.px-4 {
background-color: #d2b48c;
color: #fffaf0;
border: none;
border-radius: 12px;
padding: 10px 18px;
font-family: 'Upheavel', sans-serif;
font-size: 1rem;
cursor: pointer;
margin-top: 15px;
transition: transform 0.1s ease, background 0.2s ease;
}

/* Hover / bounce only when enabled */
.advance-btn:hover:not(:disabled),
button.px-4:hover:not(:disabled) {
transform: scale(1.05);
background-color: #a67c52;
}

/* Disabled state */
button:disabled,
button.px-4:disabled {
background-color: #b0a08c; /* muted beige-grey */
color: #e0dcd2; /* faded cream text */
cursor: not-allowed;
transform: none; /* no hover bounce */
box-shadow: none;
}


/* HUD (left & right panels) */
.hud-left, .hud-right {
background: #fff4e6;
border: 3px solid #d2b48c;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(100,60,20,0.2);
color: #5b4636;
font-family: 'Upheavel', monospace;
}

.hud-left {
position: absolute;
top: 10px;
left: 10px;
width: 220px;
padding: 16px;
}

.hud-left h3 { color: #8b5e3c; margin-bottom: 10px; }
.hud-left ul { list-style: none; padding: 0; margin: 0; }
.hud-left li { margin-bottom: 6px; }

.hud-right {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}

.hearts { display: flex; gap: 8px; }
.hearts img { width: 32px; height: auto; }

.sanity-bar img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: inset 0 2px 4px rgba(100,60,20,0.1);
}

.retire-btn-container {
position: fixed;
top: 17%; /* vertically center relative to screen */
left: 93%; /* adjust distance from left to sit next to house */
transform: translateY(-50%);
z-index: 5; /* same as lil guy, above background/pattern */
}

.round-badge {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%); /* soft brown */
color: #302a1f; /* cream text */
font-family: 'Upheavel', sans-serif;
font-size: 2rem;
font-weight: bold;
padding: 8px 20px;
border-radius: 12px;
z-index: 20;

opacity: 0;
animation: roundFade 1.5s ease forwards;
}

@keyframes roundFade {
0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
10% { opacity: 1; transform: translateX(-50%) translateY(0); }
90% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}


69 changes: 43 additions & 26 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,12 @@ function App() {
const [career, setCareer] = useState('');
const [index, setIndex] = useState('');
const [insurance, setInsurance] = useState('');
const [showRound, setShowRound] = useState(false);


const audioRef = useRef<HTMLAudioElement>(null);
const currentTrackRef = useRef<string>('');


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

Expand Down Expand Up @@ -72,24 +75,38 @@ function App() {
}, [state.sanity]);

const handleInvestSubmit = (isUpgrade = false) => {
const investments: InvestmentData = {};
const investments: InvestmentData = {};

if (personal) investments.personal = parseFloat(personal);
if (career) investments.career = parseFloat(career);
if (index) investments.index = parseFloat(index);
if (insurance) investments.insurance = parseFloat(insurance);
if (isUpgrade) investments.upgradeHouse = true;
if (personal) investments.personal = parseFloat(personal);
if (career) investments.career = parseFloat(career);
if (index) investments.index = parseFloat(index);
if (insurance) investments.insurance = parseFloat(insurance);
if (isUpgrade) investments.upgradeHouse = true;

nextRound(investments);

// show round badge
setShowRound(true);
setTimeout(() => setShowRound(false), 1500); // show for 1.5s

// Reset inputs
setPersonal('');
setCareer('');
setIndex('');
setInsurance('');
};

nextRound(investments);

setPersonal('');
setCareer('');
setIndex('');
setInsurance('');
};

return (
<>
{showRound && (
<div className="round-badge">
Round {state.level}
</div>
)}


<EventModal
event={pendingEvent}
onContinue={continueEvent}
Expand Down Expand Up @@ -133,9 +150,19 @@ function App() {

{/* Layer 4: Interactive UI */}
<audio ref={audioRef} />
<div className="retire-btn-container">
<button
className={`px-4 py-2 rounded-lg text-white 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>
</div>

<div className="investment-modal">
<h3>Round {state.level} Investments</h3>
<label>Personal: $<input type="number" value={personal} onChange={(e) => setPersonal(e.target.value)} /></label>
<label>Career: $<input type="number" value={career} onChange={(e) => setCareer(e.target.value)} /></label>
<label>Index: $<input type="number" value={index} onChange={(e) => setIndex(e.target.value)} /></label>
Expand All @@ -150,21 +177,11 @@ function App() {
>
Upgrade House {state.houseLevel >= 2 ? '(MAX)' : ''}
</button>

</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
Loading