forked from mico/idle_moloch
72 lines
2.2 KiB
TypeScript
72 lines
2.2 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,
|
|
});
|