adam/enigma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

tickticktick

Browse source
This commit is contained in:
Adam 2023-01-16 20:53:53 -05:00
parent 713ecbfd8f
commit 9bb9c6e0ea
10 changed files with 188 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
enigma/src/App.css
View file

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

81
enigma/src/App.js
View file

@ -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;

6
enigma/src/Machine.css Normal file
View file

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

41
enigma/src/Machine.js Normal file
View file

@ -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;

9
enigma/src/components/Rotor.css Normal file
View file

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

39
enigma/src/components/Rotor.js Normal file
View file

@ -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

5
enigma/src/components/Rotorbox.css Normal file
View file

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

86
enigma/src/components/Rotorbox.js Normal file
View file

@ -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;

4
enigma/src/index.js
View file

@ -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 />);

BIN
enigma/src/media/mixkit-hard-click-1118.wav Normal file
View file

Binary file not shown.