QoL updates

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>{" "}

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);
+        const remainder = numStr == "0" ? "" : "." + parseInt(numStr.replace(/0+$/, ''), 10);
-        return `${divided.toString()}.${remainder.toString()} ${suffixes[i - 1].suffix}`;
+        return `${divided.toString()}${remainder.toString()} ${suffixes[i - 1].suffix}`;
       }
     }
   }

app/src/components/PixelatedQuote.tsx

@@ -198,8 +198,8 @@ function PixelatedQuote() {
 
       setTimeout(() => {
         setIsShown(false);
-      }, 4000);
+      }, 8000);
-    }, 6000);
+    }, 10000);
 
     return () => {
       if (intervalIdRef.current !== null) {

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>

app/src/components/Scene.tsx

@@ -48,7 +48,7 @@ const Scene = () => {
       className={styles.leaderboardButton}
       title="Leaderboard"
     >
-      📜
+      Top players 📜
     </button>
     {isLeaderboardOpen && (
       <div className={styles.leaderboardOverlay}>

app/src/pages/_app.tsx

@@ -36,6 +36,7 @@ function MyApp({ Component, pageProps }: AppProps) {
             h4,
             h5,
             h6,
+            button,
             .title {
               font-family: ${font.style.fontFamily};
             }

app/src/styles/Background.module.css

@@ -373,8 +373,8 @@
 
 .leaderboardButton {
   position: absolute;
-  top: 80px;
+  top: 30px;
-  right: 30px;
+  left: 80px;
   background: rgba(0, 0, 0, 0.5);
   border: none;
   border-radius: 5px;

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% {