From f10b4ed693b95c4b55cdd75e6e4df8bb3c90d165 Mon Sep 17 00:00:00 2001
From: Kennix88 <shel.live@yandex.ru>
Date: Tue, 17 Dec 2024 10:40:28 +0800
Subject: [PATCH] Util addSuffixToNumber

---
 .../(main)/mining/_components/Condition.tsx    | 10 ----------
 .../(main)/mining/_components/Information.tsx  | 15 +++++++++++++++
 .../app/(main)/mining/_components/Profile.tsx  | 13 ++++++++-----
 .../app/(telegram)/app/(main)/mining/page.tsx  |  4 ++--
 .../src/utils/addSuffixToNumber.util.ts        | 18 ++++++++++++++++++
 5 files changed, 43 insertions(+), 17 deletions(-)
 delete mode 100644 apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Condition.tsx
 create mode 100644 apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Information.tsx
 create mode 100644 apps/HashRateGame/src/utils/addSuffixToNumber.util.ts

diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Condition.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Condition.tsx
deleted file mode 100644
index 2559407..0000000
--- a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Condition.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export default function Condition() {
-  return (
-    <div className="flex flex-col font-extralight">
-      <div className="px-4  opacity-50">Condition</div>
-      <div className="bg-surface-container-l2 p-4 rounded-md">
-        <div>Condition</div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Information.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Information.tsx
new file mode 100644
index 0000000..ea56cbc
--- /dev/null
+++ b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Information.tsx
@@ -0,0 +1,15 @@
+import addSuffixToNumber from '../../../../../../utils/addSuffixToNumber.util'
+
+export default function Information() {
+  return (
+    <div className="flex flex-col font-extralight">
+      <div className="px-4  opacity-50">Information</div>
+      <div className="bg-surface-container-l2 p-4 rounded-md text-sm grid grid-cols-2 gap-2 ">
+        <div className="flex flex-row gap-2 col-span-2 items-center">
+          <div className="opacity-80">Complexity</div>
+          <div className="text-nowrap">{addSuffixToNumber(1647, 2)}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx
index fdcf496..5688208 100644
--- a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx
+++ b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx
@@ -1,4 +1,5 @@
 import { TbCoins } from 'react-icons/tb'
+import addSuffixToNumber from '../../../../../../utils/addSuffixToNumber.util'
 
 export default function Profile() {
   return (
@@ -22,11 +23,11 @@ export default function Profile() {
           </div>
           <div className="flex flex-row gap-2 flex-wrap col-span-2 items-center">
             <div className="opacity-80">Balance</div>
-            <div className="flex flex-row gap-1 items-center text-silver text-nowrap text-[12px]">
-              <TbCoins className="text-lg " /> 24 648 310.53
+            <div className="flex flex-row gap-1 items-center text-silver text-nowrap">
+              <TbCoins className="text-lg " /> {addSuffixToNumber(24648310.53)}
             </div>
-            <div className="flex flex-row gap-1 items-center text-gold text-nowrap text-[12px]">
-              <TbCoins className="text-lg " /> 107 021.07
+            <div className="flex flex-row gap-1 items-center text-gold text-nowrap">
+              <TbCoins className="text-lg " /> {addSuffixToNumber(107021.07)}
             </div>
           </div>
           <div className="flex flex-row gap-2 col-span-2 items-center">
@@ -34,7 +35,9 @@ export default function Profile() {
             <div className="bg-surface-container-h h-4 w-full flex items-center justify-start rounded-sm">
               <div className="bg-primary h-full w-[75%] flex items-center justify-center text-on-primary font-normal rounded-sm"></div>
             </div>
-            <div className="text-nowrap">1 647/10 500</div>
+            <div className="text-nowrap">
+              {(1647).toLocaleString('en-US')}/{(10500).toLocaleString('en-US')}
+            </div>
           </div>
         </div>
       </div>
diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/page.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/page.tsx
index 7e71eb3..f399491 100644
--- a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/page.tsx
+++ b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/page.tsx
@@ -1,11 +1,11 @@
-import Condition from './_components/Condition'
+import Information from './_components/Information'
 import Profile from './_components/Profile'
 
 export default function Page() {
   return (
     <div className="flex flex-col gap-2">
       <Profile />
-      <Condition />
+      <Information />
     </div>
   )
 }
diff --git a/apps/HashRateGame/src/utils/addSuffixToNumber.util.ts b/apps/HashRateGame/src/utils/addSuffixToNumber.util.ts
new file mode 100644
index 0000000..403302f
--- /dev/null
+++ b/apps/HashRateGame/src/utils/addSuffixToNumber.util.ts
@@ -0,0 +1,18 @@
+export default function addSuffixToNumber(
+  number: number,
+  float: number = 3,
+): string {
+  const suffixes = ['', 'K', 'M', 'B', 'T', 'Q', 'S', 'O', 'N', 'D', 'U', 'D']
+  let suffixIndex = 0
+
+  while (number >= 1000 && suffixIndex < suffixes.length - 1) {
+    number /= 1000
+    suffixIndex++
+  }
+
+  if (number % 1 !== 0) {
+    return `${number.toFixed(float)}${suffixes[suffixIndex]}`
+  } else {
+    return `${number.toFixed(0)}${suffixes[suffixIndex]}`
+  }
+}