diff --git a/app/public/background/clouds_large.png b/app/public/background/clouds_large.png index 879f8ba..532b051 100644 Binary files a/app/public/background/clouds_large.png and b/app/public/background/clouds_large.png differ diff --git a/app/public/background/clouds_small.png b/app/public/background/clouds_small.png index 34ead34..def7276 100644 Binary files a/app/public/background/clouds_small.png and b/app/public/background/clouds_small.png differ diff --git a/app/src/components/Army.tsx b/app/src/components/Army.tsx index 1645a3c..9989226 100644 --- a/app/src/components/Army.tsx +++ b/app/src/components/Army.tsx @@ -80,7 +80,7 @@ const unitAvailableToDiscoverAt: Record = { }; interface UnitProps { - addUnit: (unitType: UnitType) => void; + addUnit: (unitType: UnitType, amount?: number) => void; unitType: UnitType; canPurchase: boolean; isShrouded: boolean; @@ -92,19 +92,20 @@ const Unit = ({ unitType, canPurchase, isShrouded, - n_units, + n_units: unitLevel, }: UnitProps) => { const [unitPrice, unitProfit] = useMemo(() => { return [ - toReadable(calculateUnitPrice(unitType, n_units, 1)), - toReadable(calculateProfitPerSecond(unitType, n_units)), + toReadable(calculateUnitPrice(unitType, unitLevel, 1)), + toReadable(calculateProfitPerSecond(unitType, unitLevel)), ]; - }, [n_units, unitType]); + }, [unitLevel, unitType]); return (
addUnit(unitType)} - className={`${styles.armyUnit} ${canPurchase ? "" : styles.isUnavailable - }`} + className={`${styles.armyUnit} ${ + canPurchase ? "" : styles.isUnavailable + }`} >
GELD )} - {n_units > 0 ? ( + {unitLevel > 0 ? ( - {n_units} + {`lvl ${unitLevel}`} ) : null} - {n_units > 0 ? ( + {unitLevel > 0 ? ( {unitProfit} per sec diff --git a/app/src/components/BossInfo.tsx b/app/src/components/BossInfo.tsx index eede405..a17e8be 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", @@ -24,7 +24,7 @@ const bossToName: Record = { 6: "Greedy", } -const bossToReward: Record = { +export const bossToReward: Record = { 0: BigInt("200000000000000000"), 1: BigInt("28274420000000000000"), 2: BigInt("174191628800000000000"), @@ -70,22 +70,24 @@ 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) }, [balance, army?.profit_per_second, player?.last_raided_at, boss?.level]) return
-

{bossToName[variant]} Moloch (lvl {boss ? boss.level + 1 : 0})

+

{bossToName[variant]} Moloch (lvl {boss ? boss.level + 1 : 0})

{parseFloat(parseFloat(formatUnits(bossToReward[boss?.level || 0], 18).toString()).toFixed(4))} RGCVII reward

{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 new file mode 100644 index 0000000..793b082 --- /dev/null +++ b/app/src/components/BossOutcomeModal.tsx @@ -0,0 +1,41 @@ +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 ? 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!

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

You battled {bossName} Moloch!

+
+

{text}

+ {rewardText} +
+ +
+
+} + +export default BossOutcomeModal diff --git a/app/src/components/Counter.tsx b/app/src/components/Counter.tsx index 843fa32..41e2646 100644 --- a/app/src/components/Counter.tsx +++ b/app/src/components/Counter.tsx @@ -16,25 +16,26 @@ export const calculateBalance = (balance: bigint, perSecond: bigint, lastRaidedA export const toReadable = (rawValue: bigint) => { const value = rawValue / BigInt(10000); const suffixes = [ - { value: BigInt('1000'), suffix: 'thousand' }, - { value: BigInt('1000000'), suffix: 'million' }, - { value: BigInt('1000000000'), suffix: 'billion' }, - { value: BigInt('1000000000000'), suffix: 'trillion' }, - { value: BigInt('1000000000000000'), suffix: 'quadrillion' }, - { value: BigInt('1000000000000000000'), suffix: 'quintillion' }, - { value: BigInt('1000000000000000000000'), suffix: 'sextillion' }, - { value: BigInt('1000000000000000000000000'), suffix: 'septillion' }, - { value: BigInt('1000000000000000000000000000'), suffix: 'octillion' }, - { value: BigInt('1000000000000000000000000000000'), suffix: 'nonillion' }, - { value: BigInt('1000000000000000000000000000000000'), suffix: 'decillion' }, - { value: BigInt('1000000000000000000000000000000000000'), suffix: 'undecillion' }, - { value: BigInt('1000000000000000000000000000000000000000'), suffix: 'duodecillion' }, - { value: BigInt('1000000000000000000000000000000000000000000'), suffix: 'tredecillion' }, - { value: BigInt('1000000000000000000000000000000000000000000000'), suffix: 'quattuordecillion' }, - { value: BigInt('1000000000000000000000000000000000000000000000000'), suffix: 'quindecillion' }, - { value: BigInt('1000000000000000000000000000000000000000000000000000'), suffix: 'sexdecillion' }, - { value: BigInt('1000000000000000000000000000000000000000000000000000000'), suffix: 'septendecillion' }, + { value: BigInt('1000'), suffix: 'k' }, // Thousand + { value: BigInt('1000000'), suffix: 'M' }, // Million + { value: BigInt('1000000000'), suffix: 'B' }, // Billion + { value: BigInt('1000000000000'), suffix: 'T' }, // Trillion + { value: BigInt('1000000000000000'), suffix: 'Qd' }, // Quadrillion + { value: BigInt('1000000000000000000'), suffix: 'Qi' }, // Quintillion + { value: BigInt('1000000000000000000000'), suffix: 'Sx' }, // Sextillion + { value: BigInt('1000000000000000000000000'), suffix: 'Sp' }, // Septillion + { value: BigInt('1000000000000000000000000000'), suffix: 'Oc' }, // Octillion + { value: BigInt('1000000000000000000000000000000'), suffix: 'No' }, // Nonillion + { value: BigInt('1000000000000000000000000000000000'), suffix: 'Dc' }, // Decillion + { value: BigInt('1000000000000000000000000000000000000'), suffix: 'Ud' }, // Undecillion + { value: BigInt('1000000000000000000000000000000000000000'), suffix: 'Dd' }, // Duodecillion + { value: BigInt('1000000000000000000000000000000000000000000'), suffix: 'Td' }, // Tredecillion + { value: BigInt('1000000000000000000000000000000000000000000000'), suffix: 'Qt' }, // Quattuordecillion + { value: BigInt('1000000000000000000000000000000000000000000000000'), suffix: 'Qn' }, // Quindecillion + { value: BigInt('1000000000000000000000000000000000000000000000000000'), suffix: 'Sd' }, // Sexdecillion + { value: BigInt('1000000000000000000000000000000000000000000000000000000'), suffix: 'St' }, // Septendecillion ]; + for (let i = 0; i < suffixes.length; i++) { if (value < suffixes[i].value) { @@ -43,8 +44,8 @@ export const toReadable = (rawValue: bigint) => { } else { const divided = value / suffixes[i - 1].value; const numStr = (value % suffixes[i - 1].value).toString().slice(0, 3); - const remainder = parseInt(numStr.replace(/0+$/, ''), 10); - return `${divided.toString()}.${remainder.toString()} ${suffixes[i - 1].suffix}`; + const remainder = numStr == "0" ? "" : "." + parseInt(numStr.replace(/0+$/, ''), 10); + return `${divided.toString()}${remainder.toString()} ${suffixes[i - 1].suffix}`; } } } diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx index acf55c9..7e66825 100644 --- a/app/src/components/Header.tsx +++ b/app/src/components/Header.tsx @@ -1,8 +1,8 @@ -import React, { useCallback, useMemo } from "react" -import styles from "../styles/Header.module.css" -import bgStyles from "../styles/Background.module.css" +import React, { useCallback, useMemo } from "react"; +import styles from "../styles/Header.module.css"; +import bgStyles from "../styles/Background.module.css"; import { usePlayer } from "../providers/PlayerProvider"; -import { useAccount } from 'wagmi'; +import { useAccount } from "wagmi"; import dynamic from "next/dynamic"; import Counter, { toReadable } from "./Counter"; import { useModal } from "../providers/ModalProvider"; @@ -13,38 +13,56 @@ const Header = () => { const { openRegistrationModal } = useModal(); const title = useMemo(() => { - return isRegistered && !player?.has_active_session ? `You died 😇 Click here to start again and ...` : - isRegistered ? `SLAY THE MOLOCH` : - !isConnected ? "Connect your wallet traveler ☝️ and then ..." : - "Click here to start 😈" - }, [isConnected, isRegistered, player?.has_active_session]) + return isRegistered && !player?.has_active_session + ? `You died 😇 Click here to start again and ...` + : isRegistered + ? `SLAY THE MOLOCH` + : !isConnected + ? "Connect your wallet traveler ☝️ and then ..." + : "Click here to start 😈"; + }, [isConnected, isRegistered, player?.has_active_session]); const subtitle = useMemo(() => { if (isRegistered && player?.has_active_session) { - return + return ; } else { - return

SLAY THE MOLOCH

+ return ( +

+ SLAY THE MOLOCH +

+ ); } - }, [isRegistered, player?.has_active_session, isConnected]) + }, [isRegistered, player?.has_active_session, isConnected]); const perSecondParagraph = useMemo(() => { - const perSecond = toReadable(army?.profit_per_second ?? BigInt(0)) - return (isRegistered && player?.has_active_session) ? + const perSecond = toReadable(army?.profit_per_second ?? BigInt(0)); + return isRegistered && player?.has_active_session ? (

per second: {perSecond}

- : null - }, [isRegistered, army?.profit_per_second, player?.has_active_session]) + ) : null; + }, [isRegistered, army?.profit_per_second, player?.has_active_session]); const onRegister = useCallback(() => { - if (player?.has_active_session) return - openRegistrationModal() - }, [player?.has_active_session, openRegistrationModal]) + if (player?.has_active_session) return; + openRegistrationModal(); + }, [player?.has_active_session, openRegistrationModal]); - return
-

{title}

- {subtitle} - {perSecondParagraph} -
-} + return ( +
+

{title}

+ {subtitle} + {perSecondParagraph} +
+ ); +}; // export default Header diff --git a/app/src/components/PixelatedQuote.tsx b/app/src/components/PixelatedQuote.tsx index fc4f07a..311477e 100644 --- a/app/src/components/PixelatedQuote.tsx +++ b/app/src/components/PixelatedQuote.tsx @@ -151,7 +151,9 @@ const EARLY_GAME_QUOTES = [ function PixelatedQuote() { const { player } = usePlayer(); const [isShown, setIsShown] = useState(true); - const [currentQuote, setCurrentQuote] = useState("Welcome to the Dark Forest!"); + const [currentQuote, setCurrentQuote] = useState( + "Welcome to the Dark Forest!" + ); const intervalIdRef = useRef(null); const hasShownWelcome = useRef(false); @@ -185,7 +187,9 @@ function PixelatedQuote() { } else if (totalMinted < PROGRESSION_TIERS.BEGINNER) { // Show early game quotes until player reaches beginner level setCurrentQuote( - EARLY_GAME_QUOTES[Math.floor(Math.random() * EARLY_GAME_QUOTES.length)] + EARLY_GAME_QUOTES[ + Math.floor(Math.random() * EARLY_GAME_QUOTES.length) + ] ); } else { const tier = getQuoteTier(totalMinted); @@ -198,8 +202,8 @@ function PixelatedQuote() { setTimeout(() => { setIsShown(false); - }, 4000); - }, 6000); + }, 8000); + }, 10000); return () => { if (intervalIdRef.current !== null) { diff --git a/app/src/components/RegistrationModal.tsx b/app/src/components/RegistrationModal.tsx index 540d8ab..ed05ec6 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,14 @@ const RegistrationModal = ({ isOpen, setIsOpen }: RegistrationModalProps) => { setIsOpen(false); }, [register, setIsOpen]) if (!isOpen) return null; - return
-

Insert coins to continue

+ return
+ setIsOpen(false)}>x +

Insert coins to continue

-
+
} export default RegistrationModal diff --git a/app/src/components/Scene.tsx b/app/src/components/Scene.tsx index 739eba3..e891639 100644 --- a/app/src/components/Scene.tsx +++ b/app/src/components/Scene.tsx @@ -1,5 +1,5 @@ -import React, { useCallback, useState } from "react" -import styles from '../styles/Background.module.css'; +import React, { useCallback, useState } from "react"; +import styles from "../styles/Background.module.css"; import Tower from "./Tower"; import Army from "./Army"; import MarchingBand from "./MarchingBand"; @@ -17,17 +17,20 @@ const bossToMountainsClass = { 4: styles.mountains4, 5: styles.mountains5, 6: styles.mountains6, -} +}; const Scene = () => { const { isRegistered, boss, player } = usePlayer(); const [isLeaderboardOpen, setIsLeaderboardOpen] = useState(false); - const handleMusicReady = useCallback((unmute: () => void) => { - if (isRegistered) { - unmute(); - } - }, [isRegistered]); + const handleMusicReady = useCallback( + (unmute: () => void) => { + if (isRegistered) { + unmute(); + } + }, + [isRegistered] + ); const variant = boss?.variants[boss.level] || 0; return
@@ -48,7 +51,7 @@ const Scene = () => { className={styles.leaderboardButton} title="Leaderboard" > - 📜 + 🏆 Top players {isLeaderboardOpen && (
@@ -60,10 +63,9 @@ const Scene = () => { × -
-
+
)}
} -export default Scene +export default Scene; diff --git a/app/src/pages/_app.tsx b/app/src/pages/_app.tsx index 533f4e8..23c9c58 100644 --- a/app/src/pages/_app.tsx +++ b/app/src/pages/_app.tsx @@ -36,6 +36,7 @@ function MyApp({ Component, pageProps }: AppProps) { h4, h5, h6, + button, .title { font-family: ${font.style.fontFamily}; } diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx index 6af5fad..17a3b03 100644 --- a/app/src/pages/index.tsx +++ b/app/src/pages/index.tsx @@ -1,9 +1,9 @@ -import { ConnectButton } from '@rainbow-me/rainbowkit'; -import type { NextPage } from 'next'; -import Head from 'next/head'; -import styles from '../styles/Home.module.css'; -import Header from '../components/Header'; -import Scene from '../components/Scene'; +import { ConnectButton } from "@rainbow-me/rainbowkit"; +import type { NextPage } from "next"; +import Head from "next/head"; +import styles from "../styles/Home.module.css"; +import Header from "../components/Header"; +import Scene from "../components/Scene"; const Home: NextPage = () => { return ( @@ -26,7 +26,10 @@ const Home: NextPage = () => { ); diff --git a/app/src/providers/PlayerProvider.tsx b/app/src/providers/PlayerProvider.tsx index 6941033..199fe9f 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,16 +35,25 @@ 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, battleWithBoss: () => void; - addUnit: (unit: UnitType) => void + addUnit: (unit: UnitType, amount?: number) => void; } const PlayerContext = createContext({ @@ -50,6 +61,7 @@ const PlayerContext = createContext({ player: null, army: null, boss: null, + lastBossResult: null, balance: BigInt(0), register: () => { }, raid: () => { }, @@ -61,6 +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 [bossBattledModalOpen, setBossBattlesModalOpen] = useState(false); + const hasFetchedLastBossFirstTime = useRef(false); useEffect(() => { console.warn(error) @@ -125,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") => { @@ -133,11 +158,12 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => { abi, address: contractAddress, functionName: 'register_eth', - value: parseEther("0.0005"), + value: parseEther("0.00005"), }, { onSuccess: (hash) => { setHashAndCallback([hash, resetHashAndCallback]) - } + }, + onError: () => resetHashAndCallback() }) } else if (arg === "RGCVII") { writeContract({ @@ -156,10 +182,12 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => { }, { onSuccess: (hash) => { setHashAndCallback([hash, resetHashAndCallback]) - } + }, + onError: () => resetHashAndCallback() }) ]) - } + }, + onError: () => resetHashAndCallback() }); } }, [writeContract, resetHashAndCallback]) @@ -172,7 +200,8 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => { }, { onSuccess: (hash) => { setHashAndCallback([hash, resetHashAndCallback]) - } + }, + onError: () => resetHashAndCallback() }) }, [writeContract, resetHashAndCallback]) @@ -190,8 +219,23 @@ const PlayerProvider = ({ children }: { children: ReactNode }) => { abi, address: contractAddress, functionName: 'battle_with_boss', + }, { + onSuccess: (hash) => { + setHashAndCallback([hash, () => resetHashAndCallback()]) + }, + onError: () => resetHashAndCallback() }) - }, [writeContract]) + }, [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 && } +
+ {txHash && } + {bossBattledModalOpen && } +
); } diff --git a/app/src/styles/Army.module.css b/app/src/styles/Army.module.css index e371096..bc8e406 100644 --- a/app/src/styles/Army.module.css +++ b/app/src/styles/Army.module.css @@ -130,8 +130,17 @@ display: flex; justify-content: center; align-items: center; + + @media only screen and (max-width: 600px) { + left: 10px; + bottom: 5px; + overflow: auto; + } } .armyUnit { + @media only screen and (max-width: 600px) { + transform: scale(0.75); + } position: relative; height: 100%; width: 120px; @@ -152,6 +161,7 @@ } } .uiElement { + width: fit-content; position: absolute; border-radius: 10px; background: rgba(0, 0, 0, 0.89); @@ -161,18 +171,22 @@ text-align: center; } .unitSupply { - top: 0; + top: -30px; right: 0; + left: 2rem; + white-space: nowrap; } .unitName { left: 0; right: 0; bottom: 45px; + white-space: nowrap; } .unitPrice { left: 0; right: 0; bottom: 25px; + white-space: nowrap; } .unitProfit { left: 0; @@ -201,18 +215,25 @@ height: 90px; user-select: none; .pixelQuote { - min-width: 150px; + z-index: 20; + min-width: 200px; + width: fit-content; + max-width: 300px; color: black; font-size: 0.7rem; + line-height: 0.9rem; position: absolute; bottom: 5.5rem; - left: -20px; + left: -70px; right: 0; padding: 0.7rem; - line-height: 0.8rem; transition: opacity 1s ease-in-out; box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.4); } + + @media only screen and (max-width: 600px) { + right: 60px; + } } .static.moloch_denier { background-image: url("/roles/scribe2.png"); @@ -257,6 +278,40 @@ } } +@media only screen and (max-width: 600px) { + @keyframes marching { + 0% { + transform: translate(-54px, -59px); /* -100px scaled to ~-54px */ + } + 8% { + /* approaches fire */ + transform: translate(15px, -100px); /* 72px scaled to ~39px */ + } + 15% { + /* approaches road */ + transform: translate(82px, -123px); /* 152px scaled to ~82px */ + } + 25% { + /* first road turn */ + transform: translate(66px, -200px); /* 122px scaled to ~66px */ + } + 45% { + /* second road turn */ + transform: translate(138px, -264px); /* 256px scaled to ~138px */ + } + 75% { + /* third road turn */ + transform: translate(86px, -293px); /* 159px scaled to ~86px */ + } + 100% { + /* vanishes into distance */ + transform: translate(97px, -300px); /* 180px scaled to ~97px */ + } + } +} + + + @keyframes marchingPerson { 0% { background-size: 100% 100%; diff --git a/app/src/styles/Background.module.css b/app/src/styles/Background.module.css index 9fee508..2d426d6 100644 --- a/app/src/styles/Background.module.css +++ b/app/src/styles/Background.module.css @@ -1,11 +1,14 @@ .frame { position: absolute; - width: 100%; - height: 100%; border-width: 8px; border-image: url("/background/frame.png") 22 fill / auto space; width: 720px; height: 960px; + @media only screen and (max-width: 600px) { + max-height: 90vh; + overflow: hidden; + max-width: 100vw; + } } .background_asset { @@ -34,16 +37,27 @@ height: 150px; background-image: url("/background/clouds_large.png"); animation: - scrollBackground 80s linear infinite, + scrollBackground 28s linear infinite, thunder 4s linear infinite; + @media only screen and (max-width: 600px) { + animation: + scrollBackground 280s linear infinite, + thunder 4s linear infinite; + } } .clouds_small { - top: 270px; + top: 275px; height: 82px; background-image: url("/background/clouds_small.png"); animation: scrollBackground 20s linear infinite, thunder 12s linear infinite; + @media only screen and (max-width: 600px) { + top: 285px; + animation: + scrollBackground 200s linear infinite, + thunder 12s linear infinite; + } } .boss { @@ -54,6 +68,9 @@ top: 130px; right: 10px; left: auto; + @media only screen and (max-width: 600px) { + right: -20px; + } animation: thunder_hue_hard 12s linear infinite; transition: all 0.1s cubic-bezier(0.265, 1.4, 0.68, 1.65); transform-origin: bottom center; @@ -113,6 +130,9 @@ height: 372px; top: 90px; left: -10px; + @media only screen and (max-width: 600px) { + left: -80px; + } animation: thunder_hue_hard 12s linear infinite; transition: all 0.1s cubic-bezier(0.265, 1.4, 0.68, 1.65); transform-origin: bottom center; @@ -215,6 +235,11 @@ background-image: url("/background/village.png"); height: 540px; bottom: 22px; + + @media only screen and (max-width: 600px) { + height: 300px; + bottom: 80px; + } } .bonfire { background-image: url("/background/bonfire.png"); @@ -226,6 +251,12 @@ animation: bonfire 12s linear infinite, bonfire_skew 5s infinite linear; + + @media only screen and (max-width: 600px) { + left: 80px; + bottom: 105px; + scale: 0.7; + } } .musicButton { position: absolute; @@ -373,8 +404,8 @@ .leaderboardButton { position: absolute; - top: 80px; - right: 30px; + top: 30px; + left: 80px; background: rgba(0, 0, 0, 0.5); border: none; border-radius: 5px; @@ -385,6 +416,14 @@ transition: all 0.2s cubic-bezier(0.265, 1.4, 0.68, 1.65); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: var(--text-color); + & .hideMobile { + padding-left: 0.5rem; + } + @media only screen and (max-width: 600px) { + & .hideMobile { + display: none; + } + } } .leaderboardButton:hover { diff --git a/app/src/styles/Header.module.css b/app/src/styles/Header.module.css index 9f56541..6cfb7fa 100644 --- a/app/src/styles/Header.module.css +++ b/app/src/styles/Header.module.css @@ -5,10 +5,18 @@ &.clickable { cursor: pointer; } + + @media only screen and (max-width: 600px) { + margin-top: 3rem; + } } .title { font-size: 1.5rem; margin: 0; + + @media only screen and (max-width: 600px) { + display: none; + } } .counter { font-size: 2rem; diff --git a/app/src/styles/Home.module.css b/app/src/styles/Home.module.css index 8223cef..4b20934 100644 --- a/app/src/styles/Home.module.css +++ b/app/src/styles/Home.module.css @@ -18,12 +18,14 @@ max-width: 720px; height: 100vh; margin: 0 auto; + @media only screen and (max-width: 600px) { + max-height: 90vh; + } } .footer { - margin-top: 2rem; - padding: 2rem 0; - border-top: 1px solid #eaeaea; + padding: 0; + margin: 10px 0; text-align: center; } diff --git a/app/src/styles/Info.module.css b/app/src/styles/Info.module.css index 39ab2b2..440b4de 100644 --- a/app/src/styles/Info.module.css +++ b/app/src/styles/Info.module.css @@ -1,5 +1,6 @@ .bossInfo { position: absolute; + z-index: 10; top: 350px; right: 28px; background: var(--bg-color); diff --git a/app/src/styles/Modal.module.css b/app/src/styles/Modal.module.css index a1ec842..08a220d 100644 --- a/app/src/styles/Modal.module.css +++ b/app/src/styles/Modal.module.css @@ -47,6 +47,65 @@ 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; + } +} +.textCenter { + text-align: center; +} +.closeBtn { + display: inline-block; + width: 32px; + height: 32px; + text-align: center; + line-height: 26px; + border-radius: 4px; + position: absolute; + right: 32px; + top: 32px; + background: black; + cursor: pointer; + transition: all 0.2s ease; +} +.closeBtn:hover { + color: var(--hover-color); + transform: scale(1.1); +} +.closeBtn::active { + transform: scale(1.2); +} @keyframes spin { 0% { diff --git a/app/src/wagmi.ts b/app/src/wagmi.ts index 332811c..9cf52cd 100644 --- a/app/src/wagmi.ts +++ b/app/src/wagmi.ts @@ -2,7 +2,6 @@ import { getDefaultConfig } from '@rainbow-me/rainbowkit'; import { base, baseSepolia, - sepolia, foundry } from 'wagmi/chains'; @@ -13,7 +12,6 @@ export const config = getDefaultConfig({ baseSepolia, foundry, base, - ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], ssr: true, }); diff --git a/src/RaidGeld.sol b/src/RaidGeld.sol index 6f69b2e..ed70fa9 100644 --- a/src/RaidGeld.sol +++ b/src/RaidGeld.sol @@ -5,7 +5,7 @@ import "@openzeppelin/contracts/token/ERC20/ERC20.sol"; import "@openzeppelin/contracts/access/Ownable.sol"; import {RaidGeldUtils} from "../src/RaidGeldUtils.sol"; -import {Army, Player, Raider, Boss} from "../src/RaidGeldStructs.sol"; +import {Army, Player, Raider, Boss, LastBossResult} from "../src/RaidGeldStructs.sol"; import "../src/Constants.sol"; contract RaidGeld is ERC20, Ownable, Constants { @@ -16,6 +16,7 @@ contract RaidGeld is ERC20, Ownable, Constants { mapping(address => Player) private players; mapping(address => Army) private armies; mapping(address => Boss) private bosses; + mapping(address => LastBossResult) private lastBossResults; // WETH IWETH public immutable weth = IWETH(WETH); @@ -44,6 +45,7 @@ contract RaidGeld is ERC20, Ownable, Constants { event DaoTokenBuyInAmountSet(address indexed owner, uint256 oldAmount, uint256 newAmount); event PrestigeGained(address indexed player, uint32 prestigeLevel); event BossDefeated(address indexed player, uint8 bossLevel, uint256 earnings); + event BossBattle(address indexed player, uint8 bossLevel, bool hasWon); // Modifier for functions that should only be available to registered players modifier onlyPlayer() { @@ -106,6 +108,9 @@ contract RaidGeld is ERC20, Ownable, Constants { profit_per_second: 0 }); bosses[_playerAddress] = Boss({level: 0, variants: RaidGeldUtils.generate_boss_variants(block.prevrandao)}); + + // dont change lastBossResult + // that only changes after boss battles and on init } // New player want to register with ETH @@ -171,6 +176,11 @@ contract RaidGeld is ERC20, Ownable, Constants { return bosses[addr]; } + // Function to get the Boss struct + function getLastBossResult(address addr) public view returns (LastBossResult memory) { + return lastBossResults[addr]; + } + // Quick fn to check if user is registered function isRegistered(address addr) public view returns (bool) { return players[addr].created_at != 0; @@ -248,6 +258,14 @@ contract RaidGeld is ERC20, Ownable, Constants { ? RaidGeldUtils.getBossPower(boss_to_attack.level) : balanceOf(msg.sender); bool hasWonBattle = RaidGeldUtils.calculateBossFight(boss_to_attack.level, geld_to_burn, block.prevrandao); + emit BossBattle(msg.sender, boss_to_attack.level, hasWonBattle); + lastBossResults[msg.sender] = LastBossResult({ + battled_at: block.timestamp, + level: boss_to_attack.level, + variant: boss_to_attack.variants[boss_to_attack.level], + prestigeGained: false, + reward: 0 + }); if (hasWonBattle) { // Burn geld, send some sweet DAO Token and continue _burn(msg.sender, geld_to_burn); @@ -256,11 +274,14 @@ contract RaidGeld is ERC20, Ownable, Constants { daoToken.transfer(msg.sender, reward); emit BossDefeated(msg.sender, boss_to_attack.level, reward); + lastBossResults[msg.sender].reward = reward; + if (boss_to_attack.level == 6) { // User ascends! Moloch is defeated, user can start a new run players[msg.sender].prestige_level += 1; emit PrestigeGained(msg.sender, players[msg.sender].prestige_level); player_dies(msg.sender); + lastBossResults[msg.sender].prestigeGained = true; return [hasWonBattle, true /* New prestige level! */ ]; } else { // else go to next boss @@ -268,6 +289,7 @@ contract RaidGeld is ERC20, Ownable, Constants { } } else { // Whoops u died, boss defeated you + lastBossResults[msg.sender].reward = 0; player_dies(msg.sender); } return [hasWonBattle, false /* hasnt gotten prestige level */ ]; diff --git a/src/RaidGeldStructs.sol b/src/RaidGeldStructs.sol index f30deed..e045916 100644 --- a/src/RaidGeldStructs.sol +++ b/src/RaidGeldStructs.sol @@ -28,3 +28,11 @@ struct Boss { uint8 level; uint8[7] variants; } + +struct LastBossResult { + uint256 battled_at; + uint256 reward; + uint8 level; + uint8 variant; + bool prestigeGained; +} diff --git a/test/RaidGeld.t.sol b/test/RaidGeld.t.sol index 1d32a09..54dda56 100644 --- a/test/RaidGeld.t.sol +++ b/test/RaidGeld.t.sol @@ -3,7 +3,7 @@ pragma solidity ^0.8.13; import {Test, console} from "forge-std/Test.sol"; import {stdStorage, StdStorage} from "forge-std/Test.sol"; -import {RaidGeld, Army, Player, Boss} from "../src/RaidGeld.sol"; +import {RaidGeld, Army, Player, Boss, LastBossResult} from "../src/RaidGeld.sol"; import "../src/RaidGeldUtils.sol"; import {Constants} from "../src/Constants.sol"; @@ -283,6 +283,13 @@ contract raid_geldTest is Test, Constants { uint256 afterBossDaoBalance = raid_geld.daoToken().balanceOf(player1); uint256 afterBossContractBalance = raid_geld.daoToken().balanceOf(address(raid_geld)); + LastBossResult memory bossResult = raid_geld.getLastBossResult(player1); + + assertEq(bossResult.battled_at, block.timestamp); + assertEq(bossResult.reward, afterBossDaoBalance - initialDaoBalance); + assertEq(bossResult.level, boss.level); + assertEq(bossResult.variant, boss.variants[boss.level]); + assertEq(bossResult.prestigeGained, false); // User should receive funs, contract should lose them assertLt(initialDaoBalance, afterBossDaoBalance); @@ -306,6 +313,7 @@ contract raid_geldTest is Test, Constants { registerPlayerWithDaoToken(); raid_geld.addUnit(0, 1); + Boss memory boss = raid_geld.getBoss(player1); bool[2] memory results = raid_geld.battle_with_boss(); // Should lose with just starting GELD assertEq(results[0], false); @@ -321,6 +329,13 @@ contract raid_geldTest is Test, Constants { assertEq(raid_geld.balanceOf(player1), 0); // Units should reset assertEq(army.moloch_denier.level, 0); + + LastBossResult memory bossResult = raid_geld.getLastBossResult(player1); + assertEq(bossResult.battled_at, block.timestamp); + assertEq(bossResult.reward, 0); + assertEq(bossResult.level, boss.level); + assertEq(bossResult.variant, boss.variants[boss.level]); + assertEq(bossResult.prestigeGained, false); } function test_08_player_who_lost_can_restart() public { @@ -388,6 +403,8 @@ contract raid_geldTest is Test, Constants { if (results[0] == true && results[1] == true) { success = true; Player memory player = raid_geld.getPlayer(player1); + LastBossResult memory bossResult = raid_geld.getLastBossResult(player1); + assertEq(bossResult.prestigeGained, true); vm.assertEq(player.prestige_level, 1); vm.assertEq(player.n_runs, tries); break;