I am making the plugboard functionality for an enigma machine in React. I currently have a keyboard layout displayed on the screen (a, b, c, d, …) not qwerty. Regardless, my idea was that a user could hold the control key to activate the plugboard functionality, then click on a letter (or key) to connect a plug there, then the next click, while still holding the control key, would connect the other end of the plug. These plug connections would be shown through color coding, changing the background color of the key of the two connected letters. When an already active key was clicked, it and its connected key, would be deactivated. The issues I’ve run into are limiting the amount of connections to only two letters. Here is my code so far…
import { useState, useContext } from "react";
const colors = [
"#FF69B480",
"#66330080",
"#FFC10780",
"#8E24AA80",
"#00BFFF80",
"#3B3F5480",
"#FF980080",
"#0097A780",
"#E91E6380",
"#F7DC6F80",
"#4B008280",
"#32CD3280",
"#7081f080",
];
const Letter = ({ letter, ctrlPressed, setCtrlPressed }) => {
const [activeConnections, setActiveConnections] = useState({});
const [currentColorIndex, setCurrentColorIndex] = useState(0);
const [clickCount, setClickCount] = useState(0);
const handleClick = () => {
if (ctrlPressed) {
if (activeConnections[letter]) {
// Deactivate the connection
const connectedLetter = Object.keys(activeConnections).find(
(key) =>
activeConnections[key] === activeConnections[letter] &&
key !== letter
);
setActiveConnections((prevConnections) => {
const newConnections = { ...prevConnections };
delete newConnections[letter];
delete newConnections[connectedLetter];
return newConnections;
});
} else {
// Activate a new connection
const currentColor =
colors[Math.floor(clickCount / 2) % colors.length];
setActiveConnections((prevConnections) => ({
...prevConnections,
[letter]: currentColor,
}));
setClickCount(clickCount + 1);
}
}
};
return (
<span
className='letter'
style={{
backgroundColor: activeConnections[letter] || "#444",
}}
onClick={handleClick}
>
{letter}
</span>
);
};
export default Letter;
I’ve had ideas that maybe left click for activation and right click for deactivation, or left for one end of the plug and right click for the other end of the plug? Not sure that that quite solves all of my current issues.
FYI: the ctrlPressed state is global and being used as a prop from the parent App component (yes, I know it is not performance best practice, but easy for a personal development project). My array of letters is also being generated and imported from the parent Keyboard component.
