Add numberbase tool

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kevins-data-toolbox",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "private": true,
   "dependencies": {
     "@loadable/component": "^5.15.0",
@@ -34,6 +34,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts --openssl-legacy-provider build",
+    "buildNoLegacy": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "tscss": "typed-scss-modules src --watch",

public/locales/de/translation.json

@@ -40,6 +40,15 @@
         "base64": {
             "title": "Base64",
             "description": "<wikipedia>Base64-Codierung</wikipedia> wird oft genutzt um beliebige Binärdaten in pure Zeichenfolgen zu schreiben, indem die Daten auf 64 ASCII-Zeichen projeziert werden."
+        },
+        "numberbase": {
+            "title": "Basis-Konverter",
+            "description": "Basis-Konverter konvertiert Zahlen in eine andere Basis (z.B. Binär, Hexadezimal, etc.)",
+            "decimal": "Dezimal",
+            "binary": "Binär",
+            "octal": "Oktal",
+            "hexadecimal": "Hexadezimal",
+            "nanWarning": "Die Eingabe ist keine gültige Zahl!"
         }
     }
   },

public/locales/en/translation.json

@@ -40,6 +40,15 @@
         "base64": {
           "title": "Base64",
           "description": "<wikipedia>Base64-encoding</wikipedia> is commonly used for storing arbitrary binary data in pure strings, by mapping it to 64 ASCII characters."
+        },
+        "numberbase": {
+            "title": "Base Converter",
+            "description": "Convert between decimal, binary, octal and hexadecimal numbers.",
+            "decimal": "Decimal",
+            "binary": "Binary",
+            "octal": "Octal",
+            "hexadecimal": "Hexadecimal",
+            "nanWarning": "The input is not a valid number!"
         }
     }
   },

src/pages/Tools.tsx

@@ -36,7 +36,7 @@ const ToolsPage = () => {
 
                 <div className={styles.flexList}>
                     {toolList.map((tool, i) => {
-                        return (<LinkBox key={"tool"+i} external={tool.external} to={(tool.external ? tool.url : "/tool/"+tool.urlname) || ""} text={tool.name} icon={<tool.icon />} />);
+                        return (<LinkBox key={"tool"+i} external={tool.external} to={(tool.external ? tool.url : "/tool/"+tool.urlname) || ""} text={t(tool.name)} icon={<tool.icon />} />);
                     })}
 
                     {toolList.length === 0 ? <span>{t("tools.noresults")}</span> : null}

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