From e46d6991a4659815f8230928f621489e1666265b Mon Sep 17 00:00:00 2001 From: Mitja Belak Date: Thu, 31 Oct 2024 22:09:39 +0100 Subject: [PATCH] Adds overlays for modal, adds MAX chance geld required --- app/src/components/BossInfo.tsx | 10 +++--- app/src/components/BossOutcomeModal.tsx | 36 ++++++++++++------- app/src/components/RegistrationModal.tsx | 7 ++-- app/src/providers/PlayerProvider.tsx | 45 +++++++++++++++++++++--- app/src/styles/Modal.module.css | 35 ++++++++++++++++++ 5 files changed, 109 insertions(+), 24 deletions(-) diff --git a/app/src/components/BossInfo.tsx b/app/src/components/BossInfo.tsx index 4ee06ae..c8f023e 100644 --- a/app/src/components/BossInfo.tsx +++ b/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 = { 0: styles.boss0, @@ -14,7 +14,7 @@ export const bossLevelToClass: Record = { 6: styles.boss6, } -const bossToName: Record = { +export const bossToName: Record = { 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 = () => { {parseFloat((chanceToDefeat.current * 100).toFixed(2))} % to slay{" "} {chanceToDefeat.current == maxChance ? (MAXED) : (Max {maxChance * 100}%)}

+

{toReadable(bossToBossPower[boss?.level ?? 0])} GELD = max chance

} diff --git a/app/src/components/BossOutcomeModal.tsx b/app/src/components/BossOutcomeModal.tsx index 3f1fd33..793b082 100644 --- a/app/src/components/BossOutcomeModal.tsx +++ b/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 ? and you won! 🤩 : and you lost 😔; + const rewardAmount = parseFloat(parseFloat(formatUnits(bossToReward[lastBossResult.level], 18).toString()).toFixed(4)); const rewardText = ascended ?

You won {rewardAmount} RGCVII and ASCENDED!!!. This means you beat the bosses and gained a Prestige level. Your GELD is now forfeit, but your legend lives on.

: outcome ?

You won {rewardAmount} RGCVII

- :

Your GELD is now forfeit. Try again 💪 we know you can do it!

+ :

Your GELD is now forfeit.
Try again 💪 we know you can do it!

- return
-

You battled a boss

-

{text}

+ const bossName = bossToName[lastBossResult.variant]; + const bossClass = bossLevelToClass[lastBossResult.variant]; + + return
+

You battled {bossName} Moloch!

+
+

{text}

{rewardText}
- +
} diff --git a/app/src/components/RegistrationModal.tsx b/app/src/components/RegistrationModal.tsx index 540d8ab..279fdad 100644 --- a/app/src/components/RegistrationModal.tsx +++ b/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
-

Insert coins to continue

+ return
+

Insert coins to continue

-
+
} export default RegistrationModal diff --git a/app/src/providers/PlayerProvider.tsx b/app/src/providers/PlayerProvider.tsx index 8562031..fbcdd9d 100644 --- a/app/src/providers/PlayerProvider.tsx +++ b/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({ 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 ( { army: army as Army, boss: boss as Boss, balance: balance as bigint, + lastBossResult: lastBossResult as LastBossResult, register, raid, addUnit, battleWithBoss }}> {children} - {txHash && } - {bossJustBattled && } +
+ {txHash && } + {bossBattledModalOpen && } +
); } diff --git a/app/src/styles/Modal.module.css b/app/src/styles/Modal.module.css index a1ec842..9ed569c 100644 --- a/app/src/styles/Modal.module.css +++ b/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% {