The Enigma Machine
And React DnD (not Dungeons and Dragons)
+
Typewriter on steroids
Number of possible combinations
- We choose 3 out of 5 rotors: 5 x 4 x 3 = 60
- Each rotor has 26 different positions: 26 x 26 x 26 = 17 576
-
In plugboard you connect 13 pairs of 26 letters, you don't care about order, order of pairs and each pair is unique, so calculation is pretty simple:
- 26!(26−20)!⋅210⋅10!= 108,531,557,954,820,000
- Which gives us total of 158,962,555,217,826,360,000
Plugboard
A
F
Z
M
R
B
P
R
J
G
Reflector
Converting Enigma to JS
A B C D E F G . . .
Real Rotor:
A B C D E F G . . .
Is the same as
Having one totally random alphabet
EKMFLGDQVZNTOWYHXUSPAIBRCJ
You need to keep track of current rotation (position)
Rotate rotor after each key press
rotor.letters.shift()
Change letter as it passes through the rotors
return output[input.indexOf(letter)]
Next rotor
Current rotor
Current letter
reflector.letters.split('').reverse().join('')
Reflect letter back at the reflector
The Actual Enigma
Feel like using real enigma with buttons and stuff
Challenge: Allow user to select 3 rotors out of five in any order
Solution: Use React DnD
http://react-dnd.github.io/react-dnd/
Goal?
React DnD
- Set of higher order functions
- Dragging transfers data between components
- Drag backend is a plugin
- Custom drag preview and drag overlay
- Conditional drop targets
Main principle
DragSource and DropTarget
wrapped with
DragDropContext
DragSource(type, spec, collect)(MyComponent)
string
object
object
react component
DropTarget(types, spec, collect)(MyComponent)
string/array
object
object
react component