CipherStreamWeb converted to use Vite

2025-08-13 23:31:29 -04:00
parent 70f9adb930
commit c9bddfa74d
120 changed files with 13931 additions and 3 deletions
--- a/src/components/ciphers/polysubstitution/railfence/RailFenceInputs.tsx
+++ b/src/components/ciphers/polysubstitution/railfence/RailFenceInputs.tsx
@@ -0,0 +1,140 @@
+import CopyOutputButton from "@/components/button/CopyOutputButton";
+import EncodingDecodingButton from "@/components/button/EncodingDecodingButton";
+import InputMessage from "@/components/input/InputMessage";
+import NumberSelector from "@/components/input/NumberSelector";
+import OutputMessage from "@/components/input/OutputMessage";
+import PreservationSliders from "@/components/input/PreservationSliders";
+import { useDecodeRailFence, useEncodeRailFence } from "@/hooks/polysubstitution/RailFenceHooks";
+import { useToaster } from "mattrixwv-components";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+
+export default function RaidFenceInputs(){
+	const [ capitals, setCapitals ] = useState(true);
+	const [ symbols, setSymbols ] = useState(true);
+	const [ whitespace, setWhitespace ] = useState(true);
+	const [ encoding, setEncoding ] = useState(true);
+	const [ rails, setRails ] = useState(2);
+	const [ input, setInput ] = useState("");
+	const [ output, setOutput ] = useState("");
+
+	const { addDanger } = useToaster();
+	const encodeRailFenceMutation = useEncodeRailFence();
+	const decodeRailFenceMutation = useDecodeRailFence();
+
+
+	//Do coding with a delay
+	const performCoding = useDebouncedCallback(() => {
+		if(input === ""){
+			setOutput("");
+			return;
+		}
+		if(encoding){
+			encodeRailFenceMutation.mutate({
+				encoding,
+				preserveSymbols: symbols,
+				preserveWhitespace: whitespace,
+				preserveCapitals: capitals,
+				rails,
+				inputString: input
+			});
+		}
+		else{
+			decodeRailFenceMutation.mutate({
+				encoding,
+				preserveSymbols: symbols,
+				preserveWhitespace: whitespace,
+				preserveCapitals: capitals,
+				rails,
+				inputString: input
+			});
+		}
+	}, 1000);
+
+
+	//Code when input changes
+	useEffect(() => {
+		performCoding();
+	}, [capitals, encoding, rails, input, performCoding, symbols, whitespace]);
+
+	//When the mutation is successful set the new output
+	useEffect(() => {
+		if(decodeRailFenceMutation.isSuccess){
+			setOutput(decodeRailFenceMutation.data.outputString ?? "");
+			decodeRailFenceMutation.reset();
+		}
+		if(encodeRailFenceMutation.isSuccess){
+			setOutput(encodeRailFenceMutation.data.outputString ?? "");
+			encodeRailFenceMutation.reset();
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ decodeRailFenceMutation.isSuccess, encodeRailFenceMutation.isSuccess, decodeRailFenceMutation.data, encodeRailFenceMutation.data ]);
+
+	//When the mutation has an error, display the message
+	useEffect(() => {
+		if(decodeRailFenceMutation.isError){
+			addDanger(decodeRailFenceMutation.error.message);
+			decodeRailFenceMutation.reset();
+		}
+		if(encodeRailFenceMutation.isError){
+			addDanger(encodeRailFenceMutation.error.message);
+			encodeRailFenceMutation.reset();
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ decodeRailFenceMutation.isError, encodeRailFenceMutation.isError ]);
+
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-4"
+		>
+			<div
+				className="flex flex-row items-center justify-center gap-x-8"
+			>
+				<PreservationSliders
+					capitals={capitals}
+					setCapitals={setCapitals}
+					symbols={symbols}
+					setSymbols={setSymbols}
+					whitespace={whitespace}
+					setWhitespace={setWhitespace}
+				/>
+			</div>
+			<div
+				className="flex flex-col items-center justify-center"
+			>
+				<EncodingDecodingButton
+					encoding={encoding}
+					setEncoding={setEncoding}
+				/>
+			</div>
+			<div
+				className="flex flex-col items-center justify-center gap-y-8"
+			>
+				<div
+					className="flex flex-col items-center justify-center gap-y-2"
+				>
+					<NumberSelector
+						label="Rails"
+						value={rails}
+						onChange={setRails}
+						minValue={2}
+						maxValue={100}
+					/>
+				</div>
+				<InputMessage
+					value={input}
+					onChange={setInput}
+				/>
+				<OutputMessage
+					value={output}
+					onChange={setOutput}
+				/>
+				<CopyOutputButton
+					value={output}
+				/>
+			</div>
+		</div>
+	);
+}