generated from nhcarrigan/template
feat: initial prototype — core game systems (#30)
## Summary This PR represents the full v1 prototype, implementing the core game systems for Elysium. - Full idle/clicker RPG loop: resource collection, crafting, boss fights, exploration, and quests - Adventurer hiring with batch size selector and progressive tier cost scaling - Prestige, transcendence, and apotheosis systems with auto-prestige support - Character sheet, titles, leaderboards, companion system, and daily login bonuses - Auto-quest and auto-boss toggles - Discord webhook notifications on prestige/transcendence/apotheosis - Discord role awarded on apotheosis - Responsive design and overarching story/lore system - In-game sound effects and browser notifications for key events - Support link button in the resource bar - Full test coverage (100% on `apps/api` and `packages/types`) - CI pipeline: lint → build → test ## Closes Closes #1 Closes #2 Closes #3 Closes #4 Closes #5 Closes #6 Closes #7 Closes #8 Closes #9 Closes #10 Closes #11 Closes #12 Closes #13 Closes #14 Closes #16 Closes #19 Closes #20 Closes #21 Closes #22 Closes #23 Closes #24 Closes #25 Closes #26 Closes #27 Closes #29 ✨ This issue was created with help from Hikari~ 🌸 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Reviewed-on: #30 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
This commit was merged in pull request #30.
This commit is contained in:
@@ -0,0 +1,237 @@
|
||||
/**
|
||||
* @file Battle modal component displaying animated battle results.
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
/* eslint-disable max-lines-per-function -- Complex battle animation and result display */
|
||||
/* eslint-disable complexity -- Battle result display requires many conditional paths */
|
||||
import { type JSX, useEffect, useState } from "react";
|
||||
import { type BattleResult, useGame } from "../../context/gameContext.js";
|
||||
|
||||
/**
|
||||
* Converts HP values to a percentage for display.
|
||||
* @param current - The current HP value.
|
||||
* @param maximum - The maximum HP value.
|
||||
* @returns The percentage as a number between 0 and 100.
|
||||
*/
|
||||
const toHpPercent = (current: number, maximum: number): number => {
|
||||
if (maximum === 0) {
|
||||
return 0;
|
||||
}
|
||||
const scaled = current * 100;
|
||||
return scaled / maximum;
|
||||
};
|
||||
|
||||
interface BattleModalProperties {
|
||||
readonly battle: BattleResult;
|
||||
readonly onDismiss: ()=> void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the battle modal with HP bars and animated battle results.
|
||||
* @param props - The battle modal properties.
|
||||
* @param props.battle - The battle result data to display.
|
||||
* @param props.onDismiss - Callback to dismiss the modal.
|
||||
* @returns The JSX element.
|
||||
*/
|
||||
const BattleModal = ({
|
||||
battle,
|
||||
onDismiss,
|
||||
}: BattleModalProperties): JSX.Element => {
|
||||
const { result, bossName } = battle;
|
||||
const { formatNumber } = useGame();
|
||||
|
||||
const [ phase, setPhase ] = useState<"animating" | "result">("animating");
|
||||
|
||||
const bossStartPercent = toHpPercent(result.bossHpBefore, result.bossMaxHp);
|
||||
const partyStartPercent = 100;
|
||||
|
||||
const bossEndPercent = toHpPercent(
|
||||
result.bossHpAtBattleEnd,
|
||||
result.bossMaxHp,
|
||||
);
|
||||
const partyEndPercent = toHpPercent(
|
||||
result.partyHpRemaining,
|
||||
result.partyMaxHp,
|
||||
);
|
||||
|
||||
const [ bossHpPercent, setBossHpPercent ] = useState(bossStartPercent);
|
||||
const [ partyHpPercent, setPartyHpPercent ] = useState(partyStartPercent);
|
||||
|
||||
useEffect(() => {
|
||||
const startAnimation = setTimeout(() => {
|
||||
setBossHpPercent(bossEndPercent);
|
||||
setPartyHpPercent(partyEndPercent);
|
||||
}, 200);
|
||||
|
||||
const revealResult = setTimeout(() => {
|
||||
setPhase("result");
|
||||
}, 5200);
|
||||
|
||||
return (): void => {
|
||||
clearTimeout(startAnimation);
|
||||
clearTimeout(revealResult);
|
||||
};
|
||||
}, [ bossEndPercent, partyEndPercent ]);
|
||||
|
||||
let bossHpBarColour = "#c0392b";
|
||||
if (bossHpPercent > 50) {
|
||||
bossHpBarColour = "#e74c3c";
|
||||
} else if (bossHpPercent > 25) {
|
||||
bossHpBarColour = "#e67e22";
|
||||
}
|
||||
|
||||
let partyHpBarColour = "#e74c3c";
|
||||
if (partyHpPercent > 50) {
|
||||
partyHpBarColour = "#27ae60";
|
||||
} else if (partyHpPercent > 25) {
|
||||
partyHpBarColour = "#f39c12";
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal battle-modal">
|
||||
<h2>
|
||||
{"⚔️ Battle: "}
|
||||
{bossName}
|
||||
</h2>
|
||||
|
||||
<div className="battle-stats">
|
||||
<div className="battle-stat">
|
||||
<span className="stat-label">{"Your Party DPS"}</span>
|
||||
<span className="stat-value">{formatNumber(result.partyDPS)}</span>
|
||||
</div>
|
||||
<div className="battle-stat-divider">{"vs"}</div>
|
||||
<div className="battle-stat">
|
||||
<span className="stat-label">{"Boss DPS"}</span>
|
||||
<span className="stat-value">{formatNumber(result.bossDPS)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="battle-bars">
|
||||
<div className="battle-bar-row">
|
||||
<span className="bar-label">
|
||||
{"👹 "}
|
||||
{bossName}
|
||||
</span>
|
||||
<div className="hp-bar-container">
|
||||
<div
|
||||
className="hp-bar-fill"
|
||||
style={{
|
||||
backgroundColor: bossHpBarColour,
|
||||
transition: "width 5s ease-in-out",
|
||||
width: `${bossHpPercent.toFixed(1)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="bar-hp">
|
||||
{formatNumber(result.bossHpAtBattleEnd)}
|
||||
{" / "}
|
||||
{formatNumber(result.bossMaxHp)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="vs-divider">{"⚔️ VS ⚔️"}</div>
|
||||
|
||||
<div className="battle-bar-row">
|
||||
<span className="bar-label">{"🛡️ Your Party"}</span>
|
||||
<div className="hp-bar-container">
|
||||
<div
|
||||
className="hp-bar-fill party-hp"
|
||||
style={{
|
||||
backgroundColor: partyHpBarColour,
|
||||
transition: "width 5s ease-in-out",
|
||||
width: `${partyHpPercent.toFixed(1)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="bar-hp">
|
||||
{formatNumber(result.partyHpRemaining)}
|
||||
{" / "}
|
||||
{formatNumber(result.partyMaxHp)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{phase === "animating"
|
||||
&& <p className="battle-in-progress">{"Battling…"}</p>
|
||||
}
|
||||
|
||||
{phase === "result"
|
||||
&& <div
|
||||
className={`battle-outcome ${result.won
|
||||
? "victory"
|
||||
: "defeat"}`}
|
||||
>
|
||||
{result.won
|
||||
? <>
|
||||
<h3>{"🏆 Victory!"}</h3>
|
||||
{result.rewards === undefined
|
||||
? null
|
||||
: <div className="battle-rewards">
|
||||
<p>{"Rewards:"}</p>
|
||||
<span>
|
||||
{"🪙 "}
|
||||
{formatNumber(result.rewards.gold)}
|
||||
{" gold"}
|
||||
</span>
|
||||
{result.rewards.essence > 0
|
||||
&& <span>
|
||||
{"✨ "}
|
||||
{formatNumber(result.rewards.essence)}
|
||||
{" essence"}
|
||||
</span>
|
||||
}
|
||||
{result.rewards.crystals > 0
|
||||
&& <span>
|
||||
{"💎 "}
|
||||
{formatNumber(result.rewards.crystals)}
|
||||
{" crystals"}
|
||||
</span>
|
||||
}
|
||||
{result.rewards.bountyRunestones > 0
|
||||
&& <span className="battle-bounty">
|
||||
{"🔮 "}
|
||||
{formatNumber(result.rewards.bountyRunestones)}
|
||||
{" runestones (first kill!)"}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
: <>
|
||||
<h3>{"💀 Defeat"}</h3>
|
||||
<p>{"Your party was defeated. The boss has reset."}</p>
|
||||
{result.casualties !== undefined
|
||||
&& result.casualties.length > 0
|
||||
? <div className="battle-casualties">
|
||||
<p>{"Casualties:"}</p>
|
||||
{result.casualties.map((casualty) => {
|
||||
return (
|
||||
<span key={casualty.adventurerId}>
|
||||
{"☠️ "}
|
||||
{casualty.killed} {casualty.adventurerId}
|
||||
{" lost"}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
: null}
|
||||
</>
|
||||
}
|
||||
<button
|
||||
className="dismiss-button"
|
||||
onClick={onDismiss}
|
||||
type="button"
|
||||
>
|
||||
{"Continue"}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { BattleModal };
|
||||
Reference in New Issue
Block a user