tickticktick

enigma/src/App.css

@@ -1,13 +0,0 @@
-.machine {
-    width: 12.5em;
-}
-.rotorbox {
-    padding-left: 25%;
-    display: flex;
-}
-.rotor {
-    max-width: 1em;
-}
-.rotorwheel {
-    background-color: #101010;
-}

enigma/src/App.js

@@ -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 (
-            <span className='rotor' onClick={(me) => this.tick(me)}>
-            <div className='rotorwheel'>{this.state.current}|</div>
-            </span>
-        );
-    }
-}
-
-class Rotorbox extends React.Component {
-    render() {
-        return (
-            <div className='rotorbox'>
-            <Rotor/>
-            </div>
-        );
-    }
-}
-
-function Lightbox() {
-    return (
-        <div>
-        <div>&nbsp;Q W E R T Y U I O P</div>
-        <div>&nbsp;&nbsp;A S D F G H J K L</div>
-        <div>&nbsp;&nbsp; Z X C V B N M</div>
-        </div>
-    );
-}
-
-function Keyboard() {
-    return (
-        <div>
-        <div>&nbsp;Q W E R T Y U I O P</div>
-        <div>&nbsp;&nbsp;A S D F G H J K L</div>
-        <div>&nbsp;&nbsp; Z X C V B N M</div>
-        </div>
-    );
-}
-
-class App extends React.Component {
-    render() {
-        return (
-            <div className='machine'>
-            <Rotorbox />
-            <hr/>
-            <Lightbox />
-            <hr/>
-            <Keyboard />
-            </div>
-        );
-    }
-}
-
-export default App;

enigma/src/Machine.css

@@ -0,0 +1,6 @@
+.machine {
+    margin: .5em;
+    width: 11.5em;
+    outline-style: solid;
+    outline-color: #DA9475;
+}

enigma/src/Machine.js

@@ -0,0 +1,41 @@
+import { Component } from 'react';
+import './Machine.css';
+import Rotorbox from './components/Rotorbox.js';
+
+function Lightbox() {
+    return (
+        <div>
+        <div>&nbsp;Q W E R T Z U I O</div>
+        <div>&nbsp;&nbsp;A S D F G H J K</div>
+        <div>&nbsp;P Y X C V B N M L</div>
+        </div>
+    );
+}
+
+class Keyboard extends Component{
+    render() {
+        return (
+            <div>
+            <div>&nbsp;Q W E R T Z U I O</div>
+            <div>&nbsp;&nbsp;A S D F G H J K</div>
+            <div>&nbsp;P Y X C V B N M L</div>
+            </div>
+        );
+    }
+}
+
+class Machine extends Component {
+    render() {
+        return (
+            <div className='machine'>
+            <Rotorbox/>
+            <hr/>
+            <Lightbox/>
+            <hr/>
+            <Keyboard/>
+            </div>
+        );
+    }
+}
+
+export default Machine;

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;
+}

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 (
+            <span className='Rotor'>
+            <div>{this.letter(this.props.pos + 1)}</div>
+            <div>{this.letter(this.props.pos)}</div>
+            <div>{this.letter(this.props.pos - 1)}</div>
+            </span>
+        );
+    }
+}
+
+export default Rotor

enigma/src/components/Rotorbox.css

@@ -0,0 +1,5 @@
+.Rotorbox {
+    padding-left: 20%;
+    background: #010101;
+    display: flex;
+}

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 (
+            <div className='Rotorbox'>
+            <Rotor pos={this.state.rotor0}/>
+            <Rotor pos={this.state.rotor1}/>
+            <Rotor pos={this.state.rotor2}/>
+            <Rotor pos={this.state.rotor3}/>
+            <Rotor pos={this.state.rotor4}/>
+            </div>
+        );
+    }
+}
+
+export default Rotorbox;

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(<App />);
+root.render(<Machine />);