idle_moloch/app/src/components/BossOutcomeModal.tsx
Mitja Belak e46d6991a4
Some checks are pending
CI / Foundry project (push) Waiting to run
Adds overlays for modal, adds MAX chance geld required
2024-10-31 22:09:39 +01:00

42 lines
1.8 KiB
TypeScript

import { formatUnits } from "viem";
import { usePlayer } from "../providers/PlayerProvider";
import styles from "../styles/Modal.module.css";
import bgStyles from "../styles/Background.module.css";
import { bossToName, bossToReward } from "./BossInfo";
import { bossLevelToClass } from "./Boss";
interface BossOutcomeModalProps {
setIsOpen: (val: boolean) => void,
}
const BossOutcomeModal = ({ setIsOpen }: BossOutcomeModalProps) => {
const { lastBossResult } = usePlayer();
if (lastBossResult == null) return null;
const outcome = lastBossResult.reward != BigInt(0);
const ascended = lastBossResult.prestigeGained;
const text = outcome ? <span>and you <strong className={styles.won}>won!</strong> 🤩</span> : <span>and you <strong className={styles.lost}>lost</strong> 😔</span>;
const rewardAmount = parseFloat(parseFloat(formatUnits(bossToReward[lastBossResult.level], 18).toString()).toFixed(4));
const rewardText =
ascended ? <p>You won <strong>{rewardAmount} RGCVII</strong> and <strong>ASCENDED!!!</strong>. This means you beat the bosses and gained a <strong>Prestige level</strong>. Your GELD is now forfeit, but your legend lives on.</p>
: outcome ? <p>You won <strong>{rewardAmount} RGCVII</strong></p>
: <p>Your GELD is now forfeit.<br />Try again 💪 we know you can do it!</p>
const bossName = bossToName[lastBossResult.variant];
const bossClass = bossLevelToClass[lastBossResult.variant];
return <div className={`${styles.modal} ${styles.bossModal}`}>
<h2>You battled {bossName} Moloch!</h2>
<div className={`${bgStyles.boss} ${bossClass} ${styles.image}`} />
<p className={styles.outcome}>{text}</p>
{rewardText}
<div>
<button onClick={() => setIsOpen(false)}>Onward!</button>
</div>
</div>
}
export default BossOutcomeModal