diff --git a/package.json b/package.json
index 02505b9..a00b0e5 100644
--- a/package.json
+++ b/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",
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 54932b7..733f482 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -40,6 +40,15 @@
"base64": {
"title": "Base64",
"description": "Base64-Codierung 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!"
}
}
},
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index f43bf4e..0861df6 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -40,6 +40,15 @@
"base64": {
"title": "Base64",
"description": "Base64-encoding 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!"
}
}
},
diff --git a/src/pages/Tools.tsx b/src/pages/Tools.tsx
index 800ffe8..977df8b 100644
--- a/src/pages/Tools.tsx
+++ b/src/pages/Tools.tsx
@@ -36,7 +36,7 @@ const ToolsPage = () => {
{toolList.map((tool, i) => {
- return (
} />);
+ return (
} />);
})}
{toolList.length === 0 ?
{t("tools.noresults")} : null}
diff --git a/src/tools/ToolLoader.tsx b/src/tools/ToolLoader.tsx
index 5fc6a8b..d279383 100644
--- a/src/tools/ToolLoader.tsx
+++ b/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
;
+ case "numberbase":
+ return
;
+
default:
return
;
}
diff --git a/src/tools/cyphers_and_cryptography/base64/Base64Tool.module.scss b/src/tools/encodings/base64/Base64Tool.module.scss
similarity index 100%
rename from src/tools/cyphers_and_cryptography/base64/Base64Tool.module.scss
rename to src/tools/encodings/base64/Base64Tool.module.scss
diff --git a/src/tools/cyphers_and_cryptography/base64/Base64Tool.module.scss.d.ts b/src/tools/encodings/base64/Base64Tool.module.scss.d.ts
similarity index 100%
rename from src/tools/cyphers_and_cryptography/base64/Base64Tool.module.scss.d.ts
rename to src/tools/encodings/base64/Base64Tool.module.scss.d.ts
diff --git a/src/tools/cyphers_and_cryptography/base64/Base64Tool.tsx b/src/tools/encodings/base64/Base64Tool.tsx
similarity index 100%
rename from src/tools/cyphers_and_cryptography/base64/Base64Tool.tsx
rename to src/tools/encodings/base64/Base64Tool.tsx
diff --git a/src/tools/encodings/numberbase/NumberBaseTool.module.scss b/src/tools/encodings/numberbase/NumberBaseTool.module.scss
new file mode 100644
index 0000000..8b82604
--- /dev/null
+++ b/src/tools/encodings/numberbase/NumberBaseTool.module.scss
@@ -0,0 +1 @@
+@import "../../../common";
\ No newline at end of file
diff --git a/src/tools/encodings/numberbase/NumberBaseTool.module.scss.d.ts b/src/tools/encodings/numberbase/NumberBaseTool.module.scss.d.ts
new file mode 100644
index 0000000..cb4acd1
--- /dev/null
+++ b/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;
diff --git a/src/tools/encodings/numberbase/NumberBaseTool.tsx b/src/tools/encodings/numberbase/NumberBaseTool.tsx
new file mode 100644
index 0000000..6059fc9
--- /dev/null
+++ b/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 (
+
+
+ {t("tools.encodings.numberbase.title")} | {t("site.title")}
+
+
+
+
{t("tools.encodings.numberbase.title")}
+
+
+
+
} color="red" hideInPlace={!nanState}>{t("tools.encodings.numberbase.nanWarning")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default NumberBaseTool;
\ No newline at end of file
diff --git a/src/tools/tools.ts b/src/tools/tools.ts
index f26be85..d09d565 100644
--- a/src/tools/tools.ts
+++ b/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"
}
]