commit c49301ebefc87946744d69aa2112a719c4bb46d5
parent ef10742b11e51132e4fb6a2da7b8f40141f2e1fb
Author: therealFIGBERT <figbertwelner@gmail.com>
Date: Mon, 25 Nov 2019 00:07:02 -0800
Add mode select screen, fix calculator undefined errors
Diffstat:
10 files changed, 158 insertions(+), 47 deletions(-)
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,19 +1,29 @@
import React from 'react';
+import { ModeSelect } from "./modeSelect/modeSelectHandler";
import { BasicCalc } from "./basicCalc/basicHandler";
export class App extends React.Component {
constructor(props) {
super(props);
this.state = {
- mode: 'basic'
+ mode: 'select'
};
+ this.changeMode = this.changeMode.bind(this);
+ }
+
+ changeMode(object) {
+ const newMode = object.target.value;
+ this.setState({
+ mode: newMode
+ });
}
render() {
- if (this.state.mode === 'basic') {
- return <BasicCalc />;
- } else {
- return <div />;
+ switch (this.state.mode) {
+ case 'basic':
+ return <BasicCalc mode={this.state.mode} onModeChange={this.changeMode} />;
+ default:
+ return <ModeSelect mode={this.state.mode} onButtonPress={this.changeMode} />;
}
}
}
\ No newline at end of file
diff --git a/src/components/basicCalc/basicButton.js b/src/components/basicCalc/basicButton.js
@@ -4,23 +4,32 @@ import PropTypes from 'prop-types';
class BasicButton extends React.Component {
render() {
return (
- <button type='button' onClick={this.props.onButtonPress} className='calc calc__squareButton' value={this.props.value}>
- <span style={{fontSize: '2vw'}}>{this.props.value}</span>
+ <button type='button' onClick={this.props.onButtonPress} className='calc calc__squareButton' value={this.props.displayName}>
+ {this.props.displayName}
</button>
);
}
}
BasicButton.propTypes = {
- value: PropTypes.string.isRequired
+ displayName: PropTypes.string.isRequired
};
export class BasicButtonRow extends React.Component {
render() {
let onButtonPress = this.props.onButtonPress;
+ let onModeChange = this.props.onModeChange;
return (
<div className='calc calc__row'>
{this.props.buttonValues.map(function (value, index, _) {
- return <BasicButton idx={index} value={value} onButtonPress={onButtonPress} />;
+ if (value === '…') {
+ return (
+ <button type='button' onClick={onModeChange} className='calc calc__squareButton' value={'select'}>
+ {value}
+ </button>
+ );
+ } else {
+ return <BasicButton idx={index} displayName={value} onButtonPress={onButtonPress}/>;
+ }
})}
</div>
);
diff --git a/src/components/basicCalc/basicHandler.js b/src/components/basicCalc/basicHandler.js
@@ -1,5 +1,6 @@
import React from 'react';
-import { BasicOut } from "./basicOut";
+import PropTypes from 'prop-types';
+import { CalcOut } from "../calcOut";
import { BasicPad } from "./basicPad";
export class BasicCalc extends React.Component {
@@ -29,9 +30,6 @@ export class BasicCalc extends React.Component {
case '=':
this.equate();
break;
- case '…':
- console.log('Mode switch eventually');
- break;
case undefined:
console.log("FUCK");
break;
@@ -101,9 +99,16 @@ export class BasicCalc extends React.Component {
render() {
return (
<div>
- <BasicOut output={this.state.output} input={this.state.input} />
- <BasicPad onButtonPress={this.onButtonPress}/>
+ <CalcOut
+ mode={this.props.mode}
+ output={this.state.output}
+ input={this.state.input}
+ />
+ <BasicPad onButtonPress={this.onButtonPress} onModeChange={this.props.onModeChange}/>
</div>
);
}
-}
-\ No newline at end of file
+}
+BasicCalc.propTypes = {
+ mode: PropTypes.string.isRequired
+};
+\ No newline at end of file
diff --git a/src/components/basicCalc/basicOut.js b/src/components/basicCalc/basicOut.js
@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export class BasicOut extends React.Component {
- render() {
- return (
- <div className='calc calc__out'>
- <div style={{fontSize: '4vmax', marginTop: '0.5vmax', marginBottom: '2vmax'}}>{this.props.output}</div>
- <div style={{fontSize: '1.5vmax'}}>{this.props.input}</div>
- </div>
- );
- }
-}
-
-BasicOut.propTypes = {
- output: PropTypes.number.isRequired,
- input: PropTypes.string.isRequired
-};
-\ No newline at end of file
diff --git a/src/components/basicCalc/basicPad.js b/src/components/basicCalc/basicPad.js
@@ -9,7 +9,7 @@ export class BasicPad extends React.Component {
<BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['7', '8', '9', '×']} />
<BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['4', '5', '6', '–']} />
<BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['1', '2', '3', '+']} />
- <BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['…', '0', '.', '=']} />
+ <BasicButtonRow onButtonPress={this.props.onButtonPress} onModeChange={this.props.onModeChange} buttonValues={['…', '0', '.', '=']} />
</div>
);
}
diff --git a/src/components/calcOut.js b/src/components/calcOut.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+let basicCSS = {
+ textAlign: 'right',
+ lineHeight: '50%',
+ display: 'flex',
+ flexDirection: 'column',
+ flexWrap: 'wrap',
+ justifyContent: 'space-evenly',
+ alignItems: 'flex-end'
+};
+
+let selectCSS = {
+ width: '20vmax',
+ textAlign: 'center',
+};
+
+export class CalcOut extends React.Component {
+ render() {
+ switch (this.props.mode) {
+ case 'basic':
+ return (
+ <div className='calc calc__out' style={basicCSS}>
+ <div style={{fontSize: '4vmax', marginTop: '0.5vmax', marginBottom: '2vmax'}}>{this.props.output}</div>
+ <div style={{fontSize: '1.5vmax'}}>{this.props.input}</div>
+ </div>
+ );
+ default:
+ return (
+ <div className='calc calc__out' style={selectCSS}>
+ <span style={{fontSize: '2vmax', textAlign: 'left', lineHeight: '100%'}}>
+ Mode Select
+ </span>
+ </div>
+ );
+ }
+ }
+}
+
+CalcOut.propTypes = {
+ mode: PropTypes.string.isRequired,
+ output: PropTypes.number,
+ input: PropTypes.string
+};
+\ No newline at end of file
diff --git a/src/components/modeSelect/modeButton.js b/src/components/modeSelect/modeButton.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export class ModeButton extends React.Component {
+ render() {
+ return (
+ <button
+ type='button'
+ className='calc calc__rectangleButton'
+ value={this.props.value}
+ onClick={this.props.onButtonPress}
+ >
+ {this.props.modeName}
+ </button>
+ );
+ }
+}
+ModeButton.propTypes = {
+ value: PropTypes.string.isRequired,
+ modeName: PropTypes.string.isRequired
+};
+\ No newline at end of file
diff --git a/src/components/modeSelect/modePad.js b/src/components/modeSelect/modePad.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { ModeButton } from "./modeButton";
+
+export class ModePad extends React.Component {
+ render() {
+ return (
+ <div className='calc calc__pad' style={{alignItems: 'center'}}>
+ <ModeButton modeName='Simple Calculator' value='basic' onButtonPress={this.props.onButtonPress} />
+ <ModeButton modeName='Angular/Real Size' value='angSize' onButtonPress={this.props.onButtonPress} />
+ <ModeButton modeName='Consecutive Number' value='consecNum' onButtonPress={this.props.onButtonPress} />
+ <ModeButton modeName='Simultaneous Equations' value='simultaneousEQ' onButtonPress={this.props.onButtonPress} />
+ <ModeButton modeName='Polygon Angles' value='PolyAng' onButtonPress={this.props.onButtonPress} />
+ </div>
+ );
+ }
+}
+\ No newline at end of file
diff --git a/src/components/modeSelect/modeSelectHandler.js b/src/components/modeSelect/modeSelectHandler.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CalcOut } from "../calcOut";
+import { ModePad } from "./modePad";
+
+export class ModeSelect extends React.Component {
+ render() {
+ return (
+ <div>
+ <CalcOut mode={this.props.mode} />
+ <ModePad onButtonPress={this.props.onButtonPress} />
+ </div>
+ );
+ }
+}
+ModeSelect.propTypes = {
+ mode: PropTypes.string.isRequired
+};
+\ No newline at end of file
diff --git a/src/index.css b/src/index.css
@@ -20,18 +20,11 @@ body {
}
.calc__out {
- width: 10vmax;
- text-align: right;
- line-height: 50%;
- padding: 1.5vmax 10vmax 1.5vmax 10vmax;
+ width: 20vmax;
+ padding: 1.5vmax 5vmax 1.5vmax 5vmax;
border: 1vmax solid #1d1d1d;
border-top-left-radius: 1.5vmax;
border-top-right-radius: 1.5vmax;
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- justify-content: space-evenly;
- align-items: flex-end;
}
.calc__pad {
@@ -57,7 +50,16 @@ body {
.calc__squareButton {
width: 5vmax;
height: 5vmax;
- font-size: x-large;
+ font-size: 2vmax;
text-align: center;
border-radius: 25%;
+}
+
+.calc__rectangleButton {
+ width: 30vmax;
+ height: 5vmax;
+ margin-top: 1vmax;
+ font-size: 2vmax;
+ text-align: center;
+ border-radius: 1vmax;
}
\ No newline at end of file
