Rail Fence Cipher Encoder / Decoder Encrypt and decrypt text using the Rail Fence transposition cipher.

The tool's encryption algorithm works by iterating over each character in the input string and distributing it across a specified number of rails in a zigzag pattern. This is achieved using JavaScript's Array.from method to initialize an array of arrays, where each inner array represents a rail. The direction of the zigzag pattern is determined by a direction variable that toggles between 1 and -1 when reaching the top or bottom rail. Once all characters are distributed across the rails, they are concatenated together using the flat and join methods to produce the encrypted text.

Under the hood, the tool utilizes React's useState hook to manage state changes in the input string, rail count, and mode selection. The useMemo hook is used to memoize the output of the encryption or decryption algorithm based on these state variables, ensuring that the output only updates when necessary. When decrypting a message, the tool first determines the pattern of characters per rail by iterating over a cycle of 2(n-1) steps, where n is the number of rails. This pattern is then used to split and rearrange the input string into its original form.

The tool also employs browser APIs such as copyToClipboard from the @/lib/utils module to enable users to copy the output to their system clipboard for further analysis or transmission. The JavaScript implementation uses TypeScript type annotations to ensure type safety and clarity in the codebase, with functions like railFenceEncrypt and railFenceDecrypt explicitly declaring their input parameters and return types. By using these technologies together, the tool provides a user-friendly interface for experimenting with Rail Fence ciphers while also showcasing its inner workings through interactive visualizations and dynamic updates to the output text area.