forked from mico/idle_moloch
54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
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 dynamic from "next/dynamic";
|
|
import Counter, { toReadable } from "./Counter";
|
|
import { useModal } from "../providers/ModalProvider";
|
|
|
|
const Header = () => {
|
|
const { isConnected } = useAccount();
|
|
const { isRegistered, player, army } = usePlayer();
|
|
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])
|
|
|
|
const subtitle = useMemo(() => {
|
|
if (isRegistered && player?.has_active_session) {
|
|
return <Counter />
|
|
} else {
|
|
return <p className={`${styles.counter} ${isConnected && !player?.has_active_session ? bgStyles.excited : ""}`}>SLAY THE MOLOCH</p>
|
|
}
|
|
}, [isRegistered, player?.has_active_session, isConnected])
|
|
|
|
const perSecondParagraph = useMemo(() => {
|
|
const perSecond = toReadable(army?.profit_per_second ?? BigInt(0))
|
|
return (isRegistered && player?.has_active_session) ?
|
|
<p className={styles.counter_per_seconds}>per second: {perSecond}</p>
|
|
: 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])
|
|
|
|
return <header onClick={onRegister} className={`${styles.header} ${isConnected && !player?.has_active_session ? styles.clickable : ""}`}>
|
|
<h1 className={`${styles.title}`}>{title}</h1>
|
|
{subtitle}
|
|
{perSecondParagraph}
|
|
</header>
|
|
}
|
|
|
|
// export default Header
|
|
|
|
export default dynamic(() => Promise.resolve(Header), {
|
|
ssr: false,
|
|
});
|