Changed header for dead players

app/src/components/Header.tsx

@@ -9,37 +9,38 @@ import { useModal } from "../providers/ModalProvider";
 
 const Header = () => {
   const { isConnected } = useAccount();
-  const { isRegistered, army } = usePlayer();
+  const { isRegistered, player, army } = usePlayer();
   const { openRegistrationModal } = useModal();
 
   const title = useMemo(() => {
-    return isRegistered ? `SLAY THE MOLOCH` :
+    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])
+  }, [isConnected, isRegistered, player?.has_active_session])
 
   const subtitle = useMemo(() => {
-    if (isRegistered) {
+    if (isRegistered && player?.has_active_session) {
       return <Counter />
     } else {
-      return <p className={styles.counter}>SLAY THE MOLOCH</p>
+      return <p className={`${styles.counter} ${isConnected && !player?.has_active_session ? bgStyles.excited : ""}`}>SLAY THE MOLOCH</p>
     }
-  }, [isRegistered])
+  }, [isRegistered, player?.has_active_session, isConnected])
 
   const perSecondParagraph = useMemo(() => {
     const perSecond = toReadable(army?.profit_per_second ?? BigInt(0))
-    return (isRegistered) ?
+    return (isRegistered && player?.has_active_session) ?
       <p className={styles.counter_per_seconds}>per second: {perSecond}</p>
       : null
-  }, [isRegistered, army?.profit_per_second])
+  }, [isRegistered, army?.profit_per_second, player?.has_active_session])
 
   const onRegister = useCallback(() => {
-    if (isRegistered) return
+    if (player?.has_active_session) return
     openRegistrationModal()
-  }, [isRegistered, openRegistrationModal])
+  }, [player?.has_active_session, openRegistrationModal])
 
-  return <header onClick={onRegister} className={styles.header}>
+  return <header onClick={onRegister} className={`${styles.header} ${isConnected && !player?.has_active_session ? styles.clickable : ""}`}>
-    <h1 className={`${styles.title} ${isConnected && !isRegistered ? bgStyles.excited : ""}`}>{title}</h1>
+    <h1 className={`${styles.title}`}>{title}</h1>
     {subtitle}
     {perSecondParagraph}
   </header>

app/src/styles/Header.module.css

@@ -2,6 +2,9 @@
   position: relative;
   margin-top: 5rem;
   z-index: 1;
+  &.clickable {
+    cursor: pointer;
+  }
 }
 .title {
   font-size: 1.5rem;