diff --git a/src/Machine.css b/src/Machine.css
index 675b100..864f889 100644
--- a/src/Machine.css
+++ b/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');
}
diff --git a/src/Machine.js b/src/Machine.js
index 86871df..f59a56f 100644
--- a/src/Machine.js
+++ b/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 (
-
-
+
this.tick()}>
+
diff --git a/src/components/Keyboard.css b/src/components/Keyboard.css
index 788d62b..e67ee9a 100644
--- a/src/components/Keyboard.css
+++ b/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;
}
diff --git a/src/components/Lightbox.css b/src/components/Lightbox.css
index 8de1a26..0cf9ef6 100644
--- a/src/components/Lightbox.css
+++ b/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;
}
diff --git a/src/components/Rotorbox.css b/src/components/Rotorbox.css
index 8f70601..c575094 100644
--- a/src/components/Rotorbox.css
+++ b/src/components/Rotorbox.css
@@ -1,4 +1,5 @@
.Rotorbox {
- padding-left: 20%;
+ padding-left: 10%;
display: flex;
+ opacity: 0.9;
}
diff --git a/src/components/Rotorbox.js b/src/components/Rotorbox.js
index 66bddb5..ae33112 100644
--- a/src/components/Rotorbox.js
+++ b/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 (
- this.tick()}>
-
-
-
-
-
+
+
+
+
+
+
);
}
diff --git a/src/media/noise.svg b/src/media/noise.svg
new file mode 100644
index 0000000..ca6e981
--- /dev/null
+++ b/src/media/noise.svg
@@ -0,0 +1,15 @@
+