From 61ab8f21478dcabea47e850fe0518bda977369d5 Mon Sep 17 00:00:00 2001
From: Mitja Belak <mico@0x0.icu>
Date: Thu, 31 Oct 2024 14:24:30 +0100
Subject: [PATCH] Changed header for dead players

---
 app/src/components/Header.tsx    | 29 +++++++++++++++--------------
 app/src/styles/Header.module.css |  3 +++
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
index 60eecdf..acf55c9 100644
--- a/app/src/components/Header.tsx
+++ b/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` :
-      !isConnected ? "Connect your wallet traveler ☝️  and then ..." :
-        "Click here to start 😈"
-  }, [isConnected, isRegistered])
+    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) {
+    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}>
-    <h1 className={`${styles.title} ${isConnected && !isRegistered ? bgStyles.excited : ""}`}>{title}</h1>
+  return <header onClick={onRegister} className={`${styles.header} ${isConnected && !player?.has_active_session ? styles.clickable : ""}`}>
+    <h1 className={`${styles.title}`}>{title}</h1>
     {subtitle}
     {perSecondParagraph}
   </header>
diff --git a/app/src/styles/Header.module.css b/app/src/styles/Header.module.css
index ce97767..9f56541 100644
--- a/app/src/styles/Header.module.css
+++ b/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;