diff --git a/enigma/src/App.css b/enigma/src/App.css deleted file mode 100644 index 697aa11..0000000 --- a/enigma/src/App.css +++ /dev/null @@ -1,13 +0,0 @@ -.machine { - width: 12.5em; -} -.rotorbox { - padding-left: 25%; - display: flex; -} -.rotor { - max-width: 1em; -} -.rotorwheel { - background-color: #101010; -} diff --git a/enigma/src/App.js b/enigma/src/App.js deleted file mode 100644 index 10e7199..0000000 --- a/enigma/src/App.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './App.css'; - -class Rotor extends React.Component { - constructor() { - super() - } - alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' - state = { - pos: 0, - current: this.alphabet[0] - } - tick(me) { - if (this.state.pos === 26) { - // roll next rotor - this.setState({ - pos: 0, - current: this.alphabet[0] - }); - } - else { - this.setState({ - current: this.alphabet[this.state.pos++] - }); - } - } - render() { - return ( - this.tick(me)}> -
{this.state.current}|
- - ); - } -} - -class Rotorbox extends React.Component { - render() { - return ( -
- -
- ); - } -} - -function Lightbox() { - return ( -
-
 Q W E R T Y U I O P
-
  A S D F G H J K L
-
   Z X C V B N M
-
- ); -} - -function Keyboard() { - return ( -
-
 Q W E R T Y U I O P
-
  A S D F G H J K L
-
   Z X C V B N M
-
- ); -} - -class App extends React.Component { - render() { - return ( -
- -
- -
- -
- ); - } -} - -export default App; diff --git a/enigma/src/Machine.css b/enigma/src/Machine.css new file mode 100644 index 0000000..e1c31ea --- /dev/null +++ b/enigma/src/Machine.css @@ -0,0 +1,6 @@ +.machine { + margin: .5em; + width: 11.5em; + outline-style: solid; + outline-color: #DA9475; +} diff --git a/enigma/src/Machine.js b/enigma/src/Machine.js new file mode 100644 index 0000000..fa50aec --- /dev/null +++ b/enigma/src/Machine.js @@ -0,0 +1,41 @@ +import { Component } from 'react'; +import './Machine.css'; +import Rotorbox from './components/Rotorbox.js'; + +function Lightbox() { + return ( +
+
 Q W E R T Z U I O
+
  A S D F G H J K
+
 P Y X C V B N M L
+
+ ); +} + +class Keyboard extends Component{ + render() { + return ( +
+
 Q W E R T Z U I O
+
  A S D F G H J K
+
 P Y X C V B N M L
+
+ ); + } +} + +class Machine extends Component { + render() { + return ( +
+ +
+ +
+ +
+ ); + } +} + +export default Machine; diff --git a/enigma/src/components/Rotor.css b/enigma/src/components/Rotor.css new file mode 100644 index 0000000..9efe0fd --- /dev/null +++ b/enigma/src/components/Rotor.css @@ -0,0 +1,9 @@ +.Rotor { + background-image: linear-gradient(#111, #ddd, #111); + color: black; + outline-style: dashed; + outline-width: .2em; + outline-offset: -.1em; + padding:.2em; + margin: .05em; +} diff --git a/enigma/src/components/Rotor.js b/enigma/src/components/Rotor.js new file mode 100644 index 0000000..f802a7f --- /dev/null +++ b/enigma/src/components/Rotor.js @@ -0,0 +1,39 @@ +import React from 'react'; +import './Rotor.css'; + +class Rotor extends React.Component { + constructor(props) { + super(props) + } + letter(i) { + const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + if (i > 25) { + return alphabet[i - 26] + } + else if (i < 0) { + return alphabet[26 + i] + } + else { + return alphabet[i] + } + } + tick() { + if (this.state.pos === 25) { + this.setState((state) => ({pos: 0})); + } + else { + this.setState((state) => ({pos: state.pos + 1})); + } + } + render() { + return ( + +
{this.letter(this.props.pos + 1)}
+
{this.letter(this.props.pos)}
+
{this.letter(this.props.pos - 1)}
+ + ); + } +} + +export default Rotor diff --git a/enigma/src/components/Rotorbox.css b/enigma/src/components/Rotorbox.css new file mode 100644 index 0000000..e849399 --- /dev/null +++ b/enigma/src/components/Rotorbox.css @@ -0,0 +1,5 @@ +.Rotorbox { + padding-left: 20%; + background: #010101; + display: flex; +} diff --git a/enigma/src/components/Rotorbox.js b/enigma/src/components/Rotorbox.js new file mode 100644 index 0000000..0938dbd --- /dev/null +++ b/enigma/src/components/Rotorbox.js @@ -0,0 +1,86 @@ +import React from 'react'; +import Rotor from './Rotor.js'; +import './Rotorbox.css'; +import clicksound from '../media/mixkit-hard-click-1118.wav'; + +class Rotorbox extends React.Component { + constructor() { + super(); + this.state = { + rotor0: 11, + rotor1: 8, + rotor2: 6, + rotor3: 12, + rotor4: 0 + }; + } + tick() { + const audio = new Audio(clicksound); + audio.loop = false; + audio.playbackRate = 3.0; + audio.play(); + if (this.state.rotor4 > 24) { + this.setState(state => ({ + rotor3: state.rotor3 +1, + rotor4: 0 + })); + } + if (this.state.rotor3 > 24) { + this.setState(state => ({ + rotor2: state.rotor2 +1, + rotor3: 0 + })); + } + if (this.state.rotor2 > 24) { + this.setState(state => ({ + rotor1: state.rotor1 +1, + rotor2: 0 + })); + } + if (this.state.rotor1 > 24) { + this.setState(state => ({ + rotor0: state.rotor0 +1, + rotor1: 0 + })); + } + else { + this.setState(state => ({ + rotor4: state.rotor4 +1 + })); + } + } + componentDidMount() { + this.timerID = setInterval( + () => this.tick(), + 200 + ); + } + componentWillUnmount() { + clearInterval(this.timerID); + } + lulz() { + let balls = { + rotor0: 2, + rotor1: 0, + rotor2: 11, + rotor3: 11, + rotor4: 25 + } + if (this.state !== balls) { + } + + } + render() { + return ( +
+ + + + + +
+ ); + } +} + +export default Rotorbox; diff --git a/enigma/src/index.js b/enigma/src/index.js index 0756291..015d032 100644 --- a/enigma/src/index.js +++ b/enigma/src/index.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import App from './App'; +import Machine from './Machine.js'; const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +root.render(); diff --git a/enigma/src/media/mixkit-hard-click-1118.wav b/enigma/src/media/mixkit-hard-click-1118.wav new file mode 100644 index 0000000..003ec9b Binary files /dev/null and b/enigma/src/media/mixkit-hard-click-1118.wav differ