From d9e8c2f8fd5634fbe60b7b88dae8fa06e3fc5c6a Mon Sep 17 00:00:00 2001
From: Mitja Belak <mico@0x0.icu>
Date: Thu, 31 Oct 2024 22:40:18 +0100
Subject: [PATCH] QoL updates

---
 app/src/components/BossInfo.tsx          |  2 +-
 app/src/components/Counter.tsx           |  4 ++--
 app/src/components/PixelatedQuote.tsx    |  4 ++--
 app/src/components/RegistrationModal.tsx |  3 ++-
 app/src/components/Scene.tsx             |  2 +-
 app/src/pages/_app.tsx                   |  1 +
 app/src/styles/Background.module.css     |  4 ++--
 app/src/styles/Modal.module.css          | 24 ++++++++++++++++++++++++
 8 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/app/src/components/BossInfo.tsx b/app/src/components/BossInfo.tsx
index c8f023e..a17e8be 100644
--- a/app/src/components/BossInfo.tsx
+++ b/app/src/components/BossInfo.tsx
@@ -81,7 +81,7 @@ const BossInfo = () => {
     return () => clearInterval(tickInterval)
   }, [balance, army?.profit_per_second, player?.last_raided_at, boss?.level])
   return <div className={styles.bossInfo}>
-    <p><strong className={bossLevelToClass[boss?.level || 0]}>{bossToName[variant]}</strong> Moloch <small>(lvl {boss ? boss.level + 1 : 0})</small></p>
+    <p><strong className={bossLevelToClass[variant]}>{bossToName[variant]}</strong> Moloch <small>(lvl {boss ? boss.level + 1 : 0})</small></p>
     <p><strong className={styles.reward}>{parseFloat(parseFloat(formatUnits(bossToReward[boss?.level || 0], 18).toString()).toFixed(4))} RGCVII</strong> <small>reward</small></p>
     <p>
       <strong>{parseFloat((chanceToDefeat.current * 100).toFixed(2))} % to slay</strong>{" "}
diff --git a/app/src/components/Counter.tsx b/app/src/components/Counter.tsx
index 843fa32..13a6404 100644
--- a/app/src/components/Counter.tsx
+++ b/app/src/components/Counter.tsx
@@ -43,8 +43,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/PixelatedQuote.tsx b/app/src/components/PixelatedQuote.tsx
index fc4f07a..6e7d19d 100644
--- a/app/src/components/PixelatedQuote.tsx
+++ b/app/src/components/PixelatedQuote.tsx
@@ -198,8 +198,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 279fdad..ed05ec6 100644
--- a/app/src/components/RegistrationModal.tsx
+++ b/app/src/components/RegistrationModal.tsx
@@ -16,7 +16,8 @@ const RegistrationModal = ({ isOpen, setIsOpen }: RegistrationModalProps) => {
   }, [register, setIsOpen])
   if (!isOpen) return null;
   return <div className={bgStyles.leaderboardOverlay}><div className={styles.modal}>
-    <h2 style={{ textAlign: "center" }}>Insert coins to continue</h2>
+    <span className={styles.closeBtn} onClick={() => setIsOpen(false)}>x</span>
+    <h2 className={styles.textCenter}>Insert coins to continue</h2>
     <div>
       <button onClick={() => onRegister("RGCVII")}>500 RGCVII</button>
       <button onClick={() => onRegister("ETH")}>0.0005 ETH</button>
diff --git a/app/src/components/Scene.tsx b/app/src/components/Scene.tsx
index 739eba3..7ceeffa 100644
--- a/app/src/components/Scene.tsx
+++ b/app/src/components/Scene.tsx
@@ -48,7 +48,7 @@ const Scene = () => {
       className={styles.leaderboardButton}
       title="Leaderboard"
     >
-      📜
+      Top players 📜
     </button>
     {isLeaderboardOpen && (
       <div className={styles.leaderboardOverlay}>
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/styles/Background.module.css b/app/src/styles/Background.module.css
index 9fee508..9980837 100644
--- a/app/src/styles/Background.module.css
+++ b/app/src/styles/Background.module.css
@@ -373,8 +373,8 @@
 
 .leaderboardButton {
   position: absolute;
-  top: 80px;
-  right: 30px;
+  top: 30px;
+  left: 80px;
   background: rgba(0, 0, 0, 0.5);
   border: none;
   border-radius: 5px;
diff --git a/app/src/styles/Modal.module.css b/app/src/styles/Modal.module.css
index 9ed569c..08a220d 100644
--- a/app/src/styles/Modal.module.css
+++ b/app/src/styles/Modal.module.css
@@ -82,6 +82,30 @@
     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% {