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!(2620)!21010!= 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

The End

Enigma and React

By Pepa Vidlák

Enigma and React

  • 668