Adds overlays for modal, adds MAX chance geld required

app/src/components/BossInfo.tsx

@@ -2,7 +2,7 @@ import { formatUnits } from "viem"
 import { BossLevel, usePlayer } from "../providers/PlayerProvider"
 import styles from "../styles/Info.module.css"
 import { useEffect, useReducer, useRef } from "react"
-import { calculateBalance } from "./Counter"
+import { calculateBalance, toReadable } from "./Counter"
 
 export const bossLevelToClass: Record<BossLevel, string> = {
   0: styles.boss0,
@@ -14,7 +14,7 @@ export const bossLevelToClass: Record<BossLevel, string> = {
   6: styles.boss6,
 }
 
-const bossToName: Record<BossLevel, string> = {
+export const bossToName: Record<BossLevel, string> = {
   0: "Gluttonous",
   1: "Slothful",
   2: "Lusty",
@@ -70,11 +70,12 @@ const BossInfo = () => {
   const [, render] = useReducer(p => !p, false);
   useEffect(() => {
     const tickInterval = setInterval(() => {
-      chanceToDefeat.current = getBossChanceToDefeat(boss?.level ?? 0, calculateBalance(
+      const _balance = calculateBalance(
         balance ?? BigInt(0),
         army?.profit_per_second ?? BigInt(0),
         player?.last_raided_at ?? BigInt(0)
-      ))
+      );
+      chanceToDefeat.current = getBossChanceToDefeat(boss?.level ?? 0, _balance)
       render();
     }, 100);
     return () => clearInterval(tickInterval)
@@ -86,6 +87,7 @@ const BossInfo = () => {
       <strong>{parseFloat((chanceToDefeat.current * 100).toFixed(2))} % to slay</strong>{" "}
       {chanceToDefeat.current == maxChance ? <small className={styles.maxed}>(MAXED)</small> : <small>(Max {maxChance * 100}%)</small>}
     </p>
+    <p><small>{toReadable(bossToBossPower[boss?.level ?? 0])} GELD = max chance</small></p>
   </div>
 }
 

app/src/components/BossOutcomeModal.tsx

@@ -1,29 +1,39 @@
 import { formatUnits } from "viem";
-import { BossLevel, usePlayer } from "../providers/PlayerProvider";
+import { usePlayer } from "../providers/PlayerProvider";
 import styles from "../styles/Modal.module.css";
-import { bossToReward } from "./BossInfo";
+import bgStyles from "../styles/Background.module.css";
+import { bossToName, bossToReward } from "./BossInfo";
+import { bossLevelToClass } from "./Boss";
+
 
 interface BossOutcomeModalProps {
   setIsOpen: (val: boolean) => void,
-  outcome: boolean,
-  ascended: boolean,
-  bossLevel: BossLevel
 }
 
-const BossOutcomeModal = ({ setIsOpen, outcome, ascended, bossLevel }: BossOutcomeModalProps) => {
-  const text = outcome ? "and you won! 🤩" : "and you lost 😔";
-  const rewardAmount = parseFloat(parseFloat(formatUnits(bossToReward[bossLevel], 18).toString()).toFixed(4));
+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. Try again 💪 we know you can do it!</p>
+        : <p>Your GELD is now forfeit.<br />Try again 💪 we know you can do it!</p>
 
-  return <div className={styles.modal}>
-    <h2>You battled a boss</h2>
-    <p>{text}</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)}>Proceed</button>
+      <button onClick={() => setIsOpen(false)}>Onward!</button>
     </div>
   </div>
 }

app/src/components/RegistrationModal.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { usePlayer } from "../providers/PlayerProvider";
 import styles from "../styles/Modal.module.css";
+import bgStyles from "../styles/Background.module.css";
 
 interface RegistrationModalProps {
   isOpen: boolean;
@@ -14,13 +15,13 @@ const RegistrationModal = ({ isOpen, setIsOpen }: RegistrationModalProps) => {
     setIsOpen(false);
   }, [register, setIsOpen])
   if (!isOpen) return null;
-  return <div className={styles.modal}>
-    <h2>Insert coins to continue</h2>
+  return <div className={bgStyles.leaderboardOverlay}><div className={styles.modal}>
+    <h2 style={{ textAlign: "center" }}>Insert coins to continue</h2>
     <div>
       <button onClick={() => onRegister("RGCVII")}>500 RGCVII</button>
       <button onClick={() => onRegister("ETH")}>0.0005 ETH</button>
     </div>
-  </div>
+  </div></div>
 }
 
 export default RegistrationModal

app/src/providers/PlayerProvider.tsx

@@ -1,9 +1,11 @@
-import React, { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react'
+import React, { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { useAccount, useReadContract, useWriteContract } from 'wagmi'
 import contractAbi from "../../../out/RaidGeld.sol/RaidGeld.json"
 import { Hash, parseEther } from 'viem'
 import contracts from '../../contract_address'
 import WaitingForTxModal from '../components/WaitingForTxModal'
+import BossOutcomeModal from '../components/BossOutcomeModal'
+import styles from "../styles/Background.module.css"
 
 const { contractAddress, daoTokenAddress } = contracts
 const abi = contractAbi.abi
@@ -33,11 +35,20 @@ export interface Boss {
   variants: [BossLevel, BossLevel, BossLevel, BossLevel, BossLevel, BossLevel, BossLevel]
 }
 
+export interface LastBossResult {
+  level: BossLevel;
+  variant: BossLevel;
+  battled_at: bigint;
+  reward: bigint;
+  prestigeGained: boolean;
+}
+
 export interface PlayerContextType {
   isRegistered: boolean,
   player: null | Player,
   army: null | Army,
   boss: null | Boss,
+  lastBossResult: null | LastBossResult,
   balance: bigint,
   register: (arg: "ETH" | "RGCVII") => void,
   raid: () => void,
@@ -50,6 +61,7 @@ const PlayerContext = createContext<PlayerContextType>({
   player: null,
   army: null,
   boss: null,
+  lastBossResult: null,
   balance: BigInt(0),
   register: () => { },
   raid: () => { },
@@ -61,7 +73,8 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => {
   const { address, isConnected } = useAccount();
   const { writeContract, error } = useWriteContract();
   const [[txHash, callbackFn], setHashAndCallback] = useState<[Hash | null, () => void]>([null, () => { }])
-  const [bossJustBattled, setBossJustBattled] = useState(false);
+  const [bossBattledModalOpen, setBossBattlesModalOpen] = useState(false);
+  const hasFetchedLastBossFirstTime = useRef(false);
 
   useEffect(() => {
     console.warn(error)
@@ -126,6 +139,17 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => {
     }
   });
 
+  const { data: lastBossResult } = useReadContract({
+    address: contractAddress,
+    abi,
+    functionName: 'getLastBossResult',
+    args: [address],
+    query: {
+      enabled: isConnected,
+      refetchInterval: 15
+    }
+  });
+
   console.log(balance, player, army, boss)
 
   const register = useCallback((arg: "RGCVII" | "ETH") => {
@@ -203,6 +227,16 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => {
     })
   }, [writeContract, resetHashAndCallback])
 
+  useEffect(() => {
+    if (lastBossResult != null) {
+      if (hasFetchedLastBossFirstTime.current) {
+        setBossBattlesModalOpen(true);
+      } else {
+        hasFetchedLastBossFirstTime.current = true;
+      }
+    }
+  }, [lastBossResult])
+
   return (
     <PlayerContext.Provider value={{
       isRegistered: isRegistered as boolean,
@@ -210,14 +244,17 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => {
       army: army as Army,
       boss: boss as Boss,
       balance: balance as bigint,
+      lastBossResult: lastBossResult as LastBossResult,
       register,
       raid,
       addUnit,
       battleWithBoss
     }}>
       {children}
-      {txHash && <WaitingForTxModal hash={txHash} callbackFn={callbackFn} />}
-      {bossJustBattled && <WaitingForTxModal hash={txHash} callbackFn={callbackFn} />}
+      <div className={`${(txHash || bossBattledModalOpen) ? styles.leaderboardOverlay : ""}`}>
+        {txHash && <WaitingForTxModal hash={txHash} callbackFn={callbackFn} />}
+        {bossBattledModalOpen && <BossOutcomeModal setIsOpen={setBossBattlesModalOpen} />}
+      </div>
     </PlayerContext.Provider>
   );
 }

app/src/styles/Modal.module.css

@@ -47,6 +47,41 @@
     margin-bottom: 0;
   }
 }
+.bossModal {
+  padding: 32px;
+  z-index: 3;
+  max-width: 100%;
+  width: 500px;
+  text-align: center;
+  margin-top: 50px;
+  .outcome {
+    font-size: 1.7rem;
+  }
+  .image {
+    position: relative;
+    margin: 0 auto;
+    top: 0;
+    &::after {
+      display: none;
+    }
+  }
+  & p {
+    margin: 0.5rem 0;
+  }
+  & button {
+    margin: 1rem;
+  }
+  .lost {
+    color: var(--accent-color);
+  }
+  .won {
+    color: var(--hover-color);
+  }
+  .lost,
+  .won {
+    font-size: 2rem;
+  }
+}
 
 @keyframes spin {
   0% {