Add numberbase tool

src/tools/ToolLoader.tsx

@@ -12,7 +12,8 @@ import { AlertOctagon } from "lucide-react";
 
 const HomePage = prerenderedLoadable(() => import('../pages/Home'));
 const RotTool = prerenderedLoadable(() => import('./cyphers_and_cryptography/rot/RotTool'));
-const Base64Tool = prerenderedLoadable(() => import('./cyphers_and_cryptography/base64/Base64Tool'));
+const Base64Tool = prerenderedLoadable(() => import('./encodings/base64/Base64Tool'));
+const NumberBaseTool = prerenderedLoadable(() => import('./encodings/numberbase/NumberBaseTool'));
 
 type ErrorBoundaryProps = {
     resetFunction: () => void
@@ -68,6 +69,9 @@ const ToolLoader = () => {
         case "base64":
             return <ToolErrorBoundary resetFunction={forceReset} key={key}><Base64Tool/></ToolErrorBoundary>;
 
+        case "numberbase":
+            return <ToolErrorBoundary resetFunction={forceReset} key={key}><NumberBaseTool/></ToolErrorBoundary>;
+
         default:
             return <NotFoundPage/>;
     }

src/tools/encodings/numberbase/NumberBaseTool.module.scss

@@ -0,0 +1 @@
+@import "../../../common";

src/tools/encodings/numberbase/NumberBaseTool.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/tools/encodings/numberbase/NumberBaseTool.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
+import * as styles from "./NumberBaseTool.module.scss"
+import { Helmet } from "react-helmet";
+import BoxMessage from "../../../components/BoxMessage";
+import { AlertOctagon } from "lucide-react";
+
+const NumberBaseTool = () => {
+    const { t } = useTranslation();
+
+    let [input, setInput] = useState("10");
+    let [inputType, setInputType] = useState<"dec"|"hex"|"oct"|"bin">("dec");
+    let [nanState, setNanState] = useState(false)
+
+    let [dec, setDec] = useState("");
+    let [bin, setBin] = useState("");
+    let [oct, setOct] = useState("");
+    let [hex, setHex] = useState("");
+
+    useEffect(() => {
+        let num = 0
+    
+
+        switch(inputType) {
+            case "dec":
+                num = parseInt(input.replaceAll(" ", ""), 10)
+                break
+            case "hex":
+                num = parseInt(input.replaceAll(" ", ""), 16)
+                break
+            case "oct":
+                num = parseInt(input.replaceAll(" ", ""), 8)
+                break
+            case "bin":
+                num = parseInt(input.replaceAll(" ", ""), 2)
+                break
+        }
+
+        if(isNaN(num)) {
+            setNanState(true)
+            switch(inputType) {
+                case "dec":
+                    setDec(input)
+                    setHex("")
+                    setOct("")
+                    setBin("")
+                    break
+                case "hex":
+                    setHex(input)
+                    setDec("")
+                    setOct("")
+                    setBin("")
+                    break
+                case "oct":
+                    setOct(input)
+                    setDec("")
+                    setHex("")
+                    setBin("")
+                    break
+                case "bin":
+                    setBin(input)
+                    setDec("")
+                    setHex("")
+                    setOct("")
+                    break
+            }
+
+            return
+        }
+
+        setNanState(false)
+
+        setDec(num.toString(10).replace(/\B(?=(\d{3})+(?!\d))/g, " "))
+        setBin(num.toString(2).replace(/\B(?=(\d{4})+(?!\d))/g, " "))
+        setOct(num.toString(8).replace(/\B(?=(\d{2})+(?!\d))/g, " "))
+        setHex(num.toString(16))
+
+
+    }, [input, inputType])
+    
+    return (
+        <main>
+            <Helmet>
+                <title>{t("tools.encodings.numberbase.title")} | {t("site.title")}</title>
+                <meta name="keywords" content="binary, base, base6, base10, base2, binary, hex, hexadecimal, oct, bin, dec, encodings, encoding, decoding" />
+            </Helmet>
+            <div className={styles.layoutBox}>
+                <h1>{t("tools.encodings.numberbase.title")}</h1>
+
+                <p><Trans i18nKey={"tools.encodings.numberbase.description"} components={{}} /></p>
+
+                <BoxMessage icon={<AlertOctagon/>} color="red" hideInPlace={!nanState}>{t("tools.encodings.numberbase.nanWarning")}</BoxMessage>
+
+                <label htmlFor="base10-input">{t("tools.encodings.numberbase.decimal")}</label>
+                <textarea id="base10-input" placeholder={t("tools.encodings.numberbase.decimal")} onChange={(e) => {setInputType("dec"); setInput(e.currentTarget.value);}} value={dec}></textarea>
+
+                <label htmlFor="base16-input">{t("tools.encodings.numberbase.hexadecimal")}</label>
+                <textarea id="base16-input" placeholder={t("tools.encodings.numberbase.hexadecimal")} onChange={(e) => {setInputType("hex"); setInput(e.currentTarget.value);}} value={hex}></textarea>
+
+                <label htmlFor="base8-input">{t("tools.encodings.numberbase.octal")}</label>
+                <textarea id="base8-input" placeholder={t("tools.encodings.numberbase.octal")} onChange={(e) => {setInputType("oct"); setInput(e.currentTarget.value);}} value={oct}></textarea>
+
+                <label htmlFor="base2-input">{t("tools.encodings.numberbase.binary")}</label>
+                <textarea id="base2-input" placeholder={t("tools.encodings.numberbase.binary")} onChange={(e) => {setInputType("bin"); setInput(e.currentTarget.value);}} value={bin}></textarea>
+
+                
+            </div>
+        </main>
+    )
+}
+
+export default NumberBaseTool;

src/tools/tools.ts

@@ -1,4 +1,4 @@
-import {Smile, PlusSquare, Binary} from "lucide-react"
+import {Smile, PlusSquare, Binary, Hash} from "lucide-react"
 
 const tools = [
         {
@@ -10,7 +10,7 @@ const tools = [
             "hidden": true
         },
         {
-            "name": "ROT-N",
+            "name": "tools.cryptography.rot.title",
             "external": false,
             "urlname": "rot",
             "icon": PlusSquare,
@@ -19,13 +19,22 @@ const tools = [
             "keywords": "rot, rot-n, caesar, rotation, cryptography, encryption, decryption"
         },
         {
-            "name": "Base64",
+            "name": "tools.encodings.base64.title",
             "external": false,
             "urlname": "base64",
             "icon": Binary,
             "category": "encodings",
             "hidden": false,
-            "keywords": "binary, base64, base, 64, encodings, encryption, decryption"
+            "keywords": "binary, base64, base, 64, encodings, encoding, decoding"
+        },
+        {
+            "name": "tools.encodings.numberbase.title",
+            "external": false,
+            "urlname": "numberbase",
+            "icon": Hash,
+            "category": "encodings",
+            "hidden": false,
+            "keywords": "binary, base, base6, base10, base2, binary, hex, hexadecimal, oct, bin, dec, encodings, encoding, decoding"
         }
     ]