more purdy

src/Machine.css

@@ -2,6 +2,8 @@
     margin: auto;
     width: 350px;
     outline-style: solid;
-    outline-color: #DA9475;
-    background-color: #111;
+    outline-color: #B87253;
+    background:
+    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
+    url('media/noise.svg');
 }

src/Machine.js

@@ -3,12 +3,56 @@ import './Machine.css';
 import Rotorbox from './components/Rotorbox.js';
 import Lightbox from './components/Lightbox.js';
 import Keyboard from './components/Keyboard.js';
+import clicksound from './media/mixkit-hard-click-1118.wav';
 
 class Machine extends Component {
+    constructor() {
+        super();
+        this.state =  {
+            rotor0: 11,
+            rotor1: 8,
+            rotor2: 6,
+            rotor3: 11,
+            rotor4: 23
+        };
+    }
+    tick() {
+        const audio = new Audio(clicksound);
+        audio.loop = false;
+        audio.playbackRate = 3.0;
+        audio.play();
+        this.setState(state => ({
+                rotor4: state.rotor4 +1
+        }));
+        if (this.state.rotor4 === 25) {
+            this.setState(state => ({
+                rotor3: state.rotor3 +1,
+                rotor4: 0
+            }));
+        }
+        if (this.state.rotor3 === 25) {
+            this.setState(state => ({
+                rotor2: state.rotor2 +1,
+                rotor3: 0
+            }));
+        }
+        if (this.state.rotor2 === 25) {
+            this.setState(state => ({
+                rotor1: state.rotor1 +1,
+                rotor2: 0
+            }));
+        }
+        if (this.state.rotor1 === 25) {
+            this.setState(state => ({
+                rotor0: state.rotor0 +1,
+                rotor1: 0
+            }));
+        }
+    }
     render() {
         return (
-            <div className='Machine'>
-            <Rotorbox/>
+            <div className='Machine' onClick={() => this.tick()}>
+            <Rotorbox state={this.state}/>
             <hr/>
             <Lightbox/>
             <hr/>

src/components/Keyboard.css

@@ -6,6 +6,7 @@
 }
 .Keyboard {
     margin: auto;
+    opacity: 0.9;
 }
 .Key {
     text-align: center;
@@ -16,5 +17,6 @@
     background-color: var(--keyback);
     color: var(--keytext);
     outline-style: solid;
-    outline-color: #555;
+    outline-width: 1px;
+    outline-color: #DDD;
 }

src/components/Lightbox.css

@@ -6,6 +6,7 @@
 }
 .Lightbox {
     margin: auto;
+    opacity: 0.9;
 }
 .row {
     display: flex;
@@ -20,4 +21,7 @@
     text-align: center;
     background-color: var(--bulbdim);
     color: var(--textdim);
+    border: solid;
+    border-width: 1px;
+    border-color: #000;
 }

src/components/Rotorbox.css

@@ -1,4 +1,5 @@
 .Rotorbox {
-    padding-left: 20%;
+    padding-left: 10%;
     display: flex;
+    opacity: 0.9;
 }

src/components/Rotorbox.js

@@ -1,60 +1,16 @@
 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: 11,
-            rotor4: 23
-        };
-    }
-    tick() {
-        const audio = new Audio(clicksound);
-        audio.loop = false;
-        audio.playbackRate = 3.0;
-        audio.play();
-        this.setState(state => ({
-            rotor4: state.rotor4 +1
-        }));
-        if (this.state.rotor4 === 25) {
-            this.setState(state => ({
-                rotor3: state.rotor3 +1,
-                rotor4: 0
-            }));
-        }
-        if (this.state.rotor3 === 25) {
-            this.setState(state => ({
-                rotor2: state.rotor2 +1,
-                rotor3: 0
-            }));
-        }
-        if (this.state.rotor2 === 25) {
-            this.setState(state => ({
-                rotor1: state.rotor1 +1,
-                rotor2: 0
-            }));
-        }
-        if (this.state.rotor1 === 25) {
-            this.setState(state => ({
-                rotor0: state.rotor0 +1,
-                rotor1: 0
-            }));
-        }
-    }
     render() {
         return (
-            <div className='Rotorbox' onClick={() => this.tick()}>
-            <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 className='Rotorbox'>
+            <Rotor pos={this.props.state.rotor0}/>
+            <Rotor pos={this.props.state.rotor1}/>
+            <Rotor pos={this.props.state.rotor2}/>
+            <Rotor pos={this.props.state.rotor3}/>
+            <Rotor pos={this.props.state.rotor4}/>
             </div>
         );
     }

src/media/noise.svg

@@ -0,0 +1,15 @@
+<svg
+    xmlns='http://www.w3.org/2000/svg'
+    xmlns:xlink='http://www.w3.org/1999/xlink'
+    width='300' height='300'>
+
+        <filter id='n' x='0' y='0'>
+            <feTurbulence
+                type='fractalNoise'
+                baseFrequency='0.75'
+                stitchTiles='stitch'/>
+        </filter>
+
+        <rect width='300' height='300' fill='#000'/>
+        <rect width='300' height='300' filter='url(#n)' opacity='0.80'/>
+</svg>