forked from mico/idle_moloch
76 lines
2.1 KiB
TypeScript
76 lines
2.1 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";
|
|
import { lostSound, wonSound } from "../utils/soundsEffect";
|
|
|
|
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;
|
|
|
|
if (outcome) {
|
|
wonSound();
|
|
} else {
|
|
lostSound();
|
|
}
|
|
|
|
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;
|