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